[Frontend] Allow Inspector to utilize split pane during editing

open #279 IN-PROGRESS Split pane markup added to object-inspector.html; Tweaks to layout CSS;
2025-01-19 19:27:07 +00:00 · 2015-11-10 14:40:14 -08:00 · 2015-11-10 14:40:14 -08:00 · d712a79ba4
commit d712a79ba4
parent 62e7adc0b0
6 changed files with 439 additions and 7403 deletions
--- a/platform/commonUI/general/res/sass/_inspector.scss
+++ b/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;
+        }
+    }
+}
+
--- a/platform/commonUI/general/res/sass/user-environ/_layout.scss
+++ b/platform/commonUI/general/res/sass/user-environ/_layout.scss
@ -309,12 +309,17 @@
            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;
        }
    }
 }
--- a/platform/commonUI/general/res/templates/object-inspector.html
+++ b/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 class="pane-header flex-elem">Inspection</div>
-    <ul class="flex-elem grows vscroll">
-        <li>
-            <em>Properties</em>
-            <div class="inspector-properties"
-                 ng-repeat="data in metadata"
-                 ng-class="{ first:$index === 0 }">
-                <div class="label">{{ data.name }}</div>
-                <div class="value">{{ data.value }}</div>
+    <div ng-controller="PaneController as modelPaneEdit">
+        <mct-split-pane class='abs contents split-layout' anchor='bottom'>
+            <div class="split-pane-component pane top">
+                <div class="abs holder holder-inspector l-flex-col">
+                    <div class="pane-header flex-elem">Inspection</div>
+                    <ul class="flex-elem grows vscroll">
+                        <li>
+                            <em>Properties</em>
+                            <div class="inspector-properties"
+                                 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>
-        <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>
+        </mct-split-pane>
+    </div><!--/ PaneController -->
 </span>
