[Frontend] Cleanups to Inspector config elements

open #729
In-progress!
Markup and CSS mods continued;
Config params added to PlotOptionsForm.js to
allow control-first layout per form row;
Changed titles of Inspector parts;

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

@@ -86,7 +86,11 @@
                 .form-row {
                     @include align-items(center);
                     border: none;
-                    padding: 0;
+                    padding: $interiorMarginSm 0;
+                    input[type='text'],
+                    input[type='search'] {
+                        width: 100%;
+                    }
                 }
             }
         }

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

@@ -42,7 +42,7 @@
 		box-sizing: border-box;
 		@include clearfix;
 		border-top: 1px solid $colorFormLines;
-		margin-top: $m;
+		//margin-top: $m;
 		padding: $formTBPad 0;
 		position: relative;
 		&.first {
@@ -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 {
+.l-controls-first .form .form-row,
-    .form .form-row {
+.form .form-row.l-controls-first {
-        margin-top: $interiorMarginSm;
+    >.label,
-        >.label,
+    >.controls {
-        >.controls {
+        line-height: inherit;
-            line-height: inherit;
+        min-height: inherit;;
-            min-height: inherit;;
+    }
-        }
+    >.label {
-        >.label {
+        @include flex(1 1 auto);
-            @include flex(1 1 auto);
+        min-width: 0;
-            min-width: 0;
+        width: auto;
-            width: auto;
+        order: 2;
-            order: 2;
+    }
-        }
+    >.controls {
-        >.controls {
+        @include flex(0 0 auto);
-            @include flex(0 0 auto);
+        margin-right: $interiorMargin;
-            margin-right: $interiorMargin;
+        order: 1;
-            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/features/plot/res/templates/plot-options-browse.html

@@ -28,7 +28,7 @@
     }
 </style>
 <div ng-controller="PlotOptionsController" class="flex-elem grows l-inspector-part">
-    <em class="t-inspector-part-header" title="Display properties for this object">Display</em>
+    <em class="t-inspector-part-header" title="Display properties for this object">Plot Options</em>
     <mct-form
             ng-model="configuration.plot.xAxis"
             structure="xAxisForm"
@@ -68,7 +68,7 @@
                             ng-model="configuration.plot.series[$index]"
                             structure="plotSeriesForm"
                             name="plotOptionsState"
-                            class="flex-elem l-flex-row l-controls-first no-validate">
+                            class="flex-elem l-flex-row no-validate">
                         </mct-form>
                     </span>
                 </li>

platform/features/plot/src/PlotOptionsForm.js

@@ -48,9 +48,9 @@ define(
                             'control': 'select',
                             'key': 'key',
                             'options': [
-                                {'name':'scet', 'value': 'scet'},
+                                {'name':'SCET', 'value': 'scet'},
-                                {'name':'sclk', 'value': 'sclk'},
+                                {'name':'SCLK', 'value': 'sclk'},
-                                {'name':'lst', 'value': 'lst'}
+                                {'name':'LST', 'value': 'lst'}
                             ]
                         }
                     ]
@@ -64,32 +64,35 @@ define(
                 // itself.
                 'name': 'y-axis',
                 'rows': [
+                    {
+                        'name': 'Range',
+                        'control': 'select',
+                        'key': 'key',
+                        'options': [
+                            {'name':'EU', 'value': 'eu'},
+                            {'name':'DN', 'value': 'dn'},
+                            {'name':'Status', 'value': 'status'}
+                        ]
+                    },
                     {
                         'name': 'Autoscale',
                         'control': 'checkbox',
-                        'key': 'autoscale'
+                        'key': 'autoscale',
+                        'layout': 'control-first'
                     },
                     {
                         'name': 'Min',
                         'control': 'textfield',
                         'key': 'min',
-                        'pattern': '[0-9]'
+                        'pattern': '[0-9]',
+                        'inputsize' : 'sm'
                     },
                     {
                         'name': 'Max',
                         'control': 'textfield',
                         'key': 'max',
-                        'pattern': '[0-9]'
+                        'pattern': '[0-9]',
-                    },
+                        'inputsize' : 'sm'
-                    {
-                        'name': 'Range',
-                        'control': 'select',
-                        'key': 'key',
-                        'options': [
-                            {'name':'eu', 'value': 'eu'},
-                            {'name':'dn', 'value': 'dn'},
-                            {'name':'status', 'value': 'status'}
-                        ]
                     }
                 ]
                 }]
@@ -110,7 +113,8 @@ define(
                             {
                                 'name': 'Markers',
                                 'control': 'checkbox',
-                                'key': 'markers'
+                                'key': 'markers',
+                                'layout': 'control-first'
                             }
                         ]
                     },
@@ -120,19 +124,22 @@ define(
                                 'name': 'No Line',
                                 'control': 'radio',
                                 'key': 'lineType',
-                                'value': 'noLine'
+                                'value': 'noLine',
+                                'layout': 'control-first'
                             },
                             {
                                 'name': 'Step Line',
                                 'control': 'radio',
                                 'key': 'lineType',
-                                'value': 'stepLine'
+                                'value': 'stepLine',
+                                'layout': 'control-first'
                             },
                             {
                                 'name': 'Linear Line',
                                 'control': 'radio',
                                 'key': 'lineType',
-                                'value': 'linearLine'
+                                'value': 'linearLine',
+                                'layout': 'control-first'
                             }
                         ]
                     }

platform/features/table/res/templates/table-options-edit.html

@@ -20,7 +20,7 @@
  at runtime from the About dialog for additional information.
 -->
 <div ng-controller="TableOptionsController" class="l-controls-first flex-elem grows l-inspector-part">
-    <em class="t-inspector-part-header" title="Display properties for this object">Display</em>
+    <em class="t-inspector-part-header" title="Display properties for this object">Table Options</em>
     <mct-form
             ng-model="configuration.table.columns"
             structure="columnsForm"

platform/forms/res/templates/form.html

@@ -31,7 +31,9 @@
                                req: row.required,
                                valid: mctFormInner.$dirty && mctFormInner.$valid,
                                invalid: mctFormInner.$dirty && !mctFormInner.$valid,
-                               first: $index < 1
+                               first: $index < 1,
+                               'l-controls-first': row.layout === 'control-first',
+                               'l-input-sm': row.inputsize === 'sm'
                                }">
                     <div class='label flex-elem' title="{{row.description}}">
                         {{row.name}}