MOBILE-2567 book: Use core-navigation arrows in book

main
Pau Ferrer Ocaña 2018-09-03 10:29:37 +02:00
parent 16e565626e
commit 854c52c9bb
5 changed files with 12 additions and 61 deletions

View File

@ -21,13 +21,11 @@ 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';
import { AddonModBookNavigationArrowsComponent } from './navigation-arrows/navigation-arrows';
@NgModule({
declarations: [
AddonModBookIndexComponent,
AddonModBookTocPopoverComponent,
AddonModBookNavigationArrowsComponent
AddonModBookTocPopoverComponent
],
imports: [
CommonModule,
@ -41,8 +39,7 @@ import { AddonModBookNavigationArrowsComponent } from './navigation-arrows/navig
],
exports: [
AddonModBookIndexComponent,
AddonModBookTocPopoverComponent,
AddonModBookNavigationArrowsComponent
AddonModBookTocPopoverComponent
],
entryComponents: [
AddonModBookIndexComponent,

View File

@ -18,9 +18,9 @@
<core-course-module-description [description]="description" [component]="component" [componentId]="componentId"></core-course-module-description>
<div padding>
<addon-mod-book-navigation-arrows [previous]="previousChapter" [next]="nextChapter" (action)="changeChapter($event)"></addon-mod-book-navigation-arrows>
<core-navigation-bar [previous]="previousChapter > 0 && previousChapter" [next]="nextChapter > 0 && nextChapter" (action)="changeChapter($event)"></core-navigation-bar>
<core-format-text [component]="component" [componentId]="componentId" [text]="chapterContent"></core-format-text>
<addon-mod-book-navigation-arrows [previous]="previousChapter" [next]="nextChapter" (action)="changeChapter($event)"></addon-mod-book-navigation-arrows>
<core-navigation-bar [previous]="previousChapter > 0 && previousChapter" [next]="nextChapter > 0 && nextChapter" (action)="changeChapter($event)"></core-navigation-bar>
</div>
</core-loading>

View File

@ -1,14 +0,0 @@
<ion-grid>
<ion-row>
<ion-col>
<a ion-button icon-only clear *ngIf="previous > 0" (click)="action.emit(previous)" title="{{ 'core.previous' | translate }}">
<ion-icon name="arrow-back" md="ios-arrow-back"></ion-icon>
</a>
</ion-col>
<ion-col text-right>
<a ion-button icon-only clear *ngIf="next > 0" (click)="action.emit(next)" title="{{ 'core.next' | translate }}">
<ion-icon name="arrow-forward" md="ios-arrow-forward"></ion-icon>
</a>
</ion-col>
</ion-row>
</ion-grid>

View File

@ -1,32 +0,0 @@
// (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 { Component, Input, Output, EventEmitter } from '@angular/core';
/**
* Component to navigate to previous or next chapter in a book.
*/
@Component({
selector: 'addon-mod-book-navigation-arrows',
templateUrl: 'addon-mod-assign-submission-navigation-arrows.html'
})
export class AddonModBookNavigationArrowsComponent {
@Input() previous?: string; // Previous chapter ID.
@Input() next?: string; // Next chapter ID.
@Output() action?: EventEmitter<string>; // Will emit an event when the item clicked.
constructor() {
this.action = new EventEmitter();
}
}

View File

@ -1,18 +1,18 @@
<ion-grid no-padding *ngIf="previous || info || next">
<ion-grid no-padding *ngIf="previous || info || next">
<ion-row>
<ion-col text-left>
<a ion-button icon-only clear color="info" *ngIf="previous" (click)="action.emit(previous)" [title]="'core.previous' | translate">
<ion-icon name="arrow-dropleft-circle"></ion-icon>
<ion-col text-start>
<a ion-button icon-only clear *ngIf="previous" (click)="action.emit(previous)" [title]="'core.previous' | translate">
<ion-icon name="arrow-back" md="ios-arrow-back"></ion-icon>
</a>
</ion-col>
<ion-col text-center>
<a ion-button icon-only clear color="info" *ngIf="info" (click)="showInfo()" [title]="title">
<a ion-button icon-only clear *ngIf="info" (click)="showInfo()" [title]="title">
<ion-icon name="information-circle"></ion-icon>
</a>
</ion-col>
<ion-col text-right>
<a ion-button icon-only clear color="info" *ngIf="next" (click)="action.emit(next)" [title]="'core.next' | translate">
<ion-icon name="arrow-dropright-circle"></ion-icon>
<ion-col text-end>
<a ion-button icon-only clear *ngIf="next" (click)="action.emit(next)" [title]="'core.next' | translate">
<ion-icon name="arrow-forward" md="ios-arrow-forward"></ion-icon>
</a>
</ion-col>
</ion-row>