EVOgeek
/
Vmeda.Online
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

MOBILE-2302 courses: Adapt styles

main
Pau Ferrer Ocaña 2017-12-29 18:05:52 +01:00 committed by Dani Palou
parent b4f04e3478
commit 64460157c1
43 changed files with 423 additions and 291 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/app/app.ios.scss
View File

@ -8,9 +8,25 @@
color: color($colors, primary, base);
}
.col[align-self-stretch] .card-ios {
height: calc(100% - #{($card-ios-margin-end + $card-ios-margin-start)});
}
// Top tabs
// -------------------------
.ios .core-top-tabbar {
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
> a {
font-size: 1.6rem;
}
}
// Highlights inside the input element.
@if ($mm-text-input-ios-show-highlight) {
@if ($core-text-input-ios-show-highlight) {
.card-ios, .list-ios {
// In order to get a 2px border we need to add an inset
// box-shadow 1px (this is to avoid the div resizing)

6
src/app/app.md.scss
View File

@ -8,8 +8,12 @@
color: color($colors, primary, base);
}
.col[align-self-stretch] .card-md {
height: calc(100% - #{($card-md-margin-end + $card-md-margin-start)});
}
// Highlights inside the input element.
@if ($mm-text-input-md-show-highlight) {
@if ($core-text-input-md-show-highlight) {
.card-md, .list-md {
// In order to get a 2px border we need to add an inset
// box-shadow 1px (this is to avoid the div resizing)

69
src/app/app.scss
View File

@ -23,10 +23,16 @@
.text-right { text-align: right; }
.text-center { text-align: center; }
.text-justify { text-align: justify; }
.clearfix {
&:after {
content: "";
display: table;
clear: both;
}
}
@media only screen and (min-width: 430px) {
.mm-center-view .scroll-content {
.core-center-view .scroll-content {
display: flex!important;
align-content: center !important;
align-items: center !important;
@ -37,6 +43,18 @@
}
}
@media only screen and (max-width: 768px) {
.hidden-phone {
display: none !important;
}
}
@media only screen and (min-width: 769px) {
.hidden-tablet {
display: none !important;
}
}
// Define an alternative way to set a heading in an item without using a heading tag.
// This is done for accessibility reasons when a heading is semantically incorrect.
@ -45,7 +63,7 @@
margin: 0;
}
.mm-oauth-icon, .item.mm-oauth-icon, .list .item.mm-oauth-icon {
.core-oauth-icon, .item.core-oauth-icon, .list .item.core-oauth-icon {
min-height: 32px;
img, .label {
max-height: 32px;
@ -60,7 +78,7 @@
}
}
.mm-bold, .mm-bold .label {
.core-bold, .core-bold .label {
font-weight: bold;
}
@ -128,23 +146,23 @@ core-format-text[maxHeight], *[core-format-text][maxHeight] {
}
// This is to allow clicks in radio/checkbox content.
&.mm-text-formatted {
&.core-text-formatted {
cursor: pointer;
.mm-show-more {
.core-show-more {
display: none;
}
&:not(.mm-shortened) {
&:not(.core-shortened) {
max-height: none !important;
}
&.mm-shortened {
&.core-shortened {
color: $gray-darker;
overflow: hidden;
min-height: 50px;
.mm-show-more {
.core-show-more {
color: color($colors, dark);
text-align: right;
font-size: 14px;
@ -166,7 +184,7 @@ core-format-text[maxHeight], *[core-format-text][maxHeight] {
*/
}
&.mm-expand-in-fullview .mm-show-more:after {
&.core-expand-in-fullview .core-show-more:after {
// content: $ionicon-var-chevron-right; @todo
}
@ -225,3 +243,34 @@ core-format-text, *[core-format-text] {
max-height: $item-media-height;
}
}
// Ionic fix. Button can occupy all page if not.
ion-select {
position: relative
}
// Top tabs
// -------------------------
.core-top-tabbar {
@include position(null, null, 0, 0);
z-index: $z-index-toolbar;
display: flex;
width: 100%;
background: $core-top-tabs-background;
> a {
@extend .tab-button;
background: $core-top-tabs-background;
color: $core-top-tabs-color !important;
border-bottom: 1px solid $core-top-tabs-border;
font-size: 1.6rem;
&[aria-selected=true] {
color: $core-top-tabs-color-active !important;
border-bottom: 2px solid $core-top-tabs-color-active;
}
}
}

4
src/app/app.wp.scss
View File

@ -7,3 +7,7 @@
.button-wp-light {
color: color($colors, primary, base);
}
.col[align-self-stretch] .card-wp {
height: calc(100% - #{($card-wp-margin-end + $card-wp-margin-start)});
}

8
src/components/empty-box/empty-box.html
View File

@ -1,8 +1,8 @@
<div class="mm-empty-box" [class.mm-empty-box-inline]="!image && !icon">
<div class="mm-empty-box-content">
<div class="core-empty-box" [class.core-empty-box-inline]="!image && !icon">
<div class="core-empty-box-content" padding>
<img *ngIf="image && !icon" [src]="image" role="presentation">
<ion-icon *ngIf="icon" name="icon"></ion-icon>
<p *ngIf="message">{{ message }}</p>
<ion-icon *ngIf="icon" [name]="icon"></ion-icon>
<p *ngIf="message" [class.padding-top]="image || icon">{{ message }}</p>
<ng-content></ng-content>
</div>
</div>

54
src/components/empty-box/empty-box.scss
View File

@ -1,3 +1,57 @@
core-empty-box {
.core-empty-box {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: table;
height: 100%;
width: 100%;
z-index: -1;
margin: 0;
padding: 0;
clear: both;
.core-empty-box-content {
color: $black;
margin: 0;
display: table-cell;
text-align: center;
vertical-align: middle;
}
&.core-empty-box-inline {
position: relative;
top: initial;
left: initial;
right: initial;
z-index: initial;
}
.icon {
font-size: 120px;
}
img {
height: 125px;
width: 145px;
}
p {
font-size: 120%;
}
}
@media only screen and (max-height: 420px) {
.core-empty-box {
position: relative;
.icon {
font-size: 100px;
}
img {
height: 104px;
width: 121px;
}
}
}
}

28
src/components/file/file.scss
View File

@ -1,28 +1,2 @@
core-loading {
.mm-loading-container {
width: 100%;
text-align: center;
padding-top: 10px;
clear: both;
}
.mm-loading-content {
padding-bottom: 1px; /* This makes height be real */
}
&.mm-loading-noheight .mm-loading-content {
height: auto;
}
}
.scroll-content > .padding > core-loading > .mm-loading-container,
ion-content[padding] > .scroll-content > core-loading > .mm-loading-container,
.mm-loading-center .mm-loading-container {
display: table;
.mm-loading-spinner {
display: table-cell;
text-align: center;
vertical-align: middle;
}
core-file {
}

4
src/components/iframe/iframe.html
View File

@ -1,4 +1,4 @@
<div [class.mm-loading-container]="loading">
<iframe #iframe [hidden]="loading" class="mm-iframe" [ngStyle]="{'width': iframeWidth, 'height': iframeHeight}" [src]="safeUrl"></iframe>
<div [class.core-loading-container]="loading">
<iframe #iframe [hidden]="loading" class="core-iframe" [ngStyle]="{'width': iframeWidth, 'height': iframeHeight}" [src]="safeUrl"></iframe>
<ion-spinner *ngIf="loading"></ion-spinner>
</div>

9
src/components/loading/loading.html
View File

@ -1,8 +1,9 @@
<div class="mm-loading-container mm-animate-show-hide" *ngIf="!hideUntil">
<span class="mm-loading-spinner">
<!-- @TODO: Add show hide animation -->
<div class="core-loading-container" *ngIf="!hideUntil">
<span class="core-loading-spinner">
<ion-spinner></ion-spinner>
<p class="mm-loading-message" *ngIf="message">{{message}}</p>
<p class="core-loading-message" *ngIf="message">{{message}}</p>
</span>
</div>
<ng-content class="mm-loading-content mm-animate-show-hide" *ngIf="hideUntil">
<ng-content class="core-loading-content" *ngIf="hideUntil">
</ng-content>

25
src/components/loading/loading.scss
View File

@ -1,26 +1,37 @@
core-loading {
.mm-loading-container {
.core-loading-container {
width: 100%;
text-align: center;
padding-top: 10px;
clear: both;
}
.mm-loading-content {
.core-loading-content {
padding-bottom: 1px; /* This makes height be real */
}
&.mm-loading-noheight .mm-loading-content {
&.core-loading-noheight .core-loading-content {
height: auto;
}
}
.scroll-content > .padding > core-loading > .mm-loading-container,
ion-content[padding] > .scroll-content > core-loading > .mm-loading-container,
.mm-loading-center .mm-loading-container {
.scroll-content > .padding > core-loading > .core-loading-container,
ion-content[padding] > .scroll-content > core-loading > .core-loading-container,
.core-loading-center .core-loading-container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: table;
height: 100%;
width: 100%;
z-index: 1;
margin: 0;
padding: 0;
clear: both;
.mm-loading-spinner {
.core-loading-spinner {
display: table-cell;
text-align: center;
vertical-align: middle;

2
src/components/progress-bar/progress-bar.html
View File

@ -4,5 +4,5 @@
<span [style.width]="width"></span>
</div>
</progress>
<span class="mm-progress-text">{{ 'core.percentagenumber' | translate: {$a: text} }}</span>
<span class="core-progress-text">{{ 'core.percentagenumber' | translate: {$a: text} }}</span>
</div>

20
src/components/progress-bar/progress-bar.scss
View File

@ -1,25 +1,25 @@
$mm-progress-bar-height: 5px !default;
$core-progress-bar-height: 5px !default;
core-progress-bar {
padding-right: 55px;
position: relative;
display: block;
// @extend .clearfix;
@extend .clearfix;
.mm-progress-text {
.core-progress-text {
margin-left: 10px;
line-height: 35px;
line-height: normal;
font-size: 1.4rem;
color: $gray-darker;
right: 0;
top: 0;
color: #626262;
top: -6px;
position: absolute;
}
progress {
-webkit-appearance: none;
appearance: none;
height: $mm-progress-bar-height;
height: $core-progress-bar-height;
margin: 15px 0;
padding: 0;
display: block;
@ -34,18 +34,18 @@ core-progress-bar {
.progress-bar-fallback span,
&[value]::-webkit-progress-value {
background-color: $mm-color-light;
background-color: $core-color-light;
border-radius: 2px;
}
.progress-bar-fallback {
width: 100%;
height: $mm-progress-bar-height;
height: $core-progress-bar-height;
display: block;
position: relative;
span {
height: $mm-progress-bar-height;
height: $core-progress-bar-height;
display: block;
}
}

2
src/components/search-box/search-box.html
View File

@ -2,7 +2,7 @@
<form #f="ngForm" (ngSubmit)="submitForm(f.value.search)">
<ion-item>
<ion-input type="text" name="search" ngModel [placeholder]="placeholder" [autocorrect]="autocorrect" [spellcheck]="spellcheck" [core-auto-focus]="autoFocus"></ion-input>
<button item-right ion-button clear icon-only type="submit" class="button-small" [attr.aria-label]="searchLabel" [disabled]="!f.value.search || (f.value.search.length < lengthCheck)">
<button item-end ion-button clear icon-only type="submit" class="button-small" [attr.aria-label]="searchLabel" [disabled]="!f.value.search || (f.value.search.length < lengthCheck)">
<ion-icon name="search"></ion-icon>
</button>
</ion-item>

3
src/components/search-box/search-box.scss
View File

@ -3,4 +3,7 @@ core-search-box {
margin: 0;
padding: ($content-padding / 2) $content-padding;
}
.item.item-input.item-block .item-inner ion-input {
border-bottom: 0;
}
}

5
src/components/show-password/show-password.scss
View File

@ -16,6 +16,11 @@ core-show-password {
margin-top: 0;
margin-bottom: 0;
}
.core-ioninput-password {
padding-top: 0;
padding-bottom: 0;
}
}
.md {

11
src/core/courses/components/course-list-item/course-list-item.html
View File

@ -1,15 +1,12 @@
<a ion-item text-wrap (click)="openCourse(course)" [class.item-disabled]="course.visible == 0" [title]="course.fullname">
<a ion-item text-wrap (click)="openCourse(course)" [attr.disabled]="course.visible == 0 ? true : null" [attr.detail-none]="course.visible == 0 ? true : null" [title]="course.fullname">
<ion-icon name="ionic" item-start></ion-icon>
<h2><core-format-text [text]="course.fullname"></core-format-text></h2>
<div item-end>
<span *ngIf="!course.isEnrolled">
<span ion-button icon-only clear *ngFor="let instance of course.enrollment" [attr.aria-label]=" instance.name | translate">
<ion-icon *ngIf="instance.icon" [name]="instance.icon" class="icon-accessory"></ion-icon>
<img *ngIf="instance.img && !instance.icon" [src]="instance.img" class="mm-course-enrollment-img">
<span ion-button icon-only clear color="gray" *ngFor="let instance of course.enrollment" [attr.aria-label]=" instance.name | translate">
<ion-icon *ngIf="instance.icon" [name]="instance.icon"></ion-icon>
<img *ngIf="instance.img && !instance.icon" [src]="instance.img" class="core-course-enrollment-img">
</span>
</span>
<span ion-button icon-only clear>
<ion-icon name="arrow-forward" md="ios-arrow-forward" class="icon-accessory"></ion-icon>
</span>
</div>
</a>

2
src/core/courses/components/course-list-item/course-list-item.scss
View File

@ -1,5 +1,5 @@
core-courses-course-list-item {
.mm-course-enrollment-img {
.core-course-enrollment-img {
max-width: 16px;
max-height: 16px;
}

21
src/core/courses/components/course-progress/course-progress.html
View File

@ -1,19 +1,22 @@
<ion-card>
<a ion-item text-wrap class="item-course" (click)="openCourse(course)" [title]="course.fullname">
<h2><core-format-text [text]="course.fullname"></core-format-text></h2>
<core-progress-bar *ngIf="course.progress != null && course.progress >= 0" [progress]="course.progress"></core-progress-bar>
<!-- @todo: Download button. -->
<!-- <i *ngIf="actionsLoaded" class="icon ion-android-more-vertical mm-animate-show-hide" ng-click="showCourseActions($event)"></i>
<ion-spinner *ngIf="!actionsLoaded" class="mm-animate-show-hide"></ion-spinner> -->
<a ion-item text-wrap detail-none (click)="openCourse(course)" [title]="course.fullname">
<h2 float-start><core-format-text [text]="course.fullname"></core-format-text></h2>
<!-- Download course. -->
<!--<button [hidden]="!downloadButton.isDownload" ion-button icon-only clear color="dark" float-end>
<ion-icon name="cloud-download"></ion-icon>
</button>-->
<!-- Download course spinner. -->
<!-- <ion-spinner *ngIf="prefetchCourseIcon == 'spinner'" class="mm-course-download-spinner"></ion-spinner> -->
<!-- <ion-spinner *ngIf="prefetchCourseIcon == 'spinner'" class="core-course-download-spinner"></ion-spinner> -->
</a>
<ion-item text-wrap *ngIf="showSummary && course.summary">
<ion-item text-wrap *ngIf="course.summary && course.summary.length">
<p>
<summary>
<core-format-text [text]="course.summary" maxHeight="60"></core-format-text>
<core-format-text [text]="course.summary" maxHeight="20"></core-format-text>
</summary>
</p>
</ion-item>
<ion-item *ngIf="course.progress != null && course.progress >= 0">
<core-progress-bar [progress]="course.progress"></core-progress-bar>
</ion-item>
<ng-content></ng-content>
</ion-card>

12
src/core/courses/components/course-progress/course-progress.scss
View File

@ -1,2 +1,12 @@
core-courses-course-progress {
core-courses-course-progress.core-courseoverview {
@media (max-width: 576px) {
ion-card.card {
margin: 0;
border-radius: 0;
box-shadow: none;
border-bottom: 1px solid $list-border-color;
width: 100%;
height: 100% !important;
}
}
}

12
src/core/courses/components/course-progress/course-progress.ts
View File

@ -15,14 +15,13 @@
import { Component, Input, OnInit } from '@angular/core';
import { NavController } from 'ionic-angular';
import { TranslateService } from '@ngx-translate/core';
import { CoreUtilsProvider } from '../../../../providers/utils/utils';
/**
* This component is meant to display a course for a list of courses with progress.
*
* Example usage:
*
* <core-courses-course-progress *ngFor="let course of filteredCourses" [course]="course" showSummary="true">
* <core-courses-course-progress [course]="course">
* </core-courses-course-progress>
*/
@Component({
@ -31,22 +30,20 @@ import { CoreUtilsProvider } from '../../../../providers/utils/utils';
})
export class CoreCoursesCourseProgressComponent implements OnInit {
@Input() course: any; // The course to render.
@Input() showSummary?: boolean|string; // Whether to show the summary.
actionsLoaded = true;
prefetchCourseIcon: string;
isDownloading: boolean;
protected obsStatus;
protected downloadText;
protected downloadingText;
protected downloadButton = {
isDownload: true,
className: 'mm-download-course',
className: 'core-download-course',
priority: 1000
};
protected buttons;
constructor(private navCtrl: NavController, private translate: TranslateService, private utils: CoreUtilsProvider) {
constructor(private navCtrl: NavController, private translate: TranslateService) {
this.downloadText = this.translate.instant('core.course.downloadcourse');
this.downloadingText = this.translate.instant('core.downloading');
}
@ -56,7 +53,6 @@ export class CoreCoursesCourseProgressComponent implements OnInit {
*/
ngOnInit() {
// @todo: Handle course prefetch.
this.showSummary = this.utils.isTrueOrOne(this.showSummary);
}
/**

71
src/core/courses/components/overview-events/overview-events.html
View File

@ -1,62 +1,45 @@
<ng-template #eventTemplate let-event="event">
<a ion-item core-link captureLink="true" class="mm-course-module-handler item-media" [href]="event.url" [title]="event.name" [class.item-badge-right-phone]="event.action && event.action.showitemcount">
<a ion-item core-link text-wrap detail-none captureLink="true" class="core-course-module-handler item-media" [href]="event.url" [title]="event.name" [class.item-badge-right-phone]="event.action && event.action.showitemcount">
<img [src]="event.iconUrl" core-external-content alt="" role="presentation" *ngIf="event.iconUrl">
<button ion-button clear class="item-note hidden-phone text-right" (click)="action($event, event.action.url)" [title]="event.action.name" [disabled]="!event.action.actionable" *ngIf="event.action">
{{event.action.name}}
<ion-badge color="dark" class="badge-inline text-center" item-end *ngIf="event.action.showitemcount">{{event.action.itemcount}}</ion-badge>
</button>
<ion-badge color="dark" class="hidden-tablet" item-end *ngIf="event.action.showitemcount">{{event.action.itemcount}}</ion-badge>
<p class="item-heading"><core-format-text [text]="event.name"></core-format-text></p>
<p>{{event.timesort * 1000 | coreFormatDate:"dfmediumdate" }} <core-format-text *ngIf="showCourse" [text]="event.course.fullnamedisplay"></core-format-text></p>
<button ion-button clear item-end class="hidden-phone" (click)="action($event, event.action.url)" [title]="event.action.name" [disabled]="!event.action.actionable" *ngIf="event.action">
{{event.action.name}}
<ion-badge item-end margin-left *ngIf="event.action.showitemcount">{{event.action.itemcount}}</ion-badge>
</button>
<ion-badge class="hidden-tablet" item-end *ngIf="event.action.showitemcount">{{event.action.itemcount}}</ion-badge>
</a>
</ng-template>
<ng-container *ngIf="recentlyOverdue.length > 0">
<h5 class="assertive mm-timelinetitle">{{ 'core.courses.recentlyoverdue' | translate }}</h5>
<ul ion-list class="block">
<li *ngFor="let event of recentlyOverdue">
<ion-item-group *ngIf="recentlyOverdue.length > 0">
<ion-item-divider color="danger">{{ 'core.courses.recentlyoverdue' | translate }}</ion-item-divider>
<ng-container *ngFor="let event of recentlyOverdue">
<ng-container *ngTemplateOutlet="eventTemplate; context: {event: event}"></ng-container>
</li>
</ul>
</ng-container>
</ng-container>
</ion-item-group>
<ng-container *ngIf="today.length > 0">
<h5 class="mm-timelinetitle">{{ 'core.today' | translate }}</h5>
<ul ion-list class="block">
<li *ngFor="let event of today">
<ion-item-group *ngIf="next7Days.length > 0">
<ion-item-divider color="light">{{ 'core.courses.next7days' | translate }}</ion-item-divider>
<ng-container *ngFor="let event of next7Days">
<ng-container *ngTemplateOutlet="eventTemplate; context: {event: event}"></ng-container>
</li>
</ul>
</ng-container>
</ng-container>
</ion-item-group>
<ng-container *ngIf="next7Days.length > 0">
<h5 class="mm-timelinetitle">{{ 'core.courses.next7days' | translate }}</h5>
<ul ion-list class="block">
<li *ngFor="let event of next7Days">
<ion-item-group *ngIf="next30Days.length > 0">
<ion-item-divider color="light">{{ 'core.courses.next30days' | translate }}</ion-item-divider>
<ng-container *ngFor="let event of next30Days">
<ng-container *ngTemplateOutlet="eventTemplate; context: {event: event}"></ng-container>
</li>
</ul>
</ng-container>
</ng-container>
</ion-item-group>
<ng-container *ngIf="next30Days.length > 0">
<h5 class="mm-timelinetitle">{{ 'core.courses.next30days' | translate }}</h5>
<ul ion-list class="block">
<li *ngFor="let event of next30Days">
<ion-item-group *ngIf="future.length > 0">
<ion-item-divider color="light">{{ 'core.courses.future' | translate }}</ion-item-divider>
<ng-container *ngFor="let event of future">
<ng-container *ngTemplateOutlet="eventTemplate; context: {event: event}"></ng-container>
</li>
</ul>
</ng-container>
</ng-container>
</ion-item-group>
<ng-container *ngIf="future.length > 0">
<h5 class="mm-timelinetitle">{{ 'core.courses.future' | translate }}</h5>
<ul ion-list class="block">
<li *ngFor="let event of future">
<ng-container *ngTemplateOutlet="eventTemplate; context: {event: event}"></ng-container>
</li>
</ul>
</ng-container>
<div padding class="text-center" *ngIf="canLoadMore && !empty">
<div padding text-center *ngIf="canLoadMore && !empty">
<!-- Button and spinner to show more attempts. -->
<button *ngIf="!loadingMore" ion-button block (click)="loadMoreEvents()">{{ 'core.loadmore' | translate }}</button>
<ion-spinner *ngIf="loadingMore"></ion-spinner>

22
src/core/courses/components/overview-events/overview-events.scss
View File

@ -1,2 +1,24 @@
core-courses-course-progress {
.core-course-module-handler.item-md.item-block .item-inner {
border-bottom: 1px solid $list-md-border-color;
}
.core-course-module-handler.item-ios.item-block .item-inner {
border-bottom: $hairlines-width solid $list-ios-border-color;
}
.core-course-module-handler.item-wp.item-block .item-inner {
border-bottom: 1px solid $list-wp-border-color;
}
.core-course-module-handler.item:last-child .item-inner {
border-bottom: 0;
}
.core-course-module-handler.item .item-heading:first-child {
margin-top: 0;
}
}

14
src/core/courses/pages/course-preview/course-preview.html
View File

@ -10,7 +10,7 @@
<core-loading [hideUntil]="dataLoaded">
<ion-list *ngIf="course">
<a ion-item text-wrap (click)="openCourse()" [title]="course.fullname">
<a ion-item text-wrap (click)="openCourse()" [title]="course.fullname" [attr.detail-none]="!handlersShouldBeShown">
<ion-icon name="ionic" item-start></ion-icon>
<h2><core-format-text [text]="course.fullname"></core-format-text></h2>
<p *ngIf="course.categoryname">{{course.categoryname}}</p>
@ -29,13 +29,13 @@
<div *ngIf="!isEnrolled">
<ion-item text-wrap *ngFor="let instance of selfEnrolInstances">
<p class="item-heading">{{ instance.name }}</p>
<button ion-button block (click)="selfEnrolClicked(instance.id)">{{ 'core.courses.enrolme' | translate }}</button>
<button ion-button block margin-top (click)="selfEnrolClicked(instance.id)">{{ 'core.courses.enrolme' | translate }}</button>
</ion-item>
</div>
<ion-item text-wrap *ngIf="!isEnrolled && paypalEnabled">
<p class="item-heading">{{ 'core.courses.paypalaccepted' | translate }}</p>
<p>{{ 'core.paymentinstant' | translate }}</p>
<button ion-button block (click)="paypalEnrol()">{{ 'core.courses.sendpaymentbutton' | translate }}</button>
<button ion-button block margin-top (click)="paypalEnrol()">{{ 'core.courses.sendpaymentbutton' | translate }}</button>
</ion-item>
<ion-item *ngIf="!isEnrolled && !selfEnrolInstances.length && !paypalEnabled">
<p>{{ 'core.courses.notenrollable' | translate }}</p>
@ -49,16 +49,14 @@
<a ion-item (click)="openCourse()" [title]="course.fullname" *ngIf="handlersShouldBeShown">
<ion-icon name="briefcase" item-start></ion-icon>
<h2>{{ 'core.course.contents' | translate }}</h2>
<ion-icon name="arrow-forward" md="ios-arrow-forward" class="icon-accessory" item-end></ion-icon>
</a>
<div class="mm-course-handlers" *ngIf="handlersShouldBeShown && course._handlers && course._handlers.length">
<a ion-item text-wrap *ngFor="let handler of course._handlers" class="mm-courses-handler {{handler.class}}">
<div class="core-course-handlers" *ngIf="handlersShouldBeShown && course._handlers && course._handlers.length">
<a ion-item text-wrap *ngFor="let handler of course._handlers" class="core-courses-handler {{handler.class}}">
<ion-icon [name]="icon" item-start></ion-icon>
<h2><core-format-text [text]="title | translate"></core-format-text></h2>
<ion-icon name="arrow-forward" md="ios-arrow-forward" class="icon-accessory" item-end></ion-icon>
</a>
</div>
<ion-item class="mm-loading-course-handlers text-center" *ngIf="handlersShouldBeShown && !handlersLoaded">
<ion-item class="core-loading-course-handlers" text-center *ngIf="handlersShouldBeShown && !handlersLoaded">
<ion-spinner></ion-spinner>
</ion-item>
</ion-list>

74
src/core/courses/pages/my-overview/my-overview.html
View File

@ -3,12 +3,12 @@
<ion-title>{{ 'core.courses.courseoverview' | translate }}</ion-title>
<ion-buttons end>
<button *ngIf="tabShown == 'courses' && (courses[courses.selected] || courses[courses.selected].length > 5)" ion-button icon-only [attr.aria-label]="'core.courses.filtermycourses' | translate" (click)="switchFilter()">
<ion-icon name="funnel"></ion-icon>
</button>
<button *ngIf="searchEnabled" ion-button icon-only (click)="openSearch()" [attr.aria-label]="'core.courses.searchcourses' | translate">
<ion-icon name="search"></ion-icon>
</button>
<button *ngIf="tabShown == 'courses' && courses[courses.selected] && courses[courses.selected].length > 5" ion-button icon-only (click)="switchFilter()" [attr.aria-label]="'core.courses.filtermycourses' | translate">
<ion-icon name="funnel"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
@ -18,61 +18,63 @@
</ion-refresher>
<!-- @todo: Use a component to render the tabs. -->
<div class="tabs tabs-striped tabs-free mm-tabs-color">
<a ion-button class="tab-item" [class.active]="tabShown == 'timeline'" (click)="switchTab('timeline')">{{ 'core.courses.timeline' | translate }}</a>
<a ion-button class="tab-item" [class.active]="tabShown == 'courses'" (click)="switchTab('courses')">{{ 'core.courses.courses' | translate }}</a>
<div class="core-top-tabbar">
<a [attr.aria-selected]="tabShown == 'timeline'" (click)="switchTab('timeline')">{{ 'core.courses.timeline' | translate }}</a>
<a [attr.aria-selected]="tabShown == 'courses'" (click)="switchTab('courses')">{{ 'core.courses.courses' | translate }}</a>
</div>
<div padding>
<ion-item class="mm-full-width-centered mm-timelinesort" [hidden]="tabShown != 'timeline' || !(timeline.loaded || timelineCourses.loaded)">
<div [hidden]="tabShown != 'timeline'">
<div no-padding [hidden]="!(timeline.loaded || timelineCourses.loaded)">
<ion-select [(ngModel)]="timeline.sort" (ngModelChange)="switchSort()">
<ion-option value="sortbydates">{{ 'core.courses.sortbydates' | translate }}</ion-option>
<ion-option value="sortbycourses">{{ 'core.courses.sortbycourses' | translate }}</ion-option>
</ion-select>
</ion-item>
<core-loading [hideUntil]="timeline.loaded" [hidden]="tabShown != 'timeline' || timeline.sort != 'sortbydates'" class="mm-loading-center">
</div>
<core-loading [hideUntil]="timeline.loaded" [hidden]="tabShown != 'timeline' || timeline.sort != 'sortbydates'" class="core-loading-center">
<core-courses-overview-events [events]="timeline.events" showCourse="true" [canLoadMore]="timeline.canLoadMore" (loadMore)="loadMoreTimeline()"></core-courses-overview-events>
</core-loading>
<core-loading [hideUntil]="timelineCourses.loaded" [hidden]="tabShown != 'timeline' || timeline.sort != 'sortbycourses'" class="block mm-loading-center">
<div class="block mm-course-grid">
<core-courses-course-progress *ngFor="let course of timelineCourses.courses" [course]="course" showSummary="true">
<core-loading [hideUntil]="timelineCourses.loaded" [hidden]="tabShown != 'timeline' || timeline.sort != 'sortbycourses'" class="core-loading-center">
<ion-grid no-padding>
<ion-row no-padding>
<ion-col *ngFor="let course of timelineCourses.courses" no-padding col-12 col-md-6>
<core-courses-course-progress [course]="course">
<core-courses-overview-events [events]="course.events" [canLoadMore]="course.canLoadMore" (loadMore)="loadMoreCourse(course)"></core-courses-overview-events>
</core-courses-course-progress>
</div>
</ion-col>
</ion-row>
</ion-grid>
<core-empty-box *ngIf="timelineCourses.courses.length == 0" image="assets/img/icons/courses.svg" [message]="'core.courses.nocoursesoverview' | translate"></core-empty-box>
</core-loading>
<core-loading [hideUntil]="courses.loaded" [hidden]="tabShown != 'courses'" class="mm-loading-center">
<ion-row class="row-no-padding padding-bottom" [hidden]="showFilter">
<ion-col col-11>
<ion-item class="mm-full-width-centered">
<ion-select [(ngModel)]="courses.selected">
</div>
<core-loading [hideUntil]="courses.loaded" [hidden]="tabShown != 'courses'" class="core-loading-center">
<div no-padding class="clearfix" [hidden]="showFilter">
<ion-select [title]="'core.show' | translate" [(ngModel)]="courses.selected" float-start>
<ion-option value="inprogress">{{ 'core.courses.inprogress' | translate }}</ion-option>
<ion-option value="future">{{ 'core.courses.future' | translate }}</ion-option>
<ion-option value="past">{{ 'core.courses.past' | translate }}</ion-option>
</ion-select>
<button [hidden]="!courses[courses.selected] || !courses[courses.selected].length" ion-button icon-only clear color="dark" float-end>
<ion-icon name="cloud-download"></ion-icon>
</button>
</div>
<div no-padding padding-bottom [hidden]="!showFilter">
<ion-item>
<ion-label><ion-icon name="funnel" class="placeholder-icon"></ion-icon></ion-label>
<ion-input type="text" name="filter" clearInput [(ngModel)]="courses.filter" (ngModelChange)="filterChanged($event)" [placeholder]="'core.courses.filtermycourses' | translate"></ion-input>
</ion-item>
</ion-col>
<ion-col col-1 class="text-right" [hidden]="!courses[courses.selected] || !courses[courses.selected].length">
<!-- @todo: Download button. -->
</div>
<div>
<ion-grid no-padding>
<ion-row no-padding>
<ion-col *ngFor="let course of filteredCourses" no-padding col-12 col-sm-6 col-md-6 col-lg-4 col-xl-4 align-self-stretch>
<core-courses-course-progress [course]="course" class="core-courseoverview"></core-courses-course-progress>
</ion-col>
</ion-row>
<div [hidden]="!showFilter" class="mm-filter-box">
<button ion-button icon-only clear color="dark" (click)="switchFilter()">
<ion-icon name="close-circle"></ion-icon>
</button>
<ion-item>
<ion-input type="text" name="filter" [(ngModel)]="courses.filter" (ngModelChange)="filterChanged($event)" [placeholder]="'core.courses.filtermycourses' | translate"></ion-input>
<ion-icon name="funnel" class="placeholder-icon"></ion-icon>
</ion-item>
</div>
<div [class.mm-course-grid]="showGrid">
<core-courses-course-progress *ngFor="let course of filteredCourses" [course]="course" [showSummary]="showGrid"></core-courses-course-progress>
</div>
</ion-grid>
<core-empty-box *ngIf="courses[courses.selected].length == 0 && courses.selected == 'inprogress'" image="assets/img/icons/courses.svg" [message]="'core.courses.nocoursesinprogress' | translate"></core-empty-box>
<core-empty-box *ngIf="courses[courses.selected].length == 0 && courses.selected == 'future'" image="assets/img/icons/courses.svg" [message]="'core.courses.nocoursesfuture' | translate"></core-empty-box>
<core-empty-box *ngIf="courses[courses.selected].length == 0 && courses.selected == 'past'" image="assets/img/icons/courses.svg" [message]="'core.courses.nocoursespast' | translate"></core-empty-box>
</core-loading>
</div>
</core-loading>
</ion-content>

8
src/core/courses/pages/my-overview/my-overview.ts
View File

@ -48,7 +48,6 @@ export class CoreCoursesMyOverviewPage {
inprogress: [],
future: []
};
showGrid = true;
showFilter = false;
searchEnabled: boolean;
filteredCourses: any[];
@ -204,13 +203,6 @@ export class CoreCoursesMyOverviewPage {
}
}
/**
* Switch grid/list view.
*/
switchGrid() {
this.showGrid = !this.showGrid;
}
/**
* Refresh the data.
*

4
src/core/courses/pages/self-enrol-password/self-enrol-password.html
View File

@ -9,11 +9,11 @@
</ion-buttons>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-content>
<form ion-list #f="ngForm" (ngSubmit)="submitPassword(f.value.password)">
<ion-item>
<core-show-password item-content [name]="'password'">
<ion-input text-wrap class="mm-ioninput-password" name="password" type="password" placeholder="{{ 'core.courses.password' | translate }}" ngModel [core-auto-focus]></ion-input>
<ion-input text-wrap class="core-ioninput-password" name="password" type="password" placeholder="{{ 'core.courses.password' | translate }}" ngModel [core-auto-focus]></ion-input>
</core-show-password>
</ion-item>
<ion-item>

4
src/core/courses/providers/handlers.ts
View File

@ -57,14 +57,14 @@ export class CoreCoursesMainMenuHandler implements CoreMainMenuHandler {
icon: 'ionic',
title: 'core.courses.courseoverview',
page: 'CoreCoursesMyOverviewPage',
class: 'mm-courseoverview-handler'
class: 'core-courseoverview-handler'
};
} else {
return {
icon: 'ionic',
title: 'core.courses.mycourses',
page: 'CoreCoursesMyCoursesPage',
class: 'mm-mycourses-handler'
class: 'core-mycourses-handler'
};
}
}

2
src/core/emulator/providers/clipboard.ts
View File

@ -34,7 +34,7 @@ export class ClipboardMock extends Clipboard {
} else {
// In browser the text must be selected in order to copy it. Create a hidden textarea to put the text in it.
this.copyTextarea = document.createElement('textarea');
this.copyTextarea.className = 'mm-browser-copy-area';
this.copyTextarea.className = 'core-browser-copy-area';
this.copyTextarea.setAttribute('aria-hidden', 'true');
document.body.appendChild(this.copyTextarea);
}

12
src/core/login/pages/credentials/credentials.html
View File

@ -3,7 +3,7 @@
<ion-title>{{ 'core.login.login' | translate }}</ion-title>
</ion-navbar>
</ion-header>
<ion-content class="mm-center-view">
<ion-content class="core-center-view">
<core-loading [hideUntil]="pageLoaded">
<div class="box">
<div text-wrap text-center>
@ -12,10 +12,10 @@
<img *ngIf="!logoUrl" src="assets/img/login_logo.png" class="login-logo" role="presentation">
<!-- If no sitename show big siteurl. -->
<p *ngIf="!siteName" padding class="item-heading mm-siteurl">{{siteUrl}}</p>
<p *ngIf="!siteName" padding class="item-heading core-siteurl">{{siteUrl}}</p>
<!-- If sitename, show big sitename and small siteurl. -->
<p *ngIf="siteName" padding class="item-heading mm-sitename">{{siteName}}</p>
<p *ngIf="siteName" class="mm-siteurl">{{siteUrl}}</p>
<p *ngIf="siteName" padding class="item-heading core-sitename">{{siteName}}</p>
<p *ngIf="siteName" class="core-siteurl">{{siteUrl}}</p>
</div>
<form ion-list [formGroup]="credForm" (ngSubmit)="login()">
<ion-item *ngIf="siteChecked && !isBrowserSSO">
@ -23,7 +23,7 @@
</ion-item>
<ion-item *ngIf="siteChecked && !isBrowserSSO">
<core-show-password item-content [name]="'password'">
<ion-input class="mm-ioninput-password" name="password" type="password" placeholder="{{ 'core.login.password' | translate }}" formControlName="password" mm-show-password></ion-input>
<ion-input class="core-ioninput-password" name="password" type="password" placeholder="{{ 'core.login.password' | translate }}" formControlName="password" core-show-password></ion-input>
</core-show-password>
</ion-item>
<button ion-button block [disabled]="siteChecked && !isBrowserSSO && !credForm.valid">{{ 'core.login.loginbutton' | translate }}</button>
@ -36,7 +36,7 @@
<ion-list *ngIf="identityProviders && identityProviders.length" padding-top>
<ion-list-header text-wrap>{{ 'core.login.potentialidps' | translate }}</ion-list-header>
<button ion-item *ngFor="let provider of identityProviders" text-wrap class="mm-oauth-icon" (click)="oauthClicked(provider)" title="{{provider.name}}">
<button ion-item *ngFor="let provider of identityProviders" text-wrap class="core-oauth-icon" (click)="oauthClicked(provider)" title="{{provider.name}}">
<img [src]="provider.iconurl" alt="{{provider.name}}" item-start>
{{provider.name}}
</button>

9
src/core/login/pages/credentials/credentials.scss
View File

@ -4,11 +4,6 @@ page-core-login-credentials {
background: radial-gradient(white, $gray-light);
}
.mm-ioninput-password {
padding-top: 0;
padding-bottom: 0;
}
img {
max-width: 100%;
}
@ -25,8 +20,8 @@ page-core-login-credentials {
border: 1px solid $gray;
}
.mm-sitename, .mm-siteurl {
@if $mm-fixed-url { display: none; }
.core-sitename, .core-siteurl {
@if $core-fixed-url { display: none; }
}
.item-input {

2
src/core/login/pages/email-signup/email-signup.html
View File

@ -78,7 +78,7 @@
<!-- Other categories. @todo: Implement once user profile fields are implemented. -->
<!-- <div *ngFor="let category in categories">
<ion-item-divider text-wrap color="light">{{ category.name }}</div>
<mm-user-profile-field *ngFor="let field in category.fields" field="field" edit="true" signup="true" register-auth="email" model="data" scroll-handle="mmLoginEmailSignupScroll"></mm-user-profile-field>
<core-user-profile-field *ngFor="let field in category.fields" field="field" edit="true" signup="true" register-auth="email" model="data" scroll-handle="mmLoginEmailSignupScroll"></core-user-profile-field>
</div> -->
<!-- ReCAPTCHA -->

4
src/core/login/pages/init/init.html
View File

@ -1,6 +1,6 @@
<ion-content>
<div class="mm-bglogo">
<div class="mm-logo">
<div class="core-bglogo">
<div class="core-logo">
<img src="assets/img/splash_logo.png"/>
<ion-spinner></ion-spinner>
</div>

16
src/core/login/pages/init/init.scss
View File

@ -1,8 +1,8 @@
page-core-login-init {
.mm-bglogo {
background-color: $mm-color-init-screen; /* Change this to add a bg image or change color */
background: -webkit-radial-gradient($mm-color-init-screen-alt, $mm-color-init-screen);
background: radial-gradient($mm-color-init-screen-alt, $mm-color-init-screen);
.core-bglogo {
background-color: $core-color-init-screen; /* Change this to add a bg image or change color */
background: -webkit-radial-gradient($core-color-init-screen-alt, $core-color-init-screen);
background: radial-gradient($core-color-init-screen-alt, $core-color-init-screen);
background-repeat: no-repeat;
background-position: center center;
position: absolute;
@ -14,22 +14,22 @@ page-core-login-init {
width: 100%;
display: table;
.mm-logo {
.core-logo {
display: table-cell;
text-align: center;
vertical-align: middle;
}
img {
width: $mm-init-screen-logo-width;
max-width: $mm-init-screen-logo-max-width;
width: $core-init-screen-logo-width;
max-width: $core-init-screen-logo-max-width;
display: block;
margin: 0 auto;
margin-bottom: 30px;
}
.spinner circle {
stroke: $mm-init-screen-spinner-color;
stroke: $core-init-screen-spinner-color;
}
}
}

14
src/core/login/pages/reconnect/reconnect.html
View File

@ -3,7 +3,7 @@
<ion-title>{{ 'core.login.reconnect' | translate }}</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding class="mm-center-view">
<ion-content padding class="core-center-view">
<div class="box">
<div *ngIf="site" text-wrap text-center [ngClass]="{'item-avatar-center': site.avatar}">
<ion-avatar *ngIf="site.avatar">
@ -16,24 +16,24 @@
<img *ngIf="!site.avatar && !logoUrl" src="assets/img/login_logo.png" class="login-logo" role="presentation">
<!-- If no sitename show big siteurl. -->
<p *ngIf="!siteName" class="item-heading mm-siteurl">{{siteUrl}}</p>
<p *ngIf="!siteName" class="item-heading core-siteurl">{{siteUrl}}</p>
<!-- If sitename, show big sitename and small siteurl. -->
<p *ngIf="siteName" class="item-heading mm-sitename">{{siteName}}</p>
<p *ngIf="siteName" class="mm-siteurl">{{siteUrl}}</p>
<p *ngIf="siteName" class="item-heading core-sitename">{{siteName}}</p>
<p *ngIf="siteName" class="core-siteurl">{{siteUrl}}</p>
<p *ngIf="!isLoggedOut">
<ion-icon padding name="alert"></ion-icon> {{ 'core.login.reconnectdescription' | translate }}
</p>
</div>
<ion-list>
<ion-item padding text-wrap class="mm-username">
<ion-item padding text-wrap class="core-username">
<p class="item-heading">{{ 'core.login.username' | translate }}</p>
<p>{{username}}</p>
</ion-item>
<form [formGroup]="credForm" (ngSubmit)="login()">
<ion-item>
<core-show-password item-content [name]="'password'">
<ion-input class="mm-ioninput-password" name="password" type="password" placeholder="{{ 'core.login.password' | translate }}" formControlName="password" mm-show-password core-auto-focus></ion-input>
<ion-input class="core-ioninput-password" name="password" type="password" placeholder="{{ 'core.login.password' | translate }}" formControlName="password" core-show-password core-auto-focus></ion-input>
</core-show-password>
</ion-item>
<ion-grid>
@ -52,7 +52,7 @@
<!-- Identity providers. -->
<ion-list *ngIf="identityProviders && identityProviders.length" padding-top>
<ion-list-header text-wrap>{{ 'core.login.potentialidps' | translate }}</ion-list-header>
<button ion-item *ngFor="let provider of identityProviders" text-wrap class="mm-oauth-icon" (click)="oauthClicked(provider)" title="{{provider.name}}">
<button ion-item *ngFor="let provider of identityProviders" text-wrap class="core-oauth-icon" (click)="oauthClicked(provider)" title="{{provider.name}}">
<img [src]="provider.iconurl" alt="{{provider.name}}" item-start>
{{provider.name}}
</button>

11
src/core/login/pages/reconnect/reconnect.scss
View File

@ -4,11 +4,6 @@ page-core-login-reconnect {
background: radial-gradient(white, $gray-light);
}
.mm-ioninput-password {
padding-top: 0;
padding-bottom: 0;
}
img {
max-width: 100%;
}
@ -25,11 +20,11 @@ page-core-login-reconnect {
border: 1px solid $gray;
}
.mm-sitename, .mm-siteurl {
@if $mm-fixed-url { display: none; }
.core-sitename, .core-siteurl {
@if $core-fixed-url { display: none; }
}
.list .mm-username {
.list .core-username {
&.item-md {
@include padding-horizontal($item-md-padding-left, $content-padding);
}

2
src/core/login/pages/site/site.html
View File

@ -9,7 +9,7 @@
</ion-buttons>
</ion-navbar>
</ion-header>
<ion-content class="mm-center-view">
<ion-content class="core-center-view">
<div class="box">
<div text-center padding>
<img src="assets/img/login_logo.png" class="avatar-full login-logo" role="presentation">

6
src/core/mainmenu/pages/more/more.html
View File

@ -12,17 +12,17 @@
<p>{{siteInfo.fullname}}</p>
</a>
<ion-item-divider color="light"></ion-item-divider>
<ion-item class="text-center" *ngIf="(!handlers || !handlers.length) && !handlersLoaded">
<ion-item text-center *ngIf="(!handlers || !handlers.length) && !handlersLoaded">
<ion-spinner></ion-spinner>
</ion-item>
<ion-item *ngFor="let handler of handlers" class="mm-sidemenu-handler {{handler.class}}" (click)="openHandler(handler)" title="{{ handler.title | translate }}">
<ion-item *ngFor="let handler of handlers" class="core-moremenu-handler {{handler.class}}" (click)="openHandler(handler)" title="{{ handler.title | translate }}">
<ion-icon [name]="handler.icon" item-start></ion-icon>
<p>{{ handler.title | translate}}</p>
<!-- @todo: Badge. -->
<!-- <span ng-show="!loading && badge" class="badge badge-positive">{{badge}}</span>
<ion-spinner ng-if="loading" class="icon"></ion-spinner> -->
</ion-item>
<div *ngFor="let item of customItems" class="mm-sidemenu-customitem">
<div *ngFor="let item of customItems" class="core-moremenu-customitem">
<a ion-item *ngIf="item.type != 'embedded'" [href]="item.url" core-link [capture]="item.type == 'app'" [inApp]="item.type == 'inappbrowser'" title="{{item.label}}">
<ion-icon [name]="item.icon" item-start></ion-icon>
<p>{{item.label}}</p>

2
src/directives/auto-focus.ts
View File

@ -20,7 +20,7 @@ import { CoreUtilsProvider } from '../providers/utils/utils';
/**
* Directive to auto focus an element when a view is loaded.
*
* You can apply it conditionallity assigning it a boolean value: <ion-input [mm-auto-focus]="{{showKeyboard}}">
* You can apply it conditionallity assigning it a boolean value: <ion-input [core-auto-focus]="{{showKeyboard}}">
*/
@Directive({
selector: '[core-auto-focus]'

26
src/directives/format-text.ts
View File

@ -99,7 +99,7 @@ export class CoreFormatTextDirective implements OnChanges {
* @param {HTMLElement} element Element to add the class to.
*/
protected addMediaAdaptClass(element: HTMLElement) : void {
element.classList.add('mm-media-adapt-width');
element.classList.add('core-media-adapt-width');
}
/**
@ -115,7 +115,7 @@ export class CoreFormatTextDirective implements OnChanges {
// Wrap the image in a new div with position relative.
container = document.createElement('span');
container.classList.add('mm-adapted-img-container');
container.classList.add('core-adapted-img-container');
container.style.cssFloat = img.style.cssFloat; // Copy the float to correctly position the search icon.
if (img.classList.contains('atto_image_button_right')) {
container.classList.add('atto_image_button_right');
@ -129,7 +129,7 @@ export class CoreFormatTextDirective implements OnChanges {
label = this.textUtils.escapeHTML(this.translate.instant('core.openfullimage'));
// @todo: Implement image viewer. Maybe we can add the listener here directly?
container.innerHTML += '<a href="#" class="mm-image-viewer-icon" mm-image-viewer img="' + imgSrc +
container.innerHTML += '<a href="#" class="core-image-viewer-icon" core-image-viewer img="' + imgSrc +
'" aria-label="' + label + '"><ion-icon name="search"></ion-icon></a>';
}
@ -175,13 +175,13 @@ export class CoreFormatTextDirective implements OnChanges {
if (!height || height > this.maxHeight) {
let expandInFullview = this.utils.isTrueOrOne(this.fullOnClick) || false;
this.element.innerHTML += '<div class="mm-show-more">' + this.translate.instant('core.showmore') + '</div>';
this.element.innerHTML += '<div class="core-show-more">' + this.translate.instant('core.showmore') + '</div>';
if (expandInFullview) {
this.element.classList.add('mm-expand-in-fullview');
this.element.classList.add('core-expand-in-fullview');
}
this.element.classList.add('mm-text-formatted');
this.element.classList.add('mm-shortened');
this.element.classList.add('core-text-formatted');
this.element.classList.add('core-shortened');
this.element.style.maxHeight = this.maxHeight + 'px';
this.element.addEventListener('click', (e) => {
@ -194,7 +194,7 @@ export class CoreFormatTextDirective implements OnChanges {
!target.getAttribute('href'))) {
if (!expandInFullview) {
// Change class.
this.element.classList.toggle('mm-shortened');
this.element.classList.toggle('core-shortened');
return;
}
}
@ -209,7 +209,7 @@ export class CoreFormatTextDirective implements OnChanges {
this.domUtils.moveChildren(div, this.element);
}
this.element.classList.add('mm-enabled-media-adapt');
this.element.classList.add('core-enabled-media-adapt');
this.finishRender();
});
@ -252,7 +252,7 @@ export class CoreFormatTextDirective implements OnChanges {
buttons = Array.from(div.querySelectorAll('.button'));
// Walk through the content to find the links and add our directive to it.
// Important: We need to look for links first because in 'img' we add new links without mm-link.
// Important: We need to look for links first because in 'img' we add new links without core-link.
anchors.forEach((anchor) => {
// Angular 2 doesn't let adding directives dynamically. Create the CoreLinkDirective manually.
let linkDir = new CoreLinkDirective(anchor, this.domUtils, this.utils, this.sitesProvider, this.urlUtils);
@ -301,7 +301,7 @@ export class CoreFormatTextDirective implements OnChanges {
buttons.forEach((button: HTMLElement) => {
// Check if it has a link inside.
if (button.querySelector('a')) {
button.classList.add('mm-button-with-inner-link');
button.classList.add('core-button-with-inner-link');
}
});
@ -348,11 +348,11 @@ export class CoreFormatTextDirective implements OnChanges {
let height;
// Disable media adapt to correctly calculate the height.
element.classList.remove('mm-enabled-media-adapt');
element.classList.remove('core-enabled-media-adapt');
height = this.domUtils.getElementHeight(element);
element.classList.add('mm-enabled-media-adapt');
element.classList.add('core-enabled-media-adapt');
return height || 0;
}

4
src/directives/keep-keyboard.ts
View File

@ -29,7 +29,7 @@ import { CoreUtilsProvider } from '../providers/utils/utils';
*
* Example usage:
*
* <textarea [mm-keep-keyboard]="'#mma-messages-send-message-button'"></textarea>
* <textarea [core-keep-keyboard]="'#mma-messages-send-message-button'"></textarea>
* <button id="mma-messages-send-message-button">Send</button>
*
* Alternatively, this directive can be applied to the button. The value of the directive needs to be a selector to identify
@ -38,7 +38,7 @@ import { CoreUtilsProvider } from '../providers/utils/utils';
* Example usage:
*
* <textarea id="send-message-input"></textarea>
* <button [mm-keep-keyboard]="'#send-message-input'" [inButton]="true">Send</button>
* <button [core-keep-keyboard]="'#send-message-input'" [inButton]="true">Send</button>
*/
@Directive({
selector: '[core-keep-keyboard]'

2
src/providers/sites.ts
View File

@ -507,7 +507,7 @@ export class CoreSitesProvider {
*/
protected validateSiteInfo(info: any) : any {
if (!info.firstname || !info.lastname) {
const moodleLink = `<a mm-link href="${info.siteurl}">${info.siteurl}</a>`;
const moodleLink = `<a core-link href="${info.siteurl}">${info.siteurl}</a>`;
return {error: 'core.requireduserdatamissing', params: {'$a': moodleLink}};
}
return true;

15
src/providers/utils/dom.ts
View File

@ -36,14 +36,15 @@ export class CoreDomUtilsProvider {
private platform: Platform, private configProvider: CoreConfigProvider, private urlUtils: CoreUrlUtilsProvider) {}
/**
* Wraps a message with mm-format-text if the message contains HTML tags.
* Wraps a message with core-format-text if the message contains HTML tags.
* @todo Finish the adaptation
*
* @param {string} message Message to wrap.
* @return {string} Result message.
*/
private addFormatTextIfNeeded(message: string) : string {
if (this.textUtils.hasHTMLTags(message)) {
return '<mm-format-text watch="true">' + message + '</mm-format-text>';
return '<core-format-text watch="true">' + message + '</core-format-text>';
}
return message;
}
@ -382,8 +383,8 @@ export class CoreDomUtilsProvider {
private getErrorTitle(message: string) : string {
if (message == this.translate.instant('core.networkerrormsg') ||
message == this.translate.instant('core.fileuploader.errormustbeonlinetoupload')) {
return '<span class="mm-icon-with-badge"><i class="icon ion-wifi"></i>\
<i class="icon ion-alert-circled mm-icon-badge"></i></span>';
return '<span class="core-icon-with-badge"><i class="icon ion-wifi"></i>\
<i class="icon ion-alert-circled core-icon-badge"></i></span>';
}
return this.textUtils.decodeHTML(this.translate.instant('core.error'));
}
@ -496,7 +497,7 @@ export class CoreDomUtilsProvider {
*
* @param {HTMLElement} element DOM element.
* @param {any} map Mapping of the classes to replace. Keys must be the value to replace, values must be
* the new class name. Example: {'correct': 'mm-question-answer-correct'}.
* the new class name. Example: {'correct': 'core-question-answer-correct'}.
*/
replaceClassesInElement(element: HTMLElement, map: any) : void {
for (let key in map) {
@ -582,7 +583,7 @@ export class CoreDomUtilsProvider {
}
/**
* Search for an input with error (mm-input-error directive) and scrolls to it if found.
* Search for an input with error (core-input-error directive) and scrolls to it if found.
*
* @param {Content|HTMLElement} scrollEl The element that must be scrolled.
* @param {HTMLElement} container Element to search in.
@ -658,7 +659,7 @@ export class CoreDomUtilsProvider {
options.message = this.addFormatTextIfNeeded(message); // Add format-text to handle links.
options.title = title;
if (!title) {
options.cssClass = 'mm-nohead';
options.cssClass = 'core-nohead';
}
options.buttons = [
{

45
src/theme/variables.scss
View File

@ -46,9 +46,9 @@ $yellow: #fbad1a; // Accent (never text).
$yellow-light: mix($yellow, white, 20%);
$yellow-dark: mix($yellow, black, 40%);
$mm-color: $orange;
$mm-color-light: lighten($mm-color, 10%);
$mm-color-dark: darken($mm-color, 10%);
$core-color: $orange;
$core-color-light: lighten($core-color, 10%);
$core-color-dark: darken($core-color, 10%);
// Shared Variables
@ -72,10 +72,11 @@ $content-padding: 10px;
// The "primary" color is the only required color in the map.
$colors: (
primary: $mm-color,
primary: $core-color,
secondary: $turquoise,
danger: $red,
light: $gray-lighter,
gray: $gray-dark,
dark: $black,
warning: $yellow
);
@ -89,14 +90,16 @@ $list-background-color: $white;
$tabs-background: $gray-darker;
$tabs-border-color: #b2b2b2 !default;
$tabs-tab-color-inactive: #8c8c8c !default;
$tabs-tab-color-active: $mm-color;
$tabs-tab-color-active: $core-color;
$tabs-tab-color-inactive: $white;
$text-input-highlight-color-valid: $green;
$text-input-highlight-color-invalid: $red;
$button-md-box-shadow: 0 2px 2px 1px rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12) ;
$refresher-icon-color: $core-color;
// Moodle Mobile variables
// --------------------------------------------------
@ -106,13 +109,13 @@ $item-icon-accessory-color: #ccc !default;
$item-icon-accessory-font-size: 16px !default;
// Init screen.
$mm-color-init-screen: #ff5c00;
$mm-color-init-screen-alt: #ff7600;
$mm-init-screen-spinner-color: $white;
$mm-init-screen-logo-width: 60%;
$mm-init-screen-logo-max-width: 300px;
$core-color-init-screen: #ff5c00;
$core-color-init-screen-alt: #ff7600;
$core-init-screen-spinner-color: $white;
$core-init-screen-logo-width: 60%;
$core-init-screen-logo-max-width: 300px;
$mm-fixed-url: false;
$core-fixed-url: false;
// Branded apps customization
@ -125,8 +128,11 @@ $mm-fixed-url: false;
// iOS only Sass variables can go here
$text-input-ios-show-focus-highlight: false;
$mm-text-input-ios-show-highlight: false;
$core-text-input-ios-show-highlight: false;
$item-ios-avatar-size: 54px;
$loading-ios-spinner-color: $core-color;
$spinner-ios-ios-color: $core-color;
$tabs-ios-tab-color-inactive: $tabs-tab-color-inactive;
// App Material Design Variables
@ -134,9 +140,12 @@ $item-ios-avatar-size: 54px;
// Material Design only Sass variables can go here
$text-input-md-show-focus-highlight: false;
$mm-text-input-md-show-highlight: true;
$core-text-input-md-show-highlight: true;
$item-md-detail-push-show: true;
$item-md-avatar-size: 54px;
$loading-md-spinner-color: $core-color;
$spinner-md-crescent-color: $core-color;
$tabs-md-tab-color-inactive: $tabs-tab-color-inactive;
// App Windows Variables
@ -146,6 +155,9 @@ $item-md-avatar-size: 54px;
$text-input-wp-show-focus-highlight: true;
$item-wp-detail-push-show: true;
$item-wp-avatar-size: 54px;
$loading-wp-spinner-color: $core-color;
$spinner-wp-circles-color: $core-color;
$tabs-wp-tab-color-inactive: $tabs-tab-color-inactive;
// App Theme
@ -178,3 +190,8 @@ $item-wp-avatar-size: 54px;
// Small avatar ideal for icons.
$item-media-width: 32px !default;
$item-media-height: 32px !default;
$core-top-tabs-background: $white;
$core-top-tabs-color: $gray-dark;
$core-top-tabs-border: $gray;
$core-top-tabs-color-active: $core-color;