the adventures of iOS toolbar

This commit is contained in:
Adam Bradley
2015-05-20 11:23:20 -05:00
parent 76e84bfaac
commit 841ed7363c
4 changed files with 21 additions and 12 deletions

View File

@@ -2,9 +2,14 @@
// iOS Content
// --------------------------------------------------
$content-ios-background-color: #efeff4 !default;
$nav-container-ios-background-color: #000 !default;
$content-ios-background-color: #efeff4 !default;
.platform-ios .nav-item-container {
background-color: $nav-container-ios-background-color;
}
.platform-ios ion-content {
background-color: $content-ios-background-color;
}

View File

@@ -66,8 +66,8 @@ $toolbar-ios-button-background-color: transparent !default;
background: $toolbar-ios-button-background-color;
}
}
.back-button-icon {
padding-right: 6px;
}
.back-button-ios .back-button-icon {
padding-right: 6px;
}

View File

@@ -47,8 +47,6 @@ export class Toolbar {
}
alignTitle() {
if (!this.domElement) return;
const toolbarEle = this.domElement;
const innerTitleEle = this._innerTitleEle || (this._innerTitleEle = toolbarEle.querySelector('.toolbar-inner-title'));
const titleEle = this._titleEle || (this._titleEle = innerTitleEle.querySelector('ion-title'));
@@ -59,6 +57,13 @@ export class Toolbar {
const titleScrollWidth = titleEle.scrollWidth;
const toolbarOffsetWidth = toolbarEle.offsetWidth;
// TODO!!! When an element is being reused by angular2, it'll sometimes keep the
// styles from the original element's use, causing these calculations to be wrong
if (window.getComputedStyle(innerTitleEle).margin !== '0px') {
this._showTitle();
return;
}
// only align if the title is center and if it isn't already overflowing
if (style.textAlign !== 'center' || titleOffsetWidth < titleScrollWidth) {
this._showTitle();

View File

@@ -59,8 +59,9 @@ class IOSTransition extends Animation {
.to(OPACITY, 1);
enteringTitle
.to(TRANSFORM, CENTER)
.to(OPACITY, 1);
.from(OPACITY, 0)
.to(OPACITY, 1)
.to(TRANSFORM, CENTER);
enteringToolbars
.beforePlay.addClass(SHOW_TOOLBAR_CSS);
@@ -101,9 +102,7 @@ class IOSTransition extends Animation {
.to(OPACITY, 1);
enteringTitle
.from(TRANSFORM, OFF_LEFT)
.from(OPACITY, 0)
.to(OPACITY, 1);
.from(TRANSFORM, OFF_LEFT);
leavingContent
.to(TRANSFORM, OFF_RIGHT)
@@ -111,7 +110,7 @@ class IOSTransition extends Animation {
leavingTitle
.to(TRANSFORM, OFF_RIGHT)
.to(OPACITY, 1);
.to(OPACITY, 0);
} else {
// forward direction