javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix title align

Browse Source
This commit is contained in:
Adam Bradley
2015-07-29 22:41:27 -05:00
parent 4ad69d4023
commit 8be8388af8
2 changed files with 15 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
ionic/components/toolbar/toolbar.ts
View File

@@ -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;
}
}