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

main
Pau Ferrer Ocaña 2021-10-21 15:06:45 +02:00
parent 806e29ce10
commit 434a2a90f2
21 changed files with 60 additions and 19 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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