MOBILE-3807 core: Add user menu button to all level 1 pages

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: [

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>

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>

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,

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>

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,

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>

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,

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>

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,

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;
 

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 {

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>

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>

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,

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>

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] },

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>

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>

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],
 })

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.