diff --git a/src/addons/mod/folder/pages/index/index.html b/src/addons/mod/folder/pages/index/index.html index 66812df13..cfafeebb9 100644 --- a/src/addons/mod/folder/pages/index/index.html +++ b/src/addons/mod/folder/pages/index/index.html @@ -1,4 +1,4 @@ - + diff --git a/src/addons/mod/wiki/pages/index/index.html b/src/addons/mod/wiki/pages/index/index.html index fd6c31ce6..c11fb730c 100644 --- a/src/addons/mod/wiki/pages/index/index.html +++ b/src/addons/mod/wiki/pages/index/index.html @@ -1,4 +1,4 @@ - + diff --git a/src/core/components/navbar-buttons/navbar-buttons.ts b/src/core/components/navbar-buttons/navbar-buttons.ts index 8655a1bae..77878e67c 100644 --- a/src/core/components/navbar-buttons/navbar-buttons.ts +++ b/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 { 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 { await CoreDom.waitToBeInDOM(this.element); - let parentPage: HTMLElement | null = this.element; + while (parentPage && parentPage.parentElement) { - // Get the next parent page. + const content = parentPage.closest('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(':scope > ion-header'); + if (header && getComputedStyle(header).display !== 'none') { return header; } diff --git a/src/core/directives/collapsible-header.ts b/src/core/directives/collapsible-header.ts index 5bb3d05cf..196a2b1ce 100644 --- a/src/core/directives/collapsible-header.ts +++ b/src/core/directives/collapsible-header.ts @@ -88,7 +88,18 @@ export class CoreCollapsibleHeaderDirective implements OnInit, OnChanges, OnDest /** * @inheritdoc */ - async ngOnInit(): Promise { + ngOnInit(): void { + this.init(); + } + + /** + * Init function. + */ + async init(): Promise { + 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 { 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; - this.enteredPromise.reject(new Error('[collapsible-header] Waiting for ionViewDidEnter timeout reached')); + if (this.firstEnter) { + this.firstEnter = false; + this.enteredPromise.reject(new Error('[collapsible-header] Waiting for ionViewDidEnter timeout reached')); + } }, 5000); this.resizeListener = CoreDom.onWindowResize(() => { diff --git a/src/core/directives/link.ts b/src/core/directives/link.ts index 37043ffc8..d9d51c659 100644 --- a/src/core/directives/link.ts +++ b/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('ion-content'); if (container) { CoreDom.scrollToElement( container, diff --git a/src/core/features/mainmenu/pages/menu/menu.scss b/src/core/features/mainmenu/pages/menu/menu.scss index 349a0fe15..637457cc4 100644 --- a/src/core/features/mainmenu/pages/menu/menu.scss +++ b/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); diff --git a/src/core/singletons/dom.ts b/src/core/singletons/dom.ts index 914cc6ff2..cefd2c4bf 100644 --- a/src/core/singletons/dom.ts +++ b/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 { - if (element.clientWidth === 0 || element.clientHeight === 0) { + static isElementVisible(element: HTMLElement, checkSize = true): boolean { + 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('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 { + static waitToBeVisible(element: HTMLElement, checkSize = true): CoreCancellablePromise { 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; }