[Frontend] Significant change to look and behavior of mini-tabs

open #90
IN-PROGRESS
mini-tab location in markup in browse.html changed;
Single menu icon for collapsed treeview;
Close 'x' boxes instead of arrow icons;
TO-DO: verify mobile is Ok;

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

@@ -44,9 +44,9 @@ $ueAppLogoW: 105px;
 $ueEditToolBarH: 25px;
 $ueBrowseLeftPaneTreeW: 25%;
 $ueBrowseRightPaneInspectW: 20%;
-$ueCollapsedPaneEdgeM: 15px;
+$ueCollapsedPaneEdgeM: 20px;
 $uePaneMiniTabH: $ueTopBarH;
-$uePaneMiniTabW: 15px;
+$uePaneMiniTabW: 9px;
 $ueEditLeftPaneW: 75%;
 $treeSearchInputBarH: 25px;
 $ueTimeControlH: (33px, 20px, 20px);

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

@@ -208,6 +208,38 @@ $pad: $interiorMargin * $baseRatio;
     }
 }
 
+.mini-tab-icon {
+    // Meant to be used as pane hide/show control elements in concert with mct-splitter
+    //@extend .ui-symbol;
+    @include desktop {
+        $d: $uePaneMiniTabW;
+        //@include trans-prop-nice(transform, 150ms);
+        color: pullForward($colorBodyBg, 15%);
+        cursor: pointer;
+        display: block;
+        font-family: symbolsfont;
+        font-size: $d;
+        position: absolute;
+        height: $d; width: $d;
+        line-height: $d;
+
+        &:before,
+        &:after {
+            position: absolute;
+            display: inherit;
+        }
+
+        &:before {
+            content: '\78'; // X icon
+        }
+
+        &:hover {
+            color: $colorKey;
+            @include transform(scale(1.2));
+        }
+    }
+}
+
 .l-btn-set {
     // Buttons that have a very tight conceptual grouping - no internal space between them.
     // Structure: .btn-set > mct-representation class=first|last > .s-btn

platform/commonUI/general/res/sass/helpers/_splitter.scss

@@ -44,7 +44,7 @@
     }
     &:not(:active) {
         &:after {
-            @include trans-prop-nice(background-color, 250ms);
+            @include trans-prop-nice(background-color, 150ms);
         }
     }
     &:active {
@@ -55,7 +55,10 @@
 
     @if $colorSplitterHover != 'none' {
         &:hover {
-            background: $colorSplitterHover;
+            &:after {
+                @include trans-prop-nice(background-color, 150ms);
+                background-color: $colorSplitterHover;
+            }
         }
     }
 }

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

@@ -270,35 +270,55 @@
         }
     }
 
-    .mini-tab.toggle-pane {
+    .mini-tab-icon.toggle-pane {
         //@include test(blue, 0.3);
-        $paneExpandedOffset: $splitterD + $uePaneMiniTabW - splitterHandleInset($splitterD, $splitterHandleD);
         z-index: 5;
         @include desktop {
-            top: $interiorMarginLg;
+            $d: $uePaneMiniTabH;
+            $paneExpandedOffset: $splitterD + $uePaneMiniTabW;
+            top: $bodyMargin;
+            height: $d;
+            line-height: $d;
+            &:after {
+                // Always the icon that shows when the pane is collapsed
+                opacity: 0;
+            }
+            &.collapsed {
+                &:before {
+                    opacity: 0;
+                }
+                &:after {
+                    opacity: 1;
+                }
+            }
             &.toggle-tree.anchor-left {
-                //@include test(green);
-                left: 0; //$ox;
+                left: 0;
                 @include transform(translateX(-1 * $paneExpandedOffset));
-                &:after { content: 'F'; } // Folder icon
+                &:after {
+                    content: '\6d'; // Menu 'hamburger' icon
+                }
                 &.collapsed {
-                    @include transform(translateX(-1 * $ueCollapsedPaneEdgeM));
+                    left: 0;
+                    @include transform(translateX((-1 * $ueCollapsedPaneEdgeM) + $interiorMargin));
+                }
+                &:not(.collapsed):before {
+                    @include trans-prop-nice(opacity, 200ms, 200ms);
                 }
             }
             &.toggle-inspect.anchor-right {
-                $oCx: -1 * $ueCollapsedPaneEdgeM;
-                right: 0; //$ox;
-                @include transform(translateX($paneExpandedOffset));
-                &:after { content: '\e608'; } // Info "i" icon
+                right: $bodyMargin;
+                &:after {
+                    content: '\e608';  // Info "i" icon
+                }
                 &.collapsed {
-                    @include transform(translateX($ueCollapsedPaneEdgeM));
+                    right: $interiorMargin;
                 }
             }
-            &.toggle-search.anchor-left {
-                &:after {
+/*            &.toggle-search.anchor-left {
+                &:before {
                     content:"M"
                 }
-            }
+            }*/
         }
     }
 
@@ -357,7 +377,7 @@
         .holder-inspector-elements {
             top: $bodyMargin;
             bottom: $bodyMargin;
-            left: $bodyMargin + $interiorMarginLg;
+            left: $bodyMargin;
             right: $bodyMargin;
 
         }
@@ -431,10 +451,10 @@
     //.pane.left.treeview,
     .tree-holder,
     .splitter-treeview,
-    .search-holder .search {
+    .holder-create-and-search {
         opacity: 0;
     }
-    .holder-create-and-search{
+    /*.holder-create-and-search {
         @include trans-prop-nice((top, left), 250ms);
         top: $ueTopBarH + $interiorMargin;
         left: -1 * $bodyMargin !important;
@@ -452,29 +472,26 @@
                 font-size: 9px;
             }
         }
-    }
+    }*/
 }
 
 .pane-tree-showing {
     // Sets the left tree menu when the tree is shown.
     //.pane.left.treeview,
     .tree-holder,
-    .splitter-treeview,
-    .search-holder .search {
+    .splitter-treeview {
         @include trans-prop-nice(opacity, $dur: 250ms, $delay: 250ms);
         opacity: 1;
     }
-    .splitter-treeview {
-        top: $interiorMarginLg + $ueTopBarH !important;
-    }
-    .holder-create-and-search{
-        @include trans-prop-nice(top, $dur: 250ms, $delay: 200ms);
+
+    .holder-create-and-search {
+        @include trans-prop-nice(opacity, $dur: 250ms, $delay: 200ms);
     }
 }
 
 .pane-inspect-showing {
     .l-object-and-inspector {
-        .pane.right,
+        .l-inspect,
         .splitter-inspect {
             @include trans-prop-nice(opacity, $dur: 250ms, $delay: 250ms);
             opacity: 1;
@@ -483,7 +500,7 @@
 }
 .pane-inspect-hidden {
     .l-object-and-inspector {
-        .pane.right,
+        .l-inspect,
         .splitter-inspect {
             opacity: 0;
         }