From c7787aa1f0a68a003ecb0458c43bc9cc3c9383aa Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Tue, 6 Jun 2017 16:18:22 -0700 Subject: [PATCH 1/2] [Frontend] WIP remove keyframe anims Fixes #1603 Remove keyframe anims from transition to edit mode --- .../res/sass/user-environ/_layout.scss | 55 +++++++++++-------- 1 file changed, 31 insertions(+), 24 deletions(-) diff --git a/platform/commonUI/general/res/sass/user-environ/_layout.scss b/platform/commonUI/general/res/sass/user-environ/_layout.scss index 55ac9887a2..2e927ddb34 100644 --- a/platform/commonUI/general/res/sass/user-environ/_layout.scss +++ b/platform/commonUI/general/res/sass/user-environ/_layout.scss @@ -227,6 +227,11 @@ body.desktop .pane .mini-tab-icon.toggle-pane { top: $ueTopBarH + $interiorMarginLg; } +.l-object-wrapper { + padding: 0; + @include trans-prop-nice(padding, 0.25s); +} + .l-object-wrapper-inner { @include trans-prop-nice-resize(0.25s); } @@ -354,37 +359,39 @@ body.desktop { background-color: $colorEditAreaBg; border-radius: $controlCr; border: 1px dotted $bC0; + padding: 5px; - // Transition 1 - @include keyframes(wrapperIn) { - from { border: 0px dotted transparent; padding: 0; } - to { border: 1px dotted $bC0; padding: 5px; } - } + //// Transition 1 + //@include keyframes(wrapperIn) { + // from { border: 0px dotted transparent; padding: 0; } + // to { border: 1px dotted $bC0; padding: 5px; } + //} + // + //// Do last + //@include keyframes(pulseNew) { + // from { border-color: $bC0; } + // to { border-color: $bC100; } + //} - // Do last - @include keyframes(pulseNew) { - from { border-color: $bC0; } - to { border-color: $bC100; } - } - - @include animation-name(wrapperIn, pulseNew); - @include animation-duration($t1Dur, $pulseDur); - @include animation-delay(0s, $t1Dur + $t2Dur); - @include animation-direction(normal, alternate); - @include animation-fill-mode(both, none); - @include animation-iteration-count(1, infinite); - @include animation-timing-function(ease-in-out, linear); + //@include animation-name(wrapperIn, pulseNew); + //@include animation-duration($t1Dur, $pulseDur); + //@include animation-delay(0s, $t1Dur + $t2Dur); + //@include animation-direction(normal, alternate); + //@include animation-fill-mode(both, none); + //@include animation-iteration-count(1, infinite); + //@include animation-timing-function(ease-in-out, linear); .l-edit-controls { - height: 0; + //height: 0; + height: $ueEditToolBarH + $interiorMargin; margin-bottom: $interiorMargin; border-bottom: 1px solid $colorInteriorBorder; // Transition 2: reveal edit controls - @include keyframes(editIn) { - from { border-bottom: 0px solid transparent; height: 0; margin-bottom: 0; } - to { border-bottom: 1px solid $colorInteriorBorder; height: $ueEditToolBarH + $interiorMargin; margin-bottom: $interiorMargin; } - } - @include animToParams(editIn, $dur: $t2Dur, $delay: $t1Dur); + //@include keyframes(editIn) { + // from { border-bottom: 0px solid transparent; height: 0; margin-bottom: 0; } + // to { border-bottom: 1px solid $colorInteriorBorder; height: $ueEditToolBarH + $interiorMargin; margin-bottom: $interiorMargin; } + //} + //@include animToParams(editIn, $dur: $t2Dur, $delay: $t1Dur); .tool-bar { right: $interiorMargin; } From a8a689f69aebc51923396a01ca9b6ad1eb715a29 Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Fri, 9 Jun 2017 11:40:58 -0700 Subject: [PATCH 2/2] [Frontend] WIP remove keyframe anims Fixes #1603 Remove keyframe anims from transition to edit mode and border-color anim in _messages.scss; --- .../general/res/sass/controls/_messages.scss | 1 - .../res/sass/user-environ/_layout.scss | 48 +++---------------- 2 files changed, 7 insertions(+), 42 deletions(-) diff --git a/platform/commonUI/general/res/sass/controls/_messages.scss b/platform/commonUI/general/res/sass/controls/_messages.scss index 9d23c96d57..82bb43c008 100644 --- a/platform/commonUI/general/res/sass/controls/_messages.scss +++ b/platform/commonUI/general/res/sass/controls/_messages.scss @@ -368,7 +368,6 @@ body.desktop .t-message-list { .s-unsynced { $c: $colorPausedBg; border: 1px solid $c; - @include animTo($animName: pulsePaused, $propName: border-color, $propValStart: rgba($c, 0.8), $propValEnd: rgba($c, 0.5), $dur: $animPausedPulseDur, $dir: alternate, $count: infinite); } .s-status-timeconductor-unsynced { diff --git a/platform/commonUI/general/res/sass/user-environ/_layout.scss b/platform/commonUI/general/res/sass/user-environ/_layout.scss index 2e927ddb34..920ba0b3e5 100644 --- a/platform/commonUI/general/res/sass/user-environ/_layout.scss +++ b/platform/commonUI/general/res/sass/user-environ/_layout.scss @@ -229,11 +229,11 @@ body.desktop .pane .mini-tab-icon.toggle-pane { .l-object-wrapper { padding: 0; - @include trans-prop-nice(padding, 0.25s); -} - -.l-object-wrapper-inner { - @include trans-prop-nice-resize(0.25s); + @include trans-prop-nice((padding), 0.25s); + .l-edit-controls { + @include trans-prop-nice((height), 0.5s); + height: 0; + } } .object-browse-bar .s-button, @@ -350,48 +350,14 @@ body.desktop { .s-status-editing { .l-object-wrapper { - $t2Dur: $browseToEditAnimMs; - $t1Dur: $t2Dur / 2; - $pulseDur: $editBorderPulseMs; - $bC0: rgba($colorEditAreaFg, 0.5); - $bC100: rgba($colorEditAreaFg, 1); - background-color: $colorEditAreaBg; border-radius: $controlCr; - border: 1px dotted $bC0; - padding: 5px; - - //// Transition 1 - //@include keyframes(wrapperIn) { - // from { border: 0px dotted transparent; padding: 0; } - // to { border: 1px dotted $bC0; padding: 5px; } - //} - // - //// Do last - //@include keyframes(pulseNew) { - // from { border-color: $bC0; } - // to { border-color: $bC100; } - //} - - //@include animation-name(wrapperIn, pulseNew); - //@include animation-duration($t1Dur, $pulseDur); - //@include animation-delay(0s, $t1Dur + $t2Dur); - //@include animation-direction(normal, alternate); - //@include animation-fill-mode(both, none); - //@include animation-iteration-count(1, infinite); - //@include animation-timing-function(ease-in-out, linear); - + border: 1px dotted $colorEditAreaFg; + padding: $interiorMargin; .l-edit-controls { - //height: 0; height: $ueEditToolBarH + $interiorMargin; margin-bottom: $interiorMargin; border-bottom: 1px solid $colorInteriorBorder; - // Transition 2: reveal edit controls - //@include keyframes(editIn) { - // from { border-bottom: 0px solid transparent; height: 0; margin-bottom: 0; } - // to { border-bottom: 1px solid $colorInteriorBorder; height: $ueEditToolBarH + $interiorMargin; margin-bottom: $interiorMargin; } - //} - //@include animToParams(editIn, $dur: $t2Dur, $delay: $t1Dur); .tool-bar { right: $interiorMargin; }