javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-22 13:32:54 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(modal): card-style modal offset now matches the iOS spec (#20166)

Browse Source 
* chore(core): better animations
Updates animations to be closer to native

* Add css alternative

Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
This commit is contained in:
Mike Hartington
2020-01-09 10:57:45 -05:00
committed by Liam DeBeasi
parent 3aa47e6e2f
commit cf287fda7f
4 changed files with 5 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
core/src/components/modal/animations/ios.enter.ts
View File

@ -27,7 +27,7 @@ export const iosEnterAnimation = (
.addAnimation([backdropAnimation, wrapperAnimation]); .addAnimation([backdropAnimation, wrapperAnimation]);
if (presentingEl) { if (presentingEl) {
const modalTransform = (presentingEl.tagName === 'ION-MODAL' && (presentingEl as HTMLIonModalElement).presentingElement !== undefined) ? '-10px' : 'calc(var(--ion-safe-area-top) + 10px)'; const modalTransform = (presentingEl.tagName === 'ION-MODAL' && (presentingEl as HTMLIonModalElement).presentingElement !== undefined) ? '-10px' : 'max(30px, var(--ion-safe-area-top))';
const bodyEl = document.body; const bodyEl = document.body;
const toPresentingScale = SwipeToCloseDefaults.MIN_PRESENTING_SCALE; const toPresentingScale = SwipeToCloseDefaults.MIN_PRESENTING_SCALE;
const finalTransform = `translateY(${modalTransform}) scale(${toPresentingScale})`; const finalTransform = `translateY(${modalTransform}) scale(${toPresentingScale})`;

4
core/src/components/modal/animations/ios.leave.ts
View File

@ -9,7 +9,7 @@ export const iosLeaveAnimation = (
baseEl: HTMLElement, baseEl: HTMLElement,
presentingEl?: HTMLElement, presentingEl?: HTMLElement,
duration = 500 duration = 500
): Animation => { ): Animation => {
const backdropAnimation = createAnimation() const backdropAnimation = createAnimation()
.addElement(baseEl.querySelector('ion-backdrop')!) .addElement(baseEl.querySelector('ion-backdrop')!)
@ -27,7 +27,7 @@ export const iosLeaveAnimation = (
.addAnimation([backdropAnimation, wrapperAnimation]); .addAnimation([backdropAnimation, wrapperAnimation]);
if (presentingEl) { if (presentingEl) {
const modalTransform = (presentingEl.tagName === 'ION-MODAL' && (presentingEl as HTMLIonModalElement).presentingElement !== undefined) ? '-10px' : 'calc(var(--ion-safe-area-top) + 10px)'; const modalTransform = (presentingEl.tagName === 'ION-MODAL' && (presentingEl as HTMLIonModalElement).presentingElement !== undefined) ? '-10px' : 'max(30px, var(--ion-safe-area-top))';
const bodyEl = document.body; const bodyEl = document.body;
const currentPresentingScale = SwipeToCloseDefaults.MIN_PRESENTING_SCALE; const currentPresentingScale = SwipeToCloseDefaults.MIN_PRESENTING_SCALE;
const presentingAnimation = createAnimation() const presentingAnimation = createAnimation()

2
core/src/components/modal/modal.ios.scss
View File

@ -27,5 +27,5 @@
:host(.modal-card) .modal-wrapper { :host(.modal-card) .modal-wrapper {
@include border-radius($modal-ios-border-radius, $modal-ios-border-radius, 0, 0); @include border-radius($modal-ios-border-radius, $modal-ios-border-radius, 0, 0);
height: calc(100% - var(--ion-safe-area-top) - 20px); height: calc(100% - max(30px, var(--ion-safe-area-top)) - 10px);
} }

7
core/src/components/modal/test/spec/index.html
View File

@ -6,18 +6,13 @@
<title>Modal - Spec</title> <title>Modal - Spec</title>
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet"> <link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet"> <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
<script src="../../../../../scripts/testing/scripts.js"></script> <script src="../../../../../scripts/testing/scripts.js"></script>
<script nomodule src="../../../../../dist/ionic/ionic.js"></script> <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script> <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
<style> <style>
:root {
--ion-safe-area-top: 20px;
--ion-safe-area-bottom: 20px;
}
#modal-header { #modal-header {
padding-top: 5px !important; padding-top: 5px !important;
height: 55px; height: 55px;