[Frontend] Inspector styling, in progress

open #90

platform/commonUI/browse/res/templates/browse.html

@@ -73,7 +73,8 @@
                         <div class="split-pane-component t-inspect pane right mobile-hide">
                             <mct-representation key="'object-inspector'"
                                                 mct-object="domainObject"
-                                                ng-model="treeModel">
+                                                ng-model="treeModel"
+                                                class="t-inspector">
                             </mct-representation>
                         </div>
                     </mct-split-pane>

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

@@ -19,17 +19,55 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-/* Classes to be used for lists of properties and values */
+/* Styles for the Inspector pane */
 
-.properties {
-    .s-row {
-        border-top: 1px solid $colorInteriorBorder;
-        font-size: 0.8em;
-        &:first-child {
+//.pane.right.t-inspect { @include test(green, 0.3); } // TEMP!
+
+.t-inspector,
+.t-inspector table tr td {
+    font-size: 0.7rem;
+}
+
+.t-inspector {
+    ul li,
+    em {
+        display: block;
+        position: relative;
+    }
+
+    ul li {
+        line-height: 130%;
+        margin-bottom: $interiorMarginLg * 2;
+    }
+    
+    em {
+        @include border-radius($basicCr);
+        background-color: $colorInspectorSectionHeaderBg;
+        color: $colorInspectorSectionHeaderFg;
+        margin-bottom: $interiorMargin;
+        padding: $formTBPad $formLRPad;
+        text-transform: uppercase;
+    }
+
+    table tr {
+        td {
             border: none;
+            border-top: 1px solid $colorInteriorBorder !important;
+            padding: 2px 0;
+            vertical-align: top;
+            &.label {
+                color: $colorInspectorPropName !important;
+                padding-right: $interiorMargin !important;
+                white-space: nowrap;
+            }
+            &.value {
+                //word-wrap: break-word; // Doesn't work in <td>?
+                word-break: break-all;
+            }
         }
-        .s-value {
-            color: #fff;
+
+        &:first-child td {
+            border-top: none !important;
         }
     }
 }

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

@@ -30,7 +30,7 @@
 @import "helpers/splitter";
 @import "helpers/wait-spinner";
 @import "messages";
-@import "properties";
+@import "inspector";
 
 /********************************* CONTROLS */
 @import "controls/breadcrumb";

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

@@ -427,10 +427,6 @@
     }
 }
 
-.pane.right.t-inspect {
-    @include test(orange, 0.3); // TEMP!
-}
-
 @include desktop {
     .pane:not(.resizing) {
         @include trans-prop-nice-resize-w(250ms);

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

@@ -21,14 +21,17 @@
 -->
 <span ng-controller="ObjectInspectorController as controller">
     <ul>
-        <li ng-repeat="data in metadata">
-            <em>{{ data.name }}</em>
-            {{ data.value }}
+        <li>
+            <em>Properties</em>
+            <table>
+                <tr ng-repeat="data in metadata">
+                    <td class="label">{{ data.name }}</td>
+                    <td class="value">{{ data.value }}</td>
+                </tr>
+            </table>
         </li>
         <li ng-if="contextutalParents.length > 0">
-            <em title="The location of this linked object.">
-                Location
-            </em>
+            <em title="The location of this linked object.">Location</em>
             <span class="inspector-location"
                   ng-repeat="parent in contextutalParents">
                 <mct-representation key="'label'"
@@ -39,9 +42,7 @@
             </span>
         </li>
         <li ng-if="primaryParents.length > 0">
-            <em title="The location of the object that this was linked from.">
-                Original Location
-            </em>
+            <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">
                 <mct-representation key="'label'"

platform/commonUI/themes/espresso/res/css/theme-espresso.css

@@ -1257,17 +1257,48 @@ mct-container {
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-/* Classes to be used for lists of properties and values */
-/* line 25, ../../../../general/res/sass/_properties.scss */
-.properties .s-row {
-  border-top: 1px solid rgba(153, 153, 153, 0.1);
-  font-size: 0.8em; }
-  /* line 28, ../../../../general/res/sass/_properties.scss */
-  .properties .s-row:first-child {
-    border: none; }
-  /* line 31, ../../../../general/res/sass/_properties.scss */
-  .properties .s-row .s-value {
-    color: #fff; }
+/* Styles for the Inspector pane */
+/* line 26, ../../../../general/res/sass/_inspector.scss */
+.t-inspector,
+.t-inspector table tr td {
+  font-size: 0.7rem; }
+
+/* line 32, ../../../../general/res/sass/_inspector.scss */
+.t-inspector ul li,
+.t-inspector em {
+  display: block;
+  position: relative; }
+/* line 38, ../../../../general/res/sass/_inspector.scss */
+.t-inspector ul li {
+  line-height: 130%;
+  margin-bottom: 20px; }
+/* line 43, ../../../../general/res/sass/_inspector.scss */
+.t-inspector em {
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  border-radius: 2px;
+  background-color: #404040;
+  color: #999999;
+  margin-bottom: 5px;
+  padding: 5px 5px;
+  text-transform: uppercase; }
+/* line 53, ../../../../general/res/sass/_inspector.scss */
+.t-inspector table tr td {
+  border: none;
+  border-top: 1px solid rgba(153, 153, 153, 0.1) !important;
+  padding: 2px 0;
+  vertical-align: top; }
+  /* line 58, ../../../../general/res/sass/_inspector.scss */
+  .t-inspector table tr td.label {
+    color: #666666 !important;
+    padding-right: 5px !important;
+    white-space: nowrap; }
+  /* line 63, ../../../../general/res/sass/_inspector.scss */
+  .t-inspector table tr td.value {
+    word-break: break-all; }
+/* line 69, ../../../../general/res/sass/_inspector.scss */
+.t-inspector table tr:first-child td {
+  border-top: none !important; }
 
 /********************************* CONTROLS */
 /* line 1, ../../../../general/res/sass/controls/_breadcrumb.scss */
@@ -3877,12 +3908,8 @@ span.req {
 .pane-inspect-hidden .l-object-and-inspector .pane.left {
   right: 15px !important; }
 
-/* line 430, ../../../../general/res/sass/user-environ/_layout.scss */
-.pane.right.t-inspect {
-  background-color: rgba(255, 165, 0, 0.3) !important; }
-
 @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-  /* line 435, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 431, ../../../../general/res/sass/user-environ/_layout.scss */
   .pane:not(.resizing) {
     -moz-transition-property: width, left, right;
     -o-transition-property: width, left, right;

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

@@ -73,6 +73,13 @@ $colorInputFg: pullForward($colorBodyFg, 20%);
 $colorFormText: rgba(#fff, 0.5);
 $colorInputIcon: pushBack($colorBodyFg, 15%);
 
+// Inspector - TO-DO: Add to snow theme
+$colorInspectorFg: $colorBodyFg;
+$colorInspectorPropName: pushBack($colorBodyFg, 20%);
+$colorInspectorPropVal: $colorInspectorFg;
+$colorInspectorSectionHeaderBg: pullForward($colorBodyBg, 5%);
+$colorInspectorSectionHeaderFg: pullForward($colorBodyBg, 40%);
+
 // Selects
 $colorSelectBg: $colorBtnBg;
 $colorSelectFg: $colorBtnFg;