Merge pull request #3219 from crazyserver/MOBILE-3833

Mobile 3833
main
Dani Palou 2022-03-31 16:09:56 +02:00 committed by GitHub
commit c57d9f8237
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 45 additions and 19 deletions

View File

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

View File

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

View File

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

View File

@ -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;
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(() => {

View File

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

View File

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

View File

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