From 9ddcc44f67771508ac13307c3f8b948cf83d5109 Mon Sep 17 00:00:00 2001
From: Adam Bradley <adambradley25@gmail.com>
Date: Wed, 11 Nov 2015 11:27:08 -0600
Subject: [PATCH] refactor(toolbar): allow any content in the center

---
 ionic/components/nav/view-controller.ts       | 37 +-----------
 ionic/components/navbar/navbar.ts             | 58 +++++++++++++------
 ionic/components/segment/modes/md.scss        |  1 -
 ionic/components/tabs/test/basic/index.ts     |  8 ++-
 ionic/components/tabs/test/ghost/e2e.ts       |  1 -
 ionic/components/tap-click/tap-click.ts       |  2 +-
 ionic/components/toolbar/modes/ios.scss       |  4 +-
 .../toolbar/test/scenarios/main.html          | 31 ++++++++--
 ionic/components/toolbar/toolbar.scss         | 19 +++---
 ionic/components/toolbar/toolbar.ts           | 14 ++---
 ionic/config/modes.ts                         |  2 +-
 ionic/ionic.core.scss                         |  4 --
 ionic/ionic.ios.scss                          |  3 +-
 ionic/platform/cordova-ios.scss               | 23 ++++++++
 ionic/platform/cordova.scss                   | 21 -------
 ionic/platform/registry.ts                    | 31 +++++-----
 16 files changed, 135 insertions(+), 124 deletions(-)
 delete mode 100644 ionic/components/tabs/test/ghost/e2e.ts
 create mode 100644 ionic/platform/cordova-ios.scss
 delete mode 100644 ionic/platform/cordova.scss

diff --git a/ionic/components/nav/view-controller.ts b/ionic/components/nav/view-controller.ts
index 02470fa1d3..3de4aa5ed7 100644
--- a/ionic/components/nav/view-controller.ts
+++ b/ionic/components/nav/view-controller.ts
@@ -30,10 +30,6 @@ export class ViewController {
     return false;
   }
 
-  /**
-   * TODO
-   * @param {TODO} instance  TODO
-   */
   setInstance(instance) {
     this.instance = instance;
   }
@@ -50,9 +46,6 @@ export class ViewController {
     this._destroys.push(destroyFn);
   }
 
