MOBILE-4470 modals: Fix refresh button modal pointer events

src/core/classes/page-loads-manager.ts

@@ -133,6 +133,7 @@ export class PageLoadsManager {
             component: CoreRefreshButtonModalComponent,
             cssClass: 'core-modal-no-background core-modal-fullscreen',
             closeOnNavigate: true,
+            showBackdrop: false,
         });
 
         this.onRefreshPage.next();

src/core/services/file-helper.ts

@@ -449,7 +449,7 @@ export class CoreFileHelperProvider {
                 Translate.instant('core.dontshowagain'),
                 'checkbox',
                 { okText: okButton },
-                { cssClass: 'core-modal-force-on-top' },
+                { cssClass: 'core-alert-force-on-top' },
             );
 
             if (dontShowAgain) {

src/theme/components/ion-alert.scss

@@ -4,4 +4,9 @@ ion-alert {
         padding-top: 0px;
         padding-bottom: 0px;
     }
+
+    &.core-alert-force-on-top {
+        z-index: 100000 !important;
+    }
+
 }

src/theme/components/ion-modal.scss

@@ -0,0 +1,119 @@
+ion-modal {
+    &.show-modal {
+        @media only screen and (min-width: 768px) and (min-height: 600px) {
+            --border-radius: var(--modal-radius);
+        }
+    }
+
+    &.ion-datetime-button-overlay {
+        --border-radius: var(--modal-radius);
+    }
+
+    &.core-modal-lateral,
+    &.core-modal-fullscreen {
+        --border-radius: 0px;
+    }
+
+    &.core-modal-no-background {
+        --background: transparent;
+        --box-shadow: none !important;
+        pointer-events: none;
+
+        &::part(backdrop) {
+            display: none;
+        }
+
+        &::part(content) {
+            pointer-events: none;
+        }
+    }
+
+    &.modal-sheet::part(handle) {
+        background: var(--core-header-buttons-color);
+    }
+
+    &.core-modal-fullscreen::part(content) {
+        position: absolute;
+        @include position(0 !important, null, null, 0 !important);
+        display: block;
+        width: 100% !important;
+        height: 100% !important;
+    }
+
+    &.core-modal-transparent,
+    &.core-modal-transparent-no-filter {
+
+        &::part(backdrop) {
+            backdrop-filter: none;
+        }
+
+        &::part(content) {
+            backdrop-filter: none;
+            --background: rgb(10 10 10 / 20%);
+
+            ion-content {
+                --background: transparent !important;
+            }
+            position: absolute;
+            @include position(0 !important, null, null, 0 !important);
+            display: block;
+            width: 100% !important;
+            height: 100% !important;
+        }
+    }
+
+    &.core-modal-transparent {
+        &::part(backdrop) {
+            backdrop-filter: blur(8px);
+        }
+        &::part(content) {
+            backdrop-filter: blur(12px);
+        }
+    }
+
+    &.core-modal-lateral {
+        --ion-safe-area-left: 0px;
+        --ion-safe-area-right: 0px;
+
+        &::part(content) {
+            @include margin-horizontal(var(--modal-lateral-margin), null);
+
+            position: absolute;
+            @include position(0 !important, 0 !important, 0 !important, unset !important);
+            display: block;
+            height: 100% !important;
+            width: calc(100% - var(--modal-lateral-margin));
+            max-width: calc(var(--modal-lateral-max-width));
+            box-shadow: 0 28px 48px rgb(0 0 0 / 40%);
+        }
+
+        &::part(backdrop) {
+            visibility: visible;
+        }
+
+        .modal-shadow {
+            display: none;
+        }
+    }
+
+    @each $breakpoint, $width in $screen-breakpoints {
+        &.core-modal-lateral-#{$breakpoint} {
+            --modal-lateral-max-width: #{$width};
+        }
+    }
+
+    &.core-password-modal {
+        --border-radius: var(--mdl-shape-borderRadius-sm);
+        --min-width: auto;
+        --min-height: 300px;
+        --width: 384px;
+        --height: auto;
+
+        form {
+            display: flex;
+            flex-direction: column;
+            height: 100%;
+            justify-content: space-between;
+        }
+    }
+}

