From 4c84789d5ded59cea3b0bfbe4d8274bdd7cde9c7 Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charlesh88@gmail.com>
Date: Wed, 21 Oct 2015 11:35:36 -0700
Subject: [PATCH 1/2] Frontend] Styling for New Edit Mode

open #198
.l-flex styles refined;
Animation refinement;
.s-btn default vertical-align = top;
.tool-bar style tweaked;
Added title-label back into edit-action-buttons.html;
---
 .../browse/res/templates/browse-object.html   |  40 +++--
 .../res/templates/edit-action-buttons.html    |   1 +
 .../commonUI/general/res/sass/_effects.scss   |   3 +-
 .../commonUI/general/res/sass/_global.scss    |   4 +
 .../general/res/sass/controls/_buttons.scss   |  11 +-
 .../general/res/sass/controls/_controls.scss  |   2 +-
 .../res/sass/user-environ/_layout.scss        |  22 ++-
 .../espresso/res/css/theme-espresso.css       | 141 ++++++++++--------
 .../themes/snow/res/css/theme-snow.css        | 141 ++++++++++--------
 9 files changed, 219 insertions(+), 146 deletions(-)

diff --git a/platform/commonUI/browse/res/templates/browse-object.html b/platform/commonUI/browse/res/templates/browse-object.html
index 97574b46a3..c5916e37f0 100644
--- a/platform/commonUI/browse/res/templates/browse-object.html
+++ b/platform/commonUI/browse/res/templates/browse-object.html
@@ -54,45 +54,59 @@
          ng-class="{ active:editMode }">
         <div class="l-object-wrapper-inner l-flex flex-col">
             <!-- Toolbar and Save/Cancel buttons -->
-            <div class="l-edit-controls flex-elem l-flex flex-row"
+            <div class="l-edit-controls flex-elem l-flex flex-row flex-align-end"
                  ng-class="{ active:editMode }">
 
 
 
 
-                <mct-toolbar name="mctToolbar"
+<!--                <mct-toolbar name="mctToolbar"
                              structure="toolbar.structure"
                              ng-model="toolbar.state"
                              class="flex-elem grow">
-                </mct-toolbar>
+                </mct-toolbar>-->
                 <!-- from toolbar.html -->
-<!--                <mct-toolbar-x class="flex-elem grow">
+                <mct-toolbar-x class="flex-elem grow ellipsis">
                     <form novalidate>
-                        <div class="tool-bar btn-bar contents abs">
+                        <div class="tool-bar btn-bar">
                             <span class="l-control-group">
-                            <span class="s-menu-btn">Foo</span>
-                            <span class="s-menu-btn">Bar</span>
+                                <span class="s-menu-btn">Foo</span>
+                                <span class="s-menu-btn">Bar</span>
                             </span>
+                            <span class="l-control-group">
+                                <span class="s-menu-btn">Foo</span>
+                                <span class="s-menu-btn">Bar</span>
+                                <span class="s-menu-btn">Foo</span>
+                                <span class="s-menu-btn">Lorem</span>
+                            </span>
+                            <span class="l-control-group">
+                                <span class="s-menu-btn">Foo</span>
+                                <span class="s-menu-btn">Bar</span>
+                                <span class="s-menu-btn">Lorem</span>
+                            </span>
+                            <span class="s-menu-btn">Lorem</span>
                         </div>
                     </form>
-                </mct-toolbar-x>-->
+                </mct-toolbar-x>
 
 
 
 
-                <mct-representation key="'edit-action-buttons'"
+<!--                <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 class='flex-elem conclude-editing'>
                     <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>
+                           ng-class="{ major: $index === 0 }">
+                            <span class="title-label">{{btn.title}}</span>
+                        </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 56105b7058..1d12fb7913 100644
--- a/platform/commonUI/edit/res/templates/edit-action-buttons.html
+++ b/platform/commonUI/edit/res/templates/edit-action-buttons.html
@@ -25,6 +25,7 @@
            title='{{currentAction.getMetadata().name}}'
            ng-click="currentAction.perform()"
            ng-class="{ major: $index === 0 }">
+            <span class="title-label">{{currentAction.getMetadata().name}}</span>
         </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 b09fa8adff..0d58c86af6 100644
--- a/platform/commonUI/general/res/sass/_effects.scss
+++ b/platform/commonUI/general/res/sass/_effects.scss
@@ -66,7 +66,7 @@ a.disabled {
 	@include animation-timing-function(ease-in-out);
 }
 