-  /**
-   * TODO
-   */
   destroy() {
     for (let i = 0; i < this._destroys.length; i++) {
       this._destroys[i]();
@@ -108,66 +101,38 @@ export class ViewController {
     return this._nbDir;
   }
 
-  /**
-   * TODO
-   * @returns {TODO} TODO
-   */
   hasNavbar() {
     return !!this.getNavbar();
   }
 
-  /**
-   * TODO
-   * @returns {TODO} TODO
-   */
   navbarRef() {
     let navbar = this.getNavbar();
     return navbar && navbar.getElementRef();
   }
 
-  /**
-   * TODO
-   * @returns {TODO} TODO
-   */
   titleRef() {
     let navbar = this.getNavbar();
     return navbar && navbar.getTitleRef();
   }
 
-  /**
-   * TODO
-   * @returns {TODO} TODO
-   */
   navbarItemRefs() {
     let navbar = this.getNavbar();
     return navbar && navbar.getItemRefs();
   }
 
-  /**
-   * TODO
-   * @returns {TODO} TODO
-   */
   backBtnRef() {
     let navbar = this.getNavbar();
     return navbar && navbar.getBackButtonRef();
   }
 
-  /**
-   * TODO
-   * @returns {TODO} TODO
-   */
   backBtnTextRef() {
     let navbar = this.getNavbar();
     return navbar && navbar.getBackButtonTextRef();
   }
 
-  /**
-   * TODO
-   * @returns {TODO} TODO
-   */
   navbarBgRef() {
     let navbar = this.getNavbar();
-    return navbar && navbar.getNativeElement().querySelector('.toolbar-background');
+    return navbar && navbar.getBackgroundRef();
   }
 
   hideBackButton(shouldHide) {
diff --git a/ionic/components/navbar/navbar.ts b/ionic/components/navbar/navbar.ts
index 425ab07c7a..6f54900dd4 100644
--- a/ionic/components/navbar/navbar.ts
+++ b/ionic/components/navbar/navbar.ts
@@ -38,13 +38,25 @@ class BackButton extends Ion {
 @Directive({
   selector: '.back-button-text'
 })
-class BackButtonText extends Ion {
+class BackButtonText {
   constructor(
     elementRef: ElementRef,
-    @Optional() @Inject(forwardRef(() => Navbar)) navbar: Navbar
+    @Inject(forwardRef(() => Navbar)) navbar: Navbar
   ) {
-    super(elementRef, null);
-    navbar && navbar.setBackButtonTextRef(elementRef);
+    navbar.setBackButtonTextRef(elementRef);
+  }
+}
+
+
+@Directive({
+  selector: 'toolbar-background'
+})
+class ToolbarBackground {
+  constructor(
+    elementRef: ElementRef,
+    @Inject(forwardRef(() => Navbar)) navbar: Navbar
+  ) {
+    navbar.setBackgroundRef(elementRef);
   }
 }
 
@@ -52,19 +64,19 @@ class BackButtonText extends Ion {
 @Component({
   selector: 'ion-navbar',
   template:
-    '<div class="toolbar-inner">' +
-      '<button class="back-button" [hidden]="hideBackButton">' +
-        '<icon class="back-button-icon" [name]="bbIcon"></icon>' +
-        '<span class="back-button-text">' +
-          '<span class="back-default">{{bbDefault}}</span>' +
-        '</span>' +
-      '</button>' +
-      '<ng-content select="[menu-toggle]"></ng-content>' +
-      '<ng-content select="ion-title"></ng-content>' +
-      '<ng-content select="ion-nav-items[primary]"></ng-content>' +
-      '<ng-content select="ion-nav-items[secondary]"></ng-content>' +
-    '</div>' +
-    '<div class="toolbar-background"></div>',
+    '<toolbar-background></toolbar-background>' +
+    '<button class="back-button" [hidden]="hideBackButton">' +
+      '<icon class="back-button-icon" [name]="bbIcon"></icon>' +
+      '<span class="back-button-text">' +
+        '<span class="back-default">{{bbDefault}}</span>' +
+      '</span>' +
+    '</button>' +
+    '<ng-content select="[menu-toggle]"></ng-content>' +
+    '<ng-content select="ion-nav-items[primary]"></ng-content>' +
+    '<ng-content select="ion-nav-items[secondary]"></ng-content>' +
+    '<toolbar-content>' +
+      '<ng-content></ng-content>' +
+    '</toolbar-content>',
   host: {
     '[hidden]': '_hidden'
   },
@@ -72,7 +84,7 @@ class BackButtonText extends Ion {
     'hideBackButton',
     'navbarStyle'
   ],
-  directives: [BackButton, BackButtonText, Icon]
+  directives: [BackButton, BackButtonText, Icon, ToolbarBackground]
 })
 export class Navbar extends ToolbarBase {
   constructor(
@@ -105,7 +117,7 @@ export class Navbar extends ToolbarBase {
     if (typeof hideBackButton === 'string') {
       this.hideBackButton = (hideBackButton === '' || hideBackButton === 'true');
     }
-    
+
     if (this.navbarStyle) {
       this.renderer.setElementAttribute(this.elementRef, this.navbarStyle, '');
     }
@@ -127,6 +139,14 @@ export class Navbar extends ToolbarBase {
     this.bbtRef = backButtonTextElementRef;
   }
 
+  setBackgroundRef(backgrouneElementRef) {
+    this.bgRef = backgrouneElementRef;
+  }
+
+  getBackgroundRef() {
+    return this.bgRef;
+  }
+
   didEnter() {
     this.app.setTitle(this.getTitleText());
   }
diff --git a/ionic/components/segment/modes/md.scss b/ionic/components/segment/modes/md.scss
index b201f690c3..cf7e4d37d1 100644
--- a/ionic/components/segment/modes/md.scss
+++ b/ionic/components/segment/modes/md.scss
@@ -38,7 +38,6 @@ ion-segment {
 .toolbar {
 
   ion-segment {
-    width: 95%;
     margin: 0 auto;
   }
 
diff --git a/ionic/components/tabs/test/basic/index.ts b/ionic/components/tabs/test/basic/index.ts
index f144c2393f..ba372eacaa 100644
--- a/ionic/components/tabs/test/basic/index.ts
+++ b/ionic/components/tabs/test/basic/index.ts
@@ -99,12 +99,16 @@ class Tab3 {}
       </ion-content>
     </ion-menu>
 
-    <ion-tabs #content tabbar-style="secondary">
+    <ion-tabs #content>
       <ion-tab tab-title="Plain List" tab-icon="star" [root]="root1"></ion-tab>
       <ion-tab tab-title="Schedule" tab-icon="globe" [root]="root2"></ion-tab>
       <ion-tab tab-title="Stopwatch" tab-icon="stopwatch" [root]="root3"></ion-tab>
     </ion-tabs>
-  `
+  `,
+  config: {
+    navbarStyle: 'secondary',
+    tabbarStyle: 'secondary'
+  }
 })
 export class TabsPage {
   constructor() {
diff --git a/ionic/components/tabs/test/ghost/e2e.ts b/ionic/components/tabs/test/ghost/e2e.ts
deleted file mode 100644
index 8b13789179..0000000000
--- a/ionic/components/tabs/test/ghost/e2e.ts
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/ionic/components/tap-click/tap-click.ts b/ionic/components/tap-click/tap-click.ts
index e4c87542d2..eeabd463e3 100644
--- a/ionic/components/tap-click/tap-click.ts
+++ b/ionic/components/tap-click/tap-click.ts
@@ -25,7 +25,7 @@ export function initTapClick(windowInstance, documentInstance, appInstance, conf
     activator = new RippleActivator(app, config, fastdom);
 
   } else if (config.get('activator') == 'highlight') {
-    activator = new Activator(app, config, fastdom));
+    activator = new Activator(app, config, fastdom);
   }
 
   isTapPolyfill = (config.get('tapPolyfill') === true);
diff --git a/ionic/components/toolbar/modes/ios.scss b/ionic/components/toolbar/modes/ios.scss
index f1b10aa69e..52f87ac4bf 100644
--- a/ionic/components/toolbar/modes/ios.scss
+++ b/ionic/components/toolbar/modes/ios.scss
@@ -71,7 +71,7 @@ $toolbar-ios-title-font-size:               1.7rem !default;
 
 }
 
-.toolbar .toolbar-background {
+.toolbar toolbar-background {
   border-bottom-width: 1px;
   border-bottom-style: solid;
 }
@@ -105,6 +105,6 @@ ion-nav-items[secondary] {
   order: map-get($toolbar-order-ios, secondary);
 }
 
-&.hairlines .toolbar .toolbar-background {
+&.hairlines .toolbar toolbar-background {
   border-bottom-width: 0.55px;
 }
diff --git a/ionic/components/toolbar/test/scenarios/main.html b/ionic/components/toolbar/test/scenarios/main.html
index 7467222d5e..1500da91e4 100644
--- a/ionic/components/toolbar/test/scenarios/main.html
+++ b/ionic/components/toolbar/test/scenarios/main.html
@@ -1,9 +1,6 @@
 
 <ion-toolbar>
-  <a menu-toggle>
-    <icon menu></icon>
-  </a>
-  <ion-title>menu-toggle left. This is the title that never ends. It just goes on and on my friend.</ion-title>
+  <ion-title>This is the title that never ends. It just goes on and on my friend.</ion-title>
 </ion-toolbar>
 
 
@@ -168,6 +165,32 @@
 </ion-toolbar>
 
 
+<ion-toolbar>
+  <a menu-toggle>
+    <icon menu></icon>
+  </a>
+  <ion-nav-items primary>
+    <button>
+      <icon star></icon>
+    </button>
+  </ion-nav-items>
+  <ion-title>Left side menu toggle</ion-title>
+</ion-toolbar>
+
+
+<ion-toolbar>
+<ion-nav-items secondary>
+  <button>
+    <icon star></icon>
+  </button>
+</ion-nav-items>
+  <ion-title>Right side menu toggle</ion-title>
+  <a menu-toggle secondary>
+    <icon menu></icon>
+  </a>
+</ion-toolbar>
+
+
 
 <style>
   .toolbar {
diff --git a/ionic/components/toolbar/toolbar.scss b/ionic/components/toolbar/toolbar.scss
index 1e5ca5bd15..f7ba3efcda 100644
--- a/ionic/components/toolbar/toolbar.scss
+++ b/ionic/components/toolbar/toolbar.scss
@@ -7,7 +7,7 @@ $toolbar-padding:        4px !default;
 $toolbar-order: (
   backButton: 10,
   menu-toggle-primary: 20,
-  title: 30,
+  content: 30,
   primary: 40,
   secondary: 50,
   menu-toggle-secondary: 60,
@@ -37,7 +37,7 @@ $toolbar-order: (
   }
 }
 
-.toolbar .toolbar-background {
+.toolbar toolbar-background {
   position: absolute;
   left: 0;
   top: 0;
@@ -52,6 +52,12 @@ $toolbar-order: (
   pointer-events: none;
 }
 
+toolbar-content {
+  display: block;
+  flex: 1;
+  order: map-get($toolbar-order, content);
+}
+
 .toolbar button:hover:not(.disable-hover),
 .toolbar [button]:hover:not(.disable-hover),
 .toolbar button.activated,
@@ -64,15 +70,8 @@ $toolbar-order: (
   order: $flex-order-toolbar-bottom;
 }
 
-.toolbar-inner {
-  position: relative;
-  display: flex;
-  width: 100%;
-}
-
 ion-title {
   flex: 1;
-  order: map-get($toolbar-order, title);
   display: flex;
   align-items: center;
 }
@@ -132,7 +131,7 @@ ion-nav-items div {
 
   .toolbar[#{$color-name}] {
 
-    .toolbar-background {
+    toolbar-background {
       background-color: $color-value;
       border-color: darken($color-value, 10%);
     }
diff --git a/ionic/components/toolbar/toolbar.ts b/ionic/components/toolbar/toolbar.ts
index 31be90183b..0ac708a463 100644
--- a/ionic/components/toolbar/toolbar.ts
+++ b/ionic/components/toolbar/toolbar.ts
@@ -58,13 +58,13 @@ export class ToolbarBase extends Ion  {
 @Component({
   selector: 'ion-toolbar',
   template:
-    '<div class="toolbar-inner">' +
-      '<ng-content select="[menu-toggle]"></ng-content>' +
-      '<ng-content select="ion-title,ion-searchbar,ion-segment"></ng-content>' +
-      '<ng-content select="ion-nav-items[primary]"></ng-content>' +
-      '<ng-content select="ion-nav-items[secondary]"></ng-content>' +
-    '</div>' +
-    '<div class="toolbar-background"></div>'
+    '<toolbar-background></toolbar-background>' +
+    '<ng-content select="[menu-toggle]"></ng-content>' +
+    '<ng-content select="ion-nav-items[primary]"></ng-content>' +
+    '<ng-content select="ion-nav-items[secondary]"></ng-content>' +
+    '<toolbar-content>' +
+      '<ng-content></ng-content>' +
+    '</toolbar-content>'
 })
 export class Toolbar extends ToolbarBase {
   constructor(
diff --git a/ionic/config/modes.ts b/ionic/config/modes.ts
index b3257e3aac..4b90043f2a 100644
--- a/ionic/config/modes.ts
+++ b/ionic/config/modes.ts
@@ -51,7 +51,7 @@ Config.setModeConfig('md', {
   modalLeave: 'modal-md-slide-out',
 
   pageTransition: 'md',
-  pageTransitionDelay: 80,
+  pageTransitionDelay: 120,
 
   popupEnter: 'popup-md-pop-in',
   popupLeave: 'popup-md-pop-out',
diff --git a/ionic/ionic.core.scss b/ionic/ionic.core.scss
index a380b39f64..e55e6dfc5c 100644
--- a/ionic/ionic.core.scss
+++ b/ionic/ionic.core.scss
@@ -54,7 +54,3 @@ $ionicons: true !default;
 @if ($ionicons) {
   @import "fonts/ionicons";
 }
-
-
-// Engine
-@import  "platform/cordova";
diff --git a/ionic/ionic.ios.scss b/ionic/ionic.ios.scss
index 1ebdd65bb0..c29bfd9a79 100644
--- a/ionic/ionic.ios.scss
+++ b/ionic/ionic.ios.scss
@@ -20,4 +20,5 @@
   "components/searchbar/modes/ios",
   "components/segment/modes/ios",
   "components/switch/modes/ios",
-  "components/tabs/modes/ios";
+  "components/tabs/modes/ios",
+  "platform/cordova-ios";
diff --git a/ionic/platform/cordova-ios.scss b/ionic/platform/cordova-ios.scss
new file mode 100644
index 0000000000..b1dbea733a
--- /dev/null
+++ b/ionic/platform/cordova-ios.scss
@@ -0,0 +1,23 @@
+
+// iOS Cordova
+// --------------------------------------------------
+
+$cordova-ios-toolbar-padding:    2rem   !default;
+
+
+&.platform-cordova.platform-ios {
+
+  ion-navbar-section,
+  ion-navbar,
+  ion-menu > ion-toolbar {
+    min-height: $toolbar-ios-height + $cordova-ios-toolbar-padding;
+    height: $toolbar-ios-height + $cordova-ios-toolbar-padding;
+  }
+
+  ion-navbar,
+  ion-navbar ion-title,
+  ion-menu > ion-toolbar {
+    padding-top: $cordova-ios-toolbar-padding;
+  }
+
+}
diff --git a/ionic/platform/cordova.scss b/ionic/platform/cordova.scss
deleted file mode 100644
index 8da2fc7566..0000000000
--- a/ionic/platform/cordova.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-
-// Cordova
-// --------------------------------------------------
-
-.platform-cordova {
-
-
-  // iOS Cordova
-  // ------------
-  &.platform-ios ion-navbar-section,
-  &.platform-ios ion-navbar,
-  &.platform-ios ion-menu > ion-toolbar {
-    min-height: 64px;
-    height: 64px;
-  }
-
-  &.platform-ios .toolbar-inner {
-    margin-top: 20px;
-  }
-
-}
diff --git a/ionic/platform/registry.ts b/ionic/platform/registry.ts
index 4f9b1b2845..e9d74a2941 100644
--- a/ionic/platform/registry.ts
+++ b/ionic/platform/registry.ts
@@ -47,10 +47,10 @@ Platform.register({
     'tablet'
   ],
   settings: {
-    mode: 'md',
-    keyboardHeight: 290,
-    scrollAssist: true,
     hoverCSS: false,
+    keyboardHeight: 290,
+    mode: 'md',
+    scrollAssist: true,
   },
   isMatch(p) {
     return p.isPlatform('android', 'android|silk');
@@ -70,19 +70,13 @@ Platform.register({
     'iphone'
   ],
   settings: {
-    mode: 'ios',
-    scrollAssist: function(p) {
-      return /iphone|ipad|ipod/i.test(p.navigatorPlatform());
-    },
-    tapPolyfill: function(p) {
-      return /iphone|ipad|ipod/i.test(p.navigatorPlatform());
-    },
-    keyboardHeight: 290,
     hoverCSS: false,
-    swipeBackEnabled: function(p) {
-      return /iphone|ipad|ipod/i.test(p.navigatorPlatform());
-    },
+    keyboardHeight: 290,
+    mode: 'ios',
+    scrollAssist: isIOSDevice,
+    swipeBackEnabled: isIOSDevice,
     swipeBackThreshold: 40,
+    tapPolyfill: isIOSDevice,
   },
   isMatch(p) {
     return p.isPlatform('ios', 'iphone|ipad|ipod');
@@ -153,3 +147,12 @@ Platform.register({
     return !!(window.cordova || window.PhoneGap || window.phonegap);
   }
 });
+
+
+function isIOSDevice(p) {
+  // shortcut function to be reused internally
+  // checks navigator.platform to see if it's an actual iOS device
+  // this does not use the user-agent string because it is often spoofed
+  // an actual iPad will return true, a chrome dev tools iPad will return false
+  return /iphone|ipad|ipod/i.test(p.navigatorPlatform());
+}