amorfo77/sogo
1
0
Fork 0
mirror of https://github.com/inverse-inc/sogo.git synced 2026-08-02 21:52:19 +00:00
Code Issues Projects Releases Wiki Activity

Review animations of view detail (messages, cards)

Browse Source
This commit is contained in:
Francis Lachapelle
2015-08-26 17:28:03 -04:00
parent 876d9cfa21
commit 69000a0929
7 changed files with 59 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files
UI/WebServerResources/scss/views/_view.scss
+35 -66
View File
@@ -64,91 +64,60 @@ $detailView-width: grid-step(8) !global;
margin: 0;
}
// No animation on medium to large screens
@include from(md) {
.viewer {
position: absolute;
left: 0;
right: 0;
max-width: 100%;
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%);
}
}
// 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%);
// }
// }
}
}
// On small screens, the view slides from the right and takes all screen place
@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);
transform-origin: 50% 50%;
top: $toolbar-tall-height;
bottom: 0;
left: 0;
right: 0;
transition: all 0.5s $swift-ease-in-out-timing-function;
// .view-detail.sg-close hides the background
&.sg-close {
transition-delay: 0.1s;
transition-duration: 0.4s;
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);
}
transform: translateX(100%);
}
&.ng-leave {
&.ng-leave-active {
transform: translateX(100%);
}
}
// .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);
}
&.ng-enter.ng-enter-active {
transform: translateX(-100%) scale(1);
transform: translateX(100%);
&.ng-enter-active {
transform: translateX(0);
}
}
}
}