[Frontend] Merge work in open279 into open199

open #199
open #279
Integrated inspector changes from open279 into
new edit mode work from open199; _layout.scss
had a bit of difficult conflict resolution but seems
good at this point...

bundles.json

@@ -16,6 +16,7 @@
     "platform/execution",
     "platform/telemetry",
     "platform/features/clock",
+    "platform/features/conductor",
     "platform/features/imagery",
     "platform/features/layout",
     "platform/features/pages",

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

@@ -43,6 +43,16 @@
             vertical-align: bottom;
         }
     }
+
+    .split-layout {
+        .split-pane-component.pane {
+            &.bottom {
+                height: 30%;
+                min-height: 20%;
+                max-height: 80%;
+            }
+        }
+    }
     
     ul {
         @include box-sizing(border-box);
@@ -109,4 +119,10 @@
             width: 4px;
         }
     }
-}
+    .holder-elements {
+        .current-elements {
+            position: relative;
+        }
+    }
+}
+

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

@@ -67,7 +67,6 @@
         right: $bodyMargin;
         bottom: $bodyMargin + $ueFooterH;
         .tool-bar {
-            border-bottom: 1px solid $colorInteriorBorder;
             bottom: auto;
             height: $tbH;
             line-height: $btnToolbarH;
@@ -193,7 +192,7 @@
 
 .split-layout {
     // Specific elements margins
-    .holder.holder-treeview-elements {
+    .holder.holder-create-and-search {
         top: $bodyMargin;
         right: 0;
         bottom: $bodyMargin;
@@ -209,12 +208,18 @@
             top: $bodyMargin;
             bottom: $bodyMargin;
         }
-        .holder-inspector-elements {
+        .holder-inspector {
             top: $bodyMargin;
             bottom: $bodyMargin;
             left: $bodyMargin;
             right: $bodyMargin;
         }
+        .holder-elements {
+            top: 0;
+            bottom: $bodyMargin;
+            left: $bodyMargin;
+            right: $bodyMargin;
+        }
     }
 }
 
@@ -281,7 +286,6 @@
 /***************************************************** OBJECT BROWSE BAR */
 .object-browse-bar {
     // Converting to use flexbox layout
-    //@include absPosDefault(0, visible); // Must use visible to avoid hiding view switcher menu
     @include box-sizing(border-box);
     height: $ueTopBarH;
     line-height: $ueTopBarH;
@@ -302,7 +306,7 @@
     // Sets the left tree menu when the tree is hidden.
     .tree-holder,
     .splitter-treeview,
-    .holder-treeview-elements {
+    .holder-create-and-search {
         opacity: 0;
     }
 }
@@ -315,7 +319,7 @@
         opacity: 1;
     }
 
-    .holder-treeview-elements {
+    .holder-create-and-search {
         @include trans-prop-nice(opacity, $dur: 250ms, $delay: 200ms);
     }
 }
@@ -332,9 +336,6 @@
 
 .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;

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

@@ -19,45 +19,64 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
+<div ng-init="editMode = true;"></div>
 <span class="l-inspect" ng-controller="ObjectInspectorController as controller">
-    <div class="abs holder holder-inspector-elements l-flex-col">
+    <div ng-controller="PaneController as modelPaneEdit">
-    <div class="pane-header flex-elem">Inspection</div>
+        <mct-split-pane class='abs contents split-layout' anchor='bottom'>
-    <ul class="flex-elem grows vscroll">
+            <div class="split-pane-component pane top">
-        <li>
+                <div class="abs holder holder-inspector l-flex-col">
-            <em>Properties</em>
+                    <div class="pane-header flex-elem">Inspection</div>
-            <div class="inspector-properties"
+                    <ul class="flex-elem grows vscroll">
-                 ng-repeat="data in metadata"
+                        <li>
-                 ng-class="{ first:$index === 0 }">
+                            <em>Properties</em>
-                <div class="label">{{ data.name }}</div>
+                            <div class="inspector-properties"
-                <div class="value">{{ data.value }}</div>
+                                 ng-repeat="data in metadata"
+                                 ng-class="{ first:$index === 0 }">
+                                <div class="label">{{ data.name }}</div>
+                                <div class="value">{{ data.value }}</div>
+                            </div>
+                        </li>
+                        <li ng-if="contextutalParents.length > 0">
+                            <em title="The location of this linked object.">Location</em>
+                            <span class="inspector-location"
+                                  ng-repeat="parent in contextutalParents"
+                                  ng-class="{ last:($index + 1) === contextualParents.length }">
+                                <mct-representation key="'label'"
+                                                    mct-object="parent"
+                                                    ng-model="ngModel"
+                                                    ng-click="ngModel.selectedObject = parent"
+                                                    class="location-item">
+                                </mct-representation>
+                            </span>
+                        </li>
+                        <li ng-if="primaryParents.length > 0">
+                            <em title="The location of the original object that this was linked from.">Original Location</em>
+                            <span class="inspector-location"
+                                  ng-repeat="parent in primaryParents"
+                                  ng-class="{ last:($index + 1) === primaryParents.length }">
+                                <mct-representation key="'label'"
+                                                    mct-object="parent"
+                                                    ng-model="ngModel"
+                                                    ng-click="ngModel.selectedObject = parent"
+                                                    class="location-item">
+                                </mct-representation>
+                            </span>
+                        </li>
+                    </ul>
+                </div><!--/ holder-inspector -->
+            </div><!--/ split-pane-component -->
+            <mct-splitter class="splitter-inspect mobile-hide" ng-show="editMode"></mct-splitter>
+            <div class="split-pane-component pane bottom" ng-show="editMode">
+                <div class="abs holder holder-elements l-flex-col">
+                    <em class="flex-elem">Elements</em>
+                    <div class="filter flex-elem"><input type="text"></div>
+                    <mct-representation
+                            key="'edit-elements'"
+                            mct-object="domainObject"
+                            class="flex-elem current-elements grows vscroll">
+                    </mct-representation>
+                </div>
             </div>
-        </li>
+        </mct-split-pane>
-        <li ng-if="contextutalParents.length > 0">
+    </div><!--/ PaneController -->
-            <em title="The location of this linked object.">Location</em>
-            <span class="inspector-location"
-                  ng-repeat="parent in contextutalParents"
-                  ng-class="{ last:($index + 1) === contextualParents.length }">
-                <mct-representation key="'label'"
-                                    mct-object="parent"
-                                    ng-model="ngModel"
-                                    ng-click="ngModel.selectedObject = parent"
-                                    class="location-item">
-                </mct-representation>
-            </span>
-        </li>
-        <li ng-if="primaryParents.length > 0">
-            <em title="The location of the original object that this was linked from.">Original Location</em>
-            <span class="inspector-location"
-                  ng-repeat="parent in primaryParents"
-                  ng-class="{ last:($index + 1) === primaryParents.length }">
-                <mct-representation key="'label'"
-                                    mct-object="parent"
-                                    ng-model="ngModel"
-                                    ng-click="ngModel.selectedObject = parent"
-                                    class="location-item">
-                </mct-representation>
-            </span>
-        </li>
-    </ul>
-    </div>
 </span>

platform/commonUI/themes/espresso/res/sass/_constants.scss

@@ -171,7 +171,7 @@ $scrollbarTrackShdw: rgba(#000, 0.7) 0 1px 5px;
 // Splitter
 $splitterD: 25px; // splitterD and HandleD should both be odd, or even
 $splitterHandleD: 1px;
-$colorSplitterBg: pullForward($colorBodyBg, 5%);
+$colorSplitterBg: rgba(#fff, 0.1); //pullForward($colorBodyBg, 5%);
 $splitterShdw: rgba(black, 0.4) 0 0 3px;
 $splitterEndCr: none;
 $colorSplitterHover: pullForward($colorBodyBg, 15%);