From a554158686054fa7e5457e5a5a75c1b9b9c493eb Mon Sep 17 00:00:00 2001 From: Benoit Favreault Date: Tue, 31 Mar 2015 10:50:05 -0400 Subject: [PATCH] Fix mobile transitions (sort of) --- .../ContactsUI/UIxContactViewTemplate.wox | 12 +-- .../scss/components/button/_button.scss | 24 ++++- .../scss/components/icon/_extends.scss | 2 +- UI/WebServerResources/scss/core/layout.scss | 7 ++ UI/WebServerResources/scss/views/_view.scss | 91 +++++++++++++++---- 5 files changed, 103 insertions(+), 33 deletions(-) diff --git a/UI/Templates/ContactsUI/UIxContactViewTemplate.wox b/UI/Templates/ContactsUI/UIxContactViewTemplate.wox index ab9b39918..31d6d726c 100644 --- a/UI/Templates/ContactsUI/UIxContactViewTemplate.wox +++ b/UI/Templates/ContactsUI/UIxContactViewTemplate.wox @@ -5,7 +5,7 @@ xmlns:const="http://www.skyrix.com/od/constant" xmlns:label="OGo:label" > - +
@@ -19,11 +19,9 @@
- - - - - + + + @@ -125,5 +123,5 @@ - + diff --git a/UI/WebServerResources/scss/components/button/_button.scss b/UI/WebServerResources/scss/components/button/_button.scss index 41d90e018..ce8e21fd3 100644 --- a/UI/WebServerResources/scss/components/button/_button.scss +++ b/UI/WebServerResources/scss/components/button/_button.scss @@ -63,7 +63,7 @@ $iconButton-size-cursor-fine: $iconButton-size; // convenient wrapper for padding calculation todo: write a mixin or a function for a more generic use $iconButton-padding: ($iconButton-size - ($iconButton-icon-size + ($iconButton-icon-padding * 2))) / 2; $iconButton-hover-scale: 1.25; -$iconButton-transition: transform $swift-ease-in-duration $swift-ease-in-timing-function; +$iconButton-transition: all $swift-ease-in-duration $swift-ease-in-timing-function; // Classes .iconButton, @@ -74,8 +74,9 @@ $iconButton-transition: transform $swift-ease-in-duration $swift-ease-in-timing- padding: $iconButton-padding; border-radius: 50%; color: inherit; + transition: $iconButton-transition; - &:hover, + &:hover:not(.md-fab), &:active { background-color: transparent; @@ -129,11 +130,13 @@ md-toolbar .md-toolbar-tools .iconButton:last-child, .sg-icon-bar--vertical { display: flex; flex-direction: column; - margin: ($iconButton-padding * -1) ($iconButton-padding * -1) 0 $mg; + margin: 0 ($mg * -1) 0 $mg; font-size: $sg-font-size-3; align-items: center; // Containers have padding, we compensate to align according to specs justify-content: space-between; + + // for transitions @include at(sm) { margin-left: $iconButton-padding; } @@ -153,10 +156,21 @@ md-toolbar .md-toolbar-tools .iconButton:last-child, padding: $mg; margin-right: $mg; // this is to positioned the button on the toolbar's edge - transform: translateY(-50%); + transform: translate3d(0, -50%, 0); + &:hover { + transform: translate3d(0, -49%, 0); + [class ^= md-icon], + [class *= md-icon-] { + transform: scale($iconButton-hover-scale); + } + } + @include at(sm) { //position: absolute; - transform: translate(-100%, -50%); + transform: translate3d(-100%, -50%, 0); + &:hover { + transform: translate3d(-100%, -49%, 0); + } } i[class|="md-icon"] { diff --git a/UI/WebServerResources/scss/components/icon/_extends.scss b/UI/WebServerResources/scss/components/icon/_extends.scss index 4c553abfe..79d44c2f1 100644 --- a/UI/WebServerResources/scss/components/icon/_extends.scss +++ b/UI/WebServerResources/scss/components/icon/_extends.scss @@ -10,7 +10,7 @@ /// if not compiled in a specific order /// todo : build with grunt /// -@import "../../../angular-material/src/components/icon/icon.scss"; +//@import "../../../angular-material/src/components/icon/icon.scss"; @import "../../../bower_components/material-design-iconic-font/scss/_variables"; // variables in source are not defaulted, we MUST override here // relative (to css) path for src fonts diff --git a/UI/WebServerResources/scss/core/layout.scss b/UI/WebServerResources/scss/core/layout.scss index 72c5560eb..b37e8f438 100644 --- a/UI/WebServerResources/scss/core/layout.scss +++ b/UI/WebServerResources/scss/core/layout.scss @@ -115,6 +115,13 @@ flex, hide, show, show-sm; @include attributesToClasses($selectors); +// We need to silently extend this class +%md-layout-fill { + margin: 0; + min-height: 100%; + width: 100%; +} + .md-flex { flex: 1 1 auto; } diff --git a/UI/WebServerResources/scss/views/_view.scss b/UI/WebServerResources/scss/views/_view.scss index 03050fa07..13d73e503 100644 --- a/UI/WebServerResources/scss/views/_view.scss +++ b/UI/WebServerResources/scss/views/_view.scss @@ -55,50 +55,101 @@ $detailView-width: grid-step(8) !global; .view-detail { z-index: $z-index-view; + overflow-x: hidden; background-color: $background-base-color; + @include from(lg) { @include flex-col(lg, 8, 2, 1); margin: 0 auto $mg auto; } + @include at(md) { @include flex-col(md, 9); margin: 0; } + + @include from(md) { + .viewer { + position: absolute; + transform: translate3d(0, 0, 0); + transition: all 0.5s $swift-ease-in-out-timing-function; + &.ng-enter { + transform: translate(-105%, 0); + &.ng-enter-active { + transform: translate(0%, 0%); + transition-delay: 0.5s; + } + } + + &.ng-leave { + transition-delay: 0; + transition-duration: 0.1s; + transform: translate(0, 0); + + &.ng-leave-active { + transition-delay: 0.1s; + transition-duration: 0.4s; + transform: translate(-105%, 100%); + + } + } + } + } + @include to(sm) { position: absolute; width: 100%; min-width: 100%; + // caution: limited support in Android (<=4.4), full-support in v. 37 + height: calc(100vh - #{$toolbar-tall-height}); transform: translateX(-100%) scale(1); - filter: opacity(1); transform-origin: 50% 50%; transition: all 0.5s $swift-ease-in-out-timing-function; +// .view-detail.sg-close hides the background &.sg-close { - transition: all 0.35s $swift-ease-in-out-timing-function; - transition-delay: 0.15s; + transition-delay: 0.1s; + transition-duration: 0.4s; transform: translateX(-100%) scale(0); - //transform: translateX(-200%); - &.ng-enter { - transform: translateX(-100%) scale(0); + // .viewer is the card itself + .viewer { + &.ng-leave, + &.ng-enter, + &.ng-leave.ng-leave-active { + transform: translateY(0) scale(0); + } + // ui-sref might add ng-animate class early + &.ng-enter.ng-enter-active { + transform: translateY(0) scale(0); + } } } + // .viewer is the card itself + .viewer { + &.ng-leave, + &.ng-leave.ng-leave-active { + transform: translateY(100%) scale(0); + } + + &.ng-enter { + transition: all 0.5s $swift-ease-in-out-timing-function; + transform: translateY(100%) scale(0); + } + &.ng-enter.ng-enter-active { + transform: translateY(0) scale(1); + } + } + + &.ng-leave, + &.ng-leave.ng-leave-active { + transform: translateX(-100%) scale(0); + } + &.ng-enter { + transition: all 0.5s $swift-ease-in-out-timing-function; transform: translateX(-100%) scale(0); - //transform: translateX(0); } - &.ng-enter.ng-enter-active, - &.ng-leave { + &.ng-enter.ng-enter-active { transform: translateX(-100%) scale(1); - filter: opacity(1); - //transform: translateX(-100%); - } - &.ng-leave.ng.leave-active { - transform: translateX(-100%) scale(0); - filter: opacity(1); - //transform: translateX(-200%); - } - [class *= md-whiteframe-] { - box-shadow: none; } } } -