From e779c7a7f2087cd80ed021dc603c4db0676988f3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= Date: Fri, 10 May 2024 12:51:12 +0200 Subject: [PATCH] MOBILE-4470 modals: Fix refresh button modal pointer events --- src/core/classes/page-loads-manager.ts | 1 + src/core/services/file-helper.ts | 2 +- src/theme/components/ion-alert.scss | 5 + src/theme/components/ion-modal.scss | 119 ++++++++++++++++++++++++ src/theme/theme.base.scss | 121 ------------------------- src/theme/theme.scss | 1 + 6 files changed, 127 insertions(+), 122 deletions(-) create mode 100644 src/theme/components/ion-modal.scss diff --git a/src/core/classes/page-loads-manager.ts b/src/core/classes/page-loads-manager.ts index c3c179ec0..8d9cd1bce 100644 --- a/src/core/classes/page-loads-manager.ts +++ b/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(); diff --git a/src/core/services/file-helper.ts b/src/core/services/file-helper.ts index 6ddc63aef..d756ef177 100644 --- a/src/core/services/file-helper.ts +++ b/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) { diff --git a/src/theme/components/ion-alert.scss b/src/theme/components/ion-alert.scss index 1ceabab86..fef0eec00 100644 --- a/src/theme/components/ion-alert.scss +++ b/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; + } + } diff --git a/src/theme/components/ion-modal.scss b/src/theme/components/ion-modal.scss new file mode 100644 index 000000000..479099b6e --- /dev/null +++ b/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; + } + } +} diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss index 453907b59..7063ca260 100644 --- a/src/theme/theme.base.scss +++ b/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 diff --git a/src/theme/theme.scss b/src/theme/theme.scss index 77646e4ff..eee5ac6f5 100644 --- a/src/theme/theme.scss +++ b/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";