diff --git a/src/addon/mod/book/components/components.module.ts b/src/addon/mod/book/components/components.module.ts index b0ace2f26..54e83ef50 100644 --- a/src/addon/mod/book/components/components.module.ts +++ b/src/addon/mod/book/components/components.module.ts @@ -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 {} diff --git a/src/addon/mod/book/components/index/addon-mod-book-index.html b/src/addon/mod/book/components/index/addon-mod-book-index.html index 51fa95154..5d872fd78 100644 --- a/src/addon/mod/book/components/index/addon-mod-book-index.html +++ b/src/addon/mod/book/components/index/addon-mod-book-index.html @@ -1,6 +1,6 @@ - diff --git a/src/addon/mod/book/components/index/index.ts b/src/addon/mod/book/components/index/index.ts index bcb78e821..908ab8cdd 100644 --- a/src/addon/mod/book/components/index/index.ts +++ b/src/addon/mod/book/components/index/index.ts @@ -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,19 @@ 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' }); + + modal.onDidDismiss((chapterId) => { + if (chapterId) { + this.changeChapter(chapterId); + } }); - popover.onDidDismiss((chapterId) => { - this.changeChapter(chapterId); - }); - - popover.present({ + modal.present({ ev: event }); } diff --git a/src/addon/mod/book/components/toc-popover/addon-mod-assign-submission-toc-popover.html b/src/addon/mod/book/components/toc-popover/addon-mod-assign-submission-toc-popover.html deleted file mode 100644 index 6d3dca6f0..000000000 --- a/src/addon/mod/book/components/toc-popover/addon-mod-assign-submission-toc-popover.html +++ /dev/null @@ -1,5 +0,0 @@ - - -

{{chapter.title}}

- - diff --git a/src/addon/mod/book/lang/en.json b/src/addon/mod/book/lang/en.json index bf58bf921..7d1140fe4 100644 --- a/src/addon/mod/book/lang/en.json +++ b/src/addon/mod/book/lang/en.json @@ -1,4 +1,5 @@ { "errorchapter": "Error reading chapter of book.", - "modulenameplural": "Books" + "modulenameplural": "Books", + "toc": "Table of contents" } \ No newline at end of file diff --git a/src/addon/mod/book/pages/toc/toc.html b/src/addon/mod/book/pages/toc/toc.html new file mode 100644 index 000000000..30e22bea0 --- /dev/null +++ b/src/addon/mod/book/pages/toc/toc.html @@ -0,0 +1,19 @@ + + + {{ 'addon.mod_book.toc' | translate }} + + + + + + + + diff --git a/src/addon/mod/book/pages/toc/toc.module.ts b/src/addon/mod/book/pages/toc/toc.module.ts new file mode 100644 index 000000000..88e436a25 --- /dev/null +++ b/src/addon/mod/book/pages/toc/toc.module.ts @@ -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 {} diff --git a/src/addon/mod/book/components/toc-popover/toc-popover.ts b/src/addon/mod/book/pages/toc/toc.ts similarity index 71% rename from src/addon/mod/book/components/toc-popover/toc-popover.ts rename to src/addon/mod/book/pages/toc/toc.ts index 416044a3f..8048eacb8 100644 --- a/src/addon/mod/book/components/toc-popover/toc-popover.ts +++ b/src/addon/mod/book/pages/toc/toc.ts @@ -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(); + } } diff --git a/src/app/app.scss b/src/app/app.scss index 679a902f5..f9c07d4f9 100644 --- a/src/app/app.scss +++ b/src/app/app.scss @@ -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,15 +749,21 @@ ion-app.app-root { height: 100% !important; } - @media only screen and (min-height: 600px) and (min-width: 768px) { - .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; - } + @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: 300px; + box-shadow: 0 28px 48px rgba(0, 0, 0, 0.4); + } + ion-backdrop { + visibility: visible; + } + } } .has-fab .scroll-content{ diff --git a/src/assets/lang/en.json b/src/assets/lang/en.json index c883b3e34..a6e3043e2 100644 --- a/src/assets/lang/en.json +++ b/src/assets/lang/en.json @@ -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", diff --git a/src/theme/variables.scss b/src/theme/variables.scss index da912fa66..80a7b6d61 100644 --- a/src/theme/variables.scss +++ b/src/theme/variables.scss @@ -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";