ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-06-19 07:38:15 +00:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

R&I Misc UI 3 (#2253)

Browse Source 
* Limits-related changes; WIP

- Renamed CSS classes: `s-limit-*` > `is-limit--*`;
- Removed load of legacy _status.scss and added new _status.scss file;
- Minor re-org of limit/status constants in theme files;
- Limit colors in theme constants all updated;

* Fixes for s-selected always displaying the move cursor

- Mod s-selected;
- Reinstitute `.is-moveable` class;

* Layout-related cleanup and refinements

- LineView cleaned up;
- Selection, hover, etc. classes for c-frame cleaned up;
- Constant names normalized, theme files updated;

* Fixes for editing plot options

- Color palette now more flexible;
- Styles for color palette button refined;
- c-input--flex added for more flexible inputs;

* Various swatch-related changes

- Swatch refinements, new .c-click-swatch class;
- Added .c-click-icon--major modifier style, applied in markup;

* Local controls class application and behavior cleanup

- Remmoved .has-local-controls from selected markup;
- Refined CSS selector for better hover behavior;

* Misc UI tweaks

- click-icon--major in Notebook;
- .test mixin improved;

* Update _constants-espresso.scss

* Update _constants-maelstrom.scss
This commit is contained in:
Charles Hacskaylo
2018-12-20 13:17:44 -08:00
committed by Pete Richards
parent b0917a9866
commit 30a4888363
20 changed files with 303 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/plugins/plot/res/templates/plot-options-browse.html
View File

@ -70,17 +70,9 @@
<div class="grid-cell label"
title="The plot line and marker color for this series.">Color</div>
<div class="grid-cell value">
<!-- TODO: get this into a class -->
<span class="color-swatch"
<span class="c-color-swatch"
ng-style="{
'background': series.get('color').asHexString(),
'display': 'inline-block',
'border': '1px solid rgba(255, 255, 255, 0.2)',
'height': '10px',
'width': '10px',
'vertical-align': 'middle',
'margin-left': '3px',
'margin-top': -'2px'
'background': series.get('color').asHexString()
}">
</span>
</div>

22
src/plugins/plot/res/templates/plot-options-edit.html
View File

@ -78,7 +78,7 @@
<li class="grid-row" ng-show="form.markers || form.alarmMarkers">
<div class="grid-cell label"
title="The size of regular and alarm markers for this series.">Marker Size:</div>
<div class="grid-cell value"><input class="sm" type="text" ng-model="form.markerSize"/></div>
<div class="grid-cell value"><input class="c-input--flex" type="text" ng-model="form.markerSize"/></div>
</li>
<li class="grid-row"
ng-controller="ClickAwayController as toggle"
@ -86,14 +86,14 @@
<div class="grid-cell label"
title="Manually set the plot line and marker color for this series.">Color</div>
<div class="grid-cell value">
<div class="s-menu-button" ng-click="toggle.toggle()">
<span class="color-swatch" ng-style="{ background: series.get('color').asHexString() }">
<div class="c-click-swatch c-click-swatch--menu" ng-click="toggle.toggle()">
<span class="c-color-swatch"
ng-style="{ background: series.get('color').asHexString() }">
</span>
</div>
<div class="l-inline-palette" ng-show="toggle.isActive()">
<!-- TODO: redo this as a grid -->
<div class="l-palette-row" ng-repeat="group in config.series.palette.groups()">
<div class="l-palette-item s-palette-item"
<div class="c-palette--inline c-palette__items" ng-show="toggle.isActive()">
<div class="u-contents" ng-repeat="group in config.series.palette.groups()">
<div class="c-palette__item"
ng-repeat="color in group"
ng-class="{ 'selected': series.get('color').equalTo(color) }"
ng-style="{ background: color.asHexString() }"
@ -115,7 +115,7 @@
<li class="grid-row">
<div class="grid-cell label"
title="Manually override how the Y axis is labeled.">Label</div>
<div class="grid-cell value"><input class="control" type="text" ng-model="form.label"/></div>
<div class="grid-cell value"><input class="c-input--flex" type="text" ng-model="form.label"/></div>
</li>
</ul>
<ul class="l-inspector-part">
@ -130,7 +130,7 @@
title="Percentage of padding above and below plotted min and max values. 0.1, 1.0, etc.">
Padding</div>
<div class="grid-cell value">
<input class="sm" type="text" ng-model="form.autoscalePadding"/>
<input class="c-input--flex" type="text" ng-model="form.autoscalePadding"/>
</div>
</li>
</ul>
@ -143,13 +143,13 @@
<div class="grid-cell label"
title="Minimum Y axis value.">Minimum Value</div>
<div class="grid-cell value">
<input class="sm" type="number" ng-model="form.range.min"/>
<input class="c-input--flex" type="number" ng-model="form.range.min"/>
</div>
</li>
<li class="grid-row">
<div class="grid-cell label"
title="Maximum Y axis value.">Maximum Value</div>
<div class="grid-cell value"><input class="sm" type="number" ng-model="form.range.max"/></div>
<div class="grid-cell value"><input class="c-input--flex" type="number" ng-model="form.range.max"/></div>
</li>
</ul>
</div>