-@mixin pulseBorder($c: red, $dur: 500ms, $iteration: infinite) {
+@mixin pulseBorder($c: red, $dur: 500ms, $iteration: infinite, $delay: 0s) {
 	@include keyframes(pulseBorder) {
 		0%   { border-color: transparent; }
 		100% { border-color: $c; }
@@ -76,6 +76,7 @@ a.disabled {
 	@include animation-direction(alternate);
 	@include animation-iteration-count($iteration);
 	@include animation-timing-function(ease);
+    @include animation-delay($delay);
 }
 
 .pulse {
diff --git a/platform/commonUI/general/res/sass/_global.scss b/platform/commonUI/general/res/sass/_global.scss
index 45b868922b..91d5a6741a 100644
--- a/platform/commonUI/general/res/sass/_global.scss
+++ b/platform/commonUI/general/res/sass/_global.scss
@@ -125,6 +125,10 @@ mct-container {
 	text-align: center;
 }
 
+.ellipsis {
+    @include ellipsize();
+}
+
 .scrolling {
 	overflow: auto;
 }
diff --git a/platform/commonUI/general/res/sass/controls/_buttons.scss b/platform/commonUI/general/res/sass/controls/_buttons.scss
index fbb4ba8d30..efd3bc2266 100644
--- a/platform/commonUI/general/res/sass/controls/_buttons.scss
+++ b/platform/commonUI/general/res/sass/controls/_buttons.scss
@@ -31,6 +31,7 @@ $pad: $interiorMargin * $baseRatio;
     line-height: $btnStdH;
     padding: 0 $pad;
     font-size: 0.7rem;
+    vertical-align: top;
 
     .icon {
         font-size: 0.8rem;
@@ -69,10 +70,14 @@ $pad: $interiorMargin * $baseRatio;
     &.t-save:before {
         content:'\e612';
         font-family: symbolsfont;
+        margin-right: $interiorMarginSm;
     }
-    &.t-cancel:before {
-        content:'\78';
-        font-family: symbolsfont;
+    &.t-cancel {
+        .title-label { display: none; }
+        &:before {
+            content:'\78';
+            font-family: symbolsfont;
+        }
     }
 
     &.pause-play {
diff --git a/platform/commonUI/general/res/sass/controls/_controls.scss b/platform/commonUI/general/res/sass/controls/_controls.scss
index eef87c3439..a660db75ed 100644
--- a/platform/commonUI/general/res/sass/controls/_controls.scss
+++ b/platform/commonUI/general/res/sass/controls/_controls.scss
@@ -115,7 +115,7 @@
 	@include box-sizing(border-box);
 	border-left: 1px solid $colorInteriorBorder;
 	display: inline-block;
-	padding: 0 $interiorMargin;
+	padding: 0 0 0 $interiorMargin;
 	position: relative;
 	&:first-child {
 		border-left: none;
diff --git a/platform/commonUI/general/res/sass/user-environ/_layout.scss b/platform/commonUI/general/res/sass/user-environ/_layout.scss
index 346e1ec482..a296f5744d 100644
--- a/platform/commonUI/general/res/sass/user-environ/_layout.scss
+++ b/platform/commonUI/general/res/sass/user-environ/_layout.scss
@@ -304,17 +304,21 @@
     @extend .abs;
     top: $ueTopBarH + $interiorMarginLg;
     &.active {
-        @include pulseBorder($colorKey, 150ms, 8);
+        @include pulseBorder($colorKey, 150ms, 8, 0.5s);
         @include border-radius($controlCr);
         border-color: $colorKey;
-        border-width:2px;
+        border-width: 2px;
         border-style: dotted;
         .l-object-wrapper-inner {
             $m: 3px;
-            top: $m; right: $m; bottom: $m; left: $m;
+            top: $m;
+            right: $m;
+            bottom: $m;
+            left: $m;
         }
     }
 }
+
 .l-object-wrapper-inner {
     @extend .abs;
     @include display-flex(column nowrap);
@@ -374,15 +378,21 @@
     @include display-flex;
     &.flex-row {
         @include flex-flow(row nowrap);
-        .flex-elem.active {
+        //@include align-items(center);
+        .flex-elem {
+            white-space: nowrap;
             margin-right: $interiorMargin;
             &:last-child {
                 margin-right: 0;
             }
+            &.flex-align-end {
+                @include justify-content(flex-end);
+            }
         }
     }
     &.flex-col {
         @include flex-flow(column nowrap);
+        //@include align-items(stretch);
         .flex-elem.active {
             margin-bottom: $interiorMarginLg;
             &:last-child {
@@ -392,10 +402,10 @@
     }
     .flex-elem {
         //@include test(purple);
-        @include flex(0 1);
+        @include flex(0 1 auto);
         position: relative;
         &.grow {
-            @include flex(1 1);
+            @include flex(1 1 auto);
         }
     }
     .left {
diff --git a/platform/commonUI/themes/espresso/res/css/theme-espresso.css b/platform/commonUI/themes/espresso/res/css/theme-espresso.css
index 19f6d5eb07..df3e4fc271 100644
--- a/platform/commonUI/themes/espresso/res/css/theme-espresso.css
+++ b/platform/commonUI/themes/espresso/res/css/theme-espresso.css
@@ -20,7 +20,7 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-/* line 5, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 5, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 html, body, div, span, applet, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 a, abbr, acronym, address, big, cite, code,
@@ -41,38 +41,38 @@ time, mark, audio, video {
   font-size: 100%;
   vertical-align: baseline; }
 
-/* line 22, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 22, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 html {
   line-height: 1; }
 
-/* line 24, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 24, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 ol, ul {
   list-style: none; }
 
-/* line 26, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 26, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 table {
   border-collapse: collapse;
   border-spacing: 0; }
 
-/* line 28, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 28, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 caption, th, td {
   text-align: left;
   font-weight: normal;
   vertical-align: middle; }
 
-/* line 30, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 30, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 q, blockquote {
   quotes: none; }
-  /* line 103, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+  /* line 103, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
   q:before, q:after, blockquote:before, blockquote:after {
     content: "";
     content: none; }
 
-/* line 32, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 32, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 a img {
   border: none; }
 
-/* line 116, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 116, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
   display: block; }
 
@@ -264,7 +264,7 @@ a.disabled {
     opacity: 0.5; }
   100% {
     opacity: 1; } }
-/* line 81, ../../../../general/res/sass/_effects.scss */
+/* line 82, ../../../../general/res/sass/_effects.scss */
 .pulse {
   -moz-animation-name: pulse;
   -webkit-animation-name: pulse;
@@ -404,29 +404,35 @@ mct-container {
   text-align: center; }
 
 /* line 128, ../../../../general/res/sass/_global.scss */
+.ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap; }
+
+/* line 132, ../../../../general/res/sass/_global.scss */
 .scrolling {
   overflow: auto; }
 
-/* line 132, ../../../../general/res/sass/_global.scss */
+/* line 136, ../../../../general/res/sass/_global.scss */
 .vscroll {
   overflow-y: auto; }
 
-/* line 136, ../../../../general/res/sass/_global.scss */
+/* line 140, ../../../../general/res/sass/_global.scss */
 .no-margin {
   margin: 0; }
 
-/* line 140, ../../../../general/res/sass/_global.scss */
+/* line 144, ../../../../general/res/sass/_global.scss */
 .ds {
   -moz-box-shadow: rgba(0, 0, 0, 0.7) 0 4px 10px 2px;
   -webkit-box-shadow: rgba(0, 0, 0, 0.7) 0 4px 10px 2px;
   box-shadow: rgba(0, 0, 0, 0.7) 0 4px 10px 2px; }
 
-/* line 144, ../../../../general/res/sass/_global.scss */
+/* line 148, ../../../../general/res/sass/_global.scss */
 .hide,
 .hidden {
   display: none !important; }
 
-/* line 149, ../../../../general/res/sass/_global.scss */
+/* line 153, ../../../../general/res/sass/_global.scss */
 .sep {
   color: rgba(255, 255, 255, 0.2); }
 
@@ -1356,24 +1362,25 @@ mct-container {
   height: 25px;
   line-height: 25px;
   padding: 0 7.5px;
-  font-size: 0.7rem; }
-  /* line 35, ../../../../general/res/sass/controls/_buttons.scss */
+  font-size: 0.7rem;
+  vertical-align: top; }
+  /* line 36, ../../../../general/res/sass/controls/_buttons.scss */
   .s-btn .icon, .s-menu-btn .icon {
     font-size: 0.8rem;
     color: #0099cc; }
-  /* line 40, ../../../../general/res/sass/controls/_buttons.scss */
+  /* line 41, ../../../../general/res/sass/controls/_buttons.scss */
   .s-btn .title-label, .s-menu-btn .title-label {
     vertical-align: top; }
-  /* line 44, ../../../../general/res/sass/controls/_buttons.scss */
+  /* line 45, ../../../../general/res/sass/controls/_buttons.scss */
   .s-btn.lg, .lg.s-menu-btn {
     font-size: 1rem; }
-  /* line 48, ../../../../general/res/sass/controls/_buttons.scss */
+  /* line 49, ../../../../general/res/sass/controls/_buttons.scss */
   .s-btn.sm, .sm.s-menu-btn {
     padding: 0 5px; }
-  /* line 52, ../../../../general/res/sass/controls/_buttons.scss */
+  /* line 53, ../../../../general/res/sass/controls/_buttons.scss */
   .s-btn.vsm, .vsm.s-menu-btn {
     padding: 0 2.5px; }
-  /* line 56, ../../../../general/res/sass/controls/_buttons.scss */
+  /* line 57, ../../../../general/res/sass/controls/_buttons.scss */
   .s-btn.major, .major.s-menu-btn {
     background-color: #0099cc;
     -moz-border-radius: 3px;
@@ -1412,7 +1419,7 @@ mct-container {
         /* line 285, ../../../../general/res/sass/_mixins.scss */
         .s-btn.major:not(.disabled):hover > .icon, .major.s-menu-btn:not(.disabled):hover > .icon {
           color: white; } }
-  /* line 62, ../../../../general/res/sass/controls/_buttons.scss */
+  /* line 63, ../../../../general/res/sass/controls/_buttons.scss */
   .s-btn:not(.major), .s-menu-btn:not(.major) {
     background-color: #454545;
     -moz-border-radius: 3px;
@@ -1451,18 +1458,22 @@ mct-container {
         /* line 285, ../../../../general/res/sass/_mixins.scss */
         .s-btn:not(.major):not(.disabled):hover > .icon, .s-menu-btn:not(.major):not(.disabled):hover > .icon {
           color: #33ccff; } }
-  /* line 69, ../../../../general/res/sass/controls/_buttons.scss */
+  /* line 70, ../../../../general/res/sass/controls/_buttons.scss */
   .s-btn.t-save:before, .t-save.s-menu-btn:before {
     content: '\e612';
-    font-family: symbolsfont; }
-  /* line 73, ../../../../general/res/sass/controls/_buttons.scss */
+    font-family: symbolsfont;
+    margin-right: 3px; }
+  /* line 76, ../../../../general/res/sass/controls/_buttons.scss */
+  .s-btn.t-cancel .title-label, .t-cancel.s-menu-btn .title-label {
+    display: none; }
+  /* line 77, ../../../../general/res/sass/controls/_buttons.scss */
   .s-btn.t-cancel:before, .t-cancel.s-menu-btn:before {
     content: '\78';
     font-family: symbolsfont; }
-  /* line 79, ../../../../general/res/sass/controls/_buttons.scss */
+  /* line 84, ../../../../general/res/sass/controls/_buttons.scss */
   .s-btn.pause-play .icon:before, .pause-play.s-menu-btn .icon:before {
     content: "\0000F1"; }
-  /* line 82, ../../../../general/res/sass/controls/_buttons.scss */
+  /* line 87, ../../../../general/res/sass/controls/_buttons.scss */
   .s-btn.pause-play.paused, .pause-play.paused.s-menu-btn {
     background-color: #c56f01;
     -moz-border-radius: 3px;
@@ -1501,7 +1512,7 @@ mct-container {
         /* line 285, ../../../../general/res/sass/_mixins.scss */
         .s-btn.pause-play.paused:not(.disabled):hover > .icon, .pause-play.paused.s-menu-btn:not(.disabled):hover > .icon {
           color: white; } }
-    /* line 84, ../../../../general/res/sass/controls/_buttons.scss */
+    /* line 89, ../../../../general/res/sass/controls/_buttons.scss */
     .s-btn.pause-play.paused .icon, .pause-play.paused.s-menu-btn .icon {
       -moz-animation-name: pulse;
       -webkit-animation-name: pulse;
@@ -1518,23 +1529,23 @@ mct-container {
       -moz-animation-timing-function: ease-in-out;
       -webkit-animation-timing-function: ease-in-out;
       animation-timing-function: ease-in-out; }
-      /* line 86, ../../../../general/res/sass/controls/_buttons.scss */
+      /* line 91, ../../../../general/res/sass/controls/_buttons.scss */
       .s-btn.pause-play.paused .icon :before, .pause-play.paused.s-menu-btn .icon :before {
         content: "\0000EF"; }
-  /* line 94, ../../../../general/res/sass/controls/_buttons.scss */
+  /* line 99, ../../../../general/res/sass/controls/_buttons.scss */
   .s-btn.show-thumbs .icon:before, .show-thumbs.s-menu-btn .icon:before {
     content: "\000039"; }
 
-/* line 100, ../../../../general/res/sass/controls/_buttons.scss */
+/* line 105, ../../../../general/res/sass/controls/_buttons.scss */
 .l-btn-set {
   font-size: 0; }
-  /* line 106, ../../../../general/res/sass/controls/_buttons.scss */
+  /* line 111, ../../../../general/res/sass/controls/_buttons.scss */
   .l-btn-set .s-btn, .l-btn-set .s-menu-btn {
     -moz-border-radius: 0;
     -webkit-border-radius: 0;
     border-radius: 0;
     margin-left: 1px; }
-  /* line 112, ../../../../general/res/sass/controls/_buttons.scss */
+  /* line 117, ../../../../general/res/sass/controls/_buttons.scss */
   .l-btn-set .first .s-btn, .l-btn-set .first .s-menu-btn {
     -moz-border-radius-topleft: 3px;
     -webkit-border-top-left-radius: 3px;
@@ -1543,7 +1554,7 @@ mct-container {
     -webkit-border-bottom-left-radius: 3px;
     border-bottom-left-radius: 3px;
     margin-left: 0; }
-  /* line 119, ../../../../general/res/sass/controls/_buttons.scss */
+  /* line 124, ../../../../general/res/sass/controls/_buttons.scss */
   .l-btn-set .last .s-btn, .l-btn-set .last .s-menu-btn {
     -moz-border-radius-topright: 3px;
     -webkit-border-top-right-radius: 3px;
@@ -1552,7 +1563,7 @@ mct-container {
     -webkit-border-bottom-right-radius: 3px;
     border-bottom-right-radius: 3px; }
 
-/* line 126, ../../../../general/res/sass/controls/_buttons.scss */
+/* line 131, ../../../../general/res/sass/controls/_buttons.scss */
 .paused:not(.s-btn):not(.s-menu-btn) {
   border-color: #c56f01 !important;
   color: #c56f01 !important; }
@@ -1753,7 +1764,7 @@ mct-container {
   box-sizing: border-box;
   border-left: 1px solid rgba(153, 153, 153, 0.1);
   display: inline-block;
-  padding: 0 5px;
+  padding: 0 0 0 5px;
   position: relative; }
   /* line 120, ../../../../general/res/sass/controls/_controls.scss */
   .l-control-group:first-child {
@@ -3649,6 +3660,9 @@ span.req {
     -moz-animation-timing-function: ease;
     -webkit-animation-timing-function: ease;
     animation-timing-function: ease;
+    -moz-animation-delay: 0.5s;
+    -webkit-animation-delay: 0.5s;
+    animation-delay: 0.5s;
     -moz-border-radius: 3px;
     -webkit-border-radius: 3px;
     border-radius: 3px;
@@ -3677,7 +3691,7 @@ span.req {
       bottom: 3px;
       left: 3px; }
 
-/* line 318, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 322, ../../../../general/res/sass/user-environ/_layout.scss */
 .l-object-wrapper-inner {
   display: -webkit-column nowrap;
   display: column nowrap;
@@ -3694,7 +3708,7 @@ span.req {
   -webkit-transition-timing-function: ease-in-out;
   transition-timing-function: ease-in-out; }
 
-/* line 324, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 328, ../../../../general/res/sass/user-environ/_layout.scss */
 .l-edit-controls {
   -moz-transition-property: height, width, top, right, bottom, left, opacity;
   -o-transition-property: height, width, top, right, bottom, left, opacity;
@@ -3711,14 +3725,14 @@ span.req {
   height: 0;
   opacity: 0;
   overflow: hidden; }
-  /* line 329, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 333, ../../../../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 337, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 341, ../../../../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,
@@ -3730,12 +3744,12 @@ span.req {
   line-height: 25px;
   vertical-align: top; }
 
-/* line 350, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 354, ../../../../general/res/sass/user-environ/_layout.scss */
 .object-browse-bar .view-switcher,
 .top-bar .view-switcher {
   margin-right: 20px; }
 
-/* line 355, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 359, ../../../../general/res/sass/user-environ/_layout.scss */
 .object-browse-bar {
   overflow: visible;
   position: absolute;
@@ -3751,49 +3765,54 @@ span.req {
   height: 24px;
   line-height: 24px;
   white-space: nowrap; }
-  /* line 363, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 367, ../../../../general/res/sass/user-environ/_layout.scss */
   .object-browse-bar .left {
     padding-right: 20px; }
-    /* line 365, ../../../../general/res/sass/user-environ/_layout.scss */
+    /* line 369, ../../../../general/res/sass/user-environ/_layout.scss */
     .object-browse-bar .left .l-back {
       display: inline-block;
       float: left;
       margin-right: 10px; }
 
-/* line 373, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 377, ../../../../general/res/sass/user-environ/_layout.scss */
 .l-flex {
   display: -webkit-flex;
   display: flex; }
-  /* line 375, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 379, ../../../../general/res/sass/user-environ/_layout.scss */
   .l-flex.flex-row {
     -webkit-flex-flow: row nowrap;
     flex-flow: row nowrap; }
-    /* line 377, ../../../../general/res/sass/user-environ/_layout.scss */
-    .l-flex.flex-row .flex-elem.active {
+    /* line 382, ../../../../general/res/sass/user-environ/_layout.scss */
+    .l-flex.flex-row .flex-elem {
+      white-space: nowrap;
       margin-right: 5px; }
-      /* line 379, ../../../../general/res/sass/user-environ/_layout.scss */
-      .l-flex.flex-row .flex-elem.active:last-child {
+      /* line 385, ../../../../general/res/sass/user-environ/_layout.scss */
+      .l-flex.flex-row .flex-elem:last-child {
         margin-right: 0; }
-  /* line 384, ../../../../general/res/sass/user-environ/_layout.scss */
+      /* line 388, ../../../../general/res/sass/user-environ/_layout.scss */
+      .l-flex.flex-row .flex-elem.flex-align-end {
+        -webkit-justify-content: flex-end;
+        justify-content: flex-end; }
+  /* line 393, ../../../../general/res/sass/user-environ/_layout.scss */
   .l-flex.flex-col {
     -webkit-flex-flow: column nowrap;
     flex-flow: column nowrap; }
-    /* line 386, ../../../../general/res/sass/user-environ/_layout.scss */
+    /* line 396, ../../../../general/res/sass/user-environ/_layout.scss */
     .l-flex.flex-col .flex-elem.active {
       margin-bottom: 10px; }
-      /* line 388, ../../../../general/res/sass/user-environ/_layout.scss */
+      /* line 398, ../../../../general/res/sass/user-environ/_layout.scss */
       .l-flex.flex-col .flex-elem.active:last-child {
         margin-bottom: 0; }
-  /* line 393, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 403, ../../../../general/res/sass/user-environ/_layout.scss */
   .l-flex .flex-elem {
-    -webkit-flex: 0 1;
-    flex: 0 1;
+    -webkit-flex: 0 1 auto;
+    flex: 0 1 auto;
     position: relative; }
-    /* line 397, ../../../../general/res/sass/user-environ/_layout.scss */
+    /* line 407, ../../../../general/res/sass/user-environ/_layout.scss */
     .l-flex .flex-elem.grow {
-      -webkit-flex: 1 1;
-      flex: 1 1; }
-  /* line 401, ../../../../general/res/sass/user-environ/_layout.scss */
+      -webkit-flex: 1 1 auto;
+      flex: 1 1 auto; }
+  /* line 411, ../../../../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 cf3daa1b63..52b485c34b 100644
--- a/platform/commonUI/themes/snow/res/css/theme-snow.css
+++ b/platform/commonUI/themes/snow/res/css/theme-snow.css
@@ -20,7 +20,7 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-/* line 5, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 5, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 html, body, div, span, applet, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 a, abbr, acronym, address, big, cite, code,
@@ -41,38 +41,38 @@ time, mark, audio, video {
   font-size: 100%;
   vertical-align: baseline; }
 
-/* line 22, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 22, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 html {
   line-height: 1; }
 
-/* line 24, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 24, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 ol, ul {
   list-style: none; }
 
-/* line 26, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 26, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 table {
   border-collapse: collapse;
   border-spacing: 0; }
 
-/* line 28, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 28, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 caption, th, td {
   text-align: left;
   font-weight: normal;
   vertical-align: middle; }
 
-/* line 30, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 30, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 q, blockquote {
   quotes: none; }
-  /* line 103, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+  /* line 103, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
   q:before, q:after, blockquote:before, blockquote:after {
     content: "";
     content: none; }
 
-/* line 32, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 32, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 a img {
   border: none; }
 
-/* line 116, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 116, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
   display: block; }
 
@@ -264,7 +264,7 @@ a.disabled {
     opacity: 0.5; }
   100% {
     opacity: 1; } }
-/* line 81, ../../../../general/res/sass/_effects.scss */
+/* line 82, ../../../../general/res/sass/_effects.scss */
 .pulse {
   -moz-animation-name: pulse;
   -webkit-animation-name: pulse;
@@ -404,29 +404,35 @@ mct-container {
   text-align: center; }
 
 /* line 128, ../../../../general/res/sass/_global.scss */
+.ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap; }
+
+/* line 132, ../../../../general/res/sass/_global.scss */
 .scrolling {
   overflow: auto; }
 
-/* line 132, ../../../../general/res/sass/_global.scss */
+/* line 136, ../../../../general/res/sass/_global.scss */
 .vscroll {
   overflow-y: auto; }
 
-/* line 136, ../../../../general/res/sass/_global.scss */
+/* line 140, ../../../../general/res/sass/_global.scss */
 .no-margin {
   margin: 0; }
 
-/* line 140, ../../../../general/res/sass/_global.scss */
+/* line 144, ../../../../general/res/sass/_global.scss */
 .ds {
   -moz-box-shadow: rgba(0, 0, 0, 0.7) 0 4px 10px 2px;
   -webkit-box-shadow: rgba(0, 0, 0, 0.7) 0 4px 10px 2px;
   box-shadow: rgba(0, 0, 0, 0.7) 0 4px 10px 2px; }
 
-/* line 144, ../../../../general/res/sass/_global.scss */
+/* line 148, ../../../../general/res/sass/_global.scss */
 .hide,
 .hidden {
   display: none !important; }
 
-/* line 149, ../../../../general/res/sass/_global.scss */
+/* line 153, ../../../../general/res/sass/_global.scss */
 .sep {
   color: rgba(255, 255, 255, 0.2); }
 
@@ -1353,24 +1359,25 @@ mct-container {
   height: 25px;
   line-height: 25px;
   padding: 0 7.5px;
-  font-size: 0.7rem; }
-  /* line 35, ../../../../general/res/sass/controls/_buttons.scss */
+  font-size: 0.7rem;
+  vertical-align: top; }
+  /* line 36, ../../../../general/res/sass/controls/_buttons.scss */
   .s-btn .icon, .s-menu-btn .icon {
     font-size: 0.8rem;
     color: #0099cc; }
-  /* line 40, ../../../../general/res/sass/controls/_buttons.scss */
+  /* line 41, ../../../../general/res/sass/controls/_buttons.scss */
   .s-btn .title-label, .s-menu-btn .title-label {
     vertical-align: top; }
-  /* line 44, ../../../../general/res/sass/controls/_buttons.scss */
+  /* line 45, ../../../../general/res/sass/controls/_buttons.scss */
   .s-btn.lg, .lg.s-menu-btn {
     font-size: 1rem; }
-  /* line 48, ../../../../general/res/sass/controls/_buttons.scss */
+  /* line 49, ../../../../general/res/sass/controls/_buttons.scss */
   .s-btn.sm, .sm.s-menu-btn {
     padding: 0 5px; }
-  /* line 52, ../../../../general/res/sass/controls/_buttons.scss */
+  /* line 53, ../../../../general/res/sass/controls/_buttons.scss */
   .s-btn.vsm, .vsm.s-menu-btn {
     padding: 0 2.5px; }
-  /* line 56, ../../../../general/res/sass/controls/_buttons.scss */
+  /* line 57, ../../../../general/res/sass/controls/_buttons.scss */
   .s-btn.major, .major.s-menu-btn {
     background-color: #0099cc;
     -moz-border-radius: 4px;
@@ -1400,7 +1407,7 @@ mct-container {
         /* line 285, ../../../../general/res/sass/_mixins.scss */
         .s-btn.major:not(.disabled):hover > .icon, .major.s-menu-btn:not(.disabled):hover > .icon {
           color: white; } }
-  /* line 62, ../../../../general/res/sass/controls/_buttons.scss */
+  /* line 63, ../../../../general/res/sass/controls/_buttons.scss */
   .s-btn:not(.major), .s-menu-btn:not(.major) {
     background-color: #969696;
     -moz-border-radius: 4px;
@@ -1430,18 +1437,22 @@ mct-container {
         /* line 285, ../../../../general/res/sass/_mixins.scss */
         .s-btn:not(.major):not(.disabled):hover > .icon, .s-menu-btn:not(.major):not(.disabled):hover > .icon {
           color: white; } }
-  /* line 69, ../../../../general/res/sass/controls/_buttons.scss */
+  /* line 70, ../../../../general/res/sass/controls/_buttons.scss */
   .s-btn.t-save:before, .t-save.s-menu-btn:before {
     content: '\e612';
-    font-family: symbolsfont; }
-  /* line 73, ../../../../general/res/sass/controls/_buttons.scss */
+    font-family: symbolsfont;
+    margin-right: 3px; }
+  /* line 76, ../../../../general/res/sass/controls/_buttons.scss */
+  .s-btn.t-cancel .title-label, .t-cancel.s-menu-btn .title-label {
+    display: none; }
+  /* line 77, ../../../../general/res/sass/controls/_buttons.scss */
   .s-btn.t-cancel:before, .t-cancel.s-menu-btn:before {
     content: '\78';
     font-family: symbolsfont; }
-  /* line 79, ../../../../general/res/sass/controls/_buttons.scss */
+  /* line 84, ../../../../general/res/sass/controls/_buttons.scss */
   .s-btn.pause-play .icon:before, .pause-play.s-menu-btn .icon:before {
     content: "\0000F1"; }
-  /* line 82, ../../../../general/res/sass/controls/_buttons.scss */
+  /* line 87, ../../../../general/res/sass/controls/_buttons.scss */
   .s-btn.pause-play.paused, .pause-play.paused.s-menu-btn {
     background-color: #ff9900;
     -moz-border-radius: 4px;
@@ -1471,7 +1482,7 @@ mct-container {
         /* line 285, ../../../../general/res/sass/_mixins.scss */
         .s-btn.pause-play.paused:not(.disabled):hover > .icon, .pause-play.paused.s-menu-btn:not(.disabled):hover > .icon {
           color: white; } }
-    /* line 84, ../../../../general/res/sass/controls/_buttons.scss */
+    /* line 89, ../../../../general/res/sass/controls/_buttons.scss */
     .s-btn.pause-play.paused .icon, .pause-play.paused.s-menu-btn .icon {
       -moz-animation-name: pulse;
       -webkit-animation-name: pulse;
@@ -1488,23 +1499,23 @@ mct-container {
       -moz-animation-timing-function: ease-in-out;
       -webkit-animation-timing-function: ease-in-out;
       animation-timing-function: ease-in-out; }
-      /* line 86, ../../../../general/res/sass/controls/_buttons.scss */
+      /* line 91, ../../../../general/res/sass/controls/_buttons.scss */
       .s-btn.pause-play.paused .icon :before, .pause-play.paused.s-menu-btn .icon :before {
         content: "\0000EF"; }
-  /* line 94, ../../../../general/res/sass/controls/_buttons.scss */
+  /* line 99, ../../../../general/res/sass/controls/_buttons.scss */
   .s-btn.show-thumbs .icon:before, .show-thumbs.s-menu-btn .icon:before {
     content: "\000039"; }
 
-/* line 100, ../../../../general/res/sass/controls/_buttons.scss */
+/* line 105, ../../../../general/res/sass/controls/_buttons.scss */
 .l-btn-set {
   font-size: 0; }
-  /* line 106, ../../../../general/res/sass/controls/_buttons.scss */
+  /* line 111, ../../../../general/res/sass/controls/_buttons.scss */
   .l-btn-set .s-btn, .l-btn-set .s-menu-btn {
     -moz-border-radius: 0;
     -webkit-border-radius: 0;
     border-radius: 0;
     margin-left: 1px; }
-  /* line 112, ../../../../general/res/sass/controls/_buttons.scss */
+  /* line 117, ../../../../general/res/sass/controls/_buttons.scss */
   .l-btn-set .first .s-btn, .l-btn-set .first .s-menu-btn {
     -moz-border-radius-topleft: 4px;
     -webkit-border-top-left-radius: 4px;
@@ -1513,7 +1524,7 @@ mct-container {
     -webkit-border-bottom-left-radius: 4px;
     border-bottom-left-radius: 4px;
     margin-left: 0; }
-  /* line 119, ../../../../general/res/sass/controls/_buttons.scss */
+  /* line 124, ../../../../general/res/sass/controls/_buttons.scss */
   .l-btn-set .last .s-btn, .l-btn-set .last .s-menu-btn {
     -moz-border-radius-topright: 4px;
     -webkit-border-top-right-radius: 4px;
@@ -1522,7 +1533,7 @@ mct-container {
     -webkit-border-bottom-right-radius: 4px;
     border-bottom-right-radius: 4px; }
 
-/* line 126, ../../../../general/res/sass/controls/_buttons.scss */
+/* line 131, ../../../../general/res/sass/controls/_buttons.scss */
 .paused:not(.s-btn):not(.s-menu-btn) {
   border-color: #ff9900 !important;
   color: #ff9900 !important; }
@@ -1723,7 +1734,7 @@ mct-container {
   box-sizing: border-box;
   border-left: 1px solid rgba(102, 102, 102, 0.2);
   display: inline-block;
-  padding: 0 5px;
+  padding: 0 0 0 5px;
   position: relative; }
   /* line 120, ../../../../general/res/sass/controls/_controls.scss */
   .l-control-group:first-child {
@@ -3596,6 +3607,9 @@ span.req {
     -moz-animation-timing-function: ease;
     -webkit-animation-timing-function: ease;
     animation-timing-function: ease;
+    -moz-animation-delay: 0.5s;
+    -webkit-animation-delay: 0.5s;
+    animation-delay: 0.5s;
     -moz-border-radius: 4px;
     -webkit-border-radius: 4px;
     border-radius: 4px;
@@ -3624,7 +3638,7 @@ span.req {
       bottom: 3px;
       left: 3px; }
 
-/* line 318, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 322, ../../../../general/res/sass/user-environ/_layout.scss */
 .l-object-wrapper-inner {
   display: -webkit-column nowrap;
   display: column nowrap;
@@ -3641,7 +3655,7 @@ span.req {
   -webkit-transition-timing-function: ease-in-out;
   transition-timing-function: ease-in-out; }
 
-/* line 324, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 328, ../../../../general/res/sass/user-environ/_layout.scss */
 .l-edit-controls {
   -moz-transition-property: height, width, top, right, bottom, left, opacity;
   -o-transition-property: height, width, top, right, bottom, left, opacity;
@@ -3658,14 +3672,14 @@ span.req {
   height: 0;
   opacity: 0;
   overflow: hidden; }
-  /* line 329, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 333, ../../../../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 337, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 341, ../../../../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,
@@ -3677,12 +3691,12 @@ span.req {
   line-height: 25px;
   vertical-align: top; }
 
-/* line 350, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 354, ../../../../general/res/sass/user-environ/_layout.scss */
 .object-browse-bar .view-switcher,
 .top-bar .view-switcher {
   margin-right: 20px; }
 
-/* line 355, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 359, ../../../../general/res/sass/user-environ/_layout.scss */
 .object-browse-bar {
   overflow: visible;
   position: absolute;
@@ -3698,49 +3712,54 @@ span.req {
   height: 24px;
   line-height: 24px;
   white-space: nowrap; }
-  /* line 363, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 367, ../../../../general/res/sass/user-environ/_layout.scss */
   .object-browse-bar .left {
     padding-right: 20px; }
-    /* line 365, ../../../../general/res/sass/user-environ/_layout.scss */
+    /* line 369, ../../../../general/res/sass/user-environ/_layout.scss */
     .object-browse-bar .left .l-back {
       display: inline-block;
       float: left;
       margin-right: 10px; }
 
-/* line 373, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 377, ../../../../general/res/sass/user-environ/_layout.scss */
 .l-flex {
   display: -webkit-flex;
   display: flex; }
-  /* line 375, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 379, ../../../../general/res/sass/user-environ/_layout.scss */
   .l-flex.flex-row {
     -webkit-flex-flow: row nowrap;
     flex-flow: row nowrap; }
-    /* line 377, ../../../../general/res/sass/user-environ/_layout.scss */
-    .l-flex.flex-row .flex-elem.active {
+    /* line 382, ../../../../general/res/sass/user-environ/_layout.scss */
+    .l-flex.flex-row .flex-elem {
+      white-space: nowrap;
       margin-right: 5px; }
-      /* line 379, ../../../../general/res/sass/user-environ/_layout.scss */
-      .l-flex.flex-row .flex-elem.active:last-child {
+      /* line 385, ../../../../general/res/sass/user-environ/_layout.scss */
+      .l-flex.flex-row .flex-elem:last-child {
         margin-right: 0; }
-  /* line 384, ../../../../general/res/sass/user-environ/_layout.scss */
+      /* line 388, ../../../../general/res/sass/user-environ/_layout.scss */
+      .l-flex.flex-row .flex-elem.flex-align-end {
+        -webkit-justify-content: flex-end;
+        justify-content: flex-end; }
+  /* line 393, ../../../../general/res/sass/user-environ/_layout.scss */
   .l-flex.flex-col {
     -webkit-flex-flow: column nowrap;
     flex-flow: column nowrap; }
-    /* line 386, ../../../../general/res/sass/user-environ/_layout.scss */
+    /* line 396, ../../../../general/res/sass/user-environ/_layout.scss */
     .l-flex.flex-col .flex-elem.active {
       margin-bottom: 10px; }
-      /* line 388, ../../../../general/res/sass/user-environ/_layout.scss */
+      /* line 398, ../../../../general/res/sass/user-environ/_layout.scss */
       .l-flex.flex-col .flex-elem.active:last-child {
         margin-bottom: 0; }
-  /* line 393, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 403, ../../../../general/res/sass/user-environ/_layout.scss */
   .l-flex .flex-elem {
-    -webkit-flex: 0 1;
-    flex: 0 1;
+    -webkit-flex: 0 1 auto;
+    flex: 0 1 auto;
     position: relative; }
-    /* line 397, ../../../../general/res/sass/user-environ/_layout.scss */
+    /* line 407, ../../../../general/res/sass/user-environ/_layout.scss */
     .l-flex .flex-elem.grow {
-      -webkit-flex: 1 1;
-      flex: 1 1; }
-  /* line 401, ../../../../general/res/sass/user-environ/_layout.scss */
+      -webkit-flex: 1 1 auto;
+      flex: 1 1 auto; }
+  /* line 411, ../../../../general/res/sass/user-environ/_layout.scss */
   .l-flex .left {
     -webkit-flex: 1 1 0;
     flex: 1 1 0;

From 074254a5130507b8e2564cd04ceabce911e85022 Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charlesh88@gmail.com>
Date: Wed, 21 Oct 2015 11:38:03 -0700
Subject: [PATCH 2/2] Frontend] Styling for New Edit Mode

open #198
Minor tweak to placeholder init content;
---
 platform/commonUI/browse/res/templates/browse-object.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/platform/commonUI/browse/res/templates/browse-object.html b/platform/commonUI/browse/res/templates/browse-object.html
index c5916e37f0..b0263b720c 100644
--- a/platform/commonUI/browse/res/templates/browse-object.html
+++ b/platform/commonUI/browse/res/templates/browse-object.html
@@ -21,7 +21,7 @@
 -->
 <div ng-init="
     editMode = false;
-    editBtns = [{ cssclass: 'save',title: 'Save Changes' },{ cssclass: 'cancel',title: 'Discard Changes' }];
+    editBtns = [{ cssclass: 'save',title: 'Save' },{ cssclass: 'cancel',title: 'Discard Changes' }];
 "></div>
 <a class="s-btn"
    style="opacity: 0.9; position:absolute; right: 250px; z-index: 100"