[Frontend] Apply flex layout to object header elements

open #250 open #260 vista#132 Major refactoring to markup and CSS to apply flex layout strategy to object headers; Flex necessary to fix 'overflow: hidden' setting applied in open90 to object-browse-bar that was preventing the view switcher menu from appearing; Browse, edit, mobile, frames in layouts, etc. all visually checked in a first go round; Mobile classes tweaked to fix left and right margin problems resulting from open90 changes; z-indexing of Inspector pane and splitters changed to allow primary pane elements to overflow beneath when primary pane width is severely constrained;
2015-11-06 17:42:54 -08:00
parent 76e15f2963
commit 4e79de6156
13 changed files with 612 additions and 7744 deletions
--- a/platform/commonUI/general/res/sass/_archetypes.scss
+++ b/platform/commonUI/general/res/sass/_archetypes.scss
@@ -104,6 +104,9 @@
        position: relative;
        &:not(.grows) {
            @include flex(0 0 auto);
+            &.flex-can-shrink {
+                @include flex(0 1 auto);
+            }
        }
        &.grows {
            @include flex(1 1 auto);
@@ -120,21 +123,28 @@

 .l-flex-row {
    @include flex-direction(row);
+    &.flex-elem { @include flex(1 1 auto); }
+    .flex-elem {
+        height: inherit;
+        line-height: inherit;
+        min-width: 0;
+    }
    .flex-container { @include flex-direction(row); }
 }

 .l-flex-col {
    @include flex-direction(column);
    .flex-elem {
+        min-height: 0;
        &:not(:first-child) { margin-top: $interiorMarginLg; }
    }
    .flex-container { @include flex-direction(column); }
 }

-.l-flex {
-    @extend .l-flex-row;
-    .left {
-        @include flex(1 1 0);
-        padding-right: $interiorMarginLg;
-    }
+.flex-fixed {
+    @include flex(0 0 auto);
+}
+
+.flex-justify-end {
+    @include justify-content(flex-end);
 }
--- a/platform/commonUI/general/res/sass/controls/_controls.scss
+++ b/platform/commonUI/general/res/sass/controls/_controls.scss
@@ -214,7 +214,7 @@ label.checkbox.custom {

    .l-elem-wrapper {
        //@include test(#66f, 0.2);
-        @include justify-content(flex-start);
+        //@include justify-content(flex-start); // Commented out 11/6/15 open250
        mct-representation {
            // Holds the context-available item
            // Must have min-width to make flex work properly
--- a/platform/commonUI/general/res/sass/helpers/_splitter.scss
+++ b/platform/commonUI/general/res/sass/helpers/_splitter.scss
@@ -29,7 +29,7 @@
    //@include test(red);
    display: block;
    position: absolute;
-    z-index: 1;
+    z-index: 3;
    &:after {
        // The handle
        content:"";
--- a/platform/commonUI/general/res/sass/mobile/_layout.scss
+++ b/platform/commonUI/general/res/sass/mobile/_layout.scss
@@ -36,8 +36,10 @@
        //@include test();
        @include slMenuTransitions;
        margin-left: 0 !important;
-        #content-area {
+        .holder-object-and-inspector {
            @include slMenuTransitions;
+            left: $bodyMargin;
+            right: $bodyMargin;
            opacity: 1;
        }
    }
@@ -46,7 +48,6 @@
        right: $bodyMargin !important;
    }

-
 // When the tree is hidden, these are the
    // classes used for the left menu and the
    // right representation.
@@ -148,7 +149,7 @@
        .pane.right.items {
            left: 0 !important;
            @include transform(translateX($proporMenuOnly));
-            #content-area {
+            .holder-object-and-inspector {
                opacity: 0;
            }
        }
--- a/platform/commonUI/general/res/sass/user-environ/_frame.scss
+++ b/platform/commonUI/general/res/sass/user-environ/_frame.scss
@@ -29,11 +29,14 @@
 			border-color: lighten($bc, 10%);
 		}
 	}
-	>.object-header.abs {
+	.object-top-bar {
 		//@include test(red);
 		font-size: 0.75em;
 		height: $ohH;
 		line-height: $ohH;
+        .left {
+            padding-right: $interiorMarginLg;
+        }
 	}
 	>.object-holder.abs {
 		top: $ohH + $interiorMargin;
--- a/platform/commonUI/general/res/sass/user-environ/_layout.scss
+++ b/platform/commonUI/general/res/sass/user-environ/_layout.scss
@@ -46,36 +46,30 @@
    }
 }

-.bar {
-    .icon.major {
+// .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;
-            }
-        }
-        .l-flex,
-        &.l-flex {
-            .left,
-            .right {
-                width: auto;
-            }
-        }
-    }
-}
+    }*/
+    //&.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,
@@ -141,21 +135,20 @@
 	}
 }

