MOBILE-2911 book: Move navigation to lateral

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 {}

src/addon/mod/book/components/index/addon-mod-book-index.html

@@ -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>

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
         });
     }

src/addon/mod/book/components/toc-popover/addon-mod-assign-submission-toc-popover.html

@@ -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>

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"
 }

src/addon/mod/book/pages/toc/toc.html

@@ -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>

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 {}

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();
+    }
 }

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{

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",

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";