[Frontend] Significant mods to main layout strategy

open #90 IN-PROGRESS To support desired edge-to-edge styling of Inspector pane; Removed superflous .scss file; Enhancements to splitter .scss to allow flush edging and edge shadows;
2015-10-29 17:31:35 -07:00
parent ddebbf119f
commit 1dbd721b14
11 changed files with 583 additions and 526 deletions
--- a/platform/commonUI/general/res/sass/_hide-non-functional.scss
+++ b/platform/commonUI/general/res/sass/_hide-non-functional.scss
@@ -1,36 +0,0 @@
-/*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2015, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT Web is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT Web includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-// Styles to temporarily hide non-functional elements
-
-/******************************** BROWSE */
-.browse-mode {
-	.browse {
-		&.top-bar {
-			display: none;
-		}
-	}
-
-	.browse-area.holder {
-		// When .browse.top-bar is hidden, set the top of the browse-area holder
-		top: $bodyMargin;
-	}
-}
--- a/platform/commonUI/general/res/sass/_inspector.scss
+++ b/platform/commonUI/general/res/sass/_inspector.scss
@@ -27,6 +27,8 @@
 }

 .l-inspect {
+    background: pullForward($colorBodyBg, 3%);
+    @extend .abs;
    color: $colorInspectorFg;
    .pane-header {
        color: pushBack($colorInspectorFg, 20%);
--- a/platform/commonUI/general/res/sass/_main.scss
+++ b/platform/commonUI/general/res/sass/_main.scss
@@ -70,7 +70,6 @@
@import "lists/tabular";
@import "plots/plots-main";
@import "iframe";
-@import "hide-non-functional";
@import "views";
@import "items/item";
@import "mobile/item";
--- a/platform/commonUI/general/res/sass/controls/_buttons.scss
+++ b/platform/commonUI/general/res/sass/controls/_buttons.scss
@@ -173,7 +173,7 @@ $pad: $interiorMargin * $baseRatio;
            // |<
            text-align: right;
            &:before {
-                content:'\e613'; // Collapse left icon
+                content:'\3c'; // Collapse left icon e613
                right: $iconInnerLR;
            }
            //&:hover:before { right: $arwAnimOffsetX; }
@@ -191,7 +191,7 @@ $pad: $interiorMargin * $baseRatio;
            // >|
            text-align: left;
            &:before {
-                content:'\e614'; // Collapse right icon
+                content:'\3e'; // Collapse right icon e614
                left: $iconInnerLR;
            }
            //&:hover:before { left: $arwAnimOffsetX; }
--- a/platform/commonUI/general/res/sass/helpers/_splitter.scss
+++ b/platform/commonUI/general/res/sass/helpers/_splitter.scss
@@ -49,7 +49,7 @@
    }
    &:active {
        &:after {
-            background-color: $colorSplitterActive;
+            background-color: $colorSplitterActive !important;
        }
    }

@@ -102,18 +102,30 @@
            cursor: col-resize;
            top: 0;
            bottom: 0;
-            width: $splitterD;
-            &:after {
-                left: $inset; right: $inset;
+            &:not(.flush-right) {
+                width: $splitterD;
+                &:after {
+                    left: $inset; right: $inset;
+                }
+            }
+            &.flush-right {
+                width: ceil($splitterD / 2);
+                &:after {
+                    background-color: transparent;
+                    left: auto; right: 0; width: $splitterHandleD;
+                }
+                &.edge-shdw {
+                    @include background-image(linear-gradient(90deg, rgba(black, 0) 40%, rgba(black, 0.05) 100%));
+                }
            }
        }
    }
 }

-.browse-area .splitter {
+/*.browse-area .splitter {
 	top: 0; //$ueTopBarH + $interiorMarginLg;
 }

 .edit-area .splitter {
 	top: 0;
-}
+}*/
--- a/platform/commonUI/general/res/sass/mobile/_layout.scss
+++ b/platform/commonUI/general/res/sass/mobile/_layout.scss
@@ -42,18 +42,19 @@
        }
    }

-    .user-environ .browse-area,
+/*    .user-environ .browse-area,
    .user-environ .edit-area,
    .user-environ .editor {
        top: 0; left: 0; right: 0; bottom: $ueFooterH;
    }

-    .holder.l-mobile {
+    .holder.holder-object-and-inspector,
+    .holder.holder-create-and-search {
        top: $bodyMargin !important;
        right: $bodyMargin !important;
        bottom: $bodyMargin !important;
        left: $bodyMargin !important;
-    }
+    }*/


 // When the tree is hidden, these are the
--- a/platform/commonUI/general/res/sass/user-environ/_layout.scss
+++ b/platform/commonUI/general/res/sass/user-environ/_layout.scss
@@ -29,13 +29,13 @@
    }
 }

