[Frontend] Manual re-do of collapse/expand panes

open #90
Refined positioning of .mini-tab elements when
panes are collapsed;

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

@@ -109,6 +109,12 @@ $pad: $interiorMargin * $baseRatio;
         //@include test(green);
         $iconD: 12px;
         $arwD: 7px;
+        $arwOffsetX: 1px;
+        $arwAnimOffsetX: 3px;
+        $arwToLeftAnimX: -1 * $arwAnimOffsetX;
+        $arwToRightAnimX: $arwAnimOffsetX;
+        $arwToLeftX: ($arwOffsetX + $arwD) * -1;
+        $arwToRightX: $iconD + $arwOffsetX;
         $c: pullForward($colorBodyBg, 15%);
         color: $c;
         cursor: pointer;
@@ -148,21 +154,41 @@ $pad: $interiorMargin * $baseRatio;
 
         &.anchor-left {
             // < []
-            $xpos: (1px + $arwD) * -1;
+            $xpos: $arwToLeftX;
             &:before {
                 content:'\3c';
                 left: $xpos;
             }
-            &:hover:before { left: $xpos - 3; }
+            &:hover:before { left: $xpos + $arwToLeftAnimX; }
+            &.collapsed {
+                $xpos: $arwToRightX;
+                &:before {
+                    content:'\3e';
+                    left: $xpos;
+                }
+                &:hover:before { left: $xpos + $arwToRightAnimX; }
+            }
         }
         &.anchor-right {
             // [] >
-            $xpos: $iconD + 2px;
+            $xpos: $arwToRightX;
             &:before {
                 content:'\3e';
                 left: $xpos;
             }
-            &:hover:before { left: $xpos + 3; }
+            &:hover:before { left: $xpos + $arwToRightAnimX; }
+            &.collapsed {
+                $xpos: $arwToLeftX;
+                &:before {
+                    content:'\3c';
+                    left: $xpos;
+                }
+                &:hover:before { left: $xpos + $arwToLeftAnimX; }
+            }
+        }
+
+        &.collapsed {
+            // State when the pane this element controls has been collapsed
         }
     }
 }

platform/commonUI/general/res/sass/mobile/_layout.scss

@@ -59,7 +59,7 @@
 // When the tree is hidden, these are the
     // classes used for the left menu and the
     // right representation.
-    .browse-hidetree {
+    .pane-tree-hidden {
         // Sets the left tree menu when the tree
         // is hidden.
         .pane.left.treeview {
@@ -70,7 +70,7 @@
         }
     }
     
-    .browse-showtree {
+    .pane-tree-showing {
         // NOTE: DISABLED SELECTION
         // Selection disabled in both panes
         // causing cut/copy/paste menu to
@@ -143,7 +143,7 @@
 }
 
 @include phonePortrait {
-    .browse-showtree {
+    .pane-tree-showing {
         .pane.left.treeview {
             width: $proporMenuOnly !important;
         }

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

@@ -265,6 +265,9 @@
                 &:after {
                     content: 'F';
                 }
+                &.collapsed {
+                    left: -1 * $bodyMargin;
+                }
             }
             &.toggle-inspect.anchor-right {
                 $xpos: $paneOffset + $interiorMargin;
@@ -272,6 +275,9 @@
                 &:after {
                     content: '\e608';
                 }
+                &.collapsed {
+                    right: -1 * $interiorMargin;
+                }
             }
         }
     }
@@ -379,7 +385,7 @@
 // When the tree is hidden, these are the
 // classes used for the left menu and the
 // right representation.
-.browse-hidetree {
+.pane-tree-hidden {
     @include user-select(none);
     // Sets the left tree menu when the tree is hidden.
     .pane.left.treeview {
@@ -391,7 +397,7 @@
     }
 }
 
-.browse-showtree {
+.pane-tree-showing {
     // Sets the left tree menu when the tree is shown.
     .pane.left.treeview {
         @include trans-prop-nice(opacity, .4s);