--- a/platform/commonUI/themes/espresso/res/css/theme-espresso.css
+++ b/platform/commonUI/themes/espresso/res/css/theme-espresso.css
@ -1069,7 +1069,7 @@ tr[class*="s-limit"].s-limit-lwr td:first-child:before {
    left: 0;
    width: auto;
    height: auto;
-    background: #404040;
+    background: rgba(255, 255, 255, 0.1);
    display: block; }
  /* line 47, ../../../../general/res/sass/helpers/_splitter.scss */
  .splitter:active:after {
@ -1411,21 +1411,26 @@ tr[class*="s-limit"].s-limit-lwr td:first-child:before {
      font-family: symbolsfont;
      margin-right: 5px;
      vertical-align: bottom; }
-  /* line 47, ../../../../general/res/sass/_inspector.scss */
+  /* line 49, ../../../../general/res/sass/_inspector.scss */
+  .l-inspect .split-layout .split-pane-component.pane.bottom {
+    height: 30%;
+    min-height: 20%;
+    max-height: 80%; }
+  /* line 57, ../../../../general/res/sass/_inspector.scss */
  .l-inspect ul {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding-right: 5px; }
-  /* line 52, ../../../../general/res/sass/_inspector.scss */
+  /* line 62, ../../../../general/res/sass/_inspector.scss */
  .l-inspect ul li,
  .l-inspect em {
    display: block;
    position: relative; }
-  /* line 58, ../../../../general/res/sass/_inspector.scss */
+  /* line 68, ../../../../general/res/sass/_inspector.scss */
  .l-inspect ul li {
    margin-bottom: 10px; }
-  /* line 62, ../../../../general/res/sass/_inspector.scss */
+  /* line 72, ../../../../general/res/sass/_inspector.scss */
  .l-inspect em {
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
@ -1435,34 +1440,34 @@ tr[class*="s-limit"].s-limit-lwr td:first-child:before {
    margin-bottom: 5px;
    padding: 5px 5px;
    text-transform: uppercase; }
-  /* line 71, ../../../../general/res/sass/_inspector.scss */
+  /* line 81, ../../../../general/res/sass/_inspector.scss */
  .l-inspect .inspector-properties {
    padding: 3px 0; }
-    /* line 72, ../../../../general/res/sass/_inspector.scss */
+    /* line 82, ../../../../general/res/sass/_inspector.scss */
    .l-inspect .inspector-properties:not(.first) {
      border-top: 1px solid #474747; }
-    /* line 76, ../../../../general/res/sass/_inspector.scss */
+    /* line 86, ../../../../general/res/sass/_inspector.scss */
    .l-inspect .inspector-properties .label {
      color: #737373;
      text-transform: uppercase; }
-    /* line 80, ../../../../general/res/sass/_inspector.scss */
+    /* line 90, ../../../../general/res/sass/_inspector.scss */
    .l-inspect .inspector-properties .value {
      color: #bfbfbf;
      word-break: break-all; }
-  /* line 88, ../../../../general/res/sass/_inspector.scss */
+  /* line 98, ../../../../general/res/sass/_inspector.scss */
  .l-inspect .inspector-location .location-item {
    cursor: pointer;
    display: inline-block;
    position: relative;
    padding: 2px 4px; }
-    /* line 93, ../../../../general/res/sass/_inspector.scss */
+    /* line 103, ../../../../general/res/sass/_inspector.scss */
    .l-inspect .inspector-location .location-item:hover {
      background: rgba(153, 153, 153, 0.1);
      color: #cccccc; }
-      /* line 96, ../../../../general/res/sass/_inspector.scss */
+      /* line 106, ../../../../general/res/sass/_inspector.scss */
      .l-inspect .inspector-location .location-item:hover .icon, .l-inspect .inspector-location .location-item:hover .t-item-icon {
        color: #33ccff; }
-  /* line 101, ../../../../general/res/sass/_inspector.scss */
+  /* line 111, ../../../../general/res/sass/_inspector.scss */
  .l-inspect .inspector-location:not(.last) .t-object-label .t-title-label:after {
    color: #737373;
    content: '\3e';
@ -1472,6 +1477,9 @@ tr[class*="s-limit"].s-limit-lwr td:first-child:before {
    line-height: inherit;
    margin-left: 3px;
    width: 4px; }
+  /* line 123, ../../../../general/res/sass/_inspector.scss */
+  .l-inspect .holder-elements .current-elements {
+    position: relative; }

 /********************************* CONTROLS */
 /* line 1, ../../../../general/res/sass/controls/_breadcrumb.scss */
@ -4620,13 +4628,19 @@ span.req {
      top: 10px;
      bottom: 10px; }
    /* line 312, ../../../../general/res/sass/user-environ/_layout.scss */
-    .split-layout .holder.holder-object-and-inspector .holder-inspector-elements {
+    .split-layout .holder.holder-object-and-inspector .holder-inspector {
      top: 10px;
      bottom: 10px;
      left: 10px;
      right: 10px; }
+    /* line 318, ../../../../general/res/sass/user-environ/_layout.scss */
+    .split-layout .holder.holder-object-and-inspector .holder-elements {
+      top: 0;
+      bottom: 10px;
+      left: 10px;
+      right: 10px; }

-/* line 322, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 327, ../../../../general/res/sass/user-environ/_layout.scss */
 .object-holder {
  overflow: auto;
  position: absolute;
@ -4637,11 +4651,11 @@ span.req {
  width: auto;
  height: auto;
  top: 34px; }
-  /* line 326, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 331, ../../../../general/res/sass/user-environ/_layout.scss */
  .object-holder.l-controls-visible.l-time-controller-visible {
    bottom: 88px; }

-/* line 332, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 337, ../../../../general/res/sass/user-environ/_layout.scss */
 .object-browse-bar .s-btn, .object-browse-bar .s-menu-btn,
 .top-bar .buttons-main .s-btn,
 .top-bar .buttons-main .s-menu-btn,
@ -4653,12 +4667,12 @@ span.req {
  line-height: 25px;
  vertical-align: top; }

-/* line 345, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 350, ../../../../general/res/sass/user-environ/_layout.scss */
 .object-browse-bar .view-switcher,
 .top-bar .view-switcher {
  margin-right: 20px; }

-/* line 350, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 355, ../../../../general/res/sass/user-environ/_layout.scss */
 .object-browse-bar {
  overflow: hidden;
  position: absolute;
@ -4674,22 +4688,22 @@ span.req {
  height: 24px;
  line-height: 24px;
  white-space: nowrap; }
-  /* line 358, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 363, ../../../../general/res/sass/user-environ/_layout.scss */
  .object-browse-bar .left {
    padding-right: 20px; }
-    /* line 360, ../../../../general/res/sass/user-environ/_layout.scss */
+    /* line 365, ../../../../general/res/sass/user-environ/_layout.scss */
    .object-browse-bar .left .l-back {
      display: inline-block;
      float: left;
      margin-right: 10px; }

-/* line 374, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 379, ../../../../general/res/sass/user-environ/_layout.scss */
 .pane-tree-hidden .tree-holder,
 .pane-tree-hidden .splitter-treeview,
 .pane-tree-hidden .holder-create-and-search {
  opacity: 0; }

-/* line 384, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 389, ../../../../general/res/sass/user-environ/_layout.scss */
 .pane-tree-showing .tree-holder,
 .pane-tree-showing .splitter-treeview {
  -moz-transition-property: opacity;
@ -4709,7 +4723,7 @@ span.req {
  -webkit-transition-delay: 250ms;
  transition-delay: 250ms;
  opacity: 1; }
-/* line 390, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 395, ../../../../general/res/sass/user-environ/_layout.scss */
 .pane-tree-showing .holder-create-and-search {
  -moz-transition-property: opacity;
  -o-transition-property: opacity;
@ -4728,7 +4742,7 @@ span.req {
  -webkit-transition-delay: 200ms;
  transition-delay: 200ms; }

-/* line 397, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 402, ../../../../general/res/sass/user-environ/_layout.scss */
 .pane-inspect-showing .l-object-and-inspector .l-inspect,
 .pane-inspect-showing .l-object-and-inspector .splitter-inspect {
  -moz-transition-property: opacity;
@ -4749,25 +4763,25 @@ span.req {
  transition-delay: 250ms;
  opacity: 1; }

-/* line 406, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 411, ../../../../general/res/sass/user-environ/_layout.scss */
 .pane-inspect-hidden .l-object-and-inspector .l-inspect,
 .pane-inspect-hidden .l-object-and-inspector .splitter-inspect {
  opacity: 0; }

@media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-  /* line 414, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 419, ../../../../general/res/sass/user-environ/_layout.scss */
  .pane.treeview.left .tree-holder {
    padding-right: 5px; }

-  /* line 418, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 423, ../../../../general/res/sass/user-environ/_layout.scss */
  .pane-tree-hidden .pane.right.primary-pane {
    left: 22px !important; }

-  /* line 421, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 426, ../../../../general/res/sass/user-environ/_layout.scss */
  .pane-inspect-hidden .l-object-and-inspector .pane.left {
    right: 22px !important; }

-  /* line 424, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 429, ../../../../general/res/sass/user-environ/_layout.scss */
  .pane:not(.resizing) {
    -moz-transition-property: width, left, right;
    -o-transition-property: width, left, right;
--- a/platform/commonUI/themes/espresso/res/sass/_constants.scss
+++ b/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%);
--- a/platform/commonUI/themes/snow/res/css/theme-snow.css
+++ b/platform/commonUI/themes/snow/res/css/theme-snow.css