From 5382cca435294bbb3602d83adc857b824bac12e9 Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charles.f.hacskaylo@nasa.gov>
Date: Tue, 20 Oct 2015 15:43:53 -0700
Subject: [PATCH] [Frontend] Styling for New Edit Mode

open #198
In-progress styling of toolbar elements;
Revamped edit-action-buttons.html to use only icons;
---
 .../browse/res/templates/browse-object.html   | 27 +++++++++--
 .../res/templates/edit-action-buttons.html    |  6 +--
 .../commonUI/general/res/sass/_effects.scss   |  2 +-
 .../res/sass/user-environ/_layout.scss        |  3 +-
 .../espresso/res/css/theme-espresso.css       | 47 ++++++++++---------
 .../themes/snow/res/css/theme-snow.css        | 47 ++++++++++---------
 6 files changed, 77 insertions(+), 55 deletions(-)

diff --git a/platform/commonUI/browse/res/templates/browse-object.html b/platform/commonUI/browse/res/templates/browse-object.html
index 3b20e5e29d..97574b46a3 100644
--- a/platform/commonUI/browse/res/templates/browse-object.html
+++ b/platform/commonUI/browse/res/templates/browse-object.html
@@ -56,24 +56,43 @@
             <!-- Toolbar and Save/Cancel buttons -->
             <div class="l-edit-controls flex-elem l-flex flex-row"
                  ng-class="{ active:editMode }">
+
+
+
+
                 <mct-toolbar name="mctToolbar"
                              structure="toolbar.structure"
                              ng-model="toolbar.state"
                              class="flex-elem grow">
                 </mct-toolbar>
-<!--                <mct-representation key="'edit-action-buttons'"
+                <!-- from toolbar.html -->
+<!--                <mct-toolbar-x class="flex-elem grow">
+                    <form novalidate>
+                        <div class="tool-bar btn-bar contents abs">
+                            <span class="l-control-group">
+                            <span class="s-menu-btn">Foo</span>
+                            <span class="s-menu-btn">Bar</span>
+                            </span>
+                        </div>
+                    </form>
+                </mct-toolbar-x>-->
+
+
+
+
+                <mct-representation key="'edit-action-buttons'"
                                     mct-object="domainObject"
                                     class='flex-elem conclude-editing'>
-                </mct-representation>-->
+                </mct-representation>
                 <!-- from edit-action-buttons.html -->
-                <span>
+<!--                <span>
                     <span ng-repeat="btn in editBtns">
                         <a class='s-btn t-{{btn.cssclass}}'
                            title='{{btn.title}}'
                            ng-click="currentAction.perform()"
                            ng-class="{ major: $index === 0 }"></a>
                     </span>
-                </span>
+                </span>-->
 
             </div>
             <mct-representation key="representation.selected.key"
diff --git a/platform/commonUI/edit/res/templates/edit-action-buttons.html b/platform/commonUI/edit/res/templates/edit-action-buttons.html
index d2f99e9c04..56105b7058 100644
--- a/platform/commonUI/edit/res/templates/edit-action-buttons.html
+++ b/platform/commonUI/edit/res/templates/edit-action-buttons.html
@@ -21,10 +21,10 @@
 -->
 <span ng-controller="EditActionController">
     <span ng-repeat="currentAction in editActions">
-        <a class='s-btn'
+        <a class='s-btn t-{{currentAction.getMetadata().key}}'
+           title='{{currentAction.getMetadata().name}}'
            ng-click="currentAction.perform()"
-           ng-class="{ major: $index === 0, subtle: $index !== 0 }">
-            {{currentAction.getMetadata().name}}
+           ng-class="{ major: $index === 0 }">
         </a>
     </span>
 </span>
