[Frontend] WIP styling of View Large elements

Fixes #1437
Markup and CSS for `view large` button in frame context;
Sass formatting cleanups; removed unused styles from
_layout.scss; mods to MCTTriggerModal.js to remove
button label functionality;
TODO: styling of object-header sizing; add 'Done' button
to overlay;

platform/commonUI/browse/res/templates/browse-object.html

@@ -20,7 +20,7 @@
  at runtime from the About dialog for additional information.
 -->
 <div ng-controller="BrowseObjectController" class="abs l-flex-col">
-    <div class="holder flex-elem l-flex-row object-browse-bar ">
+    <div class="holder flex-elem l-flex-row object-browse-bar">
         <div class="items-select left flex-elem l-flex-row grows">
             <mct-representation key="'back-arrow'"
                                 mct-object="domainObject"
@@ -31,6 +31,7 @@
             </mct-representation>
         </div>
         <div class="btn-bar right l-flex-row flex-elem flex-justify-end flex-fixed">
+            <span class="l-object-action-buttons">
                 <mct-representation key="'switcher'"
                                     mct-object="domainObject"
                                     ng-model="representation">
@@ -39,8 +40,9 @@
                 <mct-representation key="'action-group'"
                                     mct-object="domainObject"
                                     parameters="{ category: 'view-control' }"
-                                class="mobile-hide">
+                                    class="mobile-hide l-object-action-buttons">
                 </mct-representation>
+            </span>
         </div>
     </div>
     <div class="holder l-flex-col flex-elem grows l-object-wrapper l-controls-visible l-time-controller-visible">

platform/commonUI/browse/res/templates/browse/object-header.html

@@ -29,10 +29,7 @@
         mct-object='domainObject'
         class="flex-elem context-available-w"></mct-representation>
 </span>
-<span class="expand">
-    <a class="s-button"
+<a class="s-button icon-new-window t-btn-view-large"
+   title="View large"
    mct-trigger-modal>
-       View Large
-   </a>
-
-</span>
+</a>

platform/commonUI/general/res/sass/controls/_controls.scss

@@ -631,7 +631,8 @@ textarea {
     }
 }
 
-.view-switcher {
+.view-switcher,
+.t-btn-view-large {
     @include trans-prop-nice-fade($controlFadeMs);
 }
 

platform/commonUI/general/res/sass/overlay/_overlay.scss

@@ -132,6 +132,8 @@
     .select {
         box-shadow: $shdwBtnsOverlay;
     }
+
+    .t-btn-view-large { display: none; }
 }
 
 .t-dialog-sm .overlay > .holder {

platform/commonUI/general/res/sass/user-environ/_frame.scss

@@ -34,11 +34,9 @@
         font-size: 0.75em;
         height: $ohH;
         line-height: $ohH;
-        .left {
-            padding-right: $interiorMarginLg;
     }
-	}
-	>.object-holder.abs {
+
+    > .object-holder.abs {
         top: $ohH + $interiorMargin;
     }
     .contents {
@@ -69,20 +67,25 @@
         }
     }
     .view-switcher {
+        margin-left: $interiorMargin; // Kick other top bar elements away when I'm present.
         // Hide the name when the view switcher is in a frame context
         .title-label {
             display: none;
         }
     }
 }
- body.desktop .frame.frame-template {
-     // Hide the view switcher by default when it's in an element that's in a frame context
+
+body.desktop .frame.frame-template {
+    // Hide local controls initially and show it them on hover when they're in an element that's in a frame context
     // Frame template is used because we need to target the lowest nested frame
-     .view-switcher {
+    .view-switcher,
+    .t-btn-view-large {
         opacity: 0;
+        pointer-events: none;
     }
-     &:hover .view-switcher {
-         // Show the view switcher on frame hover
+    &:hover .view-switcher,
+    &:hover .t-btn-view-large {
         opacity: 1;
+        pointer-events: inherit;
     }
- }
+}

platform/commonUI/general/res/sass/user-environ/_layout.scss

@@ -136,14 +136,6 @@
     .mini-tab-icon.toggle-pane {
         z-index: 5;
     }
-    &.items {
-        .object-browse-bar {
-            .left.abs,
-            .right.abs {
-                top: auto;
-            }
-        }
-    }
 }
 
 body.desktop .pane .mini-tab-icon.toggle-pane {
@@ -250,10 +242,9 @@ body.desktop .pane .mini-tab-icon.toggle-pane {
     vertical-align: top;
 }
 
-.object-browse-bar,
-.top-bar {
-    .view-switcher {
-        margin-right: $interiorMarginLg * 2;
+.object-browse-bar {
+    .l-object-action-buttons {
+        margin-left: $interiorMarginLg; // Kick the view switcher and other elements away
     }
 }
 

platform/features/layout/src/MCTTriggerModal.js

@@ -53,14 +53,12 @@ define([
                 closeButton.addEventListener('click', toggleOverlay);
                 document.body.appendChild(span);
                 layoutContainer.removeChild(frame);
-                overlayContainer.appendChild(frame)
-                $element.text('Return to Layout');
+                overlayContainer.appendChild(frame);
             }
 
             function closeOverlay() {
                 overlayContainer.removeChild(frame);
                 layoutContainer.appendChild(frame);
-                $element.text('View Large');
                 document.body.removeChild(span);
                 closeButton.removeEventListener('click', toggleOverlay);
                 closeButton = undefined;