Merge pull request #4579 from crazyserver/MOBILE-4842

Mobile 4842

Author: albertgasset

src/addons/mod/forum/components/post/post.ts

@@ -102,7 +102,7 @@ export class AddonModForumPostComponent implements OnInit, OnDestroy, OnChanges
     @Input({ transform: toBoolean }) highlight = false;
     @Output() onPostChange: EventEmitter<void> = new EventEmitter<void>(); // Event emitted when a reply is posted or modified.
 
-    readonly formElement = viewChild.required<ElementRef>('replyFormEl');
+    readonly formElement = viewChild<ElementRef>('replyFormEl');
 
     messageControl = new FormControl<string | null>(null);
 

src/core/features/mainmenu/components/user-menu-button/user-menu-button.html

@@ -1,4 +1,4 @@
-@if ((alwaysShow || (isMainScreen && menuPage?.tabsPlacement === 'bottom')) && siteInfo) {
-    <core-user-avatar [site]="siteInfo" class="core-bar-button-image clickable" [linkProfile]="false"
+@if (showButton()) {
+    <core-user-avatar [site]="siteInfo()" class="core-bar-button-image clickable" [linkProfile]="false"
         (ariaButtonClick)="openUserMenu($event)" [attr.aria-label]="'core.user.useraccount' | translate" />
 }

src/core/features/mainmenu/components/user-menu-button/user-menu-button.ts

@@ -12,14 +12,15 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Component, Input, OnInit, inject } from '@angular/core';
+import { Component, OnInit, inject, input, linkedSignal, signal } from '@angular/core';
 import { CoreSiteInfo } from '@classes/sites/unauthenticated-site';
 import { IonRouterOutlet } from '@ionic/angular';
 import { CoreSites } from '@services/sites';
 import { CoreModals } from '@services/overlays/modals';
 import CoreMainMenuPage from '@features/mainmenu/pages/menu/menu';
 import { toBoolean } from '@/core/transforms/boolean';
 import { CoreSharedModule } from '@/core/shared.module';
