From 294c94b934643761448d6b66f5513a97042322a3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Thu, 24 Feb 2022 09:55:40 +0100
Subject: [PATCH] MOBILE-3996 navbar: Update style on navigation bar

---
 .../mod/book/pages/contents/contents.html     |  5 ++--
 .../mod/book/pages/contents/contents.ts       |  2 --
 .../navigation-bar/core-navigation-bar.html   | 30 +++++++------------
 .../navigation-bar/navigation-bar.scss        | 25 +++++++++++-----
 .../navigation-bar/navigation-bar.ts          | 22 ++++----------
 .../progress-bar/core-progress-bar.html       |  2 +-
 .../components/progress-bar/progress-bar.ts   |  5 ++--
 .../core-course-module-navigation.html        |  4 +--
 .../module-navigation/module-navigation.scss  |  8 ++---
 .../module-navigation/module-navigation.ts    |  4 +--
 src/theme/theme.base.scss                     |  4 +--
 src/theme/theme.dark.scss                     |  2 ++
 src/theme/theme.light.scss                    |  4 +--
 13 files changed, 49 insertions(+), 68 deletions(-)

diff --git a/src/addons/mod/book/pages/contents/contents.html b/src/addons/mod/book/pages/contents/contents.html
index 6e6334aab..9cb91f696 100644
--- a/src/addons/mod/book/pages/contents/contents.html
+++ b/src/addons/mod/book/pages/contents/contents.html
@@ -31,9 +31,8 @@
                 </ion-item>
             </ion-card>
 
-            <core-navigation-bar *ngIf="displayNavBar" [items]="navigationItems" [showTitles]="displayTitlesInNavBar"
-                previousTranslate="addon.mod_book.navprevtitle" nextTranslate="addon.mod_book.navnexttitle"
-                (action)="changeChapter($event.id)">
+            <core-navigation-bar *ngIf="displayNavBar" [items]="navigationItems" previousTranslate="addon.mod_book.navprevtitle"
+                nextTranslate="addon.mod_book.navnexttitle" (action)="changeChapter($event.id)">
             </core-navigation-bar>
 
             <core-swipe-slides [manager]="manager" [options]="slidesOpts">
