From d9acceb82aa899eb7460266b237750bf61541d80 Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Fri, 15 May 2015 14:13:14 -0500 Subject: [PATCH] horizontal align dat title --- ionic/components/app/normalize.scss | 13 +---- ionic/components/app/structure.scss | 11 +++- ionic/components/app/util.scss | 21 ++++++-- ionic/components/nav/nav-base.js | 7 +-- .../nav/test/basic/pages/first-page.js | 4 +- .../nav/test/basic/pages/second-page.js | 4 +- .../nav/test/basic/pages/third-page.js | 4 +- ionic/components/toolbar/extensions/ios.scss | 8 +-- ionic/components/toolbar/toolbar.js | 52 ++++++------------- ionic/components/toolbar/toolbar.scss | 18 ++++--- 10 files changed, 69 insertions(+), 73 deletions(-) diff --git a/ionic/components/app/normalize.scss b/ionic/components/app/normalize.scss index 25a0309365..4445560738 100644 --- a/ionic/components/app/normalize.scss +++ b/ionic/components/app/normalize.scss @@ -6,21 +6,10 @@ html { -ms-text-size-adjust: 100%; // 1 -webkit-text-size-adjust: 100%; // 1 } -*, -*:before, -*:after { +* { box-sizing: border-box; } -body { - position: relative; - overflow: hidden; - max-width: 100%; - max-height: 100%; - margin: 0; - padding: 0; -} - // HTML5 display definitions // ========================================================================== diff --git a/ionic/components/app/structure.scss b/ionic/components/app/structure.scss index 3f4e1e5779..3a12a757f7 100644 --- a/ionic/components/app/structure.scss +++ b/ionic/components/app/structure.scss @@ -3,6 +3,15 @@ body { height: 100%; } +body { + position: relative; + overflow: hidden; + max-width: 100%; + max-height: 100%; + margin: 0; + padding: 0; +} + ion-app { @include flex-display(); @include flex-direction(column); @@ -33,7 +42,7 @@ ion-nav { // container of many toolbars for each view in the ion-nav position: relative; width: 100%; - min-height: 50px; + min-height: 4.4rem; @include flex-order($flex-order-toolbar-top); } diff --git a/ionic/components/app/util.scss b/ionic/components/app/util.scss index 11d5920782..e8a59e06a8 100644 --- a/ionic/components/app/util.scss +++ b/ionic/components/app/util.scss @@ -69,7 +69,7 @@ $content-padding: 10px !default; // Click Block // -------------------------------------------------- -// Fill the screen to block clicks (a better pointer-events: none) for the body +// Fill the screen to block clicks (a better pointer-events: none) // to avoid full-page reflows and paints which can cause flickers .click-block { @@ -80,10 +80,25 @@ $content-padding: 10px !default; left: 0; opacity: 0; z-index: $z-index-click-block; - @include translate3d(-9999px, 0, 0); + @include translate3d(-9999px, 0px, 0px); overflow: hidden; } .click-block-active { - @include translate3d(0, 0, 0); + @include translate3d(0px, 0px, 0px); +} + + +// Node Inserted Animation +// -------------------------------------------------- +// Used by the toolbar to know when the title has been rendered +// http://davidwalsh.name/detect-node-insertion + +@-webkit-keyframes nodeInserted { + from { opacity: 0.99; } + to { opacity: 1; } +} +@keyframes nodeInserted { + from { opacity: 0.99; } + to { opacity: 1; } } diff --git a/ionic/components/nav/nav-base.js b/ionic/components/nav/nav-base.js index d6ba82db5d..3051eb16e4 100644 --- a/ionic/components/nav/nav-base.js +++ b/ionic/components/nav/nav-base.js @@ -68,12 +68,7 @@ export class NavBase { } pop(opts = {}) { - if (this.isTransitioning()) { - return Promise.reject(); - } - - // reject if there's nothing to pop to - if (this.items.length < 2) { + if (this.isTransitioning() || this.items.length < 2) { return Promise.reject(); } diff --git a/ionic/components/nav/test/basic/pages/first-page.js b/ionic/components/nav/test/basic/pages/first-page.js index d6bde6c990..c2ca3b34b2 100644 --- a/ionic/components/nav/test/basic/pages/first-page.js +++ b/ionic/components/nav/test/basic/pages/first-page.js @@ -1,14 +1,14 @@ import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations'; import {View} from 'angular2/src/core/annotations_impl/view'; -import {NavController, Header, Toolbar, ToolbarTitle} from 'ionic/ionic'; +import {NavController, Header, Toolbar} from 'ionic/ionic'; import {SecondPage} from './second-page'; @Component({selector: 'ion-view'}) @View({ templateUrl: 'pages/first-page.html', - directives: [Header, Toolbar, ToolbarTitle] + directives: [Header, Toolbar] }) export class FirstPage { constructor( diff --git a/ionic/components/nav/test/basic/pages/second-page.js b/ionic/components/nav/test/basic/pages/second-page.js index 291361df58..d7a80255a3 100644 --- a/ionic/components/nav/test/basic/pages/second-page.js +++ b/ionic/components/nav/test/basic/pages/second-page.js @@ -1,14 +1,14 @@ import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations'; import {View} from 'angular2/src/core/annotations_impl/view'; -import {NavController, NavParams, Header, Toolbar, ToolbarTitle} from 'ionic/ionic'; +import {NavController, NavParams, Header, Toolbar} from 'ionic/ionic'; import {ThirdPage} from './third-page'; @Component() @View({ templateUrl: 'pages/second-page.html', - directives: [Header, Toolbar, ToolbarTitle] + directives: [Header, Toolbar] }) export class SecondPage { constructor( diff --git a/ionic/components/nav/test/basic/pages/third-page.js b/ionic/components/nav/test/basic/pages/third-page.js index fe1bad72fa..279dad6457 100644 --- a/ionic/components/nav/test/basic/pages/third-page.js +++ b/ionic/components/nav/test/basic/pages/third-page.js @@ -1,13 +1,13 @@ import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations'; import {View} from 'angular2/src/core/annotations_impl/view'; -import {NavController, Header, Toolbar, ToolbarTitle} from 'ionic/ionic'; +import {NavController, Header, Toolbar} from 'ionic/ionic'; @Component() @View({ templateUrl: 'pages/third-page.html', - directives: [Header, Toolbar, ToolbarTitle] + directives: [Header, Toolbar] }) export class ThirdPage { constructor( diff --git a/ionic/components/toolbar/extensions/ios.scss b/ionic/components/toolbar/extensions/ios.scss index 17caa01ba1..3eee683fef 100644 --- a/ionic/components/toolbar/extensions/ios.scss +++ b/ionic/components/toolbar/extensions/ios.scss @@ -44,6 +44,10 @@ $toolbar-ios-button-background-color: transparent !default; @include flex-order(map-get($toolbar-order-ios, 'secondary')); } + .toolbar-inner-title { + + } + ion-title { @include flex-order(map-get($toolbar-order-ios, 'title')); font-size: $toolbar-ios-title-font-size; @@ -55,10 +59,6 @@ $toolbar-ios-button-background-color: transparent !default; @include flex-order(map-get($toolbar-order-ios, 'back-button')); } - .toolbar-title-hide { - opacity: 0; - } - .button { font-size: $toolbar-ios-button-font-size; color: $toolbar-ios-button-text-color; diff --git a/ionic/components/toolbar/toolbar.js b/ionic/components/toolbar/toolbar.js index e629ebeae4..d1aa776245 100644 --- a/ionic/components/toolbar/toolbar.js +++ b/ionic/components/toolbar/toolbar.js @@ -17,7 +17,9 @@ import {Platform} from 'ionic/platform/platform';
- +
+ +
@@ -26,47 +28,25 @@ import {Platform} from 'ionic/platform/platform';
- `, - directives: [ToolbarTitle] + ` }) export class Toolbar { constructor(elementRef: ElementRef) { this.domElement = elementRef.domElement; this.config = Toolbar.config.invoke(this); - } -} -new IonicComponent(Toolbar, {}); - -@Component({ - selector: 'ion-title' -}) -@View({ - template: ` -
- -
` -}) -export class ToolbarTitle { - constructor(element: ElementRef) { - console.log('ion-title'); - // this.domElement = element.domElement; - - // // TODO find better way to get parent toolbar - // let current = this.domElement; - // while (current = current.parentNode) { - // if (current.classList.contains('toolbar')) { - // break; - // } - // } - // this.toolbarElement = current; - // this.align(); + // http://davidwalsh.name/detect-node-insertion + this.domElement.addEventListener("animationstart", (ev) => { + ev.stopPropagation(); + this.alignTitle(); + }); } - align() { - if (!this.toolbarElement) return; - const toolbarElement = this.toolbarElement; - const titleElement = this._titleElement || (this._titleElement = this.domElement.querySelector('.toolbar-inner-title')); + alignTitle() { + if (!this.domElement) return; + + const toolbarElement = this.domElement; + const titleElement = this._titleElement || (this._titleElement = toolbarElement.querySelector('.toolbar-inner-title')); const style = this._style || (this._style = window.getComputedStyle(titleElement)); const titleOffsetWidth = titleElement.offsetWidth; @@ -74,7 +54,7 @@ export class ToolbarTitle { const titleScrollWidth = titleElement.scrollWidth; const toolbarOffsetWidth = toolbarElement.offsetWidth; - //only align if the title is center and if it isn't already overflowing + // only align if the title is center and if it isn't already overflowing if (style.textAlign !== 'center' || titleOffsetWidth < titleScrollWidth) { this._showTitle(); } else { @@ -100,7 +80,9 @@ export class ToolbarTitle { } } + } +new IonicComponent(Toolbar, {}); /* diff --git a/ionic/components/toolbar/toolbar.scss b/ionic/components/toolbar/toolbar.scss index 90bc88618a..3f7dfa48ca 100644 --- a/ionic/components/toolbar/toolbar.scss +++ b/ionic/components/toolbar/toolbar.scss @@ -33,6 +33,9 @@ ion-toolbar { } } +.toolbar-inner { + width: 100%; +} // buttons are primary by default ion-toolbar .button, @@ -45,12 +48,11 @@ ion-toolbar [side="secondary"] { } ion-title { - // double selector to override the following - @include flex-display(); - @include flex(1); - @include flex-order(map-get($toolbar-order-core, 'title')); - margin: 0; - padding: 0; + display: block; + + // used to notify JS when the title has been rendered + animation-duration: 0.001s; + animation-name: nodeInserted; } .toolbar-inner-title { @@ -69,3 +71,7 @@ ion-title { background: transparent; border: none; } + +.toolbar-title-hide { + opacity: 0; +}