multiple panes updates

ionic/components/content/content.scss

@@ -2,14 +2,9 @@
 // Content
 // --------------------------------------------------
 
-$content-container-background-color:      $background-color !default;
 $content-background-color:                $background-color !default;
 
 
-.content-container {
-  background-color: $content-container-background-color;
-}
-
 ion-content {
   position: relative;
   display: block;

ionic/components/content/modes/ios.scss

@@ -1,20 +0,0 @@
-
-// iOS Content
-// --------------------------------------------------
-
-/*$content-container-ios-background-color:     #000 !default;
-$content-ios-background-color:               #efeff4 !default;
-
-
-.nav[mode=ios].show-pane {
-
-  .content-container {
-    background-color: $content-container-ios-background-color;
-  }
-
-  ion-content {
-    background-color: $content-ios-background-color;
-  }
-
-}
-*/

ionic/components/nav/pane.ts

@@ -10,7 +10,7 @@ import {PaneAnchor, PaneContentAnchor, NavBarContainer} from './anchors';
 
 export class PaneController {
   constructor(viewCtrl: ViewController) {
-    this.panes = {};
+    this.panes = [];
     this.viewCtrl = viewCtrl;
 
     this.bindings = Injector.resolve([
@@ -25,26 +25,33 @@ export class PaneController {
 
     let key = itemStructure.key;
     let viewCtrl = this.viewCtrl;
-    let pane = this.panes[key];
+    let pane = this.panes[this.panes.length - 1];
 
-    if (pane) {
-      // nav pane which the entering component already exists
+    if (pane && pane.key === key) {
+      // the last pane's structure is the same as the one the item needs to go in
       callback(pane);
 
     } else {
       // create a new nav pane
-      this.panes[key] = null;
+      viewCtrl.loader.loadNextToLocation(Pane, viewCtrl.anchorElementRef(), this.bindings).then((componentRef) => {
 
+        // get the pane reference
+        pane = this.newPane;
+        this.newPane = null;
 
-      viewCtrl.loader.loadNextToLocation(Pane, viewCtrl.anchorElementRef(), this.bindings).then(() => {
-
-        // get the pane reference by name
-        pane = this.panes[key];
         let sectionAnchorElementRef = pane && pane.sectionAnchorElementRef;
         if (!sectionAnchorElementRef) {
           return callback();
         }
 
+        pane.key = key;
+        pane.dispose = () => {
+          componentRef.dispose();
+          this.panes.splice(this.panes.indexOf(pane), 1);
+        };
+
+        this.panes.push(pane);
+
         let promises = [];
         let sectionsToAdd = [];
 
@@ -81,12 +88,7 @@ export class PaneController {
   }
 
   add(pane) {
-    for (let np in this.panes) {
-      if (this.panes[np] === null) {
-        this.panes[np] = pane;
-        return;
-      }
-    }
+    this.newPane = pane;
   }
 
 }
@@ -95,7 +97,7 @@ export class PaneController {
   selector: 'ion-pane',
   classId: 'nav',
   host: {
-    ['[class.show-pane]']: 'showPane'
+    '[style.z-index]': 'zIndex',
   }
 })
 @View({
@@ -115,15 +117,9 @@ export class Pane extends Ion {
     ionicConfig: IonicConfig
   ) {
     super(elementRef, ionicConfig);
-
     viewCtrl.panes.add(this);
+    this.totalItems = 0;
+    this.zIndex = ++viewCtrl.zIndexes;
   }
 
-  set showPane(val) {
-    this._showPane = val;
-  }
-
-  get showPane() {
-    return this._showPane;
-  }
 }

ionic/components/nav/test/basic/pages/second-page.ts

@@ -5,8 +5,9 @@ import {FirstPage} from './first-page';
 
 @IonicView({
   template: `
-    <ion-navbar *navbar primary><ion-title>Second Page Header</ion-title></ion-navbar>
     <ion-content class="padding">
+      <h1>Second page</h1>
+      <p>This page does not have a nav bar!</p>
       <p><button (click)="pop()">Pop (Go back to 1st)</button></p>
       <p><button id="from2To1" nav-pop>Pop with NavPop (Go back to 1st)</button></p>
       <p><button id="from2To3" (click)="push()">Push (Go to 3rd)</button></p>

ionic/components/view/view-controller.ts

@@ -42,6 +42,7 @@ export class ViewController extends Ion {
 
     this.id = ++ctrlIds;
     this._ids = -1;
+    this.zIndexes = -1;
 
     // build a new injector for child ViewItems to use
     this.bindings = Injector.resolve([

ionic/components/view/view-item.ts

@@ -74,11 +74,18 @@ export class ViewItem {
             contentContainer.createHostView(hostProtoViewRef, -1, bindings);
         var newLocation = viewCtrl.viewMngr.getHostElement(hostViewRef);
         var newComponent = viewCtrl.viewMngr.getComponent(newLocation);
+        pane.totalItems++;
 
         var dispose = () => {
           var index = contentContainer.indexOf(hostViewRef);
           if (index !== -1) {
             contentContainer.remove(index);
+
+            // remove the pane if there are no view items left
+            pane.totalItems--;
+            if (pane.totalItems === 0) {
+              pane.dispose();
+            }
           }
         };
         this.disposals.push(dispose);
@@ -100,7 +107,10 @@ export class ViewItem {
           let navbarView = navbarViewContainer.createEmbeddedView(navbarTemplateRef, -1);
 
           this.disposals.push(() => {
-            navbarViewContainer.remove( navbarViewContainer.indexOf(navbarView) );
+            let index = navbarViewContainer.indexOf(navbarView);
+            if (index > -1) {
+              navbarViewContainer.remove(index);
+            }
           });
         }
 
@@ -280,9 +290,6 @@ export class ViewItem {
     will fire, whether it was the first load or loaded from the cache.
   */
   didEnter() {
-    if (this.pane) {
-      this.pane.showPane = true;
-    }
     let navbarView = this.navbarView();
     if (navbarView) {
       navbarView.didEnter();

ionic/ionic.ios.scss

@@ -6,7 +6,6 @@
   "components/action-menu/modes/ios",
   "components/card/modes/ios",
   "components/checkbox/modes/ios",
-  "components/content/modes/ios",
   "components/list/modes/ios",
   "components/text-input/modes/ios",
   "components/nav-bar/modes/ios",