perf(menu): several improvements

- `display: none;` when menu is closed
- `ion-backdrop` is display: none when it is not used
- `ion-backdrop` is much smaller

Author: manucorporat

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

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

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,20 +38,22 @@ 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;
 }
 
 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);
-    }
   }
 }

src/components/menu/menu.ts

@@ -181,14 +181,14 @@ import { GestureController } from '../../gestures/gesture-controller';
     'role': 'navigation'
   },
   template: `
-    <ng-content></ng-content>
+    <div class="menu-inner"><ng-content></ng-content></div>
     <ion-backdrop (click)="bdClick($event)" disableScroll="false"></ion-backdrop>
   `,
   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 <HTMLElement>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
    */

src/components/menu/menu.wp.scss

@@ -6,6 +6,6 @@
 $menu-wp-background:            #f2f2f2 !default;
 
 
-ion-menu {
+.menu-inner {
   background: $menu-wp-background;
 }

src/gestures/slide-gesture.ts

@@ -49,21 +49,22 @@ export class SlideGesture extends PanGesture {
   }
 
   onDragMove(ev: any) {
+    let slide = this.slide;
     let coord = <any>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;
   }