From 88eaa45f4cd0d1aebddd3c38e18fc68841a109b4 Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Wed, 23 Sep 2015 23:17:06 -0500 Subject: [PATCH] refactor(navbar): improved navbar transitions --- ionic/components/app/app.ts | 1 - ionic/components/app/structure.scss | 3 ++- ionic/components/app/typography.scss | 2 +- ionic/components/menu/menu-types.scss | 4 ++-- ionic/components/nav-bar/nav-bar.scss | 4 ---- ionic/components/nav-bar/nav-bar.ts | 3 ++- ionic/components/nav/view-controller.ts | 11 +++++++++++ ionic/components/toolbar/modes/ios.scss | 9 ++++++--- ionic/components/toolbar/toolbar.scss | 26 +++++++++++++++++++------ ionic/components/toolbar/toolbar.ts | 3 ++- ionic/themes/dark.scss | 1 - ionic/themes/default.scss | 1 - ionic/transitions/ios-transition.ts | 24 ++++++++++++++++------- ionic/transitions/transition.ts | 12 ++++++++---- 14 files changed, 71 insertions(+), 33 deletions(-) diff --git a/ionic/components/app/app.ts b/ionic/components/app/app.ts index bd168b0360..4d27e136bd 100644 --- a/ionic/components/app/app.ts +++ b/ionic/components/app/app.ts @@ -111,7 +111,6 @@ export class IonicApp { * @return {bool} */ isTransitioning() { - console.debug('isTransitioning', (this._trnsTime > Date.now()), this._trnsTime, Date.now()) return (this._trnsTime > Date.now()); } diff --git a/ionic/components/app/structure.scss b/ionic/components/app/structure.scss index 8bd47a16de..b7f61e98f5 100644 --- a/ionic/components/app/structure.scss +++ b/ionic/components/app/structure.scss @@ -13,6 +13,7 @@ $z-index-navbar-container: 10; $z-index-content: 5; $z-index-toolbar: 10; +$z-index-toolbar-background: -1; $z-index-toolbar-border: 20; $z-index-list-border: 50; @@ -139,7 +140,7 @@ ion-view { height: 100%; flex-direction: column; - background-color: white; + background-color: $background-color; transform: translateZ(0px); } diff --git a/ionic/components/app/typography.scss b/ionic/components/app/typography.scss index e42e5377ff..ad115b472a 100644 --- a/ionic/components/app/typography.scss +++ b/ionic/components/app/typography.scss @@ -35,7 +35,7 @@ a { background-color: transparent; } .enable-hover a:hover { - color: $link-hover-color; + opacity: 0.7; } h1, h2, h3, h4, h5, h6 { diff --git a/ionic/components/menu/menu-types.scss b/ionic/components/menu/menu-types.scss index 6348c40b5f..ddc992395a 100644 --- a/ionic/components/menu/menu-types.scss +++ b/ionic/components/menu/menu-types.scss @@ -28,8 +28,8 @@ ion-menu[type=overlay] { display: block; transform: translate3d(-9999px, 0px, 0px); opacity: 0.01; - left: -1000px; - width: 4000px; + left: -3000px; + width: 6000px; &.show-backdrop { transform: translate3d(0px, 0px, 0px); diff --git a/ionic/components/nav-bar/nav-bar.scss b/ionic/components/nav-bar/nav-bar.scss index eef5e1074d..42eb78acce 100644 --- a/ionic/components/nav-bar/nav-bar.scss +++ b/ionic/components/nav-bar/nav-bar.scss @@ -29,7 +29,3 @@ ion-navbar { display: flex; align-items: center; } - -.transparent-navbar { - background-color: transparent !important; -} diff --git a/ionic/components/nav-bar/nav-bar.ts b/ionic/components/nav-bar/nav-bar.ts index d21368c0a1..1cd3aad2d7 100644 --- a/ionic/components/nav-bar/nav-bar.ts +++ b/ionic/components/nav-bar/nav-bar.ts @@ -67,7 +67,8 @@ class BackButtonText extends Ion { '' + '' + '' + - '', + '' + + '
', directives: [BackButton, BackButtonText] }) export class Navbar extends ToolbarBase { diff --git a/ionic/components/nav/view-controller.ts b/ionic/components/nav/view-controller.ts index a6fae1471c..ea13d2cd2d 100644 --- a/ionic/components/nav/view-controller.ts +++ b/ionic/components/nav/view-controller.ts @@ -325,6 +325,17 @@ export class ViewController { } } + /** + * TODO + * @returns {TODO} TODO + */ + navbarBackgroundRef() { + let navbarView = this.navbarView(); + if (navbarView) { + return navbarView.getNativeElement().querySelector('.toolbar-background'); + } + } + /** * TODO * @returns {TODO} TODO diff --git a/ionic/components/toolbar/modes/ios.scss b/ionic/components/toolbar/modes/ios.scss index ffb070d458..5a3257f1d3 100644 --- a/ionic/components/toolbar/modes/ios.scss +++ b/ionic/components/toolbar/modes/ios.scss @@ -17,8 +17,6 @@ $toolbar-ios-title-font-size: 1.7rem !default; .toolbar { - border-bottom-width: 1px; - border-bottom-style: solid; min-height: $toolbar-ios-height; [menu-toggle] { @@ -66,6 +64,11 @@ $toolbar-ios-title-font-size: 1.7rem !default; } +.toolbar .toolbar-background { + border-bottom-width: 1px; + border-bottom-style: solid; +} + ion-title { position: absolute; top: 0; @@ -93,6 +96,6 @@ ion-nav-items[secondary] { order: map-get($toolbar-order-ios, secondary); } -&.hairlines .toolbar { +&.hairlines .toolbar .toolbar-background { border-bottom-width: 0.55px; } diff --git a/ionic/components/toolbar/toolbar.scss b/ionic/components/toolbar/toolbar.scss index 8dd473f512..e499d42cf8 100644 --- a/ionic/components/toolbar/toolbar.scss +++ b/ionic/components/toolbar/toolbar.scss @@ -28,10 +28,6 @@ $toolbar-order: ( padding: $toolbar-padding; width: 100%; - border: 0; - border-color: $toolbar-border-color; - background-color: $toolbar-background-color; - button, [button] { background-color: transparent; @@ -40,6 +36,21 @@ $toolbar-order: ( } } +.toolbar .toolbar-background { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + z-index: $z-index-toolbar-background; + + border: 0; + border-color: $toolbar-border-color; + background-color: $toolbar-background-color; + + pointer-events: none; +} + .enable-hover .toolbar button:hover, .enable-hover .toolbar [button]:hover, .toolbar button.activated, @@ -120,8 +131,11 @@ ion-nav-items div { @each $color-name, $color-value in $colors { .toolbar[#{$color-name}] { - background-color: $color-value; - border-color: darken($color-value, 10%); + + .toolbar-background { + background-color: $color-value; + border-color: darken($color-value, 10%); + } .toolbar-title, button, diff --git a/ionic/components/toolbar/toolbar.ts b/ionic/components/toolbar/toolbar.ts index beb1fbf988..18d6802f89 100644 --- a/ionic/components/toolbar/toolbar.ts +++ b/ionic/components/toolbar/toolbar.ts @@ -69,7 +69,8 @@ export class ToolbarBase extends Ion { '' + '' + '' + - '' + '' + + '
' }) export class Toolbar extends ToolbarBase { constructor( diff --git a/ionic/themes/dark.scss b/ionic/themes/dark.scss index 2f7d14f2dd..734e934503 100644 --- a/ionic/themes/dark.scss +++ b/ionic/themes/dark.scss @@ -21,7 +21,6 @@ $list-background-color: $background-color !default; $list-border-color: #666 !default; $link-color: map-get($colors, primary) !default; -$link-hover-color: lighten($link-color, 15%) !default; $toolbar-background-color: #111 !default; $toolbar-border-color: #000 !default; diff --git a/ionic/themes/default.scss b/ionic/themes/default.scss index 00f2b44658..733be5a230 100644 --- a/ionic/themes/default.scss +++ b/ionic/themes/default.scss @@ -22,7 +22,6 @@ $list-background-color: $background-color !default; $list-border-color: #c8c7cc !default; $link-color: map-get($colors, primary) !default; -$link-hover-color: darken($link-color, 15%) !default; $toolbar-background-color: #f8f8f8 !default; $toolbar-border-color: #b2b2b2 !default; diff --git a/ionic/transitions/ios-transition.ts b/ionic/transitions/ios-transition.ts index 3fa991c6db..d4ce5c24c1 100644 --- a/ionic/transitions/ios-transition.ts +++ b/ionic/transitions/ios-transition.ts @@ -32,6 +32,9 @@ class IOSTransition extends Transition { .fadeIn() .to(TRANSLATEX, CENTER); + this.enteringNavbarBackground + .to(TRANSLATEX, CENTER); + // leaving view moves off screen this.leavingView .from(TRANSLATEX, CENTER) @@ -42,6 +45,9 @@ class IOSTransition extends Transition { .from(TRANSLATEX, CENTER) .from(OPACITY, 1); + this.leavingNavbarBackground + .from(TRANSLATEX, CENTER); + // set properties depending on direction if (opts.direction === 'back') { // back direction @@ -53,9 +59,8 @@ class IOSTransition extends Transition { this.enteringTitle .from(TRANSLATEX, OFF_LEFT); - this.leavingNavbar - .before.addClass('transparent-navbar') - .after.removeClass('transparent-navbar'); + this.enteringNavbarBackground + .from(TRANSLATEX, OFF_LEFT); this.leavingView .to(TRANSLATEX, '100%') @@ -65,6 +70,9 @@ class IOSTransition extends Transition { .to(TRANSLATEX, '100%') .to(OPACITY, 0); + this.leavingNavbarBackground + .to(TRANSLATEX, '100%'); + if (this.leaving.enableBack() && this.viewWidth() > 200) { let leavingBackButtonText = new Animation(this.leaving.backBtnTextRef()); leavingBackButtonText.fromTo(TRANSLATEX, CENTER, (this.viewWidth() / 2) + 'px'); @@ -77,13 +85,12 @@ class IOSTransition extends Transition { .from(TRANSLATEX, '99.5%') .from(OPACITY, 1); - this.enteringNavbar - .before.addClass('transparent-navbar') - .after.removeClass('transparent-navbar'); - this.enteringTitle .from(TRANSLATEX, '99.5%'); + this.enteringNavbarBackground + .from(TRANSLATEX, '99.5%'); + this.leavingView .to(TRANSLATEX, OFF_LEFT) .to(OPACITY, OFF_OPACITY); @@ -92,6 +99,9 @@ class IOSTransition extends Transition { .to(TRANSLATEX, OFF_LEFT) .to(OPACITY, 0); + this.leavingNavbarBackground + .to(TRANSLATEX, OFF_LEFT); + if (this.entering.enableBack() && this.viewWidth() > 200) { let enteringBackButtonText = new Animation(this.entering.backBtnTextRef()); enteringBackButtonText.fromTo(TRANSLATEX, (this.viewWidth() / 2) + 'px', CENTER); diff --git a/ionic/transitions/transition.ts b/ionic/transitions/transition.ts index 9d86c8d136..0dcbfb468e 100644 --- a/ionic/transitions/transition.ts +++ b/ionic/transitions/transition.ts @@ -46,8 +46,10 @@ export class Transition extends Animation { this.add(enteringNavbar); this.enteringNavbarItems = new Animation(enteringView.navbarItemRefs()); - this.enteringNavbarItems.fadeIn(); - enteringNavbar.add(this.enteringNavbarItems); + enteringNavbar.add(this.enteringNavbarItems.fadeIn()); + + this.enteringNavbarBackground = new Animation(enteringView.navbarBackgroundRef()); + enteringNavbar.add(this.enteringNavbarBackground); } @@ -69,8 +71,10 @@ export class Transition extends Animation { leavingNavbar.add(this.leavingTitle); this.leavingNavbarItems = new Animation(leavingView.navbarItemRefs()); - this.leavingNavbarItems.fadeOut(); - leavingNavbar.add(this.leavingNavbarItems); + leavingNavbar.add(this.leavingNavbarItems.fadeOut()); + + this.leavingNavbarBackground = new Animation(leavingView.navbarBackgroundRef()); + leavingNavbar.add(this.leavingNavbarBackground); this.add(this.leavingView, leavingNavbar); }