From eac072593749caab447a8d132b8879d4c2901703 Mon Sep 17 00:00:00 2001 From: Noel De Martin Date: Thu, 7 Apr 2022 16:51:53 +0200 Subject: [PATCH 1/2] MOBILE-3833 messages: Fix offline messages label --- src/addons/messages/pages/discussion/discussion.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/addons/messages/pages/discussion/discussion.html b/src/addons/messages/pages/discussion/discussion.html index 924b36f7b..bb9cc05ff 100644 --- a/src/addons/messages/pages/discussion/discussion.html +++ b/src/addons/messages/pages/discussion/discussion.html @@ -76,7 +76,7 @@ {{ message.timecreated | coreFormatDate: "strftimedayshort" }} - + {{ 'addon.messages.newmessages' | translate }} From 3ad99b7d3dd3820ef5f732af5561d9303a8e9f0e Mon Sep 17 00:00:00 2001 From: Noel De Martin Date: Thu, 7 Apr 2022 17:48:17 +0200 Subject: [PATCH 2/2] MOBILE-3833 usertours: Watch main menu visibility --- .../features/mainmenu/pages/menu/menu.html | 3 +- src/core/features/mainmenu/pages/menu/menu.ts | 39 +++++++++++++++++-- .../features/mainmenu/services/mainmenu.ts | 2 + .../components/user-tour/user-tour.ts | 19 +++++---- 4 files changed, 47 insertions(+), 16 deletions(-) diff --git a/src/core/features/mainmenu/pages/menu/menu.html b/src/core/features/mainmenu/pages/menu/menu.html index b7a79fa7f..6ad0b0289 100644 --- a/src/core/features/mainmenu/pages/menu/menu.html +++ b/src/core/features/mainmenu/pages/menu/menu.html @@ -1,7 +1,6 @@ - + diff --git a/src/core/features/mainmenu/pages/menu/menu.ts b/src/core/features/mainmenu/pages/menu/menu.ts index 0ff66fa97..35b0edd55 100644 --- a/src/core/features/mainmenu/pages/menu/menu.ts +++ b/src/core/features/mainmenu/pages/menu/menu.ts @@ -31,6 +31,8 @@ import { trigger, state, style, transition, animate } from '@angular/animations' import { CoreSites } from '@services/sites'; import { CoreDom } from '@singletons/dom'; +const ANIMATION_DURATION = 500; + /** * Page that displays the main menu of the app. */ @@ -38,7 +40,7 @@ import { CoreDom } from '@singletons/dom'; selector: 'page-core-mainmenu', templateUrl: 'menu.html', animations: [ - trigger('menuShowHideAnimation', [ + trigger('menuVisibilityAnimation', [ state('hidden', style({ height: 0, visibility: 'hidden', @@ -49,11 +51,11 @@ import { CoreDom } from '@singletons/dom'; })), transition('visible => hidden', [ style({ transform: 'translateY(0)' }), - animate('500ms ease-in-out', style({ transform: 'translateY(100%)' })), + animate(`${ANIMATION_DURATION}ms ease-in-out`, style({ transform: 'translateY(100%)' })), ]), transition('hidden => visible', [ style({ transform: 'translateY(100%)', visibility: 'visible', height: '*' }), - animate('500ms ease-in-out', style({ transform: 'translateY(0)' })), + animate(`${ANIMATION_DURATION}ms ease-in-out`, style({ transform: 'translateY(0)' })), ]), ])], styleUrls: ['menu.scss'], @@ -69,6 +71,7 @@ export class CoreMainMenuPage implements OnInit, OnDestroy { selectedTab?: string; isMainScreen = false; moreBadge = false; + visibility = 'hidden'; protected subscription?: Subscription; protected navSubscription?: Subscription; @@ -93,8 +96,9 @@ export class CoreMainMenuPage implements OnInit, OnDestroy { // Listen navigation events to show or hide tabs. this.navSubscription = Router.events .pipe(filter(event => event instanceof NavigationEnd)) - .subscribe(async () => { + .subscribe(() => { this.isMainScreen = !this.mainTabs?.outlet.canGoBack(); + this.updateVisibility(); }); } @@ -108,6 +112,7 @@ export class CoreMainMenuPage implements OnInit, OnDestroy { this.redirectOptions = CoreNavigator.getRouteParam('redirectOptions'); this.isMainScreen = !this.mainTabs?.outlet.canGoBack(); + this.updateVisibility(); this.subscription = CoreMainMenuDelegate.getHandlersObservable().subscribe((handlers) => { // Remove the handlers that should only appear in the More menu. @@ -151,6 +156,7 @@ export class CoreMainMenuPage implements OnInit, OnDestroy { return; } this.tabsPlacement = CoreMainMenu.getTabPlacement(); + this.updateVisibility(); const handlers = this.allHandlers .filter((handler) => !handler.onlyInMore) @@ -240,6 +246,20 @@ export class CoreMainMenuPage implements OnInit, OnDestroy { this.selectHistory.push(event.tab); } + /** + * Update menu visibility. + */ + protected updateVisibility(): void { + const visibility = this.tabsPlacement == 'side' ? '' : (this.isMainScreen ? 'visible' : 'hidden'); + + if (visibility === this.visibility) { + return; + } + + this.visibility = visibility; + this.notifyVisibilityUpdated(); + } + /** * Back button clicked. * @@ -290,6 +310,17 @@ export class CoreMainMenuPage implements OnInit, OnDestroy { return !!CoreNavigator.getCurrentRoute({ routeData: { mainMenuTabRoot: CoreNavigator.getCurrentMainMenuTab() } }); } + /** + * Notify that the menu visibility has been updated. + */ + protected async notifyVisibilityUpdated(): Promise { + await CoreUtils.nextTick(); + await CoreUtils.wait(ANIMATION_DURATION); + await CoreUtils.nextTick(); + + CoreEvents.trigger(CoreMainMenuProvider.MAIN_MENU_VISIBILITY_UPDATED); + } + } /** diff --git a/src/core/features/mainmenu/services/mainmenu.ts b/src/core/features/mainmenu/services/mainmenu.ts index a27b4e943..c0e624f2e 100644 --- a/src/core/features/mainmenu/services/mainmenu.ts +++ b/src/core/features/mainmenu/services/mainmenu.ts @@ -33,6 +33,7 @@ declare module '@singletons/events' { */ export interface CoreEventsData { [CoreMainMenuProvider.MAIN_MENU_HANDLER_BADGE_UPDATED]: CoreMainMenuHandlerBadgeUpdatedEventData; + [CoreMainMenuProvider.MAIN_MENU_VISIBILITY_UPDATED]: void; } } @@ -47,6 +48,7 @@ export class CoreMainMenuProvider { static readonly ITEM_MIN_WIDTH = 72; // Min with of every item, based on 5 items on a 360 pixel wide screen. static readonly MORE_PAGE_NAME = 'more'; static readonly MAIN_MENU_HANDLER_BADGE_UPDATED = 'main_menu_handler_badge_updated'; + static readonly MAIN_MENU_VISIBILITY_UPDATED = 'main_menu_visbility_updated'; /** * Get the current main menu handlers. diff --git a/src/core/features/usertours/components/user-tour/user-tour.ts b/src/core/features/usertours/components/user-tour/user-tour.ts index 997ffab92..28d6bba73 100644 --- a/src/core/features/usertours/components/user-tour/user-tour.ts +++ b/src/core/features/usertours/components/user-tour/user-tour.ts @@ -32,7 +32,8 @@ import { CoreDomUtils } from '@services/utils/dom'; import { AngularFrameworkDelegate } from '@singletons'; import { CoreComponentsRegistry } from '@singletons/components-registry'; import { CoreDom } from '@singletons/dom'; -import { CoreEventObserver } from '@singletons/events'; +import { CoreEventObserver, CoreEvents } from '@singletons/events'; +import { CoreMainMenuProvider } from '@features/mainmenu/services/mainmenu'; const ANIMATION_DURATION = 200; const USER_TOURS_BACK_BUTTON_PRIORITY = 100; @@ -70,6 +71,7 @@ export class CoreUserToursUserTourComponent implements AfterViewInit, OnDestroy private wrapperTransform = ''; private wrapperElement = new CorePromisedValue(); private backButtonListener?: (event: BackButtonEvent) => void; + protected mainMenuListener?: CoreEventObserver; protected resizeListener?: CoreEventObserver; protected scrollListener?: EventListener; protected content?: HTMLIonContentElement | null; @@ -240,15 +242,10 @@ export class CoreUserToursUserTourComponent implements AfterViewInit, OnDestroy return; } - if (!this.resizeListener) { - this.resizeListener = CoreDom.onWindowResize(() => { - this.calculateStyles(); - }); - } - - if (!this.content) { - this.content = CoreDom.closest(this.focus, 'ion-content'); - } + this.mainMenuListener = this.mainMenuListener ?? + CoreEvents.on(CoreMainMenuProvider.MAIN_MENU_VISIBILITY_UPDATED, () => this.calculateStyles()); + this.resizeListener = this.resizeListener ?? CoreDom.onWindowResize(() => this.calculateStyles()); + this.content = this.content ?? CoreDom.closest(this.focus, 'ion-content'); if (!this.scrollListener && this.content) { this.content.scrollEvents = true; @@ -269,9 +266,11 @@ export class CoreUserToursUserTourComponent implements AfterViewInit, OnDestroy this.active = false; + this.mainMenuListener?.off(); this.resizeListener?.off(); this.backButtonListener && document.removeEventListener('ionBackButton', this.backButtonListener); this.backButtonListener = undefined; + this.mainMenuListener = undefined; this.resizeListener = undefined; if (this.content && this.scrollListener) {