src/theme/theme.base.scss

@@ -375,96 +375,6 @@ body.core-iframe-fullscreen ion-router-outlet {
     }
 }
 
-// Modals.
-.core-modal-fullscreen::part(content) {
-    position: absolute;
-    @include position(0 !important, null, null, 0 !important);
-    display: block;
-    width: 100% !important;
-    height: 100% !important;
-}
-
-.core-modal-transparent {
-
-    &::part(backdrop) {
-        backdrop-filter: blur(8px);
-    }
-
-    &::part(content) {
-        backdrop-filter: blur(12px);
-        --background: rgb(10 10 10 / 20%);
-
-        ion-content {
-            --background: transparent !important;
-        }
-        position: absolute;
-        @include position(0 !important, null, null, 0 !important);
-        display: block;
-        width: 100% !important;
-        height: 100% !important;
-    }
-}
-
-.core-modal-force-on-top {
-    z-index: 100000 !important;
-}
-
-.core-modal-lateral {
-    --ion-safe-area-left: 0px;
-    --ion-safe-area-right: 0px;
-
-    &::part(content) {
-        @include margin-horizontal(var(--modal-lateral-margin), null);
-
-        position: absolute;
-        @include position(0 !important, 0 !important, 0 !important, unset !important);
-        display: block;
-        height: 100% !important;
-        width: calc(100% - var(--modal-lateral-margin));
-        max-width: calc(var(--modal-lateral-max-width));
-        box-shadow: 0 28px 48px rgb(0 0 0 / 40%);
-    }
-
-    &::part(backdrop) {
-        visibility: visible;
-    }
-
-    .modal-shadow {
-        display: none;
-    }
-}
-
-.core-modal-transparent-no-filter {
-    @extend .core-modal-transparent;
-    &::part(backdrop) {
-        backdrop-filter: none;
-    }
-    &::part(content) {
-        backdrop-filter: none;
-    }
-}
-
-@each $breakpoint, $width in $screen-breakpoints {
-    .core-modal-lateral-#{$breakpoint} {
-        --modal-lateral-max-width: #{$width};
-    }
-}
-
-.core-password-modal {
-    --border-radius: var(--mdl-shape-borderRadius-sm);
-    --min-width: auto;
-    --min-height: 300px;
-    --width: 384px;
-    --height: auto;
-
-    form {
-        display: flex;
-        flex-direction: column;
-        height: 100%;
-        justify-content: space-between;
-    }
-}
-
 // Hidden submit button.
 .core-submit-hidden-enter {
     position: absolute;
@@ -1057,37 +967,6 @@ video::-webkit-media-text-track-display {
     white-space: normal !important;
 }
 
-ion-modal {
-    &.show-modal {
-        @media only screen and (min-width: 768px) and (min-height: 600px) {
-            --border-radius: var(--modal-radius);
-        }
-    }
-    &.ion-datetime-button-overlay {
-        --border-radius: var(--modal-radius);
-    }
-
-    &.core-modal-lateral,
-    &.core-modal-fullscreen {
-        --border-radius: 0px;
-    }
-
-    &.core-modal-no-background {
-        --background: transparent;
-        --box-shadow: none !important;
-        pointer-events: none;
-
-        &::part(backdrop) {
-            display: none;
-        }
-    }
-
-    &.modal-sheet::part(handle) {
-        background: var(--core-header-buttons-color);
-    }
-}
-
-
 /*
 * This is to solve popver issue in chrome 114
 * For more info see: https://github.com/ionic-team/ionic-framework/issues/27599

src/theme/theme.scss

@@ -41,6 +41,7 @@ html {
     @import "components/ion-input.scss";
     @import "components/ion-item.scss";
     @import "components/ion-item-divider.scss";
+    @import "components/ion-modal.scss";
     @import "components/ion-loading.scss";
     @import "components/ion-note.scss";
     @import "components/ion-popover.scss";