Merge pull request #2857 from NoelDeMartin/MOBILE-3320

MOBILE-3320: UI tweaks

src/core/directives/format-text.ts

@@ -224,6 +224,7 @@ export class CoreFormatTextDirective implements OnChanges {
             const button = document.createElement('button');
 
             button.classList.add('core-image-viewer-icon');
+            button.classList.add('hidden');
             button.setAttribute('aria-label', label);
             // Add an ion-icon item to apply the right styles, but the ion-icon component won't be executed.
             button.innerHTML = '<ion-icon name="fas-search" aria-hidden="true" src="assets/fonts/font-awesome/solid/search.svg">\
@@ -236,6 +237,14 @@ export class CoreFormatTextDirective implements OnChanges {
             });
 
             img.parentNode?.appendChild(button);
+
+            if (img.complete && img.naturalWidth > 0) {
+                // Image has already loaded, show the button.
+                button.classList.remove('hidden');
+            } else {
+                // Show the button when the image is loaded.
+                img.onload = () => button.classList.remove('hidden');
+            }
         });
     }
 

src/core/services/utils/dom.ts

@@ -14,7 +14,7 @@
 
 import { Injectable, SimpleChange, ElementRef, KeyValueChanges } from '@angular/core';
 import { IonContent } from '@ionic/angular';
-import { ModalOptions, PopoverOptions, AlertOptions, AlertButton, TextFieldTypes } from '@ionic/core';
+import { ModalOptions, PopoverOptions, AlertOptions, AlertButton, TextFieldTypes, getMode } from '@ionic/core';
 import { Md5 } from 'ts-md5';
 
 import { CoreApp } from '@services/app';
@@ -37,6 +37,7 @@ import { CoreBSTooltipComponent } from '@components/bs-tooltip/bs-tooltip';
 import { CoreViewerImageComponent } from '@features/viewer/components/image/image';
 import { CoreFormFields, CoreForms } from '../../singletons/form';
 import { CoreModalLateralTransitionEnter, CoreModalLateralTransitionLeave } from '@classes/modal-lateral-transition';
