mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
the adventures of iOS toolbar
This commit is contained in:
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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();
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user