-.browse-mode {
-    .split-layout {
-        .split-pane-component.pane {
-            //@include test(green);
-            &.treeview.left {
-                min-width: 150px;
-                max-width: 800px;
-                width: $ueBrowseLeftPaneTreeW;
-            }
-            &.t-inspect.right {
-                min-width: 200px;
-                max-width: 600px;
-                //padding-left: $ueCollapsedPaneEdgeM; // Allow room for mini-tab element
-                width: $ueBrowseRightPaneInspectW;
-            }
+.split-layout {
+    .split-pane-component.pane {
+        //@include test(green);
+        &.treeview.left {
+            min-width: 150px;
+            max-width: 800px;
+            width: $ueBrowseLeftPaneTreeW;
+        }
+        &.t-inspect.right {
+            min-width: 200px;
+            max-width: 600px;
+            //padding-left: $ueCollapsedPaneEdgeM; // Allow room for mini-tab element
+            width: $ueBrowseRightPaneInspectW;
+            z-index: 3; // Must lift up beyond primary pane to allow overflow to go underneath
        }
    }
 }
@@ -187,7 +180,7 @@
        z-index: 2;
    }

-    &.treeview.left {
+    //&.treeview.left {
        // Converted to flex layout

        //.create-btn-holder {
@@ -209,7 +202,7 @@
        //    overflow: auto;
        //    top: $ueTopBarH + $interiorMarginLg + $treeSearchInputBarH + $interiorMargin;
        //}
-    }
+    //}

    .mini-tab-icon.toggle-pane {
        //@include test(blue, 0.3);
@@ -269,30 +262,6 @@
 }

 .split-layout {
-    &.horizontal {
-        // Slides up and down
-        > .pane {
-            //			@include test();
-            margin-top: $interiorMargin;
-            &:first-child {
-                margin-top: 0;
-            }
-        }
-    }
-   /* &.vertical {
-        // Slides left and right
-        > .pane.left {
-            > .holder {
-                left: $bodyMargin;
-            }
-        }
-        > .pane.right {
-            > .holder {
-                right: $bodyMargin;
-            }
-        }
-    }*/
-
    // Specific elements margins
    .holder.holder-treeview-elements {
        top: $bodyMargin;
@@ -315,7 +284,6 @@
            bottom: $bodyMargin;
            left: $bodyMargin;
            right: $bodyMargin;
-
        }
    }
 }
@@ -348,19 +316,18 @@
    }
 }

+/***************************************************** OBJECT BROWSE BAR */
 .object-browse-bar {
    //@include test(blue);
-    @include absPosDefault(0, hidden);
+    @include absPosDefault(0, visible); // Must use visible to avoid hiding view switcher menu
    @include box-sizing(border-box);
    height: $ueTopBarH;
    line-height: $ueTopBarH;
    white-space: nowrap;

    .left {
-        padding-right: $interiorMarginLg * 2;
+        padding-right: $interiorMarginLg;
        .l-back {
-            display: inline-block;
-            float: left;
            margin-right: $interiorMarginLg;
        }
    }
@@ -404,6 +371,9 @@
 }
 .pane-inspect-hidden {
    .l-object-and-inspector {
+        .t-inspect {
+            z-index: 1 !important; // Move down so that primary pane elements are clickable
+        }
        .l-inspect,
        .splitter-inspect {
            opacity: 0;
@@ -421,8 +391,10 @@
    .pane-inspect-hidden .l-object-and-inspector {
        .pane.left { right: $ueCollapsedPaneEdgeM !important; }
    }
-
    .pane:not(.resizing) {
        @include trans-prop-nice-resize-w(250ms);
    }
+    .pane.primary-pane .object-browse-bar {
+        min-width: 200px; // Needed for nice display when primary pane is constrained severely via splitters
+    }
 }