mirror of
https://github.com/nasa/openmct.git
synced 2025-04-07 11:26:49 +00:00
[Frontend] Cleanups to Inspector config elements
open #729 In-progress! Markup and CSS modified to cleanup control layout and styling in Plot and Table config options; gulpfile.js modified to include SASS source line numbers in rendered CSS;
This commit is contained in:
Charles Hacskaylo
parent
ff5f37dfbe
commit
318df9878d
@ -60,7 +60,8 @@ var gulp = require('gulp'),
|
||||
singleRun: true
|
||||
},
|
||||
sass: {
|
||||
includePaths: bourbon.includePaths
|
||||
includePaths: bourbon.includePaths,
|
||||
sourceComments: true
|
||||
},
|
||||
replace: {
|
||||
variables: {
|
||||
|
||||
@ -61,9 +61,23 @@
|
||||
.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: $interiorMargin;
|
||||
.form-section {
|
||||
margin-bottom: 0;
|
||||
&:not(.first) {
|
||||
|
||||
@ -19,16 +19,6 @@
|
||||
* this source code distribution or the Licensing information page available
|
||||
* 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;
|
||||
}
|
||||
|
||||
.form {
|
||||
color: $colorFormText;
|
||||
width: 100%;
|
||||
@ -37,6 +27,16 @@
|
||||
margin-bottom: $interiorMarginLg * 2;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
border-radius: $basicCr;
|
||||
background: $colorFormSectionHeader;
|
||||
$c: lighten($colorBodyFg, 20%);
|
||||
color: $c;
|
||||
font-size: 0.8em;
|
||||
padding: $formTBPad $formLRPad;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
$m: $interiorMargin;
|
||||
box-sizing: border-box;
|
||||
@ -52,9 +52,9 @@
|
||||
>.label,
|
||||
>.controls {
|
||||
box-sizing: border-box;
|
||||
@include clearfix;
|
||||
//@include clearfix;
|
||||
font-size: 0.8rem;
|
||||
line-height: $formInputH;
|
||||
//line-height: $formInputH;
|
||||
min-height: $formInputH;
|
||||
}
|
||||
|
||||
|
||||
@ -41,36 +41,38 @@
|
||||
name="yAxisFormState"
|
||||
class="flex-elem l-flex-row no-validate no-margin reduced-min-width">
|
||||
</mct-form>
|
||||
<div class="section-header ng-binding ng-scope">
|
||||
Plot Series
|
||||
</div>
|
||||
<ul class="first flex-elem grows vscroll">
|
||||
<ul class="tree">
|
||||
<li ng-repeat="child in children">
|
||||
<span ng-controller="ToggleController as toggle">
|
||||
<span ng-controller="TreeNodeController as treeNode">
|
||||
<span class="tree-item menus-to-left">
|
||||
<span
|
||||
class='ui-symbol view-control flex-elem has-children'
|
||||
ng-class="{ expanded: toggle.isActive() }"
|
||||
ng-click="toggle.toggle(); treeNode.trackExpansion()">
|
||||
<div class="form">
|
||||
<div class="section-header ng-binding ng-scope">
|
||||
Plot Series
|
||||
</div>
|
||||
<ul class="first flex-elem grows vscroll">
|
||||
<ul class="tree">
|
||||
<li ng-repeat="child in children">
|
||||
<span ng-controller="ToggleController as toggle">
|
||||
<span ng-controller="TreeNodeController as treeNode">
|
||||
<span class="tree-item menus-to-left">
|
||||
<span
|
||||
class='ui-symbol view-control flex-elem has-children'
|
||||
ng-class="{ expanded: toggle.isActive() }"
|
||||
ng-click="toggle.toggle(); treeNode.trackExpansion()">
|
||||
</span>
|
||||
<mct-representation
|
||||
class="rep-object-label"
|
||||
key="'label'"
|
||||
mct-object="child">
|
||||
</mct-representation>
|
||||
</span>
|
||||
<mct-representation
|
||||
class="rep-object-label"
|
||||
key="'label'"
|
||||
mct-object="child">
|
||||
</mct-representation>
|
||||
</span>
|
||||
<mct-form
|
||||
ng-class="{hidden: !toggle.isActive()}"
|
||||
ng-model="configuration.plot.series[$index]"
|
||||
structure="plotSeriesForm"
|
||||
name="plotOptionsState"
|
||||
class="flex-elem l-flex-row l-controls-first no-validate">
|
||||
</mct-form>
|
||||
</span>
|
||||
<mct-form
|
||||
ng-class="{hidden: !toggle.isActive()}"
|
||||
ng-model="configuration.plot.series[$index]"
|
||||
structure="plotSeriesForm"
|
||||
name="plotOptionsState"
|
||||
class="flex-elem l-flex-row l-controls-first no-validate">
|
||||
</mct-form>
|
||||
</span>
|
||||
</li>
|
||||
</li>
|
||||
</ul>
|
||||
</ul>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@ -19,7 +19,7 @@
|
||||
this source code distribution or the Licensing information page available
|
||||
at runtime from the About dialog for additional information.
|
||||
-->
|
||||
<div ng-controller="TableOptionsController" class="flex-elem grows l-inspector-part">
|
||||
<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>
|
||||
<mct-form
|
||||
ng-model="configuration.table.columns"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user