Merge pull request #3219 from crazyserver/MOBILE-3833

Mobile 3833

src/addons/mod/folder/pages/index/index.html

@@ -1,4 +1,4 @@
-<ion-header collapsible>
+<ion-header [collapsible]="!subfolder">
     <ion-toolbar>
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>

src/addons/mod/wiki/pages/index/index.html

@@ -1,4 +1,4 @@
-<ion-header collapsible>
+<ion-header [collapsible]="!this.pageId && !this.pageTitle">
     <ion-toolbar>
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>

src/core/components/navbar-buttons/navbar-buttons.ts

@@ -86,7 +86,7 @@ export class CoreNavBarButtonsComponent implements OnInit, OnDestroy {
     }
 
     /**
-     * Component being initialized.
+     * @inheritdoc
      */
     async ngOnInit(): Promise<void> {
         try {
@@ -128,7 +128,7 @@ export class CoreNavBarButtonsComponent implements OnInit, OnDestroy {
             }
         } catch (error) {
             // Header not found.
-            this.logger.warn(error);
+            this.logger.error(error);
         }
     }
 
@@ -199,13 +199,20 @@ export class CoreNavBarButtonsComponent implements OnInit, OnDestroy {
      */
     protected async searchHeader(): Promise<HTMLIonHeaderElement> {
         await CoreDom.waitToBeInDOM(this.element);
-
         let parentPage: HTMLElement | null = this.element;
+
         while (parentPage && parentPage.parentElement) {
-            // Get the next parent page.
+            const content = parentPage.closest<HTMLIonContentElement>('ion-content');
+            if (content) {
+                // Sometimes ion-page class is not yet added by the ViewController, wait for content to render.
+                await content.componentOnReady();
+            }
+
             parentPage = parentPage.parentElement.closest('.ion-page');
+
             // Check if the page has a header. If it doesn't, search the next parent page.
             const header  = parentPage?.querySelector<HTMLIonHeaderElement>(':scope > ion-header');
+
             if (header && getComputedStyle(header).display !== 'none') {
                 return header;
             }

src/core/directives/collapsible-header.ts

@@ -88,7 +88,18 @@ export class CoreCollapsibleHeaderDirective implements OnInit, OnChanges, OnDest
     /**
      * @inheritdoc
      */
-    async ngOnInit(): Promise<void> {
+    ngOnInit(): void {
+        this.init();
+    }
+
+    /**
+     * Init function.
+     */
+    async init(): Promise<void> {
+        if (!this.collapsible || this.expandedHeader) {
+            return;
+        }
+
         this.initializePage();
 
         await Promise.all([
@@ -104,9 +115,12 @@ export class CoreCollapsibleHeaderDirective implements OnInit, OnChanges, OnDest
     /**
      * @inheritdoc
      */
-    ngOnChanges(changes: {[name: string]: SimpleChange}): void {
+    async ngOnChanges(changes: {[name: string]: SimpleChange}): Promise<void> {
         if (changes.collapsible) {
             this.enabled = !CoreUtils.isFalseOrZero(changes.collapsible.currentValue);
+
+            await this.init();
+
             setTimeout(() => {
                 this.setEnabled(this.enabled);
             }, 200);
@@ -160,8 +174,10 @@ export class CoreCollapsibleHeaderDirective implements OnInit, OnChanges, OnDest
 
         // Timeout in case event is never fired.
         const timeout = window.setTimeout(() => {
-            this.firstEnter = false;
+            if (this.firstEnter) {
-            this.enteredPromise.reject(new Error('[collapsible-header] Waiting for ionViewDidEnter timeout reached'));
+                this.firstEnter = false;
+                this.enteredPromise.reject(new Error('[collapsible-header] Waiting for ionViewDidEnter timeout reached'));
+            }
         }, 5000);
 
         this.resizeListener = CoreDom.onWindowResize(() => {

src/core/directives/link.ts

@@ -140,10 +140,10 @@ export class CoreLinkDirective implements OnInit {
             return this.openLocalFile(href);
         }
 
-        if (href.charAt(0) == '#') {
+        if (href.charAt(0) === '#') {
             // Look for id or name.
             href = href.substring(1);
-            const container = this.element.closest('ion-content');
+            const container = this.element.closest<HTMLIonContentElement>('ion-content');
             if (container) {
                 CoreDom.scrollToElement(
                     container,

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

@@ -21,6 +21,7 @@
     .core-network-message {
         visibility: visible;
         height: var(--network-message-height);
+        line-height: var(--network-message-height);
         padding-bottom: calc(var(--ion-safe-area-bottom, 0px) + var(--network-message-height));
     }
 }
@@ -167,6 +168,7 @@ ion-tabs.placement-side {
     transition: all 500ms ease-in-out;
     opacity: .8;
     z-index: 12;
+    font-size: 12px;
 
     .core-online-message {
         display: var(--network-message-online);

src/core/singletons/dom.ts

@@ -88,10 +88,11 @@ export class CoreDom {
      * Check whether an element is visible or not.
      *
      * @param element Element.
+     * @param checkSize Wether to check size to check for visibility.
      * @return True if element is visible inside the DOM.
      */
-    static isElementVisible(element: HTMLElement): boolean {
+    static isElementVisible(element: HTMLElement, checkSize = true): boolean {
-        if (element.clientWidth === 0 || element.clientHeight === 0) {
+        if (checkSize && (element.clientWidth === 0 || element.clientHeight === 0)) {
             return false;
         }
 
@@ -193,11 +194,10 @@ export class CoreDom {
             element = foundElement;
         }
 
-        await CoreDom.waitToBeVisible(element);
+        await CoreDom.waitToBeVisible(element, false);
 
         const content = element.closest<HTMLIonContentElement>('ion-content') ?? undefined;
         if (!content) {
-
             // Content to scroll, not found.
             return false;
         }
@@ -449,9 +449,10 @@ export class CoreDom {
      * Wait an element to be in dom and visible.
      *
      * @param element Element to wait.
+     * @param checkSize Wether to check size to check for visibility.
      * @return Cancellable promise.
      */
-    static waitToBeVisible(element: HTMLElement): CoreCancellablePromise<void> {
+    static waitToBeVisible(element: HTMLElement, checkSize = true): CoreCancellablePromise<void> {
         const domPromise = CoreDom.waitToBeInDOM(element);
 
         let interval: number | undefined;
@@ -461,12 +462,12 @@ export class CoreDom {
             async (resolve) => {
                 await domPromise;
 
-                if (CoreDom.isElementVisible(element)) {
+                if (CoreDom.isElementVisible(element, checkSize)) {
                     return resolve();
                 }
 
                 interval = window.setInterval(() => {
-                    if (!CoreDom.isElementVisible(element)) {
+                    if (!CoreDom.isElementVisible(element, checkSize)) {
                         return;
                     }