+import { CoreMainMenuPlacement } from '@features/mainmenu/constants';
 
 /**
  * Component to display an avatar on the header to open user menu.
@@ -36,23 +37,43 @@ import { CoreSharedModule } from '@/core/shared.module';
 })
 export class CoreMainMenuUserButtonComponent implements OnInit {
 
-    @Input({ transform: toBoolean }) alwaysShow = false;
+    readonly alwaysShow = input(false, { transform: toBoolean });
 
-    siteInfo?: CoreSiteInfo;
-    isMainScreen = false;
+    readonly siteInfo = signal<CoreSiteInfo | undefined>(undefined);
+    readonly showButton = linkedSignal(() => this.shouldShowButton());
 
     protected routerOutlet = inject(IonRouterOutlet);
     protected menuPage = inject(CoreMainMenuPage, { optional: true });
 
     constructor() {
-        this.siteInfo = CoreSites.getCurrentSite()?.getInfo();
+        this.siteInfo.set(CoreSites.getCurrentSite()?.getInfo());
     }
 
     /**
      * @inheritdoc
      */
     ngOnInit(): void {
-        this.isMainScreen = !this.routerOutlet.canGoBack();
+        this.showButton.set(this.shouldShowButton());
+    }
+
+    /**
+     * Determine if the button should be shown.
+     *
+     * @returns True if the button should be shown, false otherwise.
+     */
+    protected shouldShowButton(): boolean {
+        if (!this.siteInfo()) {
+            return false;
+        }
+
+        if (this.alwaysShow()) {
+            return true;
+        }
+
+        const isMainScreen = !this.routerOutlet.canGoBack();
+        const tabsPlacement = this.menuPage?.tabsPlacement();
+
+        return isMainScreen && tabsPlacement === CoreMainMenuPlacement.BOTTOM;
     }
 
     /**

src/core/features/mainmenu/pages/menu/menu.html

@@ -1,16 +1,16 @@
-<ion-tabs #mainTabs [hidden]="!showTabs" [class]="'placement-' + tabsPlacement"
-    [class.tabshidden]="!isMainScreen && tabsPlacement === 'bottom'" (ionTabsDidChange)="tabChanged($event)">
-    <ion-tab-bar [slot]="tabsPlacement === 'side' ? 'top' : 'bottom'" class="mainmenu-tabs"
-        [class.slide-in-bottom-animation]="visibility() === 'visible'" [class.slide-out-bottom-animation]="visibility() === 'hidden'"
-        [hidden]="hiddenAnimationFinished()">
-        <core-loading [hideUntil]="loaded" [placeholderType]="tabsPlacement === 'bottom' ? 'rowwrap' : 'column'"
+<ion-tabs #mainTabs [hidden]="!showTabs" [class]="'placement-' + tabsPlacement()"  (ionTabsDidChange)="tabChanged($event)"
+    [class.tabshidden]="hiddenAnimationFinished()">
+    <ion-tab-bar [slot]="tabsPlacement() === 'side' ? 'top' : 'bottom'" class="mainmenu-tabs"
+        [class.slide-in-bottom-animation]="visibility() === 'visible'" [class.slide-out-bottom-animation]="visibility() === 'hidden'">
+        <core-loading [hideUntil]="loaded()" [placeholderType]="tabsPlacement() === 'bottom' ? 'rowwrap' : 'column'"
             [placeholderLimit]="loadingTabsLength" />
-        @if (loaded && tabsPlacement === 'side') {
+
+        @if (loaded() && tabsPlacement() === 'side') {
             <core-user-menu-button [alwaysShow]="true" />
         }
 
         <ion-tab-button *ngFor="let tab of tabs" (keydown)="tabAction.keyDown(tab.page, $event)" (keyup)="tabAction.keyUp(tab.page, $event)"
-            [hidden]="!loaded && tab.hide" [tab]="tab.page" [disabled]="tab.hide" layout="label-hide" class="{{tab.class}}"
+            [hidden]="!loaded() && tab.hide" [tab]="tab.page" [disabled]="tab.hide" layout="label-hide" class="{{tab.class}}"
             [selected]="tab.page === selectedTab" [tabindex]="selectedTab === tab.page ? 0 : -1" [attr.aria-controls]="tab.id">
             <ion-icon class="core-tab-icon" [name]="tab.icon" aria-hidden="true" />
             <ion-label aria-hidden="true">{{ tab.title | translate }}</ion-label>
@@ -26,7 +26,7 @@
         </ion-tab-button>
 
         <ion-tab-button (keydown)="tabAction.keyDown(morePageName, $event)" (keyup)="tabAction.keyUp(morePageName, $event)"
-            [hidden]="!loaded" [tab]="morePageName" layout="label-hide" [tabindex]="selectedTab === morePageName ? 0 : -1"
+            [hidden]="!loaded()" [tab]="morePageName" layout="label-hide" [tabindex]="selectedTab === morePageName ? 0 : -1"
             [attr.aria-controls]="morePageName">
             <ion-icon class="core-tab-icon" name="ellipsis-horizontal" aria-hidden="true" />
             <ion-label aria-hidden="true">{{ 'core.more' | translate }}</ion-label>

src/core/features/mainmenu/pages/menu/menu.scss

@@ -142,10 +142,8 @@ ion-tabs {
         } @else {
             &.tabshidden ion-tab-bar {
                 pointer-events: none;
-
-                ion-tab-button {
-                    height: auto;
-                }
+                height: 0px;
+                border: 0px;
             }
         }
     }

src/core/features/mainmenu/pages/menu/menu.ts

@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Component, OnInit, OnDestroy, effect, viewChild, signal, ElementRef, inject } from '@angular/core';
+import { Component, OnInit, OnDestroy, effect, viewChild, signal, ElementRef, inject, computed } from '@angular/core';
 import { IonTabs } from '@ionic/angular';
 import { BackButtonEvent } from '@ionic/core';
 import { Subscription } from 'rxjs';
@@ -59,17 +59,28 @@ import { CoreKeyboard } from '@singletons/keyboard';
 })
 export default class CoreMainMenuPage implements OnInit, OnDestroy {
 
+    readonly tabsPlacement = signal<CoreMainMenuPlacement>(CoreMainMenuPlacement.BOTTOM);
+    readonly isMainScreen = signal(false);
+    readonly visibility = computed(() => {
+        const tabsPlacement = this.tabsPlacement();
+        const isMainScreen = this.isMainScreen();
+
+        const visibility = tabsPlacement === CoreMainMenuPlacement.SIDE
+            ? ''
+            : (isMainScreen ? 'visible' : 'hidden');
+
+        return visibility;
+    });
+
+    readonly hiddenAnimationFinished = signal(false);
+
     tabs: CoreMainMenuHandlerToDisplay[] = [];
     allHandlers?: CoreMainMenuHandlerToDisplay[];
-    loaded = false;
+    readonly loaded = signal(false);
     showTabs = false;
-    tabsPlacement: CoreMainMenuPlacement = CoreMainMenuPlacement.BOTTOM;
     morePageName = MAIN_MENU_MORE_PAGE_NAME;
     selectedTab?: string;
-    isMainScreen = false;
     moreBadge = false;
-    readonly visibility = signal('hidden');
-    readonly hiddenAnimationFinished = signal(true);
     loadingTabsLength = this.getLoadingTabsLength();
 
     protected subscription?: Subscription;
@@ -96,8 +107,7 @@ export default class CoreMainMenuPage implements OnInit, OnDestroy {
         this.navSubscription = Router.events
             .pipe(filter(event => event instanceof NavigationEnd))
             .subscribe(() => {
-                this.isMainScreen = !this.mainTabs().outlet?.canGoBack();
-                this.updateVisibility();
+                this.isMainScreen.set(!this.mainTabs().outlet?.canGoBack());
             });
 
         if (CorePlatform.isIOS()) {
@@ -115,6 +125,12 @@ export default class CoreMainMenuPage implements OnInit, OnDestroy {
                 }
             });
         }
+
+        effect(() => {
+            this.visibility();
+            // Tabs changed visibility, reset hidden animation.
+            this.hiddenAnimationFinished.set(false);
+        });
     }
 
     /**
@@ -125,8 +141,7 @@ export default class CoreMainMenuPage implements OnInit, OnDestroy {
 
         this.initAfterLoginNavigations();
 
-        this.isMainScreen = !this.mainTabs().outlet?.canGoBack();
-        this.updateVisibility();
+        this.isMainScreen.set(!this.mainTabs().outlet?.canGoBack());
 
         this.subscription = CoreMainMenuDelegate.getHandlersObservable().subscribe((handlers) => {
             const previousHandlers = this.allHandlers;
@@ -150,7 +165,8 @@ export default class CoreMainMenuPage implements OnInit, OnDestroy {
 
         const tabBar = this.hostElement.querySelector('ion-tab-bar');
         tabBar?.addEventListener('animationend', (ev) => {
-            if (ev.animationName == 'slideOutBottom') {
+            if (ev.animationName === 'slideOutBottom' &&
+                !this.isMainScreen() && this.tabsPlacement() === CoreMainMenuPlacement.BOTTOM) {
                 this.hiddenAnimationFinished.set(true);
             }
 
@@ -167,8 +183,8 @@ export default class CoreMainMenuPage implements OnInit, OnDestroy {
         if (!this.allHandlers) {
             return;
         }
-        this.tabsPlacement = CoreMainMenu.getTabPlacement();
-        this.updateVisibility();
+
+        this.tabsPlacement.set(CoreMainMenu.getTabPlacement());
 
         this.loadingTabsLength = this.getLoadingTabsLength();
 
@@ -207,9 +223,9 @@ export default class CoreMainMenuPage implements OnInit, OnDestroy {
         }
 
         const mainMenuTab = CoreNavigator.getCurrentMainMenuTab();
-        this.loaded = CoreMainMenuDelegate.areHandlersLoaded();
+        this.loaded.set(CoreMainMenuDelegate.areHandlersLoaded());
 
-        if (this.loaded && (!mainMenuTab || removedHandlersPages.includes(mainMenuTab))) {
+        if (this.loaded() && (!mainMenuTab || removedHandlersPages.includes(mainMenuTab))) {
             // No tab selected or handler no longer available, select the first one.
             await CoreWait.nextTick();
 
@@ -231,8 +247,9 @@ export default class CoreMainMenuPage implements OnInit, OnDestroy {
      * @returns The total number of loading tabs to display.
      */
     protected getLoadingTabsLength(): number {
-        return CoreMainMenu.getNumItems() +
-            (this.tabsPlacement === CoreMainMenuPlacement.BOTTOM ? 1 : 2); // +1 for the "More" tab and user button.
+        const isBottomPlacement = this.tabsPlacement() === CoreMainMenuPlacement.BOTTOM;
+
+        return CoreMainMenu.getNumItems() + (isBottomPlacement ? 1 : 2); // +1 for the "More" tab and user button.
     }
 
     /**
@@ -307,22 +324,6 @@ export default class CoreMainMenuPage implements OnInit, OnDestroy {
         this.selectHistory.push(event.tab);
     }
 
-    /**
-     * Update menu visibility.
-     */
-    protected updateVisibility(): void {
-        const visibility = this.tabsPlacement === CoreMainMenuPlacement.SIDE
-            ? ''
-            : (this.isMainScreen ? 'visible' : 'hidden');
-
-        if (visibility === this.visibility()) {
-            return;
-        }
-
-        this.hiddenAnimationFinished.set(false);
-        this.visibility.set(visibility);
-    }
-
     /**
      * Back button clicked.
      *
@@ -401,7 +402,7 @@ class CoreMainMenuRoleTab extends CoreAriaRoleTab<CoreMainMenuPage> {
      * @inheritdoc
      */
     isHorizontal(): boolean {
-        return this.componentInstance.tabsPlacement === CoreMainMenuPlacement.BOTTOM;
+        return this.componentInstance.tabsPlacement() === CoreMainMenuPlacement.BOTTOM;
     }
 
     /**

src/theme/animations/slide.scss

@@ -90,13 +90,12 @@
 @keyframes slideInBottom {
     0% {
         height: 0px;
-        visibility: hidden;
+        opacity: 0;
         transform: translateY(100%);
-        border: 0px;
     }
 
     100% {
-        visibility: visible;
+        opacity: 1;
     }
 }
 
@@ -107,11 +106,13 @@
 @keyframes slideOutBottom {
     0% {
         transform: translateY(0);
+        opacity: 1;
+
     }
 
     100% {
         height: 0px;
-        visibility: hidden;
+        opacity: 0;
         transform: translateY(100%);
     }
 }

src/theme/theme.base.scss

@@ -172,6 +172,11 @@ ion-tabs.placement-side .tabs-inner {
     --ion-safe-area-left: 0px;
 }
 
+:root[dir=rtl] ion-tabs.placement-side .tabs-inner {
+    --ion-safe-area-right: 0px;
+    --ion-safe-area-left: var(--root-safe-area-left);
+}
+
 ion-tabs.placement-bottom .tabs-inner {
     --ion-safe-area-bottom: 0px;
 }