alihan/openmct
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[Frontend] Cleanups to Inspector config elements

Browse Source 
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
2016-03-09 17:22:41 -08:00
parent ff5f37dfbe
commit 318df9878d
5 changed files with 61 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
gulpfile.js
View File

@@ -60,7 +60,8 @@ var gulp = require('gulp'),
singleRun: true singleRun: true
}, },
sass: { sass: {
includePaths: bourbon.includePaths includePaths: bourbon.includePaths,
sourceComments: true
}, },
replace: { replace: {
variables: { variables: {

18
platform/commonUI/general/res/sass/_inspector.scss
View File

@@ -61,9 +61,23 @@
.l-inspector-part { .l-inspector-part {
box-sizing: border-box; box-sizing: border-box;
padding-right: $interiorMargin; padding-right: $interiorMargin;
.form { .tree .form {
margin-left: $treeVCW + $interiorMarginLg; 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 { .form-section {
margin-bottom: 0; margin-bottom: 0;
&:not(.first) { &:not(.first) {

24
platform/commonUI/general/res/sass/forms/_elems.scss
View File

@@ -19,16 +19,6 @@
* this source code distribution or the Licensing information page available * this source code distribution or the Licensing information page available
* at runtime from the About dialog for additional information. * 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 { .form {
color: $colorFormText; color: $colorFormText;
width: 100%; width: 100%;
@@ -37,6 +27,16 @@
margin-bottom: $interiorMarginLg * 2; 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 { .form-row {
$m: $interiorMargin; $m: $interiorMargin;
box-sizing: border-box; box-sizing: border-box;
@@ -52,9 +52,9 @@
>.label, >.label,
>.controls { >.controls {
box-sizing: border-box; box-sizing: border-box;
@include clearfix; //@include clearfix;
font-size: 0.8rem; font-size: 0.8rem;
line-height: $formInputH; //line-height: $formInputH;
min-height: $formInputH; min-height: $formInputH;
} }

58
platform/features/plot/res/templates/plot-options-browse.html
View File

@@ -41,36 +41,38 @@
name="yAxisFormState" name="yAxisFormState"
class="flex-elem l-flex-row no-validate no-margin reduced-min-width"> class="flex-elem l-flex-row no-validate no-margin reduced-min-width">
</mct-form> </mct-form>
<div class="section-header ng-binding ng-scope"> <div class="form">
Plot Series <div class="section-header ng-binding ng-scope">
</div> Plot Series
<ul class="first flex-elem grows vscroll"> </div>
<ul class="tree"> <ul class="first flex-elem grows vscroll">
<li ng-repeat="child in children"> <ul class="tree">
<span ng-controller="ToggleController as toggle"> <li ng-repeat="child in children">
<span ng-controller="TreeNodeController as treeNode"> <span ng-controller="ToggleController as toggle">
<span class="tree-item menus-to-left"> <span ng-controller="TreeNodeController as treeNode">
<span <span class="tree-item menus-to-left">
class='ui-symbol view-control flex-elem has-children' <span
ng-class="{ expanded: toggle.isActive() }" class='ui-symbol view-control flex-elem has-children'
ng-click="toggle.toggle(); treeNode.trackExpansion()"> 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> </span>
<mct-representation
class="rep-object-label"
key="'label'"
mct-object="child">
</mct-representation>
</span> </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> </span>
<mct-form </li>
ng-class="{hidden: !toggle.isActive()}" </ul>
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>
</ul> </ul>
</ul> </div>
</div> </div>

2
platform/features/table/res/templates/table-options-edit.html
View File

@@ -19,7 +19,7 @@
this source code distribution or the Licensing information page available this source code distribution or the Licensing information page available
at runtime from the About dialog for additional information. 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> <em class="t-inspector-part-header" title="Display properties for this object">Display</em>
<mct-form <mct-form
ng-model="configuration.table.columns" ng-model="configuration.table.columns"