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

MOBILE-3807 usermenu: Make lateal modal wider

main
Pau Ferrer Ocaña 2021-10-22 12:57:59 +02:00
parent ab10d42b75
commit 357d23c082
5 changed files with 71 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
src/core/classes/modal-lateral-transition.ts
View File

@ -22,37 +22,61 @@ import { Platform } from '@singletons';
export function CoreModalLateralTransitionEnter(baseEl: HTMLElement): Animation {
const OFF_RIGHT = Platform.isRTL ? '-100%' : '100%';
const backdropAnimation = createAnimation()
.addElement(baseEl.querySelector('ion-backdrop')!)
.fromTo('opacity', 0.01, 0.4);
const otherAnimations: Animation[] = [];
const wrapperAnimation = createAnimation()
.addElement(baseEl.querySelector('.modal-wrapper')!)
.fromTo('transform', 'translateX(' + OFF_RIGHT + ')', 'translateX(0)')
.fromTo('opacity', 0.8, 1);
const backdrop = baseEl.querySelector('ion-backdrop');
if (backdrop) {
const backdropAnimation = createAnimation()
.addElement(backdrop)
.fromTo('opacity', 0.01, 0.4);
otherAnimations.push(backdropAnimation);
}
const wrapper = baseEl.querySelector('.modal-wrapper');
if (wrapper) {
const wrapperAnimation = createAnimation()
.addElement(wrapper)
.fromTo('transform', 'translateX(' + OFF_RIGHT + ')', 'translateX(0)')
.fromTo('opacity', 0.8, 1);
otherAnimations.push(wrapperAnimation);
}
return createAnimation()
.addElement(baseEl)
.easing('cubic-bezier(0.36,0.66,0.04,1)')
.duration(300)
.addAnimation([backdropAnimation, wrapperAnimation]);
.addAnimation(otherAnimations);
}
export function CoreModalLateralTransitionLeave(baseEl: HTMLElement): Animation {
const OFF_RIGHT = Platform.isRTL ? '-100%' : '100%';
const backdropAnimation = createAnimation()
.addElement(baseEl.querySelector('ion-backdrop')!)
.fromTo('opacity', 0.4, 0.0);
const otherAnimations: Animation[] = [];
const wrapperAnimation = createAnimation()
.addElement(baseEl.querySelector('.modal-wrapper')!)
.beforeStyles({ opacity: 1 })
.fromTo('transform', 'translateX(0)', 'translateX(' + OFF_RIGHT + ')');
const backdrop = baseEl.querySelector('ion-backdrop');
if (backdrop) {
const backdropAnimation = createAnimation()
.addElement(backdrop)
.fromTo('opacity', 0.4, 0.0);
otherAnimations.push(backdropAnimation);
}
const wrapper = baseEl.querySelector('.modal-wrapper');
if (wrapper) {
const wrapperAnimation = createAnimation()
.addElement(wrapper)
.beforeStyles({ opacity: 1 })
.fromTo('transform', 'translateX(0)', 'translateX(' + OFF_RIGHT + ')');
otherAnimations.push(wrapperAnimation);
}
return createAnimation()
.addElement(baseEl)
.easing('cubic-bezier(0.36,0.66,0.04,1)')
.duration(300)
.addAnimation([backdropAnimation, wrapperAnimation]);
.addAnimation(otherAnimations);
}

3
src/core/features/mainmenu/components/user-menu-button/user-menu-button.ts
View File

@ -47,8 +47,9 @@ export class CoreMainMenuUserButtonComponent {
event.preventDefault();
event.stopPropagation();
CoreDomUtils.openModal<void>({
CoreDomUtils.openSideModal<void>({
component: CoreMainMenuUserMenuComponent,
cssClass: 'core-modal-lateral-sm',
});
}

4
src/core/services/utils/dom.ts
View File

@ -1677,13 +1677,13 @@ export class CoreDomUtilsProvider {
modalOptions: ModalOptions,
): Promise<T | undefined> {
modalOptions = Object.assign(modalOptions, {
modalOptions = Object.assign({
cssClass: 'core-modal-lateral',
showBackdrop: true,
backdropDismiss: true,
enterAnimation: CoreModalLateralTransitionEnter,
leaveAnimation: CoreModalLateralTransitionLeave,
});
}, modalOptions);
return await this.openModal<T>(modalOptions);
}

2
src/theme/globals.variables.scss
View File

@ -102,6 +102,8 @@ $screen-breakpoints: (
xl: 1200px
) !default;
$modal-lateral-width: 360px;
$core-course-image-background: #81ecec, #74b9ff, #a29bfe, #dfe6e9, #00b894, #0984e3, #b2bec3, #fdcb6e, #fd79a8, #6c5ce7 !default;
$core-dd-question-colors: #FFFFFF, #B0C4DE, #DCDCDC, #D8BFD8, #87CEFA, #DAA520, #FFD700, #F0E68C !default;
$core-text-hightlight-background-color: lighten($blue, 40%) !default;

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

@ -508,7 +508,7 @@ body.core-iframe-fullscreen ion-router-outlet {
z-index: 100000 !important;
}
@media only screen and (min-height: 400px) and (min-width: 300px) {
@media only screen and (min-height: 400px) and (min-width: #{$modal-lateral-width}) {
.core-modal-lateral {
--ion-safe-area-left: 0px;
--ion-safe-area-right: 0px;
@ -519,7 +519,7 @@ body.core-iframe-fullscreen ion-router-outlet {
display: block;
height: 100% !important;
width: auto;
min-width: 300px;
min-width: #{$modal-lateral-width};
box-shadow: 0 28px 48px rgba(0, 0, 0, 0.4);
}
ion-backdrop {
@ -528,6 +528,29 @@ body.core-iframe-fullscreen ion-router-outlet {
}
}
@each $breakpoint, $width in $screen-breakpoints {
@media only screen and (min-height: 400px) and (min-width: #{$width}) {
.core-modal-lateral-#{$breakpoint} {
--ion-safe-area-left: 0px;
--ion-safe-area-right: 0px;
.modal-wrapper {
position: absolute;
@include position(0 !important, 0 !important, 0 !important, unset !important);
display: block;
height: 100% !important;
width: auto;
min-width: #{$width};
box-shadow: 0 28px 48px rgba(0, 0, 0, 0.4);
}
ion-backdrop {
visibility: visible;
}
}
}
}
// Hidden submit button.
.core-submit-hidden-enter {
position: absolute;