From 434a2a90f201dbe1afefcf651d7f6475b8157705 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Thu, 21 Oct 2021 15:06:45 +0200
Subject: [PATCH] MOBILE-3807 core: Add user menu button to all level 1 pages

---
 src/addons/blog/blog-lazy.module.ts           |  2 ++
 src/addons/blog/pages/entries/entries.html    |  4 +++-
 src/addons/calendar/pages/index/index.html    |  1 +
 .../calendar/pages/index/index.module.ts      |  2 ++
 .../pages/discussions-35/discussions.html     |  1 +
 .../discussions-35/discussions.module.ts      |  2 ++
 .../group-conversations.html                  |  1 +
 .../group-conversations.module.ts             |  2 ++
 src/addons/notifications/pages/list/list.html |  3 +++
 .../notifications/pages/list/list.module.ts   |  2 ++
 .../navbar-buttons/navbar-buttons.ts          | 12 +++++++---
 .../components/user-avatar/user-avatar.scss   |  8 ++++++-
 .../courses/pages/dashboard/dashboard.html    |  2 +-
 .../features/courses/pages/list/list.html     | 22 +++++++++----------
 .../courses/pages/list/list.module.ts         |  2 ++
 .../features/mainmenu/pages/home/home.html    |  1 +
 .../mainmenu/pages/home/home.module.ts        |  2 ++
 .../features/sitehome/pages/index/index.html  |  2 +-
 .../features/tag/pages/search/search.html     |  3 +++
 .../tag/pages/search/search.page.module.ts    |  2 ++
 src/theme/theme.base.scss                     |  3 ++-
 21 files changed, 60 insertions(+), 19 deletions(-)

diff --git a/src/addons/blog/blog-lazy.module.ts b/src/addons/blog/blog-lazy.module.ts
index 5fab11220..2bd801405 100644
--- a/src/addons/blog/blog-lazy.module.ts
+++ b/src/addons/blog/blog-lazy.module.ts
@@ -22,6 +22,7 @@ import { CoreCommentsComponentsModule } from '@features/comments/components/comp
 import { CoreTagComponentsModule } from '@features/tag/components/components.module';
 import { buildTabMainRoutes } from '@features/mainmenu/mainmenu-tab-routing.module';
 import { AddonBlogMainMenuHandlerService } from './services/handlers/mainmenu';
