EVOgeek
/
Vmeda.Online
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

MOBILE-4470 modals: Fix refresh button modal pointer events

main
Pau Ferrer Ocaña 2024-05-10 12:51:12 +02:00
parent d0f6950c68
commit e779c7a7f2
6 changed files with 127 additions and 122 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/core/classes/page-loads-manager.ts
View File

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

2
src/core/services/file-helper.ts
View File

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

5
src/theme/components/ion-alert.scss
View File

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

119
src/theme/components/ion-modal.scss 100644
View File

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

121
src/theme/theme.base.scss
View File

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

1
src/theme/theme.scss
View File

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