fix(menu): behaves like main content

fixes ionic-team#8504
manucorporat · Oct 5, 2016 · be58492 · be58492
1 parent 63c6d46
commit be58492
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 12 deletions.
diff --git a/src/components/content/content.ts b/src/components/content/content.ts
@@ -488,7 +488,9 @@ export class Content extends Ion {
     this._tabsPlacement = null;
 
     let ele: HTMLElement = this._elementRef.nativeElement;
-    if (!ele) return;
+    if (!ele) {
+      return;
+    }
 
     let parentEle: HTMLElement = ele.parentElement;
     let computedStyle: any;

diff --git a/src/components/menu/menu.scss b/src/components/menu/menu.scss
@@ -29,9 +29,7 @@ ion-menu.show-menu {
   bottom: 0;
   left: 0;
 
-  display: flex;
-
-  flex-direction: column;
+  display: block;
 
   width: $menu-width;
 
@@ -41,7 +39,7 @@ ion-menu.show-menu {
 .menu-inner > ion-header,
 .menu-inner > ion-content,
 .menu-inner > ion-footer {
-  position: relative;
+  position: absolute;
 }
 
 ion-menu[side=right] > .menu-inner {

diff --git a/src/components/menu/menu.ts b/src/components/menu/menu.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, Input, NgZone, Output, Renderer, ViewChild, ViewEncapsulation } from '@angular/core';
+import { ChangeDetectionStrategy, Component, ContentChild, ElementRef, EventEmitter, Input, NgZone, Output, Renderer, ViewChild, ViewEncapsulation } from '@angular/core';
 
 import { Backdrop } from '../backdrop/backdrop';
 import { Config } from '../../config/config';
@@ -10,7 +10,7 @@ import { MenuType } from './menu-types';
 import { Platform } from '../../platform/platform';
 import { GestureController } from '../../gestures/gesture-controller';
 import { UIEventManager } from '../../util/ui-event-manager';
-
+import { Content } from '../content/content';
 
 /**
  * @name Menu
@@ -208,6 +208,10 @@ export class Menu {
    */
   @ViewChild(Backdrop) backdrop: Backdrop;
 
+  /**
+   * @private
+   */
+  @ContentChild(Content) menuContent: Content;
   /**
    * @input {any} A reference to the content element the menu should use.
    */
@@ -471,6 +475,7 @@ export class Menu {
     this.getNativeElement().classList.add('show-menu');
     this.getBackdropElement().classList.add('show-backdrop');
     this._keyboard.close();
+    this.menuContent && this.menuContent.resize();
     this._isAnimating = true;
   }
 

diff --git a/src/components/tabs/tabs.ts b/src/components/tabs/tabs.ts
@@ -6,7 +6,6 @@ import { Content } from '../content/content';
 import { DeepLinker } from '../../navigation/deep-linker';
 import { Ion } from '../ion';
 import { isBlank } from '../../util/util';
-import { nativeRaf } from '../../util/dom';
 import { NavController } from '../../navigation/nav-controller';
 import { NavControllerBase } from '../../navigation/nav-controller-base';
 import { NavOptions, DIRECTION_SWITCH } from '../../navigation/nav-util';
@@ -472,10 +471,7 @@ export class Tabs extends Ion implements AfterViewInit {
       if (alreadyLoaded && selectedPage) {
         let content = <Content>selectedPage.getContent();
         if (content && content instanceof Content) {
-          nativeRaf(() => {
-            content.readDimensions();
-            content.writeDimensions();
-          });
+          content.resize();
         }
       }
     });

diff --git a/src/transitions/page-transition.ts b/src/transitions/page-transition.ts
@@ -14,6 +14,7 @@ export class PageTransition extends Transition {
       this.enteringPage = new Animation(this.enteringView.pageRef());
       this.add(this.enteringPage.beforeAddClass('show-page'));
 
+      // Resize content before transition starts
       this.beforeAddRead(this.readDimensions.bind(this));
       this.beforeAddWrite(this.writeDimensions.bind(this));
     }