+import { CoreMainMenuComponentsModule } from '@features/mainmenu/components/components.module';
 
 function buildRoutes(injector: Injector): Routes {
     return [
@@ -39,6 +40,7 @@ function buildRoutes(injector: Injector): Routes {
         CoreSharedModule,
         CoreCommentsComponentsModule,
         CoreTagComponentsModule,
+        CoreMainMenuComponentsModule,
     ],
     exports: [RouterModule],
     providers: [
diff --git a/src/addons/blog/pages/entries/entries.html b/src/addons/blog/pages/entries/entries.html
index 6dd13b87c..60d027fcb 100644
--- a/src/addons/blog/pages/entries/entries.html
+++ b/src/addons/blog/pages/entries/entries.html
@@ -4,7 +4,9 @@
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
         <h1>{{ title | translate }}</h1>
-        <ion-buttons slot="end"></ion-buttons>
+        <ion-buttons slot="end">
+            <core-user-menu-button></core-user-menu-button>
+        </ion-buttons>
     </ion-toolbar>
 </ion-header>
 <ion-content>
diff --git a/src/addons/calendar/pages/index/index.html b/src/addons/calendar/pages/index/index.html
index 1533cc434..b67f85700 100644
--- a/src/addons/calendar/pages/index/index.html
+++ b/src/addons/calendar/pages/index/index.html
@@ -22,6 +22,7 @@
                 [content]="'core.settings.synchronizenow' | translate" (action)="doRefresh(undefined, $event, true)"
                 [iconAction]="syncIcon" [closeOnClick]="false"></core-context-menu-item>
             </core-context-menu>
+            <core-user-menu-button></core-user-menu-button>
         </ion-buttons>
     </ion-toolbar>
 </ion-header>
diff --git a/src/addons/calendar/pages/index/index.module.ts b/src/addons/calendar/pages/index/index.module.ts
index be80e63e6..0ecbc7b6e 100644
--- a/src/addons/calendar/pages/index/index.module.ts
+++ b/src/addons/calendar/pages/index/index.module.ts
@@ -19,6 +19,7 @@ import { CoreSharedModule } from '@/core/shared.module';
 import { AddonCalendarComponentsModule } from '../../components/components.module';
 
 import { AddonCalendarIndexPage } from './index.page';
+import { CoreMainMenuComponentsModule } from '@features/mainmenu/components/components.module';
 
 const routes: Routes = [
     {
@@ -32,6 +33,7 @@ const routes: Routes = [
         RouterModule.forChild(routes),
         CoreSharedModule,
         AddonCalendarComponentsModule,
+        CoreMainMenuComponentsModule,
     ],
     declarations: [
         AddonCalendarIndexPage,
diff --git a/src/addons/messages/pages/discussions-35/discussions.html b/src/addons/messages/pages/discussions-35/discussions.html
index 5c0b2b5e3..8824fe578 100644
--- a/src/addons/messages/pages/discussions-35/discussions.html
+++ b/src/addons/messages/pages/discussions-35/discussions.html
@@ -5,6 +5,7 @@
         </ion-buttons>
         <h1>{{ 'addon.messages.messages' | translate }}</h1>
         <ion-buttons slot="end">
+            <core-user-menu-button></core-user-menu-button>
         </ion-buttons>
     </ion-toolbar>
 </ion-header>
diff --git a/src/addons/messages/pages/discussions-35/discussions.module.ts b/src/addons/messages/pages/discussions-35/discussions.module.ts
index 15ec2604e..f26263d62 100644
--- a/src/addons/messages/pages/discussions-35/discussions.module.ts
+++ b/src/addons/messages/pages/discussions-35/discussions.module.ts
@@ -23,6 +23,7 @@ import { CoreSearchComponentsModule } from '@features/search/components/componen
 
 import { AddonMessagesDiscussions35Page } from './discussions.page';
 import { AddonMessagesMainMenuHandlerService } from '@addons/messages/services/handlers/mainmenu';
+import { CoreMainMenuComponentsModule } from '@features/mainmenu/components/components.module';
 
 const mobileRoutes: Routes = [
     {
@@ -58,6 +59,7 @@ const routes: Routes = [
         RouterModule.forChild(routes),
         CoreSharedModule,
         CoreSearchComponentsModule,
+        CoreMainMenuComponentsModule,
     ],
     declarations: [
         AddonMessagesDiscussions35Page,
diff --git a/src/addons/messages/pages/group-conversations/group-conversations.html b/src/addons/messages/pages/group-conversations/group-conversations.html
index 7d02aa119..d55475d6c 100644
--- a/src/addons/messages/pages/group-conversations/group-conversations.html
+++ b/src/addons/messages/pages/group-conversations/group-conversations.html
@@ -11,6 +11,7 @@
             <ion-button (click)="gotoSettings()" [attr.aria-label]="'addon.messages.messagepreferences' | translate">
                 <ion-icon name="fas-cog" slot="icon-only" aria-hidden="true"></ion-icon>
             </ion-button>
+            <core-user-menu-button></core-user-menu-button>
         </ion-buttons>
     </ion-toolbar>
 </ion-header>
diff --git a/src/addons/messages/pages/group-conversations/group-conversations.module.ts b/src/addons/messages/pages/group-conversations/group-conversations.module.ts
index a4390583e..8fbcc9bae 100644
--- a/src/addons/messages/pages/group-conversations/group-conversations.module.ts
+++ b/src/addons/messages/pages/group-conversations/group-conversations.module.ts
@@ -22,6 +22,7 @@ import { CoreSharedModule } from '@/core/shared.module';
 
 import { AddonMessagesGroupConversationsPage } from './group-conversations.page';
 import { AddonMessagesMainMenuHandlerService } from '@addons/messages/services/handlers/mainmenu';
+import { CoreMainMenuComponentsModule } from '@features/mainmenu/components/components.module';
 
 const mobileRoutes: Routes = [
     {
@@ -56,6 +57,7 @@ const routes: Routes = [
     imports: [
         RouterModule.forChild(routes),
         CoreSharedModule,
+        CoreMainMenuComponentsModule,
     ],
     declarations: [
         AddonMessagesGroupConversationsPage,
diff --git a/src/addons/notifications/pages/list/list.html b/src/addons/notifications/pages/list/list.html
index aa11a1300..2863ef416 100644
--- a/src/addons/notifications/pages/list/list.html
+++ b/src/addons/notifications/pages/list/list.html
@@ -4,6 +4,9 @@
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
         <h1>{{ 'addon.notifications.notifications' | translate }}</h1>
+        <ion-buttons slot="end">
+            <core-user-menu-button></core-user-menu-button>
+        </ion-buttons>
     </ion-toolbar>
 </ion-header>
 <ion-content>
diff --git a/src/addons/notifications/pages/list/list.module.ts b/src/addons/notifications/pages/list/list.module.ts
index 5a4f6144d..b592079e7 100644
--- a/src/addons/notifications/pages/list/list.module.ts
+++ b/src/addons/notifications/pages/list/list.module.ts
@@ -18,6 +18,7 @@ import { RouterModule, Routes } from '@angular/router';
 import { CoreSharedModule } from '@/core/shared.module';
 import { AddonNotificationsComponentsModule } from '../../components/components.module';
 import { AddonNotificationsListPage } from './list';
+import { CoreMainMenuComponentsModule } from '@features/mainmenu/components/components.module';
 
 const routes: Routes = [
     {
@@ -31,6 +32,7 @@ const routes: Routes = [
         RouterModule.forChild(routes),
         CoreSharedModule,
         AddonNotificationsComponentsModule,
+        CoreMainMenuComponentsModule,
     ],
     declarations: [
         AddonNotificationsListPage,
diff --git a/src/core/components/navbar-buttons/navbar-buttons.ts b/src/core/components/navbar-buttons/navbar-buttons.ts
index 39b69167e..48439908e 100644
--- a/src/core/components/navbar-buttons/navbar-buttons.ts
+++ b/src/core/components/navbar-buttons/navbar-buttons.ts
@@ -56,7 +56,7 @@ const BUTTON_HIDDEN_CLASS = 'core-navbar-button-hidden';
 })
 export class CoreNavBarButtonsComponent implements OnInit, OnDestroy {
 
-    @ViewChild('contextMenuContainer', { read: ViewContainerRef }) container?: ViewContainerRef;
+    @ViewChild('contextMenuContainer', { read: ViewContainerRef }) container!: ViewContainerRef;
 
     // If the hidden input is true, hide all buttons.
     // eslint-disable-next-line @angular-eslint/no-input-rename
@@ -113,7 +113,13 @@ export class CoreNavBarButtonsComponent implements OnInit, OnDestroy {
 
                     // Make sure that context-menu is always at the end of buttons if any.
                     const contextMenu = buttonsContainer.querySelector('core-context-menu');
-                    contextMenu?.parentElement?.appendChild(contextMenu);
+                    const userMenu = buttonsContainer.querySelector('core-user-menu-button');
+
+                    if (userMenu) {
+                        contextMenu?.parentElement?.insertBefore(contextMenu, userMenu);
+                    } else {
+                        contextMenu?.parentElement?.appendChild(contextMenu);
+                    }
                 } else {
                     this.logger.warn('The header was found, but it didn\'t have the right ion-buttons.', selector);
                 }
@@ -177,7 +183,7 @@ export class CoreNavBarButtonsComponent implements OnInit, OnDestroy {
      */
     protected createMainContextMenu(): CoreContextMenuComponent {
         const factory = this.factoryResolver.resolveComponentFactory(CoreContextMenuComponent);
-        const componentRef = this.container!.createComponent<CoreContextMenuComponent>(factory);
+        const componentRef = this.container.createComponent<CoreContextMenuComponent>(factory);
 
         this.createdMainContextMenuElement = componentRef.location.nativeElement;
 
diff --git a/src/core/components/user-avatar/user-avatar.scss b/src/core/components/user-avatar/user-avatar.scss
index 5d99ba41d..f0e1ff20d 100644
--- a/src/core/components/user-avatar/user-avatar.scss
+++ b/src/core/components/user-avatar/user-avatar.scss
@@ -36,13 +36,19 @@
             content: "";
         }
     }
-    &.core-bar-button-image img {
+    &.core-bar-button-image {
         padding: 0;
         width: var(--core-header-toolbar-button-image-size);
         height: var(--core-header-toolbar-button-image-size);
         max-width: var(--core-header-toolbar-button-image-size);
         max-height: var(--core-header-toolbar-button-image-size);
         border-radius: 50%;
+        display: block;
+        
+        img {
+            padding: 4px;
+            border-radius: 50%;
+        }
     }
 
     .contact-status {
diff --git a/src/core/features/courses/pages/dashboard/dashboard.html b/src/core/features/courses/pages/dashboard/dashboard.html
index c4315e7d1..c79854f7a 100644
--- a/src/core/features/courses/pages/dashboard/dashboard.html
+++ b/src/core/features/courses/pages/dashboard/dashboard.html
@@ -1,4 +1,4 @@
-<core-navbar-buttons slot="end">
+<core-navbar-buttons slot="end" prepend>
     <ion-button *ngIf="searchEnabled" (click)="openSearch()" [attr.aria-label]="'core.courses.searchcourses' | translate">
         <ion-icon name="fas-search" slot="icon-only" aria-hidden="true"></ion-icon>
     </ion-button>
diff --git a/src/core/features/courses/pages/list/list.html b/src/core/features/courses/pages/list/list.html
index 114a5a78b..ffb6b4b22 100644
--- a/src/core/features/courses/pages/list/list.html
+++ b/src/core/features/courses/pages/list/list.html
@@ -5,20 +5,20 @@
         </ion-buttons>
         <h1 *ngIf="!showOnlyEnrolled">{{ 'core.courses.availablecourses' | translate }}</h1>
         <h1 *ngIf="showOnlyEnrolled">{{ 'core.courses.mycourses' | translate }}</h1>
-        <ion-buttons slot="end"></ion-buttons>
+        <ion-buttons slot="end">
+            <core-context-menu>
+                <core-context-menu-item *ngIf="downloadCourseEnabled || downloadCoursesEnabled" [priority]="1000"
+                    [content]="'core.settings.showdownloadoptions' | translate" (action)="toggleDownload()"
+                    iconAction="toggle" [(toggle)]="downloadEnabled"></core-context-menu-item>
+                <core-context-menu-item [priority]="900"
+                    [content]="'core.courses.showonlyenrolled' | translate" (action)="toggleEnrolled()"
+                    iconAction="toggle" [(toggle)]="showOnlyEnrolled"></core-context-menu-item>   
+            </core-context-menu>
+            <core-user-menu-button></core-user-menu-button>
+        </ion-buttons>
     </ion-toolbar>
 </ion-header>
 <ion-content>
-    <core-navbar-buttons slot="end">
-        <core-context-menu>
-            <core-context-menu-item *ngIf="downloadCourseEnabled || downloadCoursesEnabled" [priority]="1000"
-                [content]="'core.settings.showdownloadoptions' | translate" (action)="toggleDownload()"
-                iconAction="toggle" [(toggle)]="downloadEnabled"></core-context-menu-item>
-            <core-context-menu-item [priority]="900"
-                [content]="'core.courses.showonlyenrolled' | translate" (action)="toggleEnrolled()"
-                iconAction="toggle" [(toggle)]="showOnlyEnrolled"></core-context-menu-item>   
-        </core-context-menu>
-    </core-navbar-buttons>
     <ion-refresher slot="fixed" [disabled]="!loaded" (ionRefresh)="refreshCourses($event.target)">
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
diff --git a/src/core/features/courses/pages/list/list.module.ts b/src/core/features/courses/pages/list/list.module.ts
index c0d3a2c36..23dd52438 100644
--- a/src/core/features/courses/pages/list/list.module.ts
+++ b/src/core/features/courses/pages/list/list.module.ts
@@ -20,6 +20,7 @@ import { CoreCoursesComponentsModule } from '../../components/components.module'
 import { CoreSearchComponentsModule } from '@features/search/components/components.module';
 
 import { CoreCoursesListPage } from './list';
+import { CoreMainMenuComponentsModule } from '@features/mainmenu/components/components.module';
 
 const routes: Routes = [
     {
@@ -34,6 +35,7 @@ const routes: Routes = [
         CoreSharedModule,
         CoreCoursesComponentsModule,
         CoreSearchComponentsModule,
+        CoreMainMenuComponentsModule,
     ],
     declarations: [
         CoreCoursesListPage,
diff --git a/src/core/features/mainmenu/pages/home/home.html b/src/core/features/mainmenu/pages/home/home.html
index 903bcb8ff..e953b24c2 100644
--- a/src/core/features/mainmenu/pages/home/home.html
+++ b/src/core/features/mainmenu/pages/home/home.html
@@ -8,6 +8,7 @@
             <img src="assets/img/top_logo.png" class="core-header-logo" [alt]="siteName">
         </h1>
         <ion-buttons slot="end">
+            <core-user-menu-button></core-user-menu-button>
         </ion-buttons>
     </ion-toolbar>
 </ion-header>
diff --git a/src/core/features/mainmenu/pages/home/home.module.ts b/src/core/features/mainmenu/pages/home/home.module.ts
index c60828634..7dcde146c 100644
--- a/src/core/features/mainmenu/pages/home/home.module.ts
+++ b/src/core/features/mainmenu/pages/home/home.module.ts
@@ -22,6 +22,7 @@ import { CoreMainMenuHomePage } from './home';
 import { MAIN_MENU_HOME_ROUTES } from './home-routing.module';
 import { buildTabMainRoutes } from '@features/mainmenu/mainmenu-tab-routing.module';
 import { CoreMainMenuHomeHandlerService } from '@features/mainmenu/services/handlers/mainmenu';
+import { CoreMainMenuComponentsModule } from '@features/mainmenu/components/components.module';
 
 function buildRoutes(injector: Injector): Routes {
     const routes = resolveModuleRoutes(injector, MAIN_MENU_HOME_ROUTES);
@@ -42,6 +43,7 @@ function buildRoutes(injector: Injector): Routes {
 @NgModule({
     imports: [
         CoreSharedModule,
+        CoreMainMenuComponentsModule,
     ],
     providers: [
         { provide: ROUTES, multi: true, useFactory: buildRoutes, deps: [Injector] },
diff --git a/src/core/features/sitehome/pages/index/index.html b/src/core/features/sitehome/pages/index/index.html
index 4dd2ce8d5..f96e2ea06 100644
--- a/src/core/features/sitehome/pages/index/index.html
+++ b/src/core/features/sitehome/pages/index/index.html
@@ -1,4 +1,4 @@
-<core-navbar-buttons slot="end">
+<core-navbar-buttons slot="end" prepend>
     <ion-button *ngIf="searchEnabled" (click)="openSearch()" [attr.aria-label]="'core.courses.searchcourses' | translate">
         <ion-icon name="fas-search" slot="icon-only" aria-hidden="true"></ion-icon>
     </ion-button>
diff --git a/src/core/features/tag/pages/search/search.html b/src/core/features/tag/pages/search/search.html
index 5afa3e371..1f6ff37a9 100644
--- a/src/core/features/tag/pages/search/search.html
+++ b/src/core/features/tag/pages/search/search.html
@@ -4,6 +4,9 @@
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
         <h1>{{ 'core.tag.searchtags' | translate }}</h1>
+        <ion-buttons slot="end">
+            <core-user-menu-button></core-user-menu-button>
+        </ion-buttons>
     </ion-toolbar>
 </ion-header>
 <ion-content>
diff --git a/src/core/features/tag/pages/search/search.page.module.ts b/src/core/features/tag/pages/search/search.page.module.ts
index 3da4821d2..5519cb3ac 100644
--- a/src/core/features/tag/pages/search/search.page.module.ts
+++ b/src/core/features/tag/pages/search/search.page.module.ts
@@ -19,6 +19,7 @@ import { CoreSharedModule } from '@/core/shared.module';
 import { CoreSearchComponentsModule } from '@features/search/components/components.module';
 
 import { CoreTagSearchPage } from './search.page';
+import { CoreMainMenuComponentsModule } from '@features/mainmenu/components/components.module';
 
 const routes: Routes = [
     {
@@ -34,6 +35,7 @@ const routes: Routes = [
         RouterModule.forChild(routes),
         CoreSharedModule,
         CoreSearchComponentsModule,
+        CoreMainMenuComponentsModule,
     ],
     exports: [RouterModule],
 })
diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss
index c040c18d3..f202afd2d 100644
--- a/src/theme/theme.base.scss
+++ b/src/theme/theme.base.scss
@@ -655,12 +655,13 @@ ion-card ion-item:only-child {
 
 ion-toolbar h1 img.core-bar-button-image,
 ion-toolbar h1 .core-bar-button-image img {
-    padding: 0;
+    padding: 4px;
     width: var(--core-header-toolbar-button-image-size);
     height: var(--core-header-toolbar-button-image-size);
     max-width: var(--core-header-toolbar-button-image-size);
     max-height: var(--core-header-toolbar-button-image-size);
     border-radius: 50%;
+    display: block;
 }
 
 // Action sheet.