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); 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. // Highlights inside the input element.
@if ($mm-text-input-ios-show-highlight) { @if ($core-text-input-ios-show-highlight) {
.card-ios, .list-ios { .card-ios, .list-ios {
// In order to get a 2px border we need to add an inset // In order to get a 2px border we need to add an inset
// box-shadow 1px (this is to avoid the div resizing) // 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); 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. // Highlights inside the input element.
@if ($mm-text-input-md-show-highlight) { @if ($core-text-input-md-show-highlight) {
.card-md, .list-md { .card-md, .list-md {
// In order to get a 2px border we need to add an inset // In order to get a 2px border we need to add an inset
// box-shadow 1px (this is to avoid the div resizing) // 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-right { text-align: right; }
.text-center { text-align: center; } .text-center { text-align: center; }
.text-justify { text-align: justify; } .text-justify { text-align: justify; }
.clearfix {
&:after {
content: "";
display: table;
clear: both;
}
}
@media only screen and (min-width: 430px) { @media only screen and (min-width: 430px) {
.mm-center-view .scroll-content { .core-center-view .scroll-content {
display: flex!important; display: flex!important;
align-content: center !important; align-content: center !important;
align-items: 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. // 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. // This is done for accessibility reasons when a heading is semantically incorrect.
@ -45,7 +63,7 @@
margin: 0; 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; min-height: 32px;
img, .label { img, .label {
max-height: 32px; max-height: 32px;
@ -60,7 +78,7 @@
} }
} }
.mm-bold, .mm-bold .label { .core-bold, .core-bold .label {
font-weight: bold; font-weight: bold;
} }
@ -128,23 +146,23 @@ core-format-text[maxHeight], *[core-format-text][maxHeight] {
} }
// This is to allow clicks in radio/checkbox content. // This is to allow clicks in radio/checkbox content.
&.mm-text-formatted { &.core-text-formatted {
cursor: pointer; cursor: pointer;
.mm-show-more { .core-show-more {
display: none; display: none;
} }
&:not(.mm-shortened) { &:not(.core-shortened) {
max-height: none !important; max-height: none !important;
} }
&.mm-shortened { &.core-shortened {
color: $gray-darker; color: $gray-darker;
overflow: hidden; overflow: hidden;
min-height: 50px; min-height: 50px;
.mm-show-more { .core-show-more {
color: color($colors, dark); color: color($colors, dark);
text-align: right; text-align: right;
font-size: 14px; 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 // content: $ionicon-var-chevron-right; @todo
} }
@ -225,3 +243,34 @@ core-format-text, *[core-format-text] {
max-height: $item-media-height; 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 { .button-wp-light {
color: color($colors, primary, base); 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="core-empty-box" [class.core-empty-box-inline]="!image && !icon">
<div class="mm-empty-box-content"> <div class="core-empty-box-content" padding>
<img *ngIf="image && !icon" [src]="image" role="presentation"> <img *ngIf="image && !icon" [src]="image" role="presentation">
<ion-icon *ngIf="icon" name="icon"></ion-icon> <ion-icon *ngIf="icon" [name]="icon"></ion-icon>
<p *ngIf="message">{{ message }}</p> <p *ngIf="message" [class.padding-top]="image || icon">{{ message }}</p>
<ng-content></ng-content> <ng-content></ng-content>
</div> </div>
</div> </div>

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

@ -1,3 +1,57 @@
core-empty-box { 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;
}
}
}
} }

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

@ -1,28 +1,2 @@
core-loading { core-file {
.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;
}
}

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

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

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

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

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

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

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

@ -4,5 +4,5 @@
<span [style.width]="width"></span> <span [style.width]="width"></span>
</div> </div>
</progress> </progress>
<span class="mm-progress-text">{{ 'core.percentagenumber' | translate: {$a: text} }}</span> <span class="core-progress-text">{{ 'core.percentagenumber' | translate: {$a: text} }}</span>
</div> </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 { core-progress-bar {
padding-right: 55px; padding-right: 55px;
position: relative; position: relative;
display: block; display: block;
// @extend .clearfix; @extend .clearfix;
.mm-progress-text { .core-progress-text {
margin-left: 10px; margin-left: 10px;
line-height: 35px; line-height: normal;
font-size: 1.4rem;
color: $gray-darker; color: $gray-darker;
right: 0; right: 0;
top: 0; top: -6px;
color: #626262;
position: absolute; position: absolute;
} }
progress { progress {
-webkit-appearance: none; -webkit-appearance: none;
appearance: none; appearance: none;
height: $mm-progress-bar-height; height: $core-progress-bar-height;
margin: 15px 0; margin: 15px 0;
padding: 0; padding: 0;
display: block; display: block;
@ -34,18 +34,18 @@ core-progress-bar {
.progress-bar-fallback span, .progress-bar-fallback span,
&[value]::-webkit-progress-value { &[value]::-webkit-progress-value {
background-color: $mm-color-light; background-color: $core-color-light;
border-radius: 2px; border-radius: 2px;
} }
.progress-bar-fallback { .progress-bar-fallback {
width: 100%; width: 100%;
height: $mm-progress-bar-height; height: $core-progress-bar-height;
display: block; display: block;
position: relative; position: relative;
span { span {
height: $mm-progress-bar-height; height: $core-progress-bar-height;
display: block; display: block;
} }
} }

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

@ -2,7 +2,7 @@
<form #f="ngForm" (ngSubmit)="submitForm(f.value.search)"> <form #f="ngForm" (ngSubmit)="submitForm(f.value.search)">
<ion-item> <ion-item>
<ion-input type="text" name="search" ngModel [placeholder]="placeholder" [autocorrect]="autocorrect" [spellcheck]="spellcheck" [core-auto-focus]="autoFocus"></ion-input> <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> <ion-icon name="search"></ion-icon>
</button> </button>
</ion-item> </ion-item>

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

@ -3,4 +3,7 @@ core-search-box {
margin: 0; margin: 0;
padding: ($content-padding / 2) $content-padding; 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-top: 0;
margin-bottom: 0; margin-bottom: 0;
} }
.core-ioninput-password {
padding-top: 0;
padding-bottom: 0;
}
} }
.md { .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> <ion-icon name="ionic" item-start></ion-icon>
<h2><core-format-text [text]="course.fullname"></core-format-text></h2> <h2><core-format-text [text]="course.fullname"></core-format-text></h2>
<div item-end> <div item-end>
<span *ngIf="!course.isEnrolled"> <span *ngIf="!course.isEnrolled">
<span ion-button icon-only clear *ngFor="let instance of course.enrollment" [attr.aria-label]=" instance.name | translate"> <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" class="icon-accessory"></ion-icon> <ion-icon *ngIf="instance.icon" [name]="instance.icon"></ion-icon>
<img *ngIf="instance.img && !instance.icon" [src]="instance.img" class="mm-course-enrollment-img"> <img *ngIf="instance.img && !instance.icon" [src]="instance.img" class="core-course-enrollment-img">
</span> </span>
</span> </span>
<span ion-button icon-only clear>
<ion-icon name="arrow-forward" md="ios-arrow-forward" class="icon-accessory"></ion-icon>
</span>
</div> </div>
</a> </a>

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

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

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

@ -1,19 +1,22 @@
<ion-card> <ion-card>
<a ion-item text-wrap class="item-course" (click)="openCourse(course)" [title]="course.fullname"> <a ion-item text-wrap detail-none (click)="openCourse(course)" [title]="course.fullname">
<h2><core-format-text [text]="course.fullname"></core-format-text></h2> <h2 float-start><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> <!-- Download course. -->
<!-- @todo: Download button. --> <!--<button [hidden]="!downloadButton.isDownload" ion-button icon-only clear color="dark" float-end>
<!-- <i *ngIf="actionsLoaded" class="icon ion-android-more-vertical mm-animate-show-hide" ng-click="showCourseActions($event)"></i> <ion-icon name="cloud-download"></ion-icon>
<ion-spinner *ngIf="!actionsLoaded" class="mm-animate-show-hide"></ion-spinner> --> </button>-->
<!-- Download course spinner. --> <!-- 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> </a>
<ion-item text-wrap *ngIf="showSummary && course.summary"> <ion-item text-wrap *ngIf="course.summary && course.summary.length">
<p> <p>
<summary> <summary>
<core-format-text [text]="course.summary" maxHeight="60"></core-format-text> <core-format-text [text]="course.summary" maxHeight="20"></core-format-text>
</summary> </summary>
</p> </p>
</ion-item> </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> <ng-content></ng-content>
</ion-card> </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 { Component, Input, OnInit } from '@angular/core';
import { NavController } from 'ionic-angular'; import { NavController } from 'ionic-angular';
import { TranslateService } from '@ngx-translate/core'; 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. * This component is meant to display a course for a list of courses with progress.
* *
* Example usage: * 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> * </core-courses-course-progress>
*/ */
@Component({ @Component({
@ -31,22 +30,20 @@ import { CoreUtilsProvider } from '../../../../providers/utils/utils';
}) })
export class CoreCoursesCourseProgressComponent implements OnInit { export class CoreCoursesCourseProgressComponent implements OnInit {
@Input() course: any; // The course to render. @Input() course: any; // The course to render.
@Input() showSummary?: boolean|string; // Whether to show the summary.
actionsLoaded = true; isDownloading: boolean;
prefetchCourseIcon: string;
protected obsStatus; protected obsStatus;
protected downloadText; protected downloadText;
protected downloadingText; protected downloadingText;
protected downloadButton = { protected downloadButton = {
isDownload: true, isDownload: true,
className: 'mm-download-course', className: 'core-download-course',
priority: 1000 priority: 1000
}; };
protected buttons; 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.downloadText = this.translate.instant('core.course.downloadcourse');
this.downloadingText = this.translate.instant('core.downloading'); this.downloadingText = this.translate.instant('core.downloading');
} }
@ -56,7 +53,6 @@ export class CoreCoursesCourseProgressComponent implements OnInit {
*/ */
ngOnInit() { ngOnInit() {
// @todo: Handle course prefetch. // @todo: Handle course prefetch.
this.showSummary = this.utils.isTrueOrOne(this.showSummary);
} }
/** /**

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

@ -1,62 +1,45 @@
<ng-template #eventTemplate let-event="event"> <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"> <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 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> <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> </a>
</ng-template> </ng-template>
<ng-container *ngIf="recentlyOverdue.length > 0"> <ion-item-group *ngIf="recentlyOverdue.length > 0">
<h5 class="assertive mm-timelinetitle">{{ 'core.courses.recentlyoverdue' | translate }}</h5> <ion-item-divider color="danger">{{ 'core.courses.recentlyoverdue' | translate }}</ion-item-divider>
<ul ion-list class="block"> <ng-container *ngFor="let event of recentlyOverdue">
<li *ngFor="let event of recentlyOverdue"> <ng-container *ngTemplateOutlet="eventTemplate; context: {event: event}"></ng-container>
<ng-container *ngTemplateOutlet="eventTemplate; context: {event: event}"></ng-container> </ng-container>
</li> </ion-item-group>
</ul>
</ng-container>
<ng-container *ngIf="today.length > 0"> <ion-item-group *ngIf="next7Days.length > 0">
<h5 class="mm-timelinetitle">{{ 'core.today' | translate }}</h5> <ion-item-divider color="light">{{ 'core.courses.next7days' | translate }}</ion-item-divider>
<ul ion-list class="block"> <ng-container *ngFor="let event of next7Days">
<li *ngFor="let event of today"> <ng-container *ngTemplateOutlet="eventTemplate; context: {event: event}"></ng-container>
<ng-container *ngTemplateOutlet="eventTemplate; context: {event: event}"></ng-container> </ng-container>
</li> </ion-item-group>
</ul>
</ng-container>
<ng-container *ngIf="next7Days.length > 0"> <ion-item-group *ngIf="next30Days.length > 0">
<h5 class="mm-timelinetitle">{{ 'core.courses.next7days' | translate }}</h5> <ion-item-divider color="light">{{ 'core.courses.next30days' | translate }}</ion-item-divider>
<ul ion-list class="block"> <ng-container *ngFor="let event of next30Days">
<li *ngFor="let event of next7Days"> <ng-container *ngTemplateOutlet="eventTemplate; context: {event: event}"></ng-container>
<ng-container *ngTemplateOutlet="eventTemplate; context: {event: event}"></ng-container> </ng-container>
</li> </ion-item-group>
</ul>
</ng-container>
<ng-container *ngIf="next30Days.length > 0"> <ion-item-group *ngIf="future.length > 0">
<h5 class="mm-timelinetitle">{{ 'core.courses.next30days' | translate }}</h5> <ion-item-divider color="light">{{ 'core.courses.future' | translate }}</ion-item-divider>
<ul ion-list class="block"> <ng-container *ngFor="let event of future">
<li *ngFor="let event of next30Days"> <ng-container *ngTemplateOutlet="eventTemplate; context: {event: event}"></ng-container>
<ng-container *ngTemplateOutlet="eventTemplate; context: {event: event}"></ng-container> </ng-container>
</li> </ion-item-group>
</ul>
</ng-container>
<ng-container *ngIf="future.length > 0"> <div padding text-center *ngIf="canLoadMore && !empty">
<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">
<!-- Button and spinner to show more attempts. --> <!-- Button and spinner to show more attempts. -->
<button *ngIf="!loadingMore" ion-button block (click)="loadMoreEvents()">{{ 'core.loadmore' | translate }}</button> <button *ngIf="!loadingMore" ion-button block (click)="loadMoreEvents()">{{ 'core.loadmore' | translate }}</button>
<ion-spinner *ngIf="loadingMore"></ion-spinner> <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-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"> <core-loading [hideUntil]="dataLoaded">
<ion-list *ngIf="course"> <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> <ion-icon name="ionic" item-start></ion-icon>
<h2><core-format-text [text]="course.fullname"></core-format-text></h2> <h2><core-format-text [text]="course.fullname"></core-format-text></h2>
<p *ngIf="course.categoryname">{{course.categoryname}}</p> <p *ngIf="course.categoryname">{{course.categoryname}}</p>
@ -29,13 +29,13 @@
<div *ngIf="!isEnrolled"> <div *ngIf="!isEnrolled">
<ion-item text-wrap *ngFor="let instance of selfEnrolInstances"> <ion-item text-wrap *ngFor="let instance of selfEnrolInstances">
<p class="item-heading">{{ instance.name }}</p> <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> </ion-item>
</div> </div>
<ion-item text-wrap *ngIf="!isEnrolled && paypalEnabled"> <ion-item text-wrap *ngIf="!isEnrolled && paypalEnabled">
<p class="item-heading">{{ 'core.courses.paypalaccepted' | translate }}</p> <p class="item-heading">{{ 'core.courses.paypalaccepted' | translate }}</p>
<p>{{ 'core.paymentinstant' | 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>
<ion-item *ngIf="!isEnrolled && !selfEnrolInstances.length && !paypalEnabled"> <ion-item *ngIf="!isEnrolled && !selfEnrolInstances.length && !paypalEnabled">
<p>{{ 'core.courses.notenrollable' | translate }}</p> <p>{{ 'core.courses.notenrollable' | translate }}</p>
@ -49,16 +49,14 @@
<a ion-item (click)="openCourse()" [title]="course.fullname" *ngIf="handlersShouldBeShown"> <a ion-item (click)="openCourse()" [title]="course.fullname" *ngIf="handlersShouldBeShown">
<ion-icon name="briefcase" item-start></ion-icon> <ion-icon name="briefcase" item-start></ion-icon>
<h2>{{ 'core.course.contents' | translate }}</h2> <h2>{{ 'core.course.contents' | translate }}</h2>
<ion-icon name="arrow-forward" md="ios-arrow-forward" class="icon-accessory" item-end></ion-icon>
</a> </a>
<div class="mm-course-handlers" *ngIf="handlersShouldBeShown && course._handlers && course._handlers.length"> <div class="core-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}}"> <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> <ion-icon [name]="icon" item-start></ion-icon>
<h2><core-format-text [text]="title | translate"></core-format-text></h2> <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> </a>
</div> </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-spinner></ion-spinner>
</ion-item> </ion-item>
</ion-list> </ion-list>

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

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

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

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

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

@ -9,11 +9,11 @@
</ion-buttons> </ion-buttons>
</ion-navbar> </ion-navbar>
</ion-header> </ion-header>
<ion-content padding> <ion-content>
<form ion-list #f="ngForm" (ngSubmit)="submitPassword(f.value.password)"> <form ion-list #f="ngForm" (ngSubmit)="submitPassword(f.value.password)">
<ion-item> <ion-item>
<core-show-password item-content [name]="'password'"> <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> </core-show-password>
</ion-item> </ion-item>
<ion-item> <ion-item>

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

@ -57,14 +57,14 @@ export class CoreCoursesMainMenuHandler implements CoreMainMenuHandler {
icon: 'ionic', icon: 'ionic',
title: 'core.courses.courseoverview', title: 'core.courses.courseoverview',
page: 'CoreCoursesMyOverviewPage', page: 'CoreCoursesMyOverviewPage',
class: 'mm-courseoverview-handler' class: 'core-courseoverview-handler'
}; };
} else { } else {
return { return {
icon: 'ionic', icon: 'ionic',
title: 'core.courses.mycourses', title: 'core.courses.mycourses',
page: 'CoreCoursesMyCoursesPage', 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 { } else {
// In browser the text must be selected in order to copy it. Create a hidden textarea to put the text in it. // 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 = document.createElement('textarea');
this.copyTextarea.className = 'mm-browser-copy-area'; this.copyTextarea.className = 'core-browser-copy-area';
this.copyTextarea.setAttribute('aria-hidden', 'true'); this.copyTextarea.setAttribute('aria-hidden', 'true');
document.body.appendChild(this.copyTextarea); 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-title>{{ 'core.login.login' | translate }}</ion-title>
</ion-navbar> </ion-navbar>
</ion-header> </ion-header>
<ion-content class="mm-center-view"> <ion-content class="core-center-view">
<core-loading [hideUntil]="pageLoaded"> <core-loading [hideUntil]="pageLoaded">
<div class="box"> <div class="box">
<div text-wrap text-center> <div text-wrap text-center>
@ -12,10 +12,10 @@
<img *ngIf="!logoUrl" src="assets/img/login_logo.png" class="login-logo" role="presentation"> <img *ngIf="!logoUrl" src="assets/img/login_logo.png" class="login-logo" role="presentation">
<!-- If no sitename show big siteurl. --> <!-- 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. --> <!-- If sitename, show big sitename and small siteurl. -->
<p *ngIf="siteName" padding class="item-heading mm-sitename">{{siteName}}</p> <p *ngIf="siteName" padding class="item-heading core-sitename">{{siteName}}</p>
<p *ngIf="siteName" class="mm-siteurl">{{siteUrl}}</p> <p *ngIf="siteName" class="core-siteurl">{{siteUrl}}</p>
</div> </div>
<form ion-list [formGroup]="credForm" (ngSubmit)="login()"> <form ion-list [formGroup]="credForm" (ngSubmit)="login()">
<ion-item *ngIf="siteChecked && !isBrowserSSO"> <ion-item *ngIf="siteChecked && !isBrowserSSO">
@ -23,7 +23,7 @@
</ion-item> </ion-item>
<ion-item *ngIf="siteChecked && !isBrowserSSO"> <ion-item *ngIf="siteChecked && !isBrowserSSO">
<core-show-password item-content [name]="'password'"> <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> </core-show-password>
</ion-item> </ion-item>
<button ion-button block [disabled]="siteChecked && !isBrowserSSO && !credForm.valid">{{ 'core.login.loginbutton' | translate }}</button> <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 *ngIf="identityProviders && identityProviders.length" padding-top>
<ion-list-header text-wrap>{{ 'core.login.potentialidps' | translate }}</ion-list-header> <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> <img [src]="provider.iconurl" alt="{{provider.name}}" item-start>
{{provider.name}} {{provider.name}}
</button> </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); background: radial-gradient(white, $gray-light);
} }
.mm-ioninput-password {
padding-top: 0;
padding-bottom: 0;
}
img { img {
max-width: 100%; max-width: 100%;
} }
@ -25,8 +20,8 @@ page-core-login-credentials {
border: 1px solid $gray; border: 1px solid $gray;
} }
.mm-sitename, .mm-siteurl { .core-sitename, .core-siteurl {
@if $mm-fixed-url { display: none; } @if $core-fixed-url { display: none; }
} }
.item-input { .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. --> <!-- Other categories. @todo: Implement once user profile fields are implemented. -->
<!-- <div *ngFor="let category in categories"> <!-- <div *ngFor="let category in categories">
<ion-item-divider text-wrap color="light">{{ category.name }}</div> <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> --> </div> -->
<!-- ReCAPTCHA --> <!-- ReCAPTCHA -->

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

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

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

@ -1,8 +1,8 @@
page-core-login-init { page-core-login-init {
.mm-bglogo { .core-bglogo {
background-color: $mm-color-init-screen; /* Change this to add a bg image or change color */ background-color: $core-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: -webkit-radial-gradient($core-color-init-screen-alt, $core-color-init-screen);
background: radial-gradient($mm-color-init-screen-alt, $mm-color-init-screen); background: radial-gradient($core-color-init-screen-alt, $core-color-init-screen);
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center center; background-position: center center;
position: absolute; position: absolute;
@ -14,22 +14,22 @@ page-core-login-init {
width: 100%; width: 100%;
display: table; display: table;
.mm-logo { .core-logo {
display: table-cell; display: table-cell;
text-align: center; text-align: center;
vertical-align: middle; vertical-align: middle;
} }
img { img {
width: $mm-init-screen-logo-width; width: $core-init-screen-logo-width;
max-width: $mm-init-screen-logo-max-width; max-width: $core-init-screen-logo-max-width;
display: block; display: block;
margin: 0 auto; margin: 0 auto;
margin-bottom: 30px; margin-bottom: 30px;
} }
.spinner circle { .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-title>{{ 'core.login.reconnect' | translate }}</ion-title>
</ion-navbar> </ion-navbar>
</ion-header> </ion-header>
<ion-content padding class="mm-center-view"> <ion-content padding class="core-center-view">
<div class="box"> <div class="box">
<div *ngIf="site" text-wrap text-center [ngClass]="{'item-avatar-center': site.avatar}"> <div *ngIf="site" text-wrap text-center [ngClass]="{'item-avatar-center': site.avatar}">
<ion-avatar *ngIf="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"> <img *ngIf="!site.avatar && !logoUrl" src="assets/img/login_logo.png" class="login-logo" role="presentation">
<!-- If no sitename show big siteurl. --> <!-- 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. --> <!-- If sitename, show big sitename and small siteurl. -->
<p *ngIf="siteName" class="item-heading mm-sitename">{{siteName}}</p> <p *ngIf="siteName" class="item-heading core-sitename">{{siteName}}</p>
<p *ngIf="siteName" class="mm-siteurl">{{siteUrl}}</p> <p *ngIf="siteName" class="core-siteurl">{{siteUrl}}</p>
<p *ngIf="!isLoggedOut"> <p *ngIf="!isLoggedOut">
<ion-icon padding name="alert"></ion-icon> {{ 'core.login.reconnectdescription' | translate }} <ion-icon padding name="alert"></ion-icon> {{ 'core.login.reconnectdescription' | translate }}
</p> </p>
</div> </div>
<ion-list> <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 class="item-heading">{{ 'core.login.username' | translate }}</p>
<p>{{username}}</p> <p>{{username}}</p>
</ion-item> </ion-item>
<form [formGroup]="credForm" (ngSubmit)="login()"> <form [formGroup]="credForm" (ngSubmit)="login()">
<ion-item> <ion-item>
<core-show-password item-content [name]="'password'"> <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> </core-show-password>
</ion-item> </ion-item>
<ion-grid> <ion-grid>
@ -52,7 +52,7 @@
<!-- Identity providers. --> <!-- Identity providers. -->
<ion-list *ngIf="identityProviders && identityProviders.length" padding-top> <ion-list *ngIf="identityProviders && identityProviders.length" padding-top>
<ion-list-header text-wrap>{{ 'core.login.potentialidps' | translate }}</ion-list-header> <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> <img [src]="provider.iconurl" alt="{{provider.name}}" item-start>
{{provider.name}} {{provider.name}}
</button> </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); background: radial-gradient(white, $gray-light);
} }
.mm-ioninput-password {
padding-top: 0;
padding-bottom: 0;
}
img { img {
max-width: 100%; max-width: 100%;
} }
@ -25,11 +20,11 @@ page-core-login-reconnect {
border: 1px solid $gray; border: 1px solid $gray;
} }
.mm-sitename, .mm-siteurl { .core-sitename, .core-siteurl {
@if $mm-fixed-url { display: none; } @if $core-fixed-url { display: none; }
} }
.list .mm-username { .list .core-username {
&.item-md { &.item-md {
@include padding-horizontal($item-md-padding-left, $content-padding); @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-buttons>
</ion-navbar> </ion-navbar>
</ion-header> </ion-header>
<ion-content class="mm-center-view"> <ion-content class="core-center-view">
<div class="box"> <div class="box">
<div text-center padding> <div text-center padding>
<img src="assets/img/login_logo.png" class="avatar-full login-logo" role="presentation"> <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> <p>{{siteInfo.fullname}}</p>
</a> </a>
<ion-item-divider color="light"></ion-item-divider> <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-spinner></ion-spinner>
</ion-item> </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> <ion-icon [name]="handler.icon" item-start></ion-icon>
<p>{{ handler.title | translate}}</p> <p>{{ handler.title | translate}}</p>
<!-- @todo: Badge. --> <!-- @todo: Badge. -->
<!-- <span ng-show="!loading && badge" class="badge badge-positive">{{badge}}</span> <!-- <span ng-show="!loading && badge" class="badge badge-positive">{{badge}}</span>
<ion-spinner ng-if="loading" class="icon"></ion-spinner> --> <ion-spinner ng-if="loading" class="icon"></ion-spinner> -->
</ion-item> </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}}"> <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> <ion-icon [name]="item.icon" item-start></ion-icon>
<p>{{item.label}}</p> <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. * 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({ @Directive({
selector: '[core-auto-focus]' 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. * @param {HTMLElement} element Element to add the class to.
*/ */
protected addMediaAdaptClass(element: HTMLElement) : void { 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. // Wrap the image in a new div with position relative.
container = document.createElement('span'); 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. container.style.cssFloat = img.style.cssFloat; // Copy the float to correctly position the search icon.
if (img.classList.contains('atto_image_button_right')) { if (img.classList.contains('atto_image_button_right')) {
container.classList.add('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')); label = this.textUtils.escapeHTML(this.translate.instant('core.openfullimage'));
// @todo: Implement image viewer. Maybe we can add the listener here directly? // @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>'; '" aria-label="' + label + '"><ion-icon name="search"></ion-icon></a>';
} }
@ -175,13 +175,13 @@ export class CoreFormatTextDirective implements OnChanges {
if (!height || height > this.maxHeight) { if (!height || height > this.maxHeight) {
let expandInFullview = this.utils.isTrueOrOne(this.fullOnClick) || false; 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) { 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('core-text-formatted');
this.element.classList.add('mm-shortened'); this.element.classList.add('core-shortened');
this.element.style.maxHeight = this.maxHeight + 'px'; this.element.style.maxHeight = this.maxHeight + 'px';
this.element.addEventListener('click', (e) => { this.element.addEventListener('click', (e) => {
@ -194,7 +194,7 @@ export class CoreFormatTextDirective implements OnChanges {
!target.getAttribute('href'))) { !target.getAttribute('href'))) {
if (!expandInFullview) { if (!expandInFullview) {
// Change class. // Change class.
this.element.classList.toggle('mm-shortened'); this.element.classList.toggle('core-shortened');
return; return;
} }
} }
@ -209,7 +209,7 @@ export class CoreFormatTextDirective implements OnChanges {
this.domUtils.moveChildren(div, this.element); this.domUtils.moveChildren(div, this.element);
} }
this.element.classList.add('mm-enabled-media-adapt'); this.element.classList.add('core-enabled-media-adapt');
this.finishRender(); this.finishRender();
}); });
@ -252,7 +252,7 @@ export class CoreFormatTextDirective implements OnChanges {
buttons = Array.from(div.querySelectorAll('.button')); buttons = Array.from(div.querySelectorAll('.button'));
// Walk through the content to find the links and add our directive to it. // 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) => { anchors.forEach((anchor) => {
// Angular 2 doesn't let adding directives dynamically. Create the CoreLinkDirective manually. // 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); 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) => { buttons.forEach((button: HTMLElement) => {
// Check if it has a link inside. // Check if it has a link inside.
if (button.querySelector('a')) { 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; let height;
// Disable media adapt to correctly calculate the 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); height = this.domUtils.getElementHeight(element);
element.classList.add('mm-enabled-media-adapt'); element.classList.add('core-enabled-media-adapt');
return height || 0; return height || 0;
} }

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

@ -29,7 +29,7 @@ import { CoreUtilsProvider } from '../providers/utils/utils';
* *
* Example usage: * 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> * <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 * 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: * Example usage:
* *
* <textarea id="send-message-input"></textarea> * <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({ @Directive({
selector: '[core-keep-keyboard]' selector: '[core-keep-keyboard]'

2
src/providers/sites.ts
View File

@ -507,7 +507,7 @@ export class CoreSitesProvider {
*/ */
protected validateSiteInfo(info: any) : any { protected validateSiteInfo(info: any) : any {
if (!info.firstname || !info.lastname) { 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 {error: 'core.requireduserdatamissing', params: {'$a': moodleLink}};
} }
return true; 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) {} 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. * @param {string} message Message to wrap.
* @return {string} Result message. * @return {string} Result message.
*/ */
private addFormatTextIfNeeded(message: string) : string { private addFormatTextIfNeeded(message: string) : string {
if (this.textUtils.hasHTMLTags(message)) { 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; return message;
} }
@ -382,8 +383,8 @@ export class CoreDomUtilsProvider {
private getErrorTitle(message: string) : string { private getErrorTitle(message: string) : string {
if (message == this.translate.instant('core.networkerrormsg') || if (message == this.translate.instant('core.networkerrormsg') ||
message == this.translate.instant('core.fileuploader.errormustbeonlinetoupload')) { message == this.translate.instant('core.fileuploader.errormustbeonlinetoupload')) {
return '<span class="mm-icon-with-badge"><i class="icon ion-wifi"></i>\ return '<span class="core-icon-with-badge"><i class="icon ion-wifi"></i>\
<i class="icon ion-alert-circled mm-icon-badge"></i></span>'; <i class="icon ion-alert-circled core-icon-badge"></i></span>';
} }
return this.textUtils.decodeHTML(this.translate.instant('core.error')); return this.textUtils.decodeHTML(this.translate.instant('core.error'));
} }
@ -496,7 +497,7 @@ export class CoreDomUtilsProvider {
* *
* @param {HTMLElement} element DOM element. * @param {HTMLElement} element DOM element.
* @param {any} map Mapping of the classes to replace. Keys must be the value to replace, values must be * @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 { replaceClassesInElement(element: HTMLElement, map: any) : void {
for (let key in map) { 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 {Content|HTMLElement} scrollEl The element that must be scrolled.
* @param {HTMLElement} container Element to search in. * @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.message = this.addFormatTextIfNeeded(message); // Add format-text to handle links.
options.title = title; options.title = title;
if (!title) { if (!title) {
options.cssClass = 'mm-nohead'; options.cssClass = 'core-nohead';
} }
options.buttons = [ 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-light: mix($yellow, white, 20%);
$yellow-dark: mix($yellow, black, 40%); $yellow-dark: mix($yellow, black, 40%);
$mm-color: $orange; $core-color: $orange;
$mm-color-light: lighten($mm-color, 10%); $core-color-light: lighten($core-color, 10%);
$mm-color-dark: darken($mm-color, 10%); $core-color-dark: darken($core-color, 10%);
// Shared Variables // Shared Variables
@ -72,10 +72,11 @@ $content-padding: 10px;
// The "primary" color is the only required color in the map. // The "primary" color is the only required color in the map.
$colors: ( $colors: (
primary: $mm-color, primary: $core-color,
secondary: $turquoise, secondary: $turquoise,
danger: $red, danger: $red,
light: $gray-lighter, light: $gray-lighter,
gray: $gray-dark,
dark: $black, dark: $black,
warning: $yellow warning: $yellow
); );
@ -89,14 +90,16 @@ $list-background-color: $white;
$tabs-background: $gray-darker; $tabs-background: $gray-darker;
$tabs-border-color: #b2b2b2 !default; $tabs-border-color: #b2b2b2 !default;
$tabs-tab-color-inactive: #8c8c8c !default; $tabs-tab-color-active: $core-color;
$tabs-tab-color-active: $mm-color; $tabs-tab-color-inactive: $white;
$text-input-highlight-color-valid: $green; $text-input-highlight-color-valid: $green;
$text-input-highlight-color-invalid: $red; $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) ; $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 // Moodle Mobile variables
// -------------------------------------------------- // --------------------------------------------------
@ -106,13 +109,13 @@ $item-icon-accessory-color: #ccc !default;
$item-icon-accessory-font-size: 16px !default; $item-icon-accessory-font-size: 16px !default;
// Init screen. // Init screen.
$mm-color-init-screen: #ff5c00; $core-color-init-screen: #ff5c00;
$mm-color-init-screen-alt: #ff7600; $core-color-init-screen-alt: #ff7600;
$mm-init-screen-spinner-color: $white; $core-init-screen-spinner-color: $white;
$mm-init-screen-logo-width: 60%; $core-init-screen-logo-width: 60%;
$mm-init-screen-logo-max-width: 300px; $core-init-screen-logo-max-width: 300px;
$mm-fixed-url: false; $core-fixed-url: false;
// Branded apps customization // Branded apps customization
@ -125,8 +128,11 @@ $mm-fixed-url: false;
// iOS only Sass variables can go here // iOS only Sass variables can go here
$text-input-ios-show-focus-highlight: false; $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; $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 // App Material Design Variables
@ -134,9 +140,12 @@ $item-ios-avatar-size: 54px;
// Material Design only Sass variables can go here // Material Design only Sass variables can go here
$text-input-md-show-focus-highlight: false; $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-detail-push-show: true;
$item-md-avatar-size: 54px; $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 // App Windows Variables
@ -146,6 +155,9 @@ $item-md-avatar-size: 54px;
$text-input-wp-show-focus-highlight: true; $text-input-wp-show-focus-highlight: true;
$item-wp-detail-push-show: true; $item-wp-detail-push-show: true;
$item-wp-avatar-size: 54px; $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 // App Theme
@ -178,3 +190,8 @@ $item-wp-avatar-size: 54px;
// Small avatar ideal for icons. // Small avatar ideal for icons.
$item-media-width: 32px !default; $item-media-width: 32px !default;
$item-media-height: 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;