+import { CoreZoomLevel } from '@features/settings/services/settings-helper';
 
 /*
  * "Utils" service with helper functions for UI, DOM elements and HTML code.
@@ -1734,9 +1735,22 @@ export class CoreDomUtilsProvider {
     ): Promise<T | undefined> {
 
         const popover = await PopoverController.create(popoverOptions);
+        const zoomLevel = await CoreConfig.get(CoreConstants.SETTINGS_ZOOM_LEVEL, CoreZoomLevel.NORMAL);
 
         await popover.present();
 
+        // Fix popover position if zoom is applied.
+        if (zoomLevel !== CoreZoomLevel.NORMAL) {
+            switch (getMode()) {
+                case 'ios':
+                    fixIOSPopoverPosition(popover, popoverOptions.event);
+                    break;
+                case 'md':
+                    fixMDPopoverPosition(popover, popoverOptions.event);
+                    break;
+            }
+        }
+
         // If onDidDismiss is nedded we can add a new param to the function to wait one function or the other.
         const result = await popover.onWillDismiss<T>();
         if (result?.data) {
@@ -1849,6 +1863,159 @@ export class CoreDomUtilsProvider {
 
 }
 
+/**
+ * Fix the position of a popover that was created with a zoom level applied in iOS.
+ *
+ * This is necessary because Ionic's implementation gets the body dimensions from `element.ownerDocument.defaultView.innerXXX`,
+ * which doesn't return the correct dimensions when the `zoom` CSS property is being used. This is specially necessary
+ * in iOS because Android already respects system font sizes. Eventually, we should find an alternative implementation for iOS
+ * that doesn't require this workaround (also because the `zoom` CSS property is not standard and its usage is discouraged for
+ * production).
+ *
+ * This function has been copied in its entirety from Ionic's source code, only changing the aforementioned calculation
+ * of the body dimensions with `document.body.clientXXX`.
+ *
+ * @see https://github.com/ionic-team/ionic-framework/blob/v5.6.6/core/src/components/popover/animations/ios.enter.ts
+ */
+function fixIOSPopoverPosition(baseEl: HTMLElement, ev?: Event): void {
+    let originY = 'top';
+    let originX = 'left';
+
+    const POPOVER_IOS_BODY_PADDING = 5;
+    const contentEl = baseEl.querySelector('.popover-content') as HTMLElement;
+    const contentDimentions = contentEl.getBoundingClientRect();
+    const contentWidth = contentDimentions.width;
+    const contentHeight = contentDimentions.height;
+    const bodyWidth = document.body.clientWidth;
+    const bodyHeight = document.body.clientHeight;
+    const targetDim = ev && ev.target && (ev.target as HTMLElement).getBoundingClientRect();
+    const targetTop = targetDim != null && 'top' in targetDim ? targetDim.top : bodyHeight / 2 - contentHeight / 2;
+    const targetLeft = targetDim != null && 'left' in targetDim ? targetDim.left : bodyWidth / 2;
+    const targetWidth = (targetDim && targetDim.width) || 0;
+    const targetHeight = (targetDim && targetDim.height) || 0;
+    const arrowEl = baseEl.querySelector('.popover-arrow') as HTMLElement;
+    const arrowDim = arrowEl.getBoundingClientRect();
+    const arrowWidth = arrowDim.width;
+    const arrowHeight = arrowDim.height;
+
+    if (targetDim == null) {
+        arrowEl.style.display = 'none';
+    }
+
+    const arrowCSS = {
+        top: targetTop + targetHeight,
+        left: targetLeft + targetWidth / 2 - arrowWidth / 2,
+    };
+
+    const popoverCSS: { top: number; left: number } = {
+        top: targetTop + targetHeight + (arrowHeight - 1),
+        left: targetLeft + targetWidth / 2 - contentWidth / 2,
+    };
+
+    let checkSafeAreaLeft = false;
+    let checkSafeAreaRight = false;
+
+    if (popoverCSS.left < POPOVER_IOS_BODY_PADDING + 25) {
+        checkSafeAreaLeft = true;
+        popoverCSS.left = POPOVER_IOS_BODY_PADDING;
+    } else if (
+        contentWidth + POPOVER_IOS_BODY_PADDING + popoverCSS.left + 25 > bodyWidth
+    ) {
+        checkSafeAreaRight = true;
+        popoverCSS.left = bodyWidth - contentWidth - POPOVER_IOS_BODY_PADDING;
+        originX = 'right';
+    }
+
+    if (targetTop + targetHeight + contentHeight > bodyHeight && targetTop - contentHeight > 0) {
+        arrowCSS.top = targetTop - (arrowHeight + 1);
+        popoverCSS.top = targetTop - contentHeight - (arrowHeight - 1);
+
+        baseEl.className = baseEl.className + ' popover-bottom';
+        originY = 'bottom';
+    } else if (targetTop + targetHeight + contentHeight > bodyHeight) {
+        contentEl.style.bottom = POPOVER_IOS_BODY_PADDING + '%';
+    }
+
+    arrowEl.style.top = arrowCSS.top + 'px';
+    arrowEl.style.left = arrowCSS.left + 'px';
+
+    contentEl.style.top = popoverCSS.top + 'px';
+    contentEl.style.left = popoverCSS.left + 'px';
+
+    if (checkSafeAreaLeft) {
+        contentEl.style.left = `calc(${popoverCSS.left}px + var(--ion-safe-area-left, 0px))`;
+    }
+
+    if (checkSafeAreaRight) {
+        contentEl.style.left = `calc(${popoverCSS.left}px - var(--ion-safe-area-right, 0px))`;
+    }
+
+    contentEl.style.transformOrigin = originY + ' ' + originX;
+}
+
+/**
+ * Fix the position of a popover that was created with a zoom level applied in Android.
+ *
+ * This is necessary because Ionic's implementation gets the body dimensions from `element.ownerDocument.defaultView.innerXXX`,
+ * which doesn't return the correct dimensions when the `zoom` CSS property is being used. This is only a temporary solution
+ * in Android because system zooming is already supported, so it won't be necessary to do it at an app level.
+ *
+ * @todo remove the ability to zoom in Android.
+ *
+ * This function has been copied in its entirety from Ionic's source code, only changing the aforementioned calculation
+ * of the body dimensions with `document.body.clientXXX`.
+ *
+ * @see https://github.com/ionic-team/ionic-framework/blob/v5.6.6/core/src/components/popover/animations/md.enter.ts
+ */
+function fixMDPopoverPosition(baseEl: HTMLElement, ev?: Event): void {
+    const POPOVER_MD_BODY_PADDING = 12;
+    const isRTL = document.dir === 'rtl';
+
+    let originY = 'top';
+    let originX = isRTL ? 'right' : 'left';
+
+    const contentEl = baseEl.querySelector('.popover-content') as HTMLElement;
+    const contentDimentions = contentEl.getBoundingClientRect();
+    const contentWidth = contentDimentions.width;
+    const contentHeight = contentDimentions.height;
+    const bodyWidth = document.body.clientWidth;
+    const bodyHeight = document.body.clientHeight;
+    const targetDim = ev && ev.target && (ev.target as HTMLElement).getBoundingClientRect();
+    const targetTop = targetDim != null && 'bottom' in targetDim
+        ? targetDim.bottom
+        : bodyHeight / 2 - contentHeight / 2;
+    const targetLeft = targetDim != null && 'left' in targetDim
+        ? isRTL
+            ? targetDim.left - contentWidth + targetDim.width
+            : targetDim.left
+        : bodyWidth / 2 - contentWidth / 2;
+    const targetHeight = (targetDim && targetDim.height) || 0;
+    const popoverCSS: { top: number; left: number } = {
+        top: targetTop,
+        left: targetLeft,
+    };
+
+    if (popoverCSS.left < POPOVER_MD_BODY_PADDING) {
+        popoverCSS.left = POPOVER_MD_BODY_PADDING;
+        originX = 'left';
+    } else if (contentWidth + POPOVER_MD_BODY_PADDING + popoverCSS.left > bodyWidth) {
+        popoverCSS.left = bodyWidth - contentWidth - POPOVER_MD_BODY_PADDING;
+        originX = 'right';
+    }
+
+    if (targetTop + targetHeight + contentHeight > bodyHeight && targetTop - contentHeight > 0) {
+        popoverCSS.top = targetTop - contentHeight - targetHeight;
+        baseEl.className = baseEl.className + ' popover-bottom';
+        originY = 'bottom';
+    } else if (targetTop + targetHeight + contentHeight > bodyHeight) {
+        contentEl.style.bottom = POPOVER_MD_BODY_PADDING + 'px';
+    }
+
+    contentEl.style.top = popoverCSS.top + 'px';
+    contentEl.style.left = popoverCSS.left + 'px';
+    contentEl.style.transformOrigin = originY + ' ' + originX;
+}
+
 export const CoreDomUtils = makeSingleton(CoreDomUtilsProvider);
 
 type AnchorOrMediaElement =

src/theme/components/format-text.scss

@@ -189,6 +189,10 @@ core-format-text {
         &:hover {
             opacity: .7;
         }
+
+        &.hidden {
+            display: none;
+        }
     }
 }
 

src/theme/theme.base.scss

@@ -521,11 +521,6 @@ ion-avatar ion-img, ion-avatar img {
 img[core-external-content]:not([src]) {
     visibility: hidden;
 }
-img[alt] {
-    text-indent: -999999px;
-    white-space: nowrap;
-    overflow: hidden;
-}
 
 // Activity modules
 .core-module-icon {