-.holder-all {
+/*.holder-all {
    $myM: 0; // $interiorMarginSm;
    top: $myM;
    right: $myM;
    bottom: $myM;
    left: $myM;
-}
+}*/

 .browse-area,
 .edit-area,
@@ -95,13 +95,11 @@
 }

 .user-environ {
+
    .browse-area,
    .edit-area,
    .editor {
-        top: $bodyMargin + $ueTopBarH + ($interiorMargin);
-        right: $bodyMargin;
-        bottom: $ueFooterH + $bodyMargin;
-        left: $bodyMargin;
+        top: 0; left: 0; right: 0; bottom: $ueFooterH;
    }

    .browse-area,
@@ -260,7 +258,7 @@
        //        bottom: $interiorMargin;
        //    }
        //}
-        .create-and-search-holder {
+        .holder-create-and-search{

        }
        .search-holder {
@@ -275,25 +273,25 @@
    .mini-tab.toggle-pane {
        //@include test(blue, 0.3);
        $paneExpandedOffset: $splitterD + $uePaneMiniTabW - splitterHandleInset($splitterD, $splitterHandleD);
-        $paneCollapsedOffset: $bodyMargin + $ueCollapsedPaneEdgeM;
        z-index: 5;
        @include desktop {
+            top: $interiorMarginLg;
            &.toggle-tree.anchor-left {
                //@include test(green);
                left: 0; //$ox;
                @include transform(translateX(-1 * $paneExpandedOffset));
                &:after { content: 'F'; } // Folder icon
                &.collapsed {
-                    @include transform(translateX(-1 * $paneCollapsedOffset));
+                    @include transform(translateX(-1 * $ueCollapsedPaneEdgeM));
                }
            }
            &.toggle-inspect.anchor-right {
-                $oCx: -1 * $paneCollapsedOffset;
+                $oCx: -1 * $ueCollapsedPaneEdgeM;
                right: 0; //$ox;
                @include transform(translateX($paneExpandedOffset));
                &:after { content: '\e608'; } // Info "i" icon
                &.collapsed {
-                    @include transform(translateX($paneCollapsedOffset));
+                    @include transform(translateX($ueCollapsedPaneEdgeM));
                }
            }
            &.toggle-search.anchor-left {
@@ -325,18 +323,44 @@
            }
        }
    }
-    &.vertical {
+   /* &.vertical {
        // Slides left and right
-        > .pane {
-            //margin-left: $interiorMargin; // This spacing is now handled by MCTSplitPane.js
+        > .pane.left {
            > .holder {
-                left: 0;
-                right: 0;
+                left: $bodyMargin;
            }
-            &:first-child {
-                margin-left: 0;
+        }
+        > .pane.right {
+            > .holder {
+                right: $bodyMargin;
            }
        }
+    }*/
+
+    // Specific elements margins
+    .holder.holder-create-and-search {
+        top: $bodyMargin;
+        right: 0;
+        bottom: $bodyMargin;
+        left: $bodyMargin;
+    }
+
+    .holder.holder-object-and-inspector {
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        .holder-object {
+            top: $bodyMargin;
+            bottom: $bodyMargin;
+        }
+        .holder-inspector-elements {
+            top: $bodyMargin;
+            bottom: $bodyMargin;
+            left: $bodyMargin + $interiorMarginLg;
+            right: $bodyMargin;
+
+        }
    }
 }

@@ -410,9 +434,9 @@
    .search-holder .search {
        opacity: 0;
    }
-    .create-and-search-holder {
+    .holder-create-and-search{
        @include trans-prop-nice((top, left), 250ms);
-        top: $ueTopBarH + $interiorMargin !important;
+        top: $ueTopBarH + $interiorMargin;
        left: -1 * $bodyMargin !important;
        .create-btn {
            @include border-left-radius(0);
@@ -443,7 +467,7 @@
    .splitter-treeview {
        top: $interiorMarginLg + $ueTopBarH !important;
    }
-    .create-and-search-holder {
+    .holder-create-and-search{
        @include trans-prop-nice(top, $dur: 250ms, $delay: 200ms);
    }
 }
--- a/platform/commonUI/general/res/templates/object-inspector.html
+++ b/platform/commonUI/general/res/templates/object-inspector.html
@@ -20,6 +20,7 @@
 at runtime from the About dialog for additional information.
 -->
 <span class="l-inspect" ng-controller="ObjectInspectorController as controller">
+    <div class="abs holder holder-inspector-elements">
    <div class="pane-header">Inspection</div>
    <ul>
        <li>
@@ -58,4 +59,5 @@
            </span>
        </li>
    </ul>
+    </div>
 </span>