[Frontend] Expand/collapse styling

open #90
Significant styling on new mini-tabs;
Main layout margins adjusted;

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

@@ -54,13 +54,17 @@
             <mct-splitter class="splitter-treeview mobile-hide"></mct-splitter>
 
             <div class='split-pane-component items pane right'>
-                <a class="mini-tab anchor-left toggle-pane toggle-tree" ng-click="modelPaneTree.toggle()" ng-class="{ collapsed : !modelPaneTree.visible() }"></a>
+                <a class="mini-tab anchor-left toggle-pane toggle-tree"
+                   title="Click to {{ modelPaneTree.visible()? 'hide' : 'show' }} the tree pane"
+                   ng-click="modelPaneTree.toggle()"
+                   ng-class="{ collapsed : !modelPaneTree.visible() }"></a>
                 <div class='holder abs l-mobile' id='content-area'
                      ng-controller="PaneController as modelPaneInspect"
                      ng-class="modelPaneInspect.visible() ? 'pane-inspect-showing' : 'pane-inspect-hidden'">
                     <mct-split-pane class='l-object-and-inspector contents abs' anchor='right'>
                         <div class='split-pane-component t-object pane left'>
                             <a class="mini-tab anchor-right mobile-hide toggle-pane toggle-inspect"
+                               title="Click to {{ modelPaneInspect.visible()? 'hide' : 'show' }} the Inspection pane"
                                ng-click="modelPaneInspect.toggle()"
                                ng-class="{ collapsed : !modelPaneInspect.visible() }"></a>
                             <mct-representation mct-object="navigatedObject"

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

@@ -44,10 +44,12 @@ $ueAppLogoW: 105px;
 $ueEditToolBarH: 25px;
 $ueBrowseLeftPaneTreeW: 25%;
 $ueBrowseRightPaneInspectW: 20%;
+$ueCollapsedPaneEdgeM: 10px;
+$uePaneMiniTabH: $ueTopBarH;
+$uePaneMiniTabW: $ueCollapsedPaneEdgeM + $interiorMargin;
 $ueEditLeftPaneW: 75%;
 $treeSearchInputBarH: 25px;
 $ueTimeControlH: (33px, 20px, 20px);
-$ueCollapsedEdgeMargin: 15px;
 // Overlay
 $ovrTopBarH: 60px;
 $ovrFooterH: 30px;

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

