Merge pull request #735 from nasa/open729

Review and integrate open729

platform/commonUI/browse/res/templates/browse/object-properties.html

@@ -32,6 +32,7 @@
         </li>
         <li ng-if="contextutalParents.length > 0">
             <em class="t-inspector-part-header" title="The location of this linked object.">Location</em>
+            <div ng-if="primaryParents.length > 0" class="section-header">This Object</div>
             <span class="inspector-location"
                   ng-repeat="parent in contextutalParents"
                   ng-class="{ last:($index + 1) === contextualParents.length }">
@@ -44,7 +45,7 @@
             </span>
         </li>
         <li ng-if="primaryParents.length > 0">
-            <em class="t-inspector-part-header" title="The location of the original object that this was linked from.">Original Location</em>
+            <div class="section-header">Object's Original</div>
             <span class="inspector-location"
                   ng-repeat="parent in primaryParents"
                   ng-class="{ last:($index + 1) === primaryParents.length }">

platform/commonUI/edit/res/templates/elements.html

@@ -19,16 +19,19 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-<div ng-controller="ElementsController">
+<div ng-controller="ElementsController" class="flex-elem l-flex-col holder grows">
     <mct-include key="'input-filter'"
                  class="flex-elem holder"
                  ng-model="filterBy">
     </mct-include>
-    <div class="current-elements abs" style="height: 100%;">
+    <div class="flex-elem grows vscroll">
         <ul class="tree">
             <li ng-repeat="containedObject in composition | filter:searchText">
                 <span class="tree-item">
-                    <mct-representation key="'label'" mct-object="containedObject">
+                    <mct-representation
+                            class="rep-object-label"
+                            key="'label'"
+                            mct-object="containedObject">
                     </mct-representation>
                 </span>
             </li>

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

@@ -61,9 +61,24 @@
     .l-inspector-part {
         box-sizing: border-box;
         padding-right: $interiorMargin;
-        .form {
+        .tree .form {
             margin-left: $treeVCW + $interiorMarginLg;
-            margin-bottom: $interiorMarginLg;
+        }
+        .section-header {
+            background: none;
+            color: $colorInspectorPropName;
+            border-radius: unset;
+            font-size: inherit;
+            padding: $interiorMarginSm 0;
+        }
+
+        mct-form:not(:last-child) .form {
+            border-bottom: 1px solid $colorInspectorSectionHeaderBg;
+        }
+
+        .form {
+            margin-bottom: $interiorMarginSm;
+            padding-bottom: $interiorMarginLg;
             .form-section {
                 margin-bottom: 0;
                 &:not(.first) {
@@ -72,7 +87,14 @@
                 .form-row {
                     @include align-items(center);
                     border: none;
-                    padding: 0;
+                    padding: $interiorMarginSm 0;
+                    .label {
+                        min-width: 80px;
+                    }
+                    input[type='text'],
+                    input[type='search'] {
+                        width: 100%;
+                    }
                 }
             }
         }

platform/commonUI/general/res/sass/forms/_elems.scss

@@ -20,13 +20,7 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 .section-header {
-	border-radius: $basicCr;
-	background: $colorFormSectionHeader;
-	$c: lighten($colorBodyFg, 20%);
-	color: $c;
-	font-size: 0.8em;
-	padding: $formTBPad $formLRPad;
-	text-transform: uppercase;
+    text-transform: uppercase;
 }
 
 .form {
@@ -37,12 +31,20 @@
 		margin-bottom: $interiorMarginLg * 2;
 	}
 
+    .section-header {
+        border-radius: $basicCr;
+        background: $colorFormSectionHeader;
+        $c: lighten($colorBodyFg, 20%);
+        color: $c;
+        font-size: 0.8em;
+        padding: $formTBPad $formLRPad;
+    }
+
 	.form-row {
 		$m: $interiorMargin;
 		box-sizing: border-box;
 		@include clearfix;
 		border-top: 1px solid $colorFormLines;
-		margin-top: $m;
 		padding: $formTBPad 0;
 		position: relative;
 		&.first {
@@ -52,9 +54,7 @@
 		>.label,
 		>.controls {
 			box-sizing: border-box;
-			@include clearfix;
 			font-size: 0.8rem;
-			line-height: $formInputH;
             min-height: $formInputH;
 		}
 
@@ -83,19 +83,6 @@
 					margin-right: 5px;
 				}
 			}
-
-			.l-med input[type="text"] {
-				width: 200px;
-			}
-
-			.l-small input[type="text"] {
-				width: 50px;
-			}
-
-			.l-numeric input[type="text"] {
-				text-align: right;
-			}
-
 			.select {
 				margin-right: $interiorMargin;
 			}
@@ -124,25 +111,23 @@
 	}
 }
 
-.l-controls-first {
-    .form .form-row {
-        margin-top: $interiorMarginSm;
-        >.label,
-        >.controls {
-            line-height: inherit;
-            min-height: inherit;;
-        }
-        >.label {
-            @include flex(1 1 auto);
-            min-width: 0;
-            width: auto;
-            order: 2;
-        }
-        >.controls {
-            @include flex(0 0 auto);
-            margin-right: $interiorMargin;
-            order: 1;
-        }
+.l-controls-first .form .form-row,
+.form .form-row.l-controls-first {
+    >.label,
+    >.controls {
+        line-height: inherit;
+        min-height: inherit;;
+    }
+    >.label {
+        @include flex(1 1 auto);
+        min-width: 0;
+        width: auto;
+        order: 2;
+    }
+    >.controls {
+        @include flex(0 0 auto);
+        margin-right: $interiorMargin;
+        order: 1;
     }
 }
 
@@ -191,6 +176,18 @@ input[type="search"] {
 	}
 }
 
+.l-input-med input[type="text"] {
+    width: 200px !important;
+}
+
+.l-input-sm input[type="text"] {
+    width: 50px !important;
+}
+
+.l-numeric input[type="text"] {
+    text-align: right;
+}
+
 textarea {
 	@include nice-textarea($colorInputBg, $colorInputFg);
 	position: absolute;

platform/commonUI/general/res/sass/overlay/_overlay.scss

@@ -88,7 +88,7 @@
         left: 0;
         right: 0;
         overflow: auto;
-        .field.l-med {
+        .field.l-input-med {
             input[type='text'] {
                 width: 100%;
             }

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

@@ -40,7 +40,7 @@
                     <mct-representation
                             key="'edit-elements'"
                             mct-object="domainObject"
-                            class="flex-elem holder grows vscroll current-elements">
+                            class="flex-elem l-flex-col holder grows current-elements">
                     </mct-representation>
                 </div>
             </div>