Merge pull request #987 from nasa/anim-to-edit-709

[Frontend] Animation added to transition from browse to edit mode

platform/commonUI/edit/bundle.js

@@ -170,7 +170,7 @@ define([
                         "navigationService",
                         "$log"
                     ],
-                    "description": "Edit this object.",
+                    "description": "Edit",
                     "category": "view-control",
                     "glyph": "p"
                 },

platform/commonUI/general/res/sass/_constants.scss

@@ -124,6 +124,8 @@ $dirImgs: $dirCommonRes + 'images/';
 
 /************************** TIMINGS */
 $controlFadeMs: 100ms;
+$browseToEditAnimMs: 400ms;
+$editBorderPulseMs: 500ms;
 
 /************************** LIMITS */
 $glyphLimit: '\e603';

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) {
+@mixin animTo($animName, $propName, $propValStart, $propValEnd, $dur: 500ms, $delay: 0) {
-    @include keyframes(pulseBorder) {
+    @include keyframes($animName) {
-        0%   { border-color: rgba($c, $opacity0); }
+        from { #{propName}: $propValStart; }
-        100% { border-color: rgba($c, $opacity100); }
+        to { #{$propName}: $propValEnd; }
     }
-    @include animation-name(pulseBorder);
+    @include animToParams($animName, $dur: 500ms, $delay: 0)
-    @include animation-duration($dur);
-    @include animation-direction(alternate);
-    @include animation-iteration-count($iteration);
-    @include animation-timing-function(ease);
-    @include animation-delay($delay);
 }
+
+@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);
+}

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;
-
+    @include btnSubtle($colorBtnBg, $colorBtnBgHov, $colorBtnFg, $colorBtnIcon);
-    .icon {
-        font-size: 0.8rem;
-        color: $colorKey;
-    }
-
-    .title-label {
-        vertical-align: top;
-    }
 
 	&.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;
     }
 }
-

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);
+        $t2Dur: $browseToEditAnimMs;
-        border-radius: $controlCr;
+        $t1Dur: $t2Dur / 2;
+        $pulseDur: $editBorderPulseMs;
+        $bC0: rgba($colorEditAreaFg, 0.5);
+        $bC100: rgba($colorEditAreaFg, 1);
+
         background-color: $colorEditAreaBg;
-        border-color: $colorEditAreaFg;
+        border-radius: $controlCr;
-        border-width: 2px;
+        border: 1px dotted $bC0;
-        border-style: dotted;
+
-        .l-object-wrapper-inner {
+        // Transition 1
-            @include absPosDefault(3px, hidden);
+        @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;
+            height: 0;
-            margin-bottom: $interiorMargin;
+            border-bottom: 1px solid $colorInteriorBorder;
-            opacity: 1;
+            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;
+            }
         }
     }
 }

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

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.");
+                //expect(title).toEqual("Edit");
-                return title == 'Edit this object.';
+                return title == 'Edit';
             })
         });
     };