Merge pull request #1802 from albertgasset/MOBILE-2911

Mobile 2911
main
Juan Leyva 2019-03-11 15:13:00 +01:00 committed by GitHub
commit 38e079bd87
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
28 changed files with 309 additions and 118 deletions

View File

@ -344,6 +344,7 @@
"addon.mod_assign_submission_onlinetext.pluginname": "assignsubmission_onlinetext",
"addon.mod_book.errorchapter": "book",
"addon.mod_book.modulenameplural": "book",
"addon.mod_book.toc": "book",
"addon.mod_chat.beep": "chat",
"addon.mod_chat.chatreport": "chat",
"addon.mod_chat.currentusers": "chat",
@ -752,6 +753,7 @@
"addon.mod_scorm.scormstatusnotdownloaded": "local_moodlemobileapp",
"addon.mod_scorm.scormstatusoutdated": "local_moodlemobileapp",
"addon.mod_scorm.suspended": "scorm",
"addon.mod_scorm.toc": "scorm",
"addon.mod_scorm.warningofflinedatadeleted": "local_moodlemobileapp",
"addon.mod_scorm.warningsynconlineincomplete": "local_moodlemobileapp",
"addon.mod_survey.cannotsubmitsurvey": "local_moodlemobileapp",

View File

@ -20,12 +20,10 @@ import { CoreComponentsModule } from '@components/components.module';
import { CoreDirectivesModule } from '@directives/directives.module';
import { CoreCourseComponentsModule } from '@core/course/components/components.module';
import { AddonModBookIndexComponent } from './index/index';
import { AddonModBookTocPopoverComponent } from './toc-popover/toc-popover';
@NgModule({
declarations: [
AddonModBookIndexComponent,
AddonModBookTocPopoverComponent
AddonModBookIndexComponent
],
imports: [
CommonModule,
@ -38,12 +36,10 @@ import { AddonModBookTocPopoverComponent } from './toc-popover/toc-popover';
providers: [
],
exports: [
AddonModBookIndexComponent,
AddonModBookTocPopoverComponent
AddonModBookIndexComponent
],
entryComponents: [
AddonModBookIndexComponent,
AddonModBookTocPopoverComponent
AddonModBookIndexComponent
]
})
export class AddonModBookComponentsModule {}

View File

@ -1,6 +1,6 @@
<!-- Buttons to add to the header. -->
<core-navbar-buttons end>
<button ion-button icon-only (click)="showToc($event)">
<button ion-button icon-only (click)="showToc($event)" [attr.aria-label]="'addon.mod_book.toc' | translate" aria-haspopup="true">
<ion-icon name="bookmark"></ion-icon>
</button>
<core-context-menu>

View File

@ -13,13 +13,12 @@
// limitations under the License.
import { Component, Optional, Injector, Input } from '@angular/core';
import { Content, PopoverController } from 'ionic-angular';
import { Content, ModalController } from 'ionic-angular';
import { CoreAppProvider } from '@providers/app';
import { CoreCourseProvider } from '@core/course/providers/course';
import { CoreCourseModuleMainResourceComponent } from '@core/course/classes/main-resource-component';
import { AddonModBookProvider, AddonModBookContentsMap, AddonModBookTocChapter } from '../../providers/book';
import { AddonModBookPrefetchHandler } from '../../providers/prefetch-handler';
import { AddonModBookTocPopoverComponent } from '../../components/toc-popover/toc-popover';
/**
* Component that displays a book.
@ -42,7 +41,7 @@ export class AddonModBookIndexComponent extends CoreCourseModuleMainResourceComp
constructor(injector: Injector, private bookProvider: AddonModBookProvider, private courseProvider: CoreCourseProvider,
private appProvider: CoreAppProvider, private prefetchDelegate: AddonModBookPrefetchHandler,
private popoverCtrl: PopoverController, @Optional() private content: Content) {
private modalCtrl: ModalController, @Optional() private content: Content) {
super(injector);
}
@ -61,15 +60,23 @@ export class AddonModBookIndexComponent extends CoreCourseModuleMainResourceComp
* @param {MouseEvent} event Event.
*/
showToc(event: MouseEvent): void {
const popover = this.popoverCtrl.create(AddonModBookTocPopoverComponent, {
chapters: this.chapters
});
// Create the toc modal.
const modal = this.modalCtrl.create('AddonModBookTocPage', {
chapters: this.chapters,
selected: this.currentChapter
}, { cssClass: 'core-modal-lateral',
showBackdrop: true,
enableBackdropDismiss: true,
enterAnimation: 'core-modal-lateral-transition',
leaveAnimation: 'core-modal-lateral-transition' });
popover.onDidDismiss((chapterId) => {
modal.onDidDismiss((chapterId) => {
if (chapterId) {
this.changeChapter(chapterId);
}
});
popover.present({
modal.present({
ev: event
});
}

View File

@ -1,5 +0,0 @@
<ion-list>
<a ion-item text-wrap *ngFor="let chapter of chapters" (click)="loadChapter(chapter.id)" detail-none>
<p [attr.padding-left]="chapter.level == 1 ? true : null">{{chapter.title}}</p>
</a>
</ion-list>

View File

@ -1,4 +1,5 @@
{
"errorchapter": "Error reading chapter of book.",
"modulenameplural": "Books"
"modulenameplural": "Books",
"toc": "Table of contents"
}

View File

@ -0,0 +1,19 @@
<ion-header>
<ion-navbar core-back-button>
<ion-title>{{ 'addon.mod_book.toc' | translate }}</ion-title>
<ion-buttons end>
<button ion-button icon-only (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
<ion-icon name="close"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
<ion-content>
<nav>
<ion-list>
<a ion-item text-wrap *ngFor="let chapter of chapters" (click)="loadChapter(chapter.id)" [class.core-nav-item-selected]="selected == chapter.id">
<p [attr.padding-left]="chapter.level == 1 ? true : null">{{chapter.title}}</p>
</a>
</ion-list>
</nav>
</ion-content>

View File

@ -0,0 +1,31 @@
// (C) Copyright 2015 Martin Dougiamas
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { TranslateModule } from '@ngx-translate/core';
import { CoreDirectivesModule } from '@directives/directives.module';
import { AddonModBookTocPage } from './toc';
@NgModule({
declarations: [
AddonModBookTocPage,
],
imports: [
CoreDirectivesModule,
IonicPageModule.forChild(AddonModBookTocPage),
TranslateModule.forChild()
],
})
export class AddonModBookTocPageModule {}

View File

@ -13,21 +13,24 @@
// limitations under the License.
import { Component } from '@angular/core';
import { NavParams, ViewController } from 'ionic-angular';
import { IonicPage, NavParams, ViewController } from 'ionic-angular';
import { AddonModBookTocChapter } from '../../providers/book';
/**
* Component to display the TOC of a book.
* Modal to display the TOC of a book.
*/
@IonicPage({ segment: 'addon-mod-book-toc-modal' })
@Component({
selector: 'addon-mod-book-toc-popover',
templateUrl: 'addon-mod-assign-submission-toc-popover.html'
selector: 'page-addon-mod-book-toc',
templateUrl: 'toc.html'
})
export class AddonModBookTocPopoverComponent {
export class AddonModBookTocPage {
chapters: AddonModBookTocChapter[];
selected: number;
constructor(navParams: NavParams, private viewCtrl: ViewController) {
this.chapters = navParams.get('chapters') || [];
this.selected = navParams.get('selected');
}
/**
@ -38,4 +41,11 @@ export class AddonModBookTocPopoverComponent {
loadChapter(id: string): void {
this.viewCtrl.dismiss(id);
}
/**
* Close modal.
*/
closeModal(): void {
this.viewCtrl.dismiss();
}
}

View File

@ -21,7 +21,7 @@
<span *ngIf="!pageInstance.showAll">{{ 'addon.mod_quiz.showall' | translate }}</span>
<span *ngIf="pageInstance.showAll">{{ 'addon.mod_quiz.showeachpage' | translate }}</span>
</a>
<a ion-item text-wrap *ngFor="let question of pageInstance.navigation" class="{{question.stateClass}}" [ngClass]='{"addon-mod_quiz-selected": !pageInstance.showSummary && pageInstance.attempt.currentpage == question.page}' (click)="loadPage(question.page, question.slot)">
<a ion-item text-wrap *ngFor="let question of pageInstance.navigation" class="{{question.stateClass}}" [ngClass]='{"core-nav-item-selected": !pageInstance.showSummary && pageInstance.attempt.currentpage == question.page}' (click)="loadPage(question.page, question.slot)">
<span *ngIf="question.number">{{ 'core.question.questionno' | translate:{$a: question.number} }}</span>
<span *ngIf="!question.number">{{ 'core.question.information' | translate }}</span>
<core-icon item-content *ngIf="!question.number" name="information-circle" color="info"></core-icon>

View File

@ -1,19 +1,4 @@
ion-app.app-root page-addon-mod-quiz-navigation-modal {
.addon-mod_quiz-selected, .item.addon-mod_quiz-selected {
@include border-start(5px, solid, $core-splitview-selected);
font-weight: bold;
&.item-md {
@include padding(null, null, null, $item-md-padding-start - 5px);
}
&.item-ios {
@include padding(null, null, null, $item-ios-padding-start - 5px);
}
&.item-wp {
@include padding(null, null, null, $item-wp-padding-start - 5px);
}
}
.item.core-question-correct,
.item.core-question-incorrect,
.item.core-question-notanswered,

View File

@ -96,7 +96,11 @@ export class AddonModQuizPlayerPage implements OnInit, OnDestroy {
// Create the navigation modal.
this.navigationModal = modalCtrl.create('AddonModQuizNavigationModalPage', {
page: this
}, { cssClass: 'core-modal-lateral' });
}, { cssClass: 'core-modal-lateral',
showBackdrop: true,
enableBackdropDismiss: true,
enterAnimation: 'core-modal-lateral-transition',
leaveAnimation: 'core-modal-lateral-transition' });
}
/**

View File

@ -69,7 +69,11 @@ export class AddonModQuizReviewPage implements OnInit {
this.navigationModal = modalCtrl.create('AddonModQuizNavigationModalPage', {
isReview: true,
page: this
}, { cssClass: 'core-modal-lateral' });
}, { cssClass: 'core-modal-lateral',
showBackdrop: true,
enableBackdropDismiss: true,
enterAnimation: 'core-modal-lateral-transition',
leaveAnimation: 'core-modal-lateral-transition' });
}
/**

View File

@ -20,12 +20,10 @@ import { CoreComponentsModule } from '@components/components.module';
import { CoreDirectivesModule } from '@directives/directives.module';
import { CoreCourseComponentsModule } from '@core/course/components/components.module';
import { AddonModScormIndexComponent } from './index/index';
import { AddonModScormTocPopoverComponent } from './toc-popover/toc-popover';
@NgModule({
declarations: [
AddonModScormIndexComponent,
AddonModScormTocPopoverComponent
AddonModScormIndexComponent
],
imports: [
CommonModule,
@ -38,12 +36,10 @@ import { AddonModScormTocPopoverComponent } from './toc-popover/toc-popover';
providers: [
],
exports: [
AddonModScormIndexComponent,
AddonModScormTocPopoverComponent
AddonModScormIndexComponent
],
entryComponents: [
AddonModScormIndexComponent,
AddonModScormTocPopoverComponent
AddonModScormIndexComponent
]
})
export class AddonModScormComponentsModule {}

View File

@ -1,19 +0,0 @@
<ion-list>
<ion-item text-wrap *ngIf="attemptToContinue">
<p>{{ 'addon.mod_scorm.dataattemptshown' | translate:{number: attemptToContinue} }}</p>
</ion-item>
<ion-item text-center *ngIf="isBrowse">
<p>{{ 'addon.mod_scorm.browsemode' | translate }}</p>
</ion-item>
<ion-item text-center *ngIf="isReview">
<p>{{ 'addon.mod_scorm.reviewmode' | translate }}</p>
</ion-item>
<!-- List of SCOs. -->
<ng-container *ngFor="let sco of toc">
<a *ngIf="sco.isvisible" ion-item text-wrap [ngClass]="['core-padding-' + sco.level]" (click)="loadSco(sco)" [attr.disabled]="!sco.prereq || !sco.launch ? true : null" detail-none>
<img [src]="sco.image.url" [alt]="sco.image.description" />
<span>{{ sco.title }}</span>
</a>
</ng-container>
</ion-list>

View File

@ -47,6 +47,7 @@
"scormstatusnotdownloaded": "This SCORM package is not downloaded. It will be automatically downloaded when you open it.",
"scormstatusoutdated": "This SCORM package has been modified since the last download. It will be automatically downloaded when you open it.",
"suspended": "Suspended",
"toc": "TOC",
"warningofflinedatadeleted": "Some offline data from attempt {{number}} has been discarded because it couldn't be counted as a new attempt.",
"warningsynconlineincomplete": "Some attempts couldn't be synchronised with the site because the last online attempt is not yet finished. Please finish the online attempt first."
}

View File

@ -3,7 +3,7 @@
<ion-title><core-format-text [text]="title"></core-format-text></ion-title>
<ion-buttons end>
<button *ngIf="showToc && !loadingToc && toc && toc.length" ion-button icon-only (click)="openToc($event)">
<button *ngIf="showToc && !loadingToc && toc && toc.length" ion-button icon-only (click)="openToc($event)"[attr.aria-label]="'addon.mod_scorm.toc' | translate" aria-haspopup="true">
<ion-icon name="bookmark"></ion-icon>
</button>
<ion-spinner *ngIf="showToc && loadingToc"></ion-spinner>

View File

@ -13,7 +13,7 @@
// limitations under the License.
import { Component, OnInit, OnDestroy } from '@angular/core';
import { IonicPage, NavParams, PopoverController } from 'ionic-angular';
import { IonicPage, NavParams, ModalController } from 'ionic-angular';
import { CoreEventsProvider } from '@providers/events';
import { CoreSitesProvider } from '@providers/sites';
import { CoreSyncProvider } from '@providers/sync';
@ -24,7 +24,6 @@ import { AddonModScormProvider, AddonModScormAttemptCountResult } from '../../pr
import { AddonModScormHelperProvider } from '../../providers/helper';
import { AddonModScormSyncProvider } from '../../providers/scorm-sync';
import { AddonModScormDataModel12 } from '../../classes/data-model-12';
import { AddonModScormTocPopoverComponent } from '../../components/toc-popover/toc-popover';
/**
* Page that allows playing a SCORM.
@ -65,7 +64,7 @@ export class AddonModScormPlayerPage implements OnInit, OnDestroy {
protected launchPrevObserver: any;
protected goOfflineObserver: any;
constructor(navParams: NavParams, protected popoverCtrl: PopoverController, protected eventsProvider: CoreEventsProvider,
constructor(navParams: NavParams, protected modalCtrl: ModalController, protected eventsProvider: CoreEventsProvider,
protected sitesProvider: CoreSitesProvider, protected syncProvider: CoreSyncProvider,
protected domUtils: CoreDomUtilsProvider, protected timeUtils: CoreTimeUtilsProvider,
protected scormProvider: AddonModScormProvider, protected scormHelper: AddonModScormHelperProvider,
@ -382,20 +381,25 @@ export class AddonModScormPlayerPage implements OnInit, OnDestroy {
* @param {MouseEvent} event Event.
*/
openToc(event: MouseEvent): void {
const popover = this.popoverCtrl.create(AddonModScormTocPopoverComponent, {
const modal = this.modalCtrl.create('AddonModScormTocPage', {
toc: this.toc,
attemptToContinue: this.attemptToContinue,
mode: this.mode
});
mode: this.mode,
selected: this.currentSco && this.currentSco.id
}, { cssClass: 'core-modal-lateral',
showBackdrop: true,
enableBackdropDismiss: true,
enterAnimation: 'core-modal-lateral-transition',
leaveAnimation: 'core-modal-lateral-transition' });
// If the popover sends back a SCO, load it.
popover.onDidDismiss((sco) => {
// If the modal sends back a SCO, load it.
modal.onDidDismiss((sco) => {
if (sco) {
this.loadSco(sco);
}
});
popover.present({
modal.present({
ev: event
});
}

View File

@ -0,0 +1,33 @@
<ion-header>
<ion-navbar core-back-button>
<ion-title>{{ 'addon.mod_scorm.toc' | translate }}</ion-title>
<ion-buttons end>
<button ion-button icon-only (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
<ion-icon name="close"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
<ion-content>
<nav>
<ion-list>
<ion-item text-wrap *ngIf="attemptToContinue">
<p>{{ 'addon.mod_scorm.dataattemptshown' | translate:{number: attemptToContinue} }}</p>
</ion-item>
<ion-item text-center *ngIf="isBrowse">
<p>{{ 'addon.mod_scorm.browsemode' | translate }}</p>
</ion-item>
<ion-item text-center *ngIf="isReview">
<p>{{ 'addon.mod_scorm.reviewmode' | translate }}</p>
</ion-item>
<!-- List of SCOs. -->
<ng-container *ngFor="let sco of toc">
<a *ngIf="sco.isvisible" ion-item text-wrap [ngClass]="'core-padding-' + sco.level" [class.core-nav-item-selected]="selected == sco.id" (click)="loadSco(sco)" [attr.disabled]="!sco.prereq || !sco.launch ? true : null" [attr.detail-none]="!sco.prereq || !sco.launch ? true : null">
<img [src]="sco.image.url" [alt]="sco.image.description" />
<span>{{ sco.title }}</span>
</a>
</ng-container>
</ion-list>
</nav>
</ion-content>

View File

@ -0,0 +1,31 @@
// (C) Copyright 2015 Martin Dougiamas
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { TranslateModule } from '@ngx-translate/core';
import { CoreDirectivesModule } from '@directives/directives.module';
import { AddonModScormTocPage } from './toc';
@NgModule({
declarations: [
AddonModScormTocPage,
],
imports: [
CoreDirectivesModule,
IonicPageModule.forChild(AddonModScormTocPage),
TranslateModule.forChild()
],
})
export class AddonModScormTocPageModule {}

View File

@ -13,27 +13,30 @@
// limitations under the License.
import { Component } from '@angular/core';
import { NavParams, ViewController } from 'ionic-angular';
import { IonicPage, NavParams, ViewController } from 'ionic-angular';
import { AddonModScormProvider } from '../../providers/scorm';
/**
* Component to display the TOC of a SCORM.
* Modal to display the TOC of a SCORM.
*/
@IonicPage({ segment: 'addon-mod-scorm-toc-modal' })
@Component({
selector: 'addon-mod-scorm-toc-popover',
templateUrl: 'addon-mod-scorm-toc-popover.html'
selector: 'page-addon-mod-scorm-toc',
templateUrl: 'toc.html'
})
export class AddonModScormTocPopoverComponent {
export class AddonModScormTocPage {
toc: any[];
isBrowse: boolean;
isReview: boolean;
attemptToContinue: number;
selected: number;
constructor(navParams: NavParams, private viewCtrl: ViewController) {
this.toc = navParams.get('toc') || [];
this.attemptToContinue = navParams.get('attemptToContinue');
const mode = navParams.get('mode');
this.selected = navParams.get('selected');
this.isBrowse = mode === AddonModScormProvider.MODEBROWSE;
this.isReview = mode === AddonModScormProvider.MODEREVIEW;
@ -51,4 +54,11 @@ export class AddonModScormTocPopoverComponent {
this.viewCtrl.dismiss(sco);
}
/**
* Close modal.
*/
closeModal(): void {
this.viewCtrl.dismiss();
}
}

View File

@ -1,15 +1,6 @@
ion-app.app-root page-addon-mod-workshop-phase-info {
.core-workshop-phase-selected {
background-color: $white;
@include border-start(5px, solid, $core-splitview-selected);
&.item-md {
@include padding(null, null, null, $item-md-padding-start - 5px);
}
&.item-ios {
@include padding(null, null, null, $item-ios-padding-start - 5px);
}
&.item-wp {
@include padding(null, null, null, $item-wp-padding-start - 5px);
}
@include core-selected-item($core-splitview-selected);
}
}

View File

@ -31,6 +31,7 @@ import { ScreenOrientation } from '@ionic-native/screen-orientation';
import { MoodleMobileApp } from './app.component';
import { CoreInterceptor } from '@classes/interceptor';
import { CorePageTransition } from '@classes/page-transition';
import { CoreModalLateralTransition } from '@classes/modal-lateral-transition';
import { CoreLoggerProvider } from '@providers/logger';
import { CoreDbProvider } from '@providers/db';
import { CoreAppProvider } from '@providers/app';
@ -323,6 +324,7 @@ export class AppModule {
// Set transition animation.
config.setTransition('core-page-transition', CorePageTransition);
config.setTransition('core-modal-lateral-transition', CoreModalLateralTransition);
// Decorate ion-content.
this.decorateIonContent();

View File

@ -103,6 +103,10 @@ ion-app.app-root {
border: 0;
}
.core-nav-item-selected, .item.core-nav-item-selected {
@include core-selected-item($core-splitview-selected);
}
// Recover borders on items inside cards.
.card.with-borders .core-as-item,
.core-as-item {
@ -745,14 +749,20 @@ ion-app.app-root {
height: 100% !important;
}
@media only screen and (min-height: 600px) and (min-width: 768px) {
.core-modal-lateral .modal-wrapper {
@media only screen and (min-height: 400px) and (min-width: 300px) {
.core-modal-lateral {
.modal-wrapper {
position: absolute;
@include position(0 !important, 0 !important, 0 !important, auto);
display: block;
height: 100% !important;
width: auto;
min-width: 400px;
min-width: 300px;
box-shadow: 0 28px 48px rgba(0, 0, 0, 0.4);
}
ion-backdrop {
visibility: visible;
}
}
}

View File

@ -344,6 +344,7 @@
"addon.mod_assign_submission_onlinetext.pluginname": "Online text submissions",
"addon.mod_book.errorchapter": "Error reading chapter of book.",
"addon.mod_book.modulenameplural": "Books",
"addon.mod_book.toc": "Table of contents",
"addon.mod_chat.beep": "Beep",
"addon.mod_chat.chatreport": "Chat sessions",
"addon.mod_chat.currentusers": "Current users",
@ -752,6 +753,7 @@
"addon.mod_scorm.scormstatusnotdownloaded": "This SCORM package is not downloaded. It will be automatically downloaded when you open it.",
"addon.mod_scorm.scormstatusoutdated": "This SCORM package has been modified since the last download. It will be automatically downloaded when you open it.",
"addon.mod_scorm.suspended": "Suspended",
"addon.mod_scorm.toc": "TOC",
"addon.mod_scorm.warningofflinedatadeleted": "Some offline data from attempt {{number}} has been discarded because it couldn't be counted as a new attempt.",
"addon.mod_scorm.warningsynconlineincomplete": "Some attempts couldn't be synchronised with the site because the last online attempt is not yet finished. Please finish the online attempt first.",
"addon.mod_survey.cannotsubmitsurvey": "Sorry, there was a problem submitting your survey. Please try again.",

View File

@ -0,0 +1,72 @@
// (C) Copyright 2015 Martin Dougiamas
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
import { Animation } from 'ionic-angular/animations/animation';
import { PageTransition } from 'ionic-angular/transitions/page-transition';
/**
* Sliding transition for lateral modals.
*/
export class CoreModalLateralTransition extends PageTransition {
/**
* Animation.
*/
init(): void {
const enteringView = this.enteringView;
const leavingView = this.leavingView;
const plt = this.plt;
const OFF_RIGHT = plt.isRTL ? '-100%' : '100%';
if (enteringView && enteringView.pageRef()) {
const ele = enteringView.pageRef().nativeElement;
const wrapper = new Animation(this.plt, ele.querySelector('.modal-wrapper'));
const backdrop = new Animation(this.plt, ele.querySelector('ion-backdrop'));
wrapper.beforeStyles({ transform: 'translateX(' + OFF_RIGHT + ')', opacity: 0.8 });
wrapper.fromTo('transform', 'translateX(' + OFF_RIGHT + ')', 'translateX(0)');
wrapper.fromTo('opacity', 0.8, 1);
backdrop.fromTo('opacity', 0.01, 0.4);
this
.element(enteringView.pageRef())
.duration(300)
.easing('cubic-bezier(0.36,0.66,0.04,1)')
.add(wrapper)
.add(backdrop);
}
if (leavingView && leavingView.pageRef()) {
const ele = this.leavingView.pageRef().nativeElement;
const wrapper = new Animation(this.plt, ele.querySelector('.modal-wrapper'));
const contentWrapper = new Animation(this.plt, ele.querySelector('.wrapper'));
const backdrop = new Animation(this.plt, ele.querySelector('ion-backdrop'));
wrapper.beforeStyles({ transform: 'translateX(0)', opacity: 1 });
wrapper.fromTo('transform', 'translateX(0)', 'translateX(' + OFF_RIGHT + ')');
wrapper.fromTo('opacity', 1, 0.8);
contentWrapper.fromTo('opacity', 1, 0);
backdrop.fromTo('opacity', 0.4, 0);
this
.element(leavingView.pageRef())
.duration(300)
.easing('cubic-bezier(0.36,0.66,0.04,1)')
.add(contentWrapper)
.add(wrapper)
.add(backdrop);
}
}
}

View File

@ -21,17 +21,7 @@ ion-app.app-root core-split-view {
.split-pane-side .core-split-item-selected {
background-color: $gray-lighter;
@include safe-area-border-start(5px, solid, $core-splitview-selected);
&.item-md {
@include padding(null, null, null, $item-md-padding-start - 5px);
}
&.item-ios {
@include padding(null, null, null, $item-ios-padding-start - 5px);
}
&.item-wp {
@include padding(null, null, null, $item-wp-padding-start - 5px);
}
@include core-selected-item($core-splitview-selected);
}
.item-ios[detail-push] .item-inner,

View File

@ -473,6 +473,20 @@ $core-dd-question-colors: $white, $blue-light, #DCDCDC, #D8BFD8, #87CEFA, #DAA52
}
}
@mixin core-selected-item($selected-color) {
@include border-start(5px, solid, $selected-color);
&.item-md {
@include padding(null, null, null, $item-md-padding-start - 5px);
}
&.item-ios {
@include padding(null, null, null, $item-ios-padding-start - 5px);
}
&.item-wp {
@include padding(null, null, null, $item-wp-padding-start - 5px);
}
}
// Font Awesome
$fa-font-path: $font-path;
@import "font-awesome";