mirror of
https://github.com/nasa/openmct.git
synced 2025-01-31 00:23:54 +00:00
[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;
This commit is contained in:
Charles Hacskaylo
parent
318df9878d
commit
bdbb045005
@ -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%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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 {
|
||||
.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;
|
||||
|
||||
@ -88,7 +88,7 @@
|
||||
left: 0;
|
||||
right: 0;
|
||||
overflow: auto;
|
||||
.field.l-med {
|
||||
.field.l-input-med {
|
||||
input[type='text'] {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -48,9 +48,9 @@ define(
|
||||
'control': 'select',
|
||||
'key': 'key',
|
||||
'options': [
|
||||
{'name':'scet', 'value': 'scet'},
|
||||
{'name':'sclk', 'value': 'sclk'},
|
||||
{'name':'lst', 'value': 'lst'}
|
||||
{'name':'SCET', 'value': 'scet'},
|
||||
{'name':'SCLK', 'value': 'sclk'},
|
||||
{'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]'
|
||||
},
|
||||
{
|
||||
'name': 'Range',
|
||||
'control': 'select',
|
||||
'key': 'key',
|
||||
'options': [
|
||||
{'name':'eu', 'value': 'eu'},
|
||||
{'name':'dn', 'value': 'dn'},
|
||||
{'name':'status', 'value': 'status'}
|
||||
]
|
||||
'pattern': '[0-9]',
|
||||
'inputsize' : 'sm'
|
||||
}
|
||||
]
|
||||
}]
|
||||
@ -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'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@ -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"
|
||||
|
||||
@ -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}}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user