Merge remote-tracking branch 'github-open/open244' into open-master

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

@@ -0,0 +1,119 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+
+/********************************************* COLUMN LAYOUTS STYLES */
+@mixin cols($totalCols, $span) {
+    $cw: 100% / $totalCols;
+    min-width: (500px / $totalCols) * $span;
+    @if ($totalCols != $span) {
+        width: ($cw * $span) - $ueColMargin;
+    } @else {
+        width: $cw;
+    }
+}
+
+.cols {
+    @include clearfix;
+    .col {
+        @include box-sizing(border-box);
+        @include clearfix;
+        //		background: rgba(#ffcc00, 0.2);
+        float: left;
+        margin-left: $ueColMargin;
+        padding-left: $interiorMargin;
+        position: relative;
+        &:first-child {
+            margin-left: 0;
+            padding-left: 0;
+        }
+    }
+    &.cols-2 {
+        $nc: 2;
+        .col-1 {
+            @include cols($nc, 1);
+        }
+    }
+    &.cols-2-ff {
+        // 2 columns, first column is fixed, second is fluid
+        .col-100px {
+            width: 100px;
+        }
+    }
+
+    &.cols-6 {
+        $nc: 6;
+        .col-1 {
+            @include cols($nc, 1);
+        }
+    }
+    &.cols-16 {
+        $nc: 16;
+        .col-1 {
+            @include cols($nc, 1);
+        }
+        .col-2 {
+            @include cols($nc, 2);
+        }
+        .col-7 {
+            @include cols($nc, 7);
+        }
+    }
+    &.cols-32 {
+        $nc: 32;
+        .col-2 {
+            @include cols($nc, 2);
+        }
+        .col-15 {
+            @include cols($nc, 15);
+        }
+    }
+    .l-row {
+        @include clearfix;
+        padding: $interiorMargin 0;
+    }
+}
+
+/********************************************* FLEX STYLES */
+.l-flex-row,
+.l-flex-col {
+    @include display-flex;
+    @include flex-wrap(nowrap);
+    .flex-elem {
+        &:not(.grows) {
+            @include flex(0 1 auto);
+        }
+        &.grows {
+            @include flex(1 1 auto);
+        }
+    }
+}
+
+.l-flex-row { @include flex-direction(row); }
+.l-flex-col { @include flex-direction(column); }
+
+.l-flex {
+    @extend .l-flex-row;
+    .left {
+        @include flex(1 1 0);
+        padding-right: $interiorMarginLg;
+    }
+}

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

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

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

@@ -43,6 +43,11 @@
             vertical-align: bottom;
         }
     }
+    
+    ul {
+        @include box-sizing(border-box);
+        padding-right: $interiorMargin;
+    }
 
     ul li,
     em {

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

@@ -21,6 +21,7 @@
  *****************************************************************************/
 @import "effects";
 @import "global";
+@import "archetypes";
 @import "about";
 @import "text";
 @import "icons";

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

@@ -225,6 +225,11 @@ $pad: $interiorMargin * $baseRatio;
         overflow: hidden;
         word-break: break-all;
 
+        &.collapsed {
+            $d: $uePaneMiniTabCollapsedW;
+            width: $d; font-size: $d;
+        }
+
         &:before,
         &:after {
             position: absolute;

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

@@ -19,23 +19,6 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-@mixin cols($totalCols, $span) {
-    $cw: 100% / $totalCols;
-    min-width: (500px / $totalCols) * $span;
-    @if ($totalCols != $span) {
-        width: ($cw * $span) - $ueColMargin;
-    } @else {
-        width: $cw;
-    }
-}
-
-/*.holder-all {
-    $myM: 0; // $interiorMarginSm;
-    top: $myM;
-    right: $myM;
-    bottom: $myM;
-    left: $myM;
-}*/
 
 .browse-area,
 .edit-area,
@@ -158,67 +141,6 @@
 	}
 }
 
-.cols {
-    @include clearfix;
-    .col {
-        @include box-sizing(border-box);
-        @include clearfix;
-        //		background: rgba(#ffcc00, 0.2);
-        float: left;
-        margin-left: $ueColMargin;
-        padding-left: $interiorMargin;
-        position: relative;
-        &:first-child {
-            margin-left: 0;
-            padding-left: 0;
-        }
-    }
-    &.cols-2 {
-        $nc: 2;
-        .col-1 {
-            @include cols($nc, 1);
-        }
-    }
-    &.cols-2-ff {
-        // 2 columns, first column is fixed, second is fluid
-        .col-100px {
-            width: 100px;
-        }
-    }
-
-    &.cols-6 {
-        $nc: 6;
-        .col-1 {
-            @include cols($nc, 1);
-        }
-    }
-    &.cols-16 {
-        $nc: 16;
-        .col-1 {
-            @include cols($nc, 1);
-        }
-        .col-2 {
-            @include cols($nc, 2);
-        }
-        .col-7 {
-            @include cols($nc, 7);
-        }
-    }
-    &.cols-32 {
-        $nc: 32;
-        .col-2 {
-            @include cols($nc, 2);
-        }
-        .col-15 {
-            @include cols($nc, 15);
-        }
-    }
-    .l-row {
-        @include clearfix;
-        padding: $interiorMargin 0;
-    }
-}
-
 .browse-mode {
     .split-layout {
         .split-pane-component.pane {
@@ -427,7 +349,7 @@
 
 .object-browse-bar {
     //@include test(blue);
-    @include absPosDefault(0, visible);
+    @include absPosDefault(0, hidden);
     @include box-sizing(border-box);
     height: $ueTopBarH;
     line-height: $ueTopBarH;
@@ -443,16 +365,6 @@
     }
 }
 
-.l-flex {
-    @include webkitVal('display', 'flex');
-    @include webkitProp('flex-flow', 'row nowrap');
-    .left {
-        //@include test(red);
-        @include webkitProp(flex, '1 1 0');
-        padding-right: $interiorMarginLg;
-    }
-}
-
 // When the tree is hidden, these are the
 // classes used for the left menu and the
 // right representation.
@@ -464,25 +376,6 @@
     .holder-create-and-search {
         opacity: 0;
     }
-    /*.holder-create-and-search {
-        @include trans-prop-nice((top, left), 250ms);
-        top: $ueTopBarH + $interiorMargin;
-        left: -1 * $bodyMargin !important;
-        .create-btn {
-            @include border-left-radius(0);
-            @include trans-prop-nice((width), 250ms);
-            width: $uePaneMiniTabW !important;
-            text-align: center !important;
-            padding: 0;
-            .title-label,
-            &:after {
-                display: none;
-            }
-            &:before {
-                font-size: 9px;
-            }
-        }
-    }*/
 }
 
 .pane-tree-showing {

platform/commonUI/general/res/templates/object-inspector.html

@@ -20,9 +20,9 @@
  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="abs holder holder-inspector-elements l-flex-col">
-    <div class="pane-header">Inspection</div>
+    <div class="pane-header flex-elem">Inspection</div>
-    <ul>
+    <ul class="flex-elem grows vscroll">
         <li>
             <em>Properties</em>
             <div class="inspector-properties"