diff --git a/src/addons/mod/book/pages/contents/contents.ts b/src/addons/mod/book/pages/contents/contents.ts
index 36af98196..21436d557 100644
--- a/src/addons/mod/book/pages/contents/contents.ts
+++ b/src/addons/mod/book/pages/contents/contents.ts
@@ -62,7 +62,6 @@ export class AddonModBookContentsPage implements OnInit, OnDestroy {
     warning = '';
     displayNavBar = true;
     navigationItems: CoreNavigationBarItem<AddonModBookTocChapter>[] = [];
-    displayTitlesInNavBar = false;
     slidesOpts: CoreSwipeSlidesOptions = {
         autoHeight: true,
         scrollOnChange: 'top',
@@ -135,7 +134,6 @@ export class AddonModBookContentsPage implements OnInit, OnDestroy {
             const downloadResult = await this.downloadResourceIfNeeded(module, refresh);
 
             this.displayNavBar = book.navstyle != AddonModBookNavStyle.TOC_ONLY;
-            this.displayTitlesInNavBar = book.navstyle == AddonModBookNavStyle.TEXT;
             this.title = book.name;
 
             // Get contents. No need to refresh, it has been done in downloadResourceIfNeeded.
diff --git a/src/core/components/navigation-bar/core-navigation-bar.html b/src/core/components/navigation-bar/core-navigation-bar.html
index 3f5b6df49..087ffbdf9 100644
--- a/src/core/components/navigation-bar/core-navigation-bar.html
+++ b/src/core/components/navigation-bar/core-navigation-bar.html
@@ -1,27 +1,17 @@
-<ion-row class="ion-justify-content-between ion-align-items-center ion-no-padding"
-    *ngIf="previousIndex >= 0 || nextIndex >= 0 || items.length > 1">
-    <ion-col class="ion-text-start ion-padding-end" [size]="showTitles ? 4 : 3">
-        <ion-button *ngIf="previousIndex >=0" class="core-navigation-bar-arrow" fill="clear" [attr.aria-label]="previousTitle"
+<ion-row class="ion-justify-content-between ion-align-items-center ion-no-padding ion-wrap" *ngIf="items.length > 1">
+    <ion-col class="ion-text-start ion-no-padding core-navigation-arrow" size="auto">
+        <ion-button [disabled]="previousIndex < 0" fill="clear" color="dark" [attr.aria-label]="previousTitle"
             (click)="navigate(previousIndex)">
-            <ion-icon name="fas-arrow-left" [slot]="showTitles ? 'start' : 'icon-only'" aria-hidden="true"></ion-icon>
-            <core-format-text *ngIf="showTitles" [text]="previousTitle" [component]="component" [componentId]="componentId"
-                [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId" aria-hidden="true">
-            </core-format-text>
+            <ion-icon name="fas-chevron-left" slot="icon-only" aria-hidden="true"></ion-icon>
         </ion-button>
     </ion-col>
-    <ion-col class="ion-text-center" [size]="showTitles ? 4 : 6">
-        <ion-range min="0" [max]="items.length -1" debounce="500" snaps="true" (ionChange)="navigateOnRange($event.target)"
-            [value]="currentIndex">
-            <p slot="end">{{currentIndex + 1}} / {{items.length}}</p>
-        </ion-range>
+    <ion-col class="ion-text-center">
+        <core-progress-bar [progress]="progress" [text]="progressText" *ngIf="currentIndex >= 0">
+        </core-progress-bar>
     </ion-col>
-    <ion-col class="ion-text-end ion-padding-start" [size]="showTitles ? 4 : 3">
-        <ion-button fill="clear" *ngIf="nextIndex >= 0" class="core-navigation-bar-arrow" [attr.aria-label]="nextTitle"
-            (click)="navigate(nextIndex)">
-            <core-format-text *ngIf="showTitles" [text]="nextTitle" [component]="component" [componentId]="componentId"
-                [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId" aria-hidden="true">
-            </core-format-text>
-            <ion-icon name="fas-arrow-right" [slot]="showTitles ? 'end' : 'icon-only'" aria-hidden="true"></ion-icon>
+    <ion-col class="ion-text-end ion-no-padding core-navigation-arrow" size="auto">
+        <ion-button [disabled]="nextIndex < 0" fill="clear" color="dark" [attr.aria-label]="nextTitle" (click)="navigate(nextIndex)">
+            <ion-icon name="fas-chevron-right" slot="icon-only" aria-hidden="true"></ion-icon>
         </ion-button>
     </ion-col>
 </ion-row>
diff --git a/src/core/components/navigation-bar/navigation-bar.scss b/src/core/components/navigation-bar/navigation-bar.scss
index b79c274dd..a007f12b3 100644
--- a/src/core/components/navigation-bar/navigation-bar.scss
+++ b/src/core/components/navigation-bar/navigation-bar.scss
@@ -1,15 +1,24 @@
-:host {
-    --background: var(--core-course-module-navigation-background);
+@import "~theme/globals";
 
+:host {
+    --height: var(--core-navigation-height, var(--core-navigation-max-height));
+    --background: var(--core-navigation-background);
+    --button-vertical-margin: 2px;
+
+    height: var(--height);
     width: 100%;
     background-color: var(--background);
     display: block;
+    bottom: 0;
+    z-index: 3;
+    border-top: 1px solid var(--stroke);
 
-    .core-navigation-bar-arrow {
-        text-transform: none;
-        max-width: 100%;
-        ion-icon {
-            flex-shrink: 0;
-        }
+    @include core-transition(all, 200ms);
+
+    ion-button,
+    ::ng-deep ion-button {
+        margin-top: var(--button-vertical-margin);
+        margin-bottom: var(--button-vertical-margin);
     }
+
 }
diff --git a/src/core/components/navigation-bar/navigation-bar.ts b/src/core/components/navigation-bar/navigation-bar.ts
index 92681ea06..4f1f76b80 100644
--- a/src/core/components/navigation-bar/navigation-bar.ts
+++ b/src/core/components/navigation-bar/navigation-bar.ts
@@ -32,7 +32,6 @@ import { Translate } from '@singletons';
 export class CoreNavigationBarComponent implements OnChanges {
 
     @Input() items: CoreNavigationBarItem[] = []; // List of items.
-    @Input() showTitles = false; // Display titles on buttons.
     @Input() previousTranslate = 'core.previous'; // Previous translatable text, can admit $a variable.
     @Input() nextTranslate = 'core.next'; // Next translatable text, can admit $a variable.
     @Input() component?: string; // Component the bar belongs to.
@@ -46,6 +45,8 @@ export class CoreNavigationBarComponent implements OnChanges {
     previousIndex = -1; // Previous item index. If -1, the previous arrow won't be shown.
     nextIndex = -1; // Next item index. If -1, the next arrow won't be shown.
     currentIndex = 0;
+    progress = 0;
+    progressText = '';
 
     // Function to call when arrow is clicked. Will receive as a param the item to load.
     @Output() action: EventEmitter<unknown> = new EventEmitter<unknown>();
@@ -63,6 +64,9 @@ export class CoreNavigationBarComponent implements OnChanges {
             return;
         }
 
+        this.progress = ((this.currentIndex + 1) / this.items.length) * 100;
+        this.progressText = `${this.currentIndex + 1} / ${this.items.length}`;
+
         this.nextIndex = this.items[this.currentIndex + 1]?.enabled ? this.currentIndex + 1 : -1;
         if (this.nextIndex >= 0) {
             this.nextTitle = Translate.instant(this.nextTranslate, { $a: this.items[this.nextIndex].title || '' });
@@ -88,22 +92,6 @@ export class CoreNavigationBarComponent implements OnChanges {
         this.action.emit(this.items[itemIndex].item);
     }
 
-    /**
-     * Navigate to an item with the range component.
-     *
-     * @param target: Element changed.
-     */
-    navigateOnRange(target: HTMLIonRangeElement): void {
-        const selectedIndex = target.value as number; // Single value, use number.
-        if (!this.items[selectedIndex].enabled) {
-            target.value = this.currentIndex;
-
-            return;
-        }
-
-        this.navigate(selectedIndex);
-    }
-
 }
 
 export type CoreNavigationBarItem<T = unknown> = {
diff --git a/src/core/components/progress-bar/core-progress-bar.html b/src/core/components/progress-bar/core-progress-bar.html
index dd3335981..dc7dc744e 100644
--- a/src/core/components/progress-bar/core-progress-bar.html
+++ b/src/core/components/progress-bar/core-progress-bar.html
@@ -4,7 +4,7 @@
     </progress>
     <div class="core-progress-text">
         <span class="sr-only" *ngIf="a11yText">{{ a11yText | translate }}</span>
-        {{ 'core.percentagenumber' | translate: {$a: text} }}
+        {{ text }}
     </div>
 </ng-container>
 
diff --git a/src/core/components/progress-bar/progress-bar.ts b/src/core/components/progress-bar/progress-bar.ts
index 78d74f287..357d948e5 100644
--- a/src/core/components/progress-bar/progress-bar.ts
+++ b/src/core/components/progress-bar/progress-bar.ts
@@ -86,7 +86,7 @@ export class CoreProgressBarComponent implements OnInit, OnChanges {
                 this.progress = Math.floor(this.progress);
 
                 if (!this.textSupplied) {
-                    this.text = String(this.progress);
+                    this.text = Translate.instant('core.percentagenumber', { $a: this.progress });
                 }
 
                 this.width = DomSanitizer.bypassSecurityTrustStyle(this.progress + '%');
@@ -94,8 +94,7 @@ export class CoreProgressBarComponent implements OnInit, OnChanges {
         }
 
         if (changes.text || changes.progress || changes.a11yText) {
-            this.progressBarValueText = (this.a11yText ? Translate.instant(this.a11yText) + ' ' : '') +
-                Translate.instant('core.percentagenumber', { $a: this.text });
+            this.progressBarValueText = (this.a11yText ? Translate.instant(this.a11yText) + ' ' : '') + this.text;
         }
     }
 
diff --git a/src/core/features/course/components/module-navigation/core-course-module-navigation.html b/src/core/features/course/components/module-navigation/core-course-module-navigation.html
index 203fc8f2a..3beaf4af2 100644
--- a/src/core/features/course/components/module-navigation/core-course-module-navigation.html
+++ b/src/core/features/course/components/module-navigation/core-course-module-navigation.html
@@ -1,7 +1,7 @@
 <core-loading [hideUntil]="loaded" [fullscreen]="false">
     <ion-row class="ion-justify-content-between ion-align-items-center ion-no-padding ion-wrap" *ngIf="previousModule || nextModule">
         <ion-col size="auto" class="ion-no-padding core-course-module-navigation-arrow">
-            <ion-button fill="clear" class="core-course-previous-module" *ngIf="previousModule" (click)="goToActivity(false)"
+            <ion-button fill="clear" class="core-course-previous-module" [disabled]="!previousModule" (click)="goToActivity(false)"
                 [attr.aria-label]="'core.course.gotopreviousactivity' | translate">
                 <ion-icon name="fas-arrow-left" slot="icon-only" aria-hidden="true"></ion-icon>
             </ion-button>
@@ -14,7 +14,7 @@
             </core-course-module-completion>
         </ion-col>
         <ion-col size="auto" class="ion-no-padding core-course-module-navigation-arrow">
-            <ion-button fill="clear" class="core-course-next-module" *ngIf="nextModule" (click)="goToActivity(true)"
+            <ion-button fill="clear" class="core-course-next-module" [disabled]="!nextModule" (click)="goToActivity(true)"
                 [attr.aria-label]="'core.course.gotonextactivity' | translate">
                 <ion-icon name="fas-arrow-right" slot="icon-only" aria-hidden="true"></ion-icon>
             </ion-button>
diff --git a/src/core/features/course/components/module-navigation/module-navigation.scss b/src/core/features/course/components/module-navigation/module-navigation.scss
index 767ea4da6..48713703f 100644
--- a/src/core/features/course/components/module-navigation/module-navigation.scss
+++ b/src/core/features/course/components/module-navigation/module-navigation.scss
@@ -1,8 +1,8 @@
 @import "~theme/globals";
 
 :host {
-    --height: var(--core-course-module-navigation-height, var(--core-course-module-navigation-max-height));
-    --background: var(--core-course-module-navigation-background);
+    --height: var(--core-navigation-height, var(--core-navigation-max-height));
+    --background: var(--core-navigation-background);
     --button-vertical-margin: 2px;
 
     height: var(--height);
@@ -25,10 +25,6 @@
         margin-top: var(--button-vertical-margin);
         margin-bottom: var(--button-vertical-margin);
     }
-
-    .core-course-module-navigation-arrow {
-        min-width: 48px;
-    }
 }
 
 :host-context(.core-iframe-fullscreen) {
diff --git a/src/core/features/course/components/module-navigation/module-navigation.ts b/src/core/features/course/components/module-navigation/module-navigation.ts
index 3a566c701..5b6a4062f 100644
--- a/src/core/features/course/components/module-navigation/module-navigation.ts
+++ b/src/core/features/course/components/module-navigation/module-navigation.ts
@@ -128,7 +128,7 @@ export class CoreCourseModuleNavigationComponent implements OnInit, OnDestroy {
             return;
         }
 
-        this.content.classList.add('has-core-course-module-navigation');
+        this.content.classList.add('has-core-navigation');
 
         // Move element to the nearest ion-content if it's not the parent.
         if (this.element.parentElement?.nodeName != 'ION-CONTENT') {
@@ -347,7 +347,7 @@ export class CoreCourseModuleNavigationComponent implements OnInit, OnDestroy {
         }
 
         this.element.style.opacity = height <= 0 ? '0' : '1';
-        this.content?.style.setProperty('--core-course-module-navigation-height', height + 'px');
+        this.content?.style.setProperty('--core-navigation-height', height + 'px');
         this.previousHeight = height;
 
         if (height > 0 && height < this.initialHeight) {
diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss
index 461393019..e2fbd0a46 100644
--- a/src/theme/theme.base.scss
+++ b/src/theme/theme.base.scss
@@ -1124,8 +1124,8 @@ ion-fab[core-fab] {
     }
 }
 
-ion-content.has-core-course-module-navigation ion-fab {
-    bottom: calc(var(--core-course-module-navigation-height, 0px) + 10px);
+ion-content.has-core-navigation ion-fab {
+    bottom: calc(var(--core-navigation-height, 0px) + 10px);
     @include core-transition(all, 200ms);
 }
 
diff --git a/src/theme/theme.dark.scss b/src/theme/theme.dark.scss
index 6f0743f7c..b5be2494e 100644
--- a/src/theme/theme.dark.scss
+++ b/src/theme/theme.dark.scss
@@ -129,6 +129,8 @@
     --core-send-message-input-background: var(--gray-900);
     --core-send-message-input-color: var(--white);
 
+    --core-navigation-background: var(--contrast-background);
+
     --addon-messages-message-bg: var(--gray-800);
     --addon-messages-message-activated-bg: var(--gray-700);
     --addon-messages-message-note-text: var(--subdued-text-color);
diff --git a/src/theme/theme.light.scss b/src/theme/theme.light.scss
index 32b099920..58a0cc3a5 100644
--- a/src/theme/theme.light.scss
+++ b/src/theme/theme.light.scss
@@ -310,8 +310,8 @@
     --core-courseimage-on-course-size: 72px;
     --core-courseimage-radius: var(--medium-radius);
 
-    --core-course-module-navigation-max-height: 48px;
-    --core-course-module-navigation-background: var(--contrast-background);
+    --core-navigation-max-height: 48px;
+    --core-navigation-background: var(--contrast-background);
 
     --core-user-menu-site-logo-max-height: 32px;