javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-18 19:21:34 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(menu): default to overlay for ios menu (#19063)

Browse Source 
resolves #18662
This commit is contained in:
Adam Bradley
2019-10-08 11:59:06 -05:00
committed by Brandy Carney
parent 1b9d61bfa8
commit dbf6a448ff
9 changed files with 29 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
core/src/components/menu/menu.tsx
View File

@ -8,6 +8,11 @@ import { GESTURE_CONTROLLER } from '../../utils/gesture';
import { assert, isEndSide as isEnd } from '../../utils/helpers';
import { menuController } from '../../utils/menu-controller';
const iosEasing = 'cubic-bezier(0.32,0.72,0,1)';
const mdEasing = 'cubic-bezier(0.0,0.0,0.2,1)';
const iosEasingReverse = 'cubic-bezier(1, 0, 0.68, 0.28)';
const mdEasingReverse = 'cubic-bezier(0.4, 0, 0.6, 1)';
@Component({
tag: 'ion-menu',
styleUrls: {
@ -23,7 +28,10 @@ export class Menu implements ComponentInterface, MenuI {
private gesture?: Gesture;
private blocker = GESTURE_CONTROLLER.createBlocker({ disableScroll: true });
private mode = getIonMode(this);
mode = getIonMode(this);
private easing: string = this.mode === 'ios' ? iosEasing : mdEasing;
private easingReverse: string = this.mode === 'ios' ? iosEasingReverse : mdEasingReverse;
isAnimating = false;
width!: number; // TODO
@ -138,7 +146,7 @@ export class Menu implements ComponentInterface, MenuI {
async connectedCallback() {
if (this.type === undefined) {
this.type = config.get('menuType', this.mode === 'ios' ? 'reveal' : 'overlay');
this.type = config.get('menuType', 'overlay');
}
if (!Build.isBrowser) {
@ -329,12 +337,12 @@ AFTER:
const isReversed = !shouldOpen;
const ani = (this.animation as IonicAnimation)!
.direction((isReversed) ? 'reverse' : 'normal')
.easing((isReversed) ? 'cubic-bezier(0.4, 0.0, 0.6, 1)' : 'cubic-bezier(0.0, 0.0, 0.2, 1)');
.easing((isReversed) ? this.easingReverse : this.easing);
if (animated) {
await ani.playAsync();
await ani.play();
} else {
ani.playSync();
ani.play({ sync: true });
}
}
@ -532,7 +540,7 @@ AFTER:
this.isAnimating = true;
const ani = (this.animation as IonicAnimation)!.direction('reverse');
ani.playSync();
ani.play({ sync: true });
this.afterAnimation(false);
}