[Frontend] Min/max widths on panes adjusted

open #250
Fixed min and max widths for panes to prevent
weird pane expand/collapse behaviors, like
Inspector covering the main view area;
Added min-width to .holder-all element;

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

@@ -35,15 +35,13 @@ $ltGamma: 20%;
 $btnFontSizeToH: 0.45;
 
 /************************** LAYOUT */
-$ueTopBarH: 24px; // Change when breadcrumb is enabled
+$ueTopBarH: 24px;
 $ueTopBarEditH: 30px;
 $ueTopBarBtnH: 35px;
 $ueFooterH: 25px;
 $ueColMargin: 1.5%;
 $ueAppLogoW: 105px;
 $ueEditToolBarH: 25px;
-$ueBrowseLeftPaneTreeW: 25%;
-$ueBrowseRightPaneInspectW: 20%;
 $ueCollapsedPaneEdgeM: 22px;
 $uePaneMiniTabH: $ueTopBarH;
 $uePaneMiniTabW: 9px;
@@ -51,6 +49,15 @@ $uePaneMiniTabCollapsedW: 11px;
 $ueEditLeftPaneW: 75%;
 $treeSearchInputBarH: 25px;
 $ueTimeControlH: (33px, 20px, 20px);
+// Panes
+$ueBrowseLeftPaneTreeMinW: 150px;
+$ueBrowseLeftPaneTreeMaxW: 35%;
+$ueBrowseLeftPaneTreeW: 25%;
+$ueBrowseRightPaneInspectMinW: 200px;
+$ueBrowseRightPaneInspectMaxW: 35%;
+$ueBrowseRightPaneInspectW: 20%;
+$ueDesktopMinW: 600px;
+
 // Overlay
 $ovrTopBarH: 45px;
 $ovrFooterH: 24px;

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

@@ -46,31 +46,6 @@
     }
 }
 
-// .bar and following commented out as part of refactor to use flex layout for this stuff
-//.bar {
-/*    .icon.major {
-        margin-right: $interiorMargin;
-    }*/
-    //&.abs {
-        //text-wrap: none;
-        //white-space: nowrap;
-        //&.left,
-        //.left {
-        //    width: 45%;
-        //    right: auto;
-        //}
-        //&.right,
-        //.right {
-        //    width: 45%;
-        //    left: auto;
-        //    text-align: right;
-        //    .icon.major {
-        //        margin-left: $interiorMargin * 3;
-        //    }
-        //}
-    //}
-//}
-
 .user-environ {
     .browse-area,
     .editor {
@@ -139,14 +114,13 @@
     .split-pane-component.pane {
         //@include test(green);
         &.treeview.left {
-            min-width: 150px;
-            max-width: 800px;
+            min-width: $ueBrowseLeftPaneTreeMinW;
+            max-width: $ueBrowseLeftPaneTreeMaxW;
             width: $ueBrowseLeftPaneTreeW;
         }
         &.t-inspect.right {
-            min-width: 200px;
-            max-width: 600px;
-            //padding-left: $ueCollapsedPaneEdgeM; // Allow room for mini-tab element
+            min-width: $ueBrowseRightPaneInspectMinW;
+            max-width: $ueBrowseRightPaneInspectMaxW;
             width: $ueBrowseRightPaneInspectW;
             z-index: 3; // Must lift up beyond primary pane to allow overflow to go underneath
         }
@@ -180,30 +154,6 @@
         z-index: 2;
     }
 
-    //&.treeview.left {
-        // Converted to flex layout
-
-        //.create-btn-holder {
-        //    //bottom: auto;
-        //    //top: 0;
-        //    height: $ueTopBarH;
-        //    .wrapper.menu-element {
-        //        position: absolute;
-        //        bottom: $interiorMargin;
-        //    }
-        //}
-        //.holder-treeview-elements{
-        //
-        //}
-        //.search-holder {
-        //    top: $ueTopBarH + $interiorMarginLg;
-        //}
-        //.tree-holder {
-        //    overflow: auto;
-        //    top: $ueTopBarH + $interiorMarginLg + $treeSearchInputBarH + $interiorMargin;
-        //}
-    //}
-
     .mini-tab-icon.toggle-pane {
         //@include test(blue, 0.3);
         z-index: 5;
@@ -382,6 +332,9 @@
 }
 
 @include desktop {
+    .holder-all {
+        min-width: $ueDesktopMinW;
+    }
     .pane.treeview.left .tree-holder {
         padding-right: $interiorMargin;
     }