\ No newline at end of file
diff --git a/platform/commonUI/general/res/sass/_effects.scss b/platform/commonUI/general/res/sass/_effects.scss
index 3a1f19a058..b09fa8adff 100644
--- a/platform/commonUI/general/res/sass/_effects.scss
+++ b/platform/commonUI/general/res/sass/_effects.scss
@@ -75,7 +75,7 @@ a.disabled {
 	@include animation-duration($dur);
 	@include animation-direction(alternate);
 	@include animation-iteration-count($iteration);
-	@include animation-timing-function(linear);
+	@include animation-timing-function(ease);
 }
 
 .pulse {
diff --git a/platform/commonUI/general/res/sass/user-environ/_layout.scss b/platform/commonUI/general/res/sass/user-environ/_layout.scss
index 80f42a5731..346e1ec482 100644
--- a/platform/commonUI/general/res/sass/user-environ/_layout.scss
+++ b/platform/commonUI/general/res/sass/user-environ/_layout.scss
@@ -304,7 +304,7 @@
     @extend .abs;
     top: $ueTopBarH + $interiorMarginLg;
     &.active {
-        @include pulseBorder($colorKey, 150ms, 6);
+        @include pulseBorder($colorKey, 150ms, 8);
         @include border-radius($controlCr);
         border-color: $colorKey;
         border-width:2px;
@@ -325,6 +325,7 @@
     @include trans-prop-nice-resize(0.25s);
     height: 0;
     opacity: 0;
+    overflow: hidden;
     &.active {
         border-bottom: 1px solid $colorInteriorBorder;
         height: $ueEditToolBarH + $interiorMargin;
diff --git a/platform/commonUI/themes/espresso/res/css/theme-espresso.css b/platform/commonUI/themes/espresso/res/css/theme-espresso.css
index f8532a3c3f..19f6d5eb07 100644
--- a/platform/commonUI/themes/espresso/res/css/theme-espresso.css
+++ b/platform/commonUI/themes/espresso/res/css/theme-espresso.css
@@ -3643,12 +3643,12 @@ span.req {
     -moz-animation-direction: alternate;
     -webkit-animation-direction: alternate;
     animation-direction: alternate;
-    -moz-animation-iteration-count: 6;
-    -webkit-animation-iteration-count: 6;
-    animation-iteration-count: 6;
-    -moz-animation-timing-function: linear;
-    -webkit-animation-timing-function: linear;
-    animation-timing-function: linear;
+    -moz-animation-iteration-count: 8;
+    -webkit-animation-iteration-count: 8;
+    animation-iteration-count: 8;
+    -moz-animation-timing-function: ease;
+    -webkit-animation-timing-function: ease;
+    animation-timing-function: ease;
     -moz-border-radius: 3px;
     -webkit-border-radius: 3px;
     border-radius: 3px;
@@ -3709,15 +3709,16 @@ span.req {
   -webkit-transition-timing-function: ease-in-out;
   transition-timing-function: ease-in-out;
   height: 0;
-  opacity: 0; }
-  /* line 328, ../../../../general/res/sass/user-environ/_layout.scss */
+  opacity: 0;
+  overflow: hidden; }
+  /* line 329, ../../../../general/res/sass/user-environ/_layout.scss */
   .l-edit-controls.active {
     border-bottom: 1px solid rgba(153, 153, 153, 0.1);
     height: 30px;
     line-height: 25px;
     opacity: 1; }
 
-/* line 336, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 337, ../../../../general/res/sass/user-environ/_layout.scss */
 .object-browse-bar .s-btn, .object-browse-bar .s-menu-btn,
 .top-bar .buttons-main .s-btn,
 .top-bar .buttons-main .s-menu-btn,
@@ -3729,12 +3730,12 @@ span.req {
   line-height: 25px;
   vertical-align: top; }
 
-/* line 349, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 350, ../../../../general/res/sass/user-environ/_layout.scss */
 .object-browse-bar .view-switcher,
 .top-bar .view-switcher {
   margin-right: 20px; }
 
-/* line 354, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 355, ../../../../general/res/sass/user-environ/_layout.scss */
 .object-browse-bar {
   overflow: visible;
   position: absolute;
@@ -3750,49 +3751,49 @@ span.req {
   height: 24px;
   line-height: 24px;
   white-space: nowrap; }
-  /* line 362, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 363, ../../../../general/res/sass/user-environ/_layout.scss */
   .object-browse-bar .left {
     padding-right: 20px; }
-    /* line 364, ../../../../general/res/sass/user-environ/_layout.scss */
+    /* line 365, ../../../../general/res/sass/user-environ/_layout.scss */
     .object-browse-bar .left .l-back {
       display: inline-block;
       float: left;
       margin-right: 10px; }
 
-/* line 372, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 373, ../../../../general/res/sass/user-environ/_layout.scss */
 .l-flex {
   display: -webkit-flex;
   display: flex; }
-  /* line 374, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 375, ../../../../general/res/sass/user-environ/_layout.scss */
   .l-flex.flex-row {
     -webkit-flex-flow: row nowrap;
     flex-flow: row nowrap; }
-    /* line 376, ../../../../general/res/sass/user-environ/_layout.scss */
+    /* line 377, ../../../../general/res/sass/user-environ/_layout.scss */
     .l-flex.flex-row .flex-elem.active {
       margin-right: 5px; }
-      /* line 378, ../../../../general/res/sass/user-environ/_layout.scss */
+      /* line 379, ../../../../general/res/sass/user-environ/_layout.scss */
       .l-flex.flex-row .flex-elem.active:last-child {
         margin-right: 0; }
-  /* line 383, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 384, ../../../../general/res/sass/user-environ/_layout.scss */
   .l-flex.flex-col {
     -webkit-flex-flow: column nowrap;
     flex-flow: column nowrap; }
-    /* line 385, ../../../../general/res/sass/user-environ/_layout.scss */
+    /* line 386, ../../../../general/res/sass/user-environ/_layout.scss */
     .l-flex.flex-col .flex-elem.active {
       margin-bottom: 10px; }
-      /* line 387, ../../../../general/res/sass/user-environ/_layout.scss */
+      /* line 388, ../../../../general/res/sass/user-environ/_layout.scss */
       .l-flex.flex-col .flex-elem.active:last-child {
         margin-bottom: 0; }
-  /* line 392, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 393, ../../../../general/res/sass/user-environ/_layout.scss */
   .l-flex .flex-elem {
     -webkit-flex: 0 1;
     flex: 0 1;
     position: relative; }
-    /* line 396, ../../../../general/res/sass/user-environ/_layout.scss */
+    /* line 397, ../../../../general/res/sass/user-environ/_layout.scss */
     .l-flex .flex-elem.grow {
       -webkit-flex: 1 1;
       flex: 1 1; }
-  /* line 400, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 401, ../../../../general/res/sass/user-environ/_layout.scss */
   .l-flex .left {
     -webkit-flex: 1 1 0;
     flex: 1 1 0;
diff --git a/platform/commonUI/themes/snow/res/css/theme-snow.css b/platform/commonUI/themes/snow/res/css/theme-snow.css
index 41f85b3c40..cf3daa1b63 100644
--- a/platform/commonUI/themes/snow/res/css/theme-snow.css
+++ b/platform/commonUI/themes/snow/res/css/theme-snow.css
@@ -3590,12 +3590,12 @@ span.req {
     -moz-animation-direction: alternate;
     -webkit-animation-direction: alternate;
     animation-direction: alternate;
-    -moz-animation-iteration-count: 6;
-    -webkit-animation-iteration-count: 6;
-    animation-iteration-count: 6;
-    -moz-animation-timing-function: linear;
-    -webkit-animation-timing-function: linear;
-    animation-timing-function: linear;
+    -moz-animation-iteration-count: 8;
+    -webkit-animation-iteration-count: 8;
+    animation-iteration-count: 8;
+    -moz-animation-timing-function: ease;
+    -webkit-animation-timing-function: ease;
+    animation-timing-function: ease;
     -moz-border-radius: 4px;
     -webkit-border-radius: 4px;
     border-radius: 4px;
@@ -3656,15 +3656,16 @@ span.req {
   -webkit-transition-timing-function: ease-in-out;
   transition-timing-function: ease-in-out;
   height: 0;
-  opacity: 0; }
-  /* line 328, ../../../../general/res/sass/user-environ/_layout.scss */
+  opacity: 0;
+  overflow: hidden; }
+  /* line 329, ../../../../general/res/sass/user-environ/_layout.scss */
   .l-edit-controls.active {
     border-bottom: 1px solid rgba(102, 102, 102, 0.2);
     height: 30px;
     line-height: 25px;
     opacity: 1; }
 
-/* line 336, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 337, ../../../../general/res/sass/user-environ/_layout.scss */
 .object-browse-bar .s-btn, .object-browse-bar .s-menu-btn,
 .top-bar .buttons-main .s-btn,
 .top-bar .buttons-main .s-menu-btn,
@@ -3676,12 +3677,12 @@ span.req {
   line-height: 25px;
   vertical-align: top; }
 
-/* line 349, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 350, ../../../../general/res/sass/user-environ/_layout.scss */
 .object-browse-bar .view-switcher,
 .top-bar .view-switcher {
   margin-right: 20px; }
 
-/* line 354, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 355, ../../../../general/res/sass/user-environ/_layout.scss */
 .object-browse-bar {
   overflow: visible;
   position: absolute;
@@ -3697,49 +3698,49 @@ span.req {
   height: 24px;
   line-height: 24px;
   white-space: nowrap; }
-  /* line 362, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 363, ../../../../general/res/sass/user-environ/_layout.scss */
   .object-browse-bar .left {
     padding-right: 20px; }
-    /* line 364, ../../../../general/res/sass/user-environ/_layout.scss */
+    /* line 365, ../../../../general/res/sass/user-environ/_layout.scss */
     .object-browse-bar .left .l-back {
       display: inline-block;
       float: left;
       margin-right: 10px; }
 
-/* line 372, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 373, ../../../../general/res/sass/user-environ/_layout.scss */
 .l-flex {
   display: -webkit-flex;
   display: flex; }
-  /* line 374, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 375, ../../../../general/res/sass/user-environ/_layout.scss */
   .l-flex.flex-row {
     -webkit-flex-flow: row nowrap;
     flex-flow: row nowrap; }
-    /* line 376, ../../../../general/res/sass/user-environ/_layout.scss */
+    /* line 377, ../../../../general/res/sass/user-environ/_layout.scss */
     .l-flex.flex-row .flex-elem.active {
       margin-right: 5px; }
-      /* line 378, ../../../../general/res/sass/user-environ/_layout.scss */
+      /* line 379, ../../../../general/res/sass/user-environ/_layout.scss */
       .l-flex.flex-row .flex-elem.active:last-child {
         margin-right: 0; }
-  /* line 383, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 384, ../../../../general/res/sass/user-environ/_layout.scss */
   .l-flex.flex-col {
     -webkit-flex-flow: column nowrap;
     flex-flow: column nowrap; }
-    /* line 385, ../../../../general/res/sass/user-environ/_layout.scss */
+    /* line 386, ../../../../general/res/sass/user-environ/_layout.scss */
     .l-flex.flex-col .flex-elem.active {
       margin-bottom: 10px; }
-      /* line 387, ../../../../general/res/sass/user-environ/_layout.scss */
+      /* line 388, ../../../../general/res/sass/user-environ/_layout.scss */
       .l-flex.flex-col .flex-elem.active:last-child {
         margin-bottom: 0; }
-  /* line 392, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 393, ../../../../general/res/sass/user-environ/_layout.scss */
   .l-flex .flex-elem {
     -webkit-flex: 0 1;
     flex: 0 1;
     position: relative; }
-    /* line 396, ../../../../general/res/sass/user-environ/_layout.scss */
+    /* line 397, ../../../../general/res/sass/user-environ/_layout.scss */
     .l-flex .flex-elem.grow {
       -webkit-flex: 1 1;
       flex: 1 1; }
-  /* line 400, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 401, ../../../../general/res/sass/user-environ/_layout.scss */
   .l-flex .left {
     -webkit-flex: 1 1 0;
     flex: 1 1 0;