From 8be8388af87d21fc29aeaee82492019d4c18a4b8 Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Wed, 29 Jul 2015 22:41:27 -0500 Subject: [PATCH] fix title align --- ionic/components/toolbar/toolbar.ts | 22 ++++++++++------------ ionic/platform/registry.ts | 7 +++++-- 2 files changed, 15 insertions(+), 14 deletions(-) diff --git a/ionic/components/toolbar/toolbar.ts b/ionic/components/toolbar/toolbar.ts index 67150574a8..7ab0ae7ee3 100644 --- a/ionic/components/toolbar/toolbar.ts +++ b/ionic/components/toolbar/toolbar.ts @@ -9,6 +9,7 @@ export class ToolbarBase extends Ion { constructor(elementRef: ElementRef, config: IonicConfig) { super(elementRef, config); + this.titleAlign = config.setting('navTitleAlign'); this.itemEles = []; } @@ -34,20 +35,17 @@ export class ToolbarBase extends Ion { } alignTitle() { + // don't bother if we're not trying to center align the title + if (this.titleAlign !== 'center' || this.aligned) return; + // called after the navbar/title has had a moment to // finish rendering in their correct locations const toolbarEle = this.getNativeElement(); - const titleEle = this._ttEle || (this._ttEle = toolbarEle.querySelector('ion-title')); + const titleEle = toolbarEle.querySelector('ion-title'); // don't bother if there's no title element if (!titleEle) return; - // get the computed style of the title element - const titleStyle = this._ttStyle || (this._ttStyle = window.getComputedStyle(titleEle)); - - // don't bother if we're not trying to center align the title - if (titleStyle.textAlign !== 'center') return; - // get all the dimensions const titleOffsetLeft = titleEle.offsetLeft; const titleOffsetRight = toolbarEle.offsetWidth - (titleOffsetLeft + titleEle.offsetWidth); @@ -61,13 +59,13 @@ export class ToolbarBase extends Ion { marginRight = (titleOffsetLeft - titleOffsetRight) - 5; } - let margin = `0 ${marginRight}px 0 ${marginLeft}px`; - - if ((marginLeft || marginRight) && margin !== this._ttMargin) { + if (marginLeft || marginRight) { // only do an update if it has to - const innerTitleEle = this._innerTtEle || (this._innerTtEle = toolbarEle.querySelector('.toolbar-inner-title')); - innerTitleEle.style.margin = this._ttMargin = margin; + const innerTitleEle = toolbarEle.querySelector('.toolbar-inner-title'); + innerTitleEle.style.margin = `0 ${marginRight}px 0 ${marginLeft}px`; } + + this.aligned = true; } } diff --git a/ionic/platform/registry.ts b/ionic/platform/registry.ts index 406e040d8c..51970f0e0b 100644 --- a/ionic/platform/registry.ts +++ b/ionic/platform/registry.ts @@ -9,6 +9,7 @@ Platform.register({ forwardIcon: 'ion-ios-arrow-forward', mode: 'ios', iconMode: 'ios', + navTitleAlign: 'center', viewTransition: 'ios' } }); @@ -59,9 +60,10 @@ Platform.register({ iconMode: 'md', type: 'overlay', keyboardScrollAssist: true, - viewTransition: 'md', mdRipple: true, - tabBarPlacement: 'top' + tabBarPlacement: 'top', + navTitleAlign: 'left', + viewTransition: 'md' }, isMatch(p) { // "silk" is kindle fire @@ -90,6 +92,7 @@ Platform.register({ tapPolyfill: true, keyboardScrollAssist: true, viewTransition: 'ios', + navTitleAlign: 'center', mdRipple: false }, isMatch(p) {