@@ -103,92 +103,112 @@ $pad: $interiorMargin * $baseRatio;
 
 .mini-tab {
     // Meant to be used as pane hide/show control elements in concert with mct-splitter
-    @extend .ui-symbol;
+    //@extend .ui-symbol;
     @include desktop {
-        @include trans-prop-nice(left, 150ms);
         //@include test(green);
-        $iconD: 12px;
-        $arwD: 7px;
+        $iconH: $uePaneMiniTabH;
+        $iconW: $uePaneMiniTabW;
+        $iconInnerLR: 0;
+        $arwD: 9px;
         $arwOffsetX: 0px;
-        $arwAnimOffsetX: 2px;
-        $arwToLeftAnimX: -1 * $arwAnimOffsetX;
-        $arwToRightAnimX: $arwAnimOffsetX;
-        $arwToLeftX: ($arwOffsetX + $arwD) * -1;
-        $arwToRightX: $iconD + $arwOffsetX;
-        $c: pullForward($colorBodyBg, 15%);
-        color: $c;
+        $arwAnimOffsetX: 2px + $iconInnerLR;
+        $cBg: pullForward($colorBodyBg, 15%);
+        $cFg: $cBg;
+
+
+        @include border-radius($basicCr);
+        //@include boxShdw($shdwBtns);
+        @include box-sizing(border-box);
+        @include trans-prop-nice((color, background-color), 100ms);
+        color: $cFg;
         cursor: pointer;
+        font-family: symbolsfont;
+        font-size: $arwD;
         display: block;
         position: absolute;
-        font-size: $iconD;
-        line-height: $iconD;
-        height: $iconD; width: $iconD;
+        line-height: $iconH;
+        height: $iconH; width: $iconW;
 
         &:hover {
-            color: pullForward($c, 20%);
-            &:after {
-                color: $colorKey;
+            //background-color: $cBg;
+            color: $colorKey; //pullForward($cFg, $ltGamma);
+        }
+
+        &.collapsed {
+            // State when the pane this element controls has been collapsed
+            @include btnSubtle($colorBtnBg, $colorKey, $colorBtnFg, $colorBtnIcon);
+            &:before { opacity: 0; }
+            &:after { opacity: 1; }
+            &:hover {
+                &:before { opacity: 1; }
+                &:after { opacity: 0; }
             }
+
         }
 
         &:before,
         &:after {
-            @include trans-prop-nice(color, 200ms);
+            @include trans-prop-nice((left, right, opacity), 250ms);
             display: block;
+            height: 100%;
             position: absolute;
         }
 
         &:before {
             // Always the arrow icon
-            @include trans-prop-nice(left, 150ms);
             //@include test(green);
-            font-size: $arwD;
-            height: 100%; width: $arwD;
+            //font-size: $arwD;
+            width: $arwD;
         }
         &:after {
-            // Always vertical bar element
+            // Always icon; content is set in _layout.scss
             width: 100%;
-            height: 100%;
+            text-align: center;
+            opacity: 0;
         }
 
         &.anchor-left {
-            // < []
-            $xpos: $arwToLeftX;
+            // |<
+            text-align: right;
             &:before {
                 content:'\3c';
-                left: $xpos;
+                right: $iconInnerLR;
             }
-            &:hover:before { left: $xpos + $arwToLeftAnimX; }
+            //&:after {
+            //    right: auto; left: $iconInnerLR;
+            //}
+            &:hover:before { right: $arwAnimOffsetX; }
             &.collapsed {
-                $xpos: $arwToRightX;
+                @include border-left-radius(0);
+                text-align: left;
                 &:before {
                     content:'\3e';
-                    left: $xpos;
+                    left: $iconInnerLR;
                 }
-                &:hover:before { left: $xpos + $arwToRightAnimX; }
+                &:hover:before { left: $arwAnimOffsetX; }
             }
         }
         &.anchor-right {
-            // [] >
-            $xpos: $arwToRightX;
+            // >|
             &:before {
+                text-align: left;
                 content:'\3e';
-                left: $xpos;
+                left: $iconInnerLR;
             }
-            &:hover:before { left: $xpos + $arwToRightAnimX; }
+            //&:after {
+            //    right: $iconInnerLR; left: auto;
+            //}
+            &:hover:before { left: $arwAnimOffsetX; }
             &.collapsed {
-                $xpos: $arwToLeftX;
+                @include border-right-radius(0);
                 &:before {
+                    text-align: right;
                     content:'\3c';
-                    left: $xpos;
+                    right: $iconInnerLR;
                 }
-                &:hover:before { left: $xpos + $arwToLeftAnimX; }
+                &:hover:before { right: $arwAnimOffsetX; }
             }
         }
-
-        &.collapsed {
-            // State when the pane this element controls has been collapsed
-        }
     }
 }
 

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

@@ -212,9 +212,9 @@
                 width: $ueBrowseLeftPaneTreeW;
             }
             &.t-inspect.right {
-                min-width: 100px;
-                max-width: 800px;
-                padding-left: 15px; // Allow room for mini-tab element
+                min-width: 200px;
+                max-width: 600px;
+                padding-left: $ueCollapsedPaneEdgeM; // Allow room for mini-tab element
                 width: $ueBrowseRightPaneInspectW;
             }
         }
@@ -264,29 +264,26 @@
     }
 
     .mini-tab.toggle-pane {
-        $h: $ueTopBarH;
-        $paneOffset: $interiorMarginLg * -3;
+        $paneOffset: -1 * ($uePaneMiniTabW + $interiorMargin + $splitterW);
+        $paneCollapsedOffset: $bodyMargin + $ueCollapsedPaneEdgeM;
         z-index: 2;
         @include desktop {
-            top: 5px;
             &.toggle-tree.anchor-left {
                 //@include test(green);
-                left: $paneOffset;
-                &:after {
-                    content: 'F';
-                }
+                left: 0; //$ox;
+                @include transform(translateX($paneOffset));
+                &:after { content: 'F'; }
                 &.collapsed {
-                    left: (-1 * $bodyMargin) - $ueCollapsedEdgeMargin;
+                    @include transform(translateX(-1 * $paneCollapsedOffset));
                 }
             }
             &.toggle-inspect.anchor-right {
-                $xpos: $paneOffset + $interiorMargin;
-                right: $xpos;
-                &:after {
-                    content: '\e608';
-                }
+                $oCx: -1 * $paneCollapsedOffset;
+                right: 0; //$ox;
+                @include transform(translateX(-1 * $paneOffset));
+                &:after { content: '\e608'; }
                 &.collapsed {
-                    right: -1 * $interiorMargin  - $ueCollapsedEdgeMargin;
+                    @include transform(translateX($paneCollapsedOffset));
                 }
             }
         }
@@ -316,8 +313,7 @@
     &.vertical {
         // Slides left and right
         > .pane {
-            //            @include test();
-            margin-left: $interiorMargin;
+            //margin-left: $interiorMargin; // This spacing is now handled by MCTSplitPane.js
             > .holder {
                 left: 0;
                 right: 0;
@@ -402,7 +398,7 @@
     }
     // Sets the right representation when the tree is hidden.
     .pane.right.items {
-        left: $ueCollapsedEdgeMargin !important;
+        left: $ueCollapsedPaneEdgeM !important;
     }
 }
 
@@ -431,7 +427,7 @@
             opacity: 0;
         }
         .pane.left {
-            right: $ueCollapsedEdgeMargin !important;
+            right: $ueCollapsedPaneEdgeM !important;
         }
     }
 }