[Frontend] Inspector styling, in progress

open #90

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'"