From 7904989a236f2a149ae58f44d9f4ca04c01fff8d Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Wed, 1 Jun 2016 19:18:55 -0700 Subject: [PATCH 1/2] [Frontend] Added transitional animation to Edit mode fixes #709 - When going from browse to edit mode, the wrapper around the object being edited will now transition in from its edges, and the edit controls toolbar will animate its height; - There is no transition applied for going from edit to browse; to do this we'd need to mod the JS on exiting to look for the end of an animation event; - Tested in Chrome, Safari and Firefox; - May not be smooth with very complex objects like Layouts with a large number of components; - Added transitional animations to .l-object-wrapper and .l-edit-controls; - New 'animTo' mixin added to _effects.scss; --- .../commonUI/general/res/sass/_constants.scss | 2 + .../commonUI/general/res/sass/_effects.scss | 25 ++++--- .../res/sass/user-environ/_layout.scss | 71 +++++++++++-------- .../themes/espresso/res/sass/_constants.scss | 2 +- 4 files changed, 59 insertions(+), 41 deletions(-) diff --git a/platform/commonUI/general/res/sass/_constants.scss b/platform/commonUI/general/res/sass/_constants.scss index c36a6cb00a..8c216f0151 100644 --- a/platform/commonUI/general/res/sass/_constants.scss +++ b/platform/commonUI/general/res/sass/_constants.scss @@ -124,6 +124,8 @@ $dirImgs: $dirCommonRes + 'images/'; /************************** TIMINGS */ $controlFadeMs: 100ms; +$browseToEditAnimMs: 400ms; +$editBorderPulseMs: 500ms; /************************** LIMITS */ $glyphLimit: '\e603'; diff --git a/platform/commonUI/general/res/sass/_effects.scss b/platform/commonUI/general/res/sass/_effects.scss index a048eb75d0..1a13b07d06 100644 --- a/platform/commonUI/general/res/sass/_effects.scss +++ b/platform/commonUI/general/res/sass/_effects.scss @@ -39,15 +39,20 @@ @include pulse($animName: pulse-subtle, $dur: 500ms, $opacity0: 0.7); } -@mixin pulseBorder($c: red, $dur: 500ms, $iteration: infinite, $delay: 0s, $opacity0: 0, $opacity100: 1) { - @include keyframes(pulseBorder) { - 0% { border-color: rgba($c, $opacity0); } - 100% { border-color: rgba($c, $opacity100); } +@mixin animTo($animName, $propName, $propValStart, $propValEnd, $dur: 500ms, $delay: 0) { + @include keyframes($animName) { + from { #{propName}: $propValStart; } + to { #{$propName}: $propValEnd; } } - @include animation-name(pulseBorder); - @include animation-duration($dur); - @include animation-direction(alternate); - @include animation-iteration-count($iteration); - @include animation-timing-function(ease); - @include animation-delay($delay); + @include animToParams($animName, $dur: 500ms, $delay: 0) } + +@mixin animToParams($animName, $dur: 500ms, $delay: 0) { + @include animation-name($animName); + @include animation-duration($dur); + @include animation-delay($delay); + @include animation-fill-mode(both); + @include animation-direction(normal); + @include animation-iteration-count(1); + @include animation-timing-function(ease-in-out); +} \ No newline at end of file diff --git a/platform/commonUI/general/res/sass/user-environ/_layout.scss b/platform/commonUI/general/res/sass/user-environ/_layout.scss index 8537c85520..9ab8e0f65f 100644 --- a/platform/commonUI/general/res/sass/user-environ/_layout.scss +++ b/platform/commonUI/general/res/sass/user-environ/_layout.scss @@ -237,30 +237,10 @@ body.desktop .pane .mini-tab-icon.toggle-pane { top: $ueTopBarH + $interiorMarginLg; } -.l-object-wrapper { - @extend .abs; - - .object-holder-main { - @extend .abs; - } - .l-edit-controls { - //@include trans-prop-nice((opacity, height), 0.25s); - border-bottom: 1px solid $colorInteriorBorder; - line-height: $ueEditToolBarH; - height: 0px; - opacity: 0; - .tool-bar { - right: $interiorMargin; - } - } -} - .l-object-wrapper-inner { @include trans-prop-nice-resize(0.25s); } - - .object-browse-bar .s-btn, .top-bar .buttons-main .s-btn, .top-bar .s-menu-btn, @@ -377,19 +357,50 @@ body.desktop { .s-status-editing { .l-object-wrapper { - @include pulseBorder($colorEditAreaFg, $dur: 1s, $opacity0: 0.3); - border-radius: $controlCr; + $t2Dur: $browseToEditAnimMs; + $t1Dur: $t2Dur / 2; + $pulseDur: $editBorderPulseMs; + $bC0: rgba($colorEditAreaFg, 0.5); + $bC100: rgba($colorEditAreaFg, 1); + background-color: $colorEditAreaBg; - border-color: $colorEditAreaFg; - border-width: 2px; - border-style: dotted; - .l-object-wrapper-inner { - @include absPosDefault(3px, hidden); + border-radius: $controlCr; + border: 1px dotted $bC0; + + // 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); + + .l-edit-controls { - height: $ueEditToolBarH + $interiorMargin; - margin-bottom: $interiorMargin; - opacity: 1; + height: 0; + border-bottom: 1px solid $colorInteriorBorder; + overflow: hidden; + // 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; + } } } } diff --git a/platform/commonUI/themes/espresso/res/sass/_constants.scss b/platform/commonUI/themes/espresso/res/sass/_constants.scss index bb774fb7a8..1ab6d734f3 100644 --- a/platform/commonUI/themes/espresso/res/sass/_constants.scss +++ b/platform/commonUI/themes/espresso/res/sass/_constants.scss @@ -14,7 +14,7 @@ $colorAHov: #fff; $contrastRatioPercent: 7%; $hoverRatioPercent: 10%; $basicCr: 3px; -$controlCr: 3px; +$controlCr: 2px; $smallCr: 2px; // Buttons and Controls From 76edba10149c9f157f360272842d8642a840c0d4 Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Wed, 1 Jun 2016 19:19:58 -0700 Subject: [PATCH 2/2] [Frontend] Mods to Edit button fixes #709 - Changed title and style of main Edit button; - Updated EditItem.js protractor ID accordingly; --- platform/commonUI/edit/bundle.js | 2 +- .../general/res/sass/controls/_buttons.scss | 30 ++++++++----------- protractor/common/EditItem.js | 4 +-- 3 files changed, 15 insertions(+), 21 deletions(-) diff --git a/platform/commonUI/edit/bundle.js b/platform/commonUI/edit/bundle.js index b8906107a0..3a9deb649e 100644 --- a/platform/commonUI/edit/bundle.js +++ b/platform/commonUI/edit/bundle.js @@ -170,7 +170,7 @@ define([ "navigationService", "$log" ], - "description": "Edit this object.", + "description": "Edit", "category": "view-control", "glyph": "p" }, diff --git a/platform/commonUI/general/res/sass/controls/_buttons.scss b/platform/commonUI/general/res/sass/controls/_buttons.scss index 7b585f8eec..d3cb8091f2 100644 --- a/platform/commonUI/general/res/sass/controls/_buttons.scss +++ b/platform/commonUI/general/res/sass/controls/_buttons.scss @@ -36,15 +36,7 @@ $pad: $interiorMargin * $baseRatio; padding: 0 $pad; font-size: 0.7rem; vertical-align: top; - - .icon { - font-size: 0.8rem; - color: $colorKey; - } - - .title-label { - vertical-align: top; - } + @include btnSubtle($colorBtnBg, $colorBtnBgHov, $colorBtnFg, $colorBtnIcon); &.lg { font-size: 1rem; @@ -58,19 +50,13 @@ $pad: $interiorMargin * $baseRatio; padding: 0 ($pad / $baseRatio) / 2; } - &.major { + &.major, + &.key-edit { $bg: $colorBtnMajorBg; $hc: lighten($bg, 10%); @include btnSubtle($bg, $hc, $colorBtnMajorFg, $colorBtnMajorFg); } - &:not(.major) { - // bg, bgHov, fg, ic - @include btnSubtle($colorBtnBg, $colorBtnBgHov, $colorBtnFg, $colorBtnIcon); - } - &.pause-play { - - } &.t-save:before { content:'\e612'; font-family: symbolsfont; @@ -109,6 +95,15 @@ $pad: $interiorMargin * $baseRatio; content: "\000039"; } } + + .icon { + font-size: 0.8rem; + color: $colorKey; + } + + .title-label { + vertical-align: top; + } } .s-icon-btn { @@ -275,4 +270,3 @@ body.desktop .mini-tab-icon { color: $colorPausedBg !important; } } - diff --git a/protractor/common/EditItem.js b/protractor/common/EditItem.js index fffd8108a9..ceffcdb3ea 100644 --- a/protractor/common/EditItem.js +++ b/protractor/common/EditItem.js @@ -34,8 +34,8 @@ var EditItem = (function () { EditItem.prototype.EditButton = function () { return element.all(by.css('[ng-click="parameters.action.perform()"]')).filter(function (arg) { return arg.getAttribute("title").then(function (title){ - //expect(title).toEqual("Edit this object."); - return title == 'Edit this object.'; + //expect(title).toEqual("Edit"); + return title == 'Edit'; }) }); };