diff --git a/src/components/menu/menu.ios.scss b/src/components/menu/menu.ios.scss index e2dd7e7714..98b94b89ab 100644 --- a/src/components/menu/menu.ios.scss +++ b/src/components/menu/menu.ios.scss @@ -8,7 +8,7 @@ $menu-ios-box-shadow-color: rgba(0, 0, 0, .25) !default; $menu-ios-box-shadow: 0 0 10px $menu-ios-box-shadow-color !default; -ion-menu { +.menu-inner { background: $menu-ios-background; } @@ -20,6 +20,6 @@ ion-menu { box-shadow: $menu-ios-box-shadow; } -ion-menu[type=overlay] { +ion-menu[type=overlay] .menu-inner { box-shadow: $menu-ios-box-shadow; } diff --git a/src/components/menu/menu.md.scss b/src/components/menu/menu.md.scss index 4d9a25a93f..f884bb91ae 100644 --- a/src/components/menu/menu.md.scss +++ b/src/components/menu/menu.md.scss @@ -8,7 +8,7 @@ $menu-md-box-shadow-color: rgba(0, 0, 0, .25) !default; $menu-md-box-shadow: 0 0 10px $menu-md-box-shadow-color !default; -ion-menu { +.menu-inner { background: $menu-md-background; } @@ -20,6 +20,6 @@ ion-menu { box-shadow: $menu-md-box-shadow; } -ion-menu[type=overlay] { +ion-menu[type=overlay] .menu-inner { box-shadow: $menu-md-box-shadow; } diff --git a/src/components/menu/menu.scss b/src/components/menu/menu.scss index da19380e13..b892ba3b1c 100644 --- a/src/components/menu/menu.scss +++ b/src/components/menu/menu.scss @@ -8,6 +8,21 @@ $menu-small-width: $menu-width - 40px !default; ion-menu { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + + display: none; + + &.show-menu { + display: block; + } +} + + +.menu-inner { position: absolute; top: 0; right: auto; @@ -23,13 +38,13 @@ ion-menu { transform: translate3d(-9999px, 0, 0); } -ion-menu > ion-header, -ion-menu > ion-content, -ion-menu > ion-footer { +.menu-inner > ion-header, +.menu-inner > ion-content, +.menu-inner > ion-footer { position: relative; } -ion-menu[side=right] { +ion-menu[side=right] > .menu-inner { right: 0; left: auto; } @@ -37,6 +52,8 @@ ion-menu[side=right] { ion-menu ion-backdrop { z-index: -1; display: none; + + opacity: .1; } .menu-content { @@ -54,7 +71,7 @@ ion-menu ion-backdrop { @media (max-width: 340px) { - ion-menu { + .menu-inner { width: $menu-small-width; } @@ -66,7 +83,11 @@ ion-menu ion-backdrop { // The content slides over to reveal the menu underneath. // The menu itself, which is under the content, does not move. -ion-menu[type=reveal].show-menu { +ion-menu[type=reveal] { + z-index: 0; +} + +ion-menu[type=reveal].show-menu .menu-inner { transform: translate3d(0, 0, 0); } @@ -79,17 +100,7 @@ ion-menu[type=reveal].show-menu { ion-menu[type=overlay] { z-index: $z-index-menu-overlay; - ion-backdrop { - left: -3000px; + .show-backdrop { display: block; - - width: 6000px; - - opacity: .01; - transform: translate3d(-9999px, 0, 0); - - &.show-backdrop { - transform: translate3d(0, 0, 0); - } } } diff --git a/src/components/menu/menu.ts b/src/components/menu/menu.ts index 69214542d9..9d103befd8 100644 --- a/src/components/menu/menu.ts +++ b/src/components/menu/menu.ts @@ -181,14 +181,14 @@ import { GestureController } from '../../gestures/gesture-controller'; 'role': 'navigation' }, template: ` - + `, directives: [Backdrop], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, }) -export class Menu extends Ion { +export class Menu { private _preventTime: number = 0; private _cntEle: HTMLElement; private _cntGesture: MenuContentGesture; @@ -303,9 +303,7 @@ export class Menu extends Ion { private _keyboard: Keyboard, private _zone: NgZone, public gestureCtrl: GestureController - ) { - super(_elementRef); - } + ) { } /** * @private @@ -576,11 +574,15 @@ export class Menu extends Ion { return this; } + getNativeElement(): HTMLElement { + return this._elementRef.nativeElement; + } + /** * @private */ getMenuElement(): HTMLElement { - return this.getNativeElement(); + return this.getNativeElement().querySelector('.menu-inner'); } /** @@ -597,6 +599,10 @@ export class Menu extends Ion { return this.backdrop.getNativeElement(); } + width(): number { + return this.getMenuElement().offsetWidth; + } + /** * @private */ diff --git a/src/components/menu/menu.wp.scss b/src/components/menu/menu.wp.scss index ed1839cc58..5a35114238 100644 --- a/src/components/menu/menu.wp.scss +++ b/src/components/menu/menu.wp.scss @@ -6,6 +6,6 @@ $menu-wp-background: #f2f2f2 !default; -ion-menu { +.menu-inner { background: $menu-wp-background; } diff --git a/src/gestures/slide-gesture.ts b/src/gestures/slide-gesture.ts index 421ed1e050..2d57162227 100644 --- a/src/gestures/slide-gesture.ts +++ b/src/gestures/slide-gesture.ts @@ -49,21 +49,22 @@ export class SlideGesture extends PanGesture { } onDragMove(ev: any) { + let slide = this.slide; let coord = pointerCoord(ev); let newPos = coord[this.direction]; let newTimestamp = Date.now(); - let velocity = (newPos - this.slide.pos) / (newTimestamp - this.slide.timestamp); + let velocity = (newPos - slide.pos) / (newTimestamp - slide.timestamp); - this.slide.pos = newPos; - this.slide.timestamp = newTimestamp; - this.slide.distance = clamp( - this.slide.min, - newPos - this.slide.pointerStartPos + this.slide.elementStartPos, - this.slide.max + slide.pos = newPos; + slide.timestamp = newTimestamp; + slide.distance = clamp( + slide.min, + newPos - slide.pointerStartPos + slide.elementStartPos, + slide.max ); - this.slide.velocity = velocity; - this.slide.delta = newPos - this.slide.pointerStartPos; - this.onSlide(this.slide, ev); + slide.velocity = velocity; + slide.delta = newPos - slide.pointerStartPos; + this.onSlide(slide, ev); return true; }