refactor(toolbar): allow any content in the center

2026-03-13 10:22:08 +08:00 · 2015-11-11 11:27:08 -06:00
parent 4a51a98f69
commit 9ddcc44f67
16 changed files with 135 additions and 124 deletions
--- 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) {
--- 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());
  }
--- 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;
  }

--- 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() {
--- a/ionic/components/tabs/test/ghost/e2e.ts
+++ b/ionic/components/tabs/test/ghost/e2e.ts
@@ -1 +0,0 @@
-
--- 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);
--- 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;
 }
--- 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 {
--- 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%);
    }
--- 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(
--- 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',
--- 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";
--- 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";
--- a/ionic/platform/cordova-ios.scss
+++ 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;
+  }
+
+}
--- a/ionic/platform/cordova.scss
+++ b/ionic/platform/cordova.scss
@@ -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;
-  }
-
-}
--- 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());
+}