f77c6c821c
* Legacy style migration in progress
- Working bottom up, many legacy items commented out. Stopped at
controls/indicators;
* Further migrations and deprecating
- Legacy indicator styles moved;
* WIP Styles migration
- s-button converted to c-button, WIP;
- Other
* Significant progress on migration, but still very WIP
- Mostly constants and overlay styling;
- Also bubbles and splitter;
- TODO: fix tree in overlay and splitter in imagery!
* Fix Summary Widgets UI WIP
- Remove non-working status 'editing' checks;
* Fix Summary Widgets UI WIP
- Remove non-working status 'editing' checks;
- view-control > c-disclosure-triangle;
* Fix Summary Widgets UI WIP
- Markup changes;
- Migrate CSS to styles-new, remove old;
* Fix Summary Widgets UI WIP
- Rule formatting and layout;
- Refinement to _controls / select {} padding;
* Fix Summary Widgets UI WIP
- Toolbar styles made more portable;
- Palette style migration;
- Very WIP;
* Fix Summary Widgets UI WIP
- Palettes all fixed and functional;
- Conditions layout;
- New c-button--swatched styles;
* Fix Summary Widgets UI WIP
- Clean up code;
* Fix Summary Widgets UI WIP
- Fix button in Test Data area;
* Fix layout in shell left pane due to elements being moved
- Styles fixed and refined;
* Fixed palettes
- Fixed icon palette;
- Significant refinement to general palette styles;
* Significant fixes for Summary Widgets
- Widget editing UI fixed;
- JS cleanups and improvements;
- CSS, JS code cleanup;
* Migrate tree view used in Locator
- Mods to legacy markup;
- Mods to current CSS;
- Removed import of legacy tree CSS in legacy-styles.scss;
* Migrate archetypes
- l-flex-row, l-flex-col, etc. moved to legacy;
- grid-* styles cleaned up and moved, @extends removed;
- WIP on c-object-label, move styles from mct-tree.vue into ObjectLabel
.vue;
- TODO: finish up c-object-label, cleanups in mct-tree.vue;
* Migrate effects and animation mixins
* Object labels, legacy cleanup
- Add and apply .c-object-label for tree node elements;
- Remove legacy class "tree" from markup;
- Tweak color of tree item hover for better contrast in Inspector;
* Fix palettes in Inspector
* Various
- Fix hover color in tree for better mechanics on a variety of bgs;
- Fix object label in Locator tree;
- Remove overlay blocker test color;
* Significant work for Summary Widgets, mctForm, compact form
- Forms in overlay dialogs fixed;
- form, compact-form, other classes migrated into new _forms.scss;
- Fixes for Summary Widgets;
- Theme constants files synced, add form values;
- Removed import of legacy forms/elems SCSS file;
* Migrate various
- Autoflow tabular;
- Datetime;
- Channel selector;
- Form validation;
* Migrate wait spinners, final cleanup
* Remove old src/styles directory
- Remove old Snow and Espresso plugins;
- Remove refs to old Snow and Espresso config'd aliases;
* Update Palette.js
* Update Palette.js
* Removed commented code
* Removed commented code
* Migrate About, startup and splash screen styles
208 lines
11 KiB
HTML
208 lines
11 KiB
HTML
<!--
|
|
Open MCT, Copyright (c) 2014-2018, United States Government
|
|
as represented by the Administrator of the National Aeronautics and Space
|
|
Administration. All rights reserved.
|
|
|
|
Open MCT is licensed under the Apache License, Version 2.0 (the
|
|
"License"); you may not use this file except in compliance with the License.
|
|
You may obtain a copy of the License at
|
|
http://www.apache.org/licenses/LICENSE-2.0.
|
|
|
|
Unless required by applicable law or agreed to in writing, software
|
|
distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
|
|
WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
|
|
License for the specific language governing permissions and limitations
|
|
under the License.
|
|
|
|
Open MCT includes source code licensed under additional open source
|
|
licenses. See the Open Source Licenses file (LICENSES.md) included with
|
|
this source code distribution or the Licensing information page available
|
|
at runtime from the About dialog for additional information.
|
|
-->
|
|
<div ng-controller="PlotOptionsController">
|
|
<ul class="c-tree">
|
|
<h2 title="Display properties for this object">Plot Series</h2>
|
|
<li ng-repeat="series in plotSeries"
|
|
ng-controller="PlotSeriesFormController"
|
|
form-model="series">
|
|
<div class="c-tree__item menus-to-left">
|
|
<span class='c-disclosure-triangle is-enabled flex-elem'
|
|
ng-class="{ 'c-disclosure-triangle--expanded': expanded }"
|
|
ng-click="expanded = !expanded">
|
|
</span>
|
|
<mct-representation class="rep-object-label c-tree__item__label"
|
|
key="'label'"
|
|
mct-object="series.oldObject">
|
|
</mct-representation>
|
|
</div>
|
|
<ul class="grid-properties" ng-show="expanded">
|
|
<li class="grid-row">
|
|
<!-- Value to be displayed -->
|
|
<div class="grid-cell label"
|
|
title="The field to be plotted as a value for this series.">Value</div>
|
|
<div class="grid-cell value">
|
|
<select ng-model="form.yKey">
|
|
<option ng-repeat="option in yKeyOptions"
|
|
value="{{option.value}}"
|
|
ng-selected="option.value == form.yKey">
|
|
{{option.name}}
|
|
</option>
|
|
</select>
|
|
</div>
|
|
</li>
|
|
<li class="grid-row">
|
|
<div class="grid-cell label"
|
|
title="The line rendering style for this series.">Line Style</div>
|
|
<div class="grid-cell value">
|
|
<select ng-model="form.interpolate">
|
|
<option value="none">None</option>
|
|
<option value="linear">Linear interpolate</option>
|
|
<option value="stepAfter">Step after</option>
|
|
</select>
|
|
</div>
|
|
</li>
|
|
<li class="grid-row">
|
|
<div class="grid-cell label"
|
|
title="Whether markers are displayed.">Markers</div>
|
|
<div class="grid-cell value"><input type="checkbox" ng-model="form.markers"/></div>
|
|
</li>
|
|
<li class="grid-row">
|
|
<div class="grid-cell label"
|
|
title="Display markers visually denoting points in alarm.">Alarm Markers</div>
|
|
<div class="grid-cell value"><input type="checkbox" ng-model="form.alarmMarkers"/></div>
|
|
</li>
|
|
<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="c-input--flex" type="text" ng-model="form.markerSize"/></div>
|
|
</li>
|
|
<li class="grid-row"
|
|
ng-controller="ClickAwayController as toggle"
|
|
ng-show="form.interpolate !== 'none' || form.markers">
|
|
<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="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="c-palette c-palette--color">
|
|
<div class="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() }"
|
|
ng-click="setColor(color)">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
<div class="grid-properties"
|
|
ng-show="!!config.series.models.length"
|
|
ng-controller="PlotYAxisFormController"
|
|
form-model="config.yAxis">
|
|
<ul class="l-inspector-part">
|
|
<h2>Y Axis</h2>
|
|
<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="c-input--flex" type="text" ng-model="form.label"/></div>
|
|
</li>
|
|
</ul>
|
|
<ul class="l-inspector-part">
|
|
<h2>Y Axis Scaling</h2>
|
|
<li class="grid-row">
|
|
<div class="grid-cell label"
|
|
title="Automatically scale the Y axis to keep all values in view.">Autoscale</div>
|
|
<div class="grid-cell value"><input type="checkbox" ng-model="form.autoscale"/></div>
|
|
</li>
|
|
<li class="grid-row" ng-show="form.autoscale">
|
|
<div class="grid-cell label"
|
|
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="c-input--flex" type="text" ng-model="form.autoscalePadding"/>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
<ul class="l-inspector-part" ng-show="!form.autoscale">
|
|
<div class="grid-span-all form-error"
|
|
ng-show="!form.autoscale && validation.range">
|
|
{{ validation.range }}
|
|
</div>
|
|
<li class="grid-row force-border">
|
|
<div class="grid-cell label"
|
|
title="Minimum Y axis value.">Minimum Value</div>
|
|
<div class="grid-cell value">
|
|
<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="c-input--flex" type="number" ng-model="form.range.max"/></div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="grid-properties" ng-show="!!config.series.models.length">
|
|
<ul class="l-inspector-part" ng-controller="PlotLegendFormController" form-model="config.legend">
|
|
<h2 title="Legend options">Legend</h2>
|
|
<li class="grid-row">
|
|
<div class="grid-cell label"
|
|
title="The position of the legend relative to the plot display area.">Position</div>
|
|
<div class="grid-cell value">
|
|
<select ng-model="form.position">
|
|
<option value="hidden">Hidden</option>
|
|
<option value="top">Top</option>
|
|
<option value="right">Right</option>
|
|
<option value="bottom">Bottom</option>
|
|
<option value="left">Left</option>
|
|
</select>
|
|
</div>
|
|
</li>
|
|
<li class="grid-row">
|
|
<div class="grid-cell label"
|
|
title="Show the legend expanded by default">Expand by default</div>
|
|
<div class="grid-cell value"><input type="checkbox" ng-model="form.expandByDefault"/></div>
|
|
</li>
|
|
<li class="grid-row">
|
|
<div class="grid-cell label"
|
|
title="What to display in the legend when it's collapsed.">When collapsed show</div>
|
|
<div class="grid-cell value">
|
|
<select ng-model="form.valueToShowWhenCollapsed">
|
|
<option value="none">Nothing</option>
|
|
<option value="nearestTimestamp">Nearest timestamp</option>
|
|
<option value="nearestValue">Nearest value</option>
|
|
<option value="min">Minimum value</option>
|
|
<option value="max">Maximum value</option>
|
|
</select>
|
|
</div>
|
|
</li>
|
|
<li class="grid-row">
|
|
<div class="grid-cell label"
|
|
title="What to display in the legend when it's expanded.">When expanded show</div>
|
|
<div class="grid-cell value">
|
|
<ul>
|
|
<li><input type="checkbox"
|
|
ng-model="form.showTimestampWhenExpanded"/> Nearest timestamp</li>
|
|
<li><input type="checkbox"
|
|
ng-model="form.showValueWhenExpanded"/> Nearest value</li>
|
|
<li><input type="checkbox"
|
|
ng-model="form.showMinimumWhenExpanded"/> Minimum value</li>
|
|
<li><input type="checkbox"
|
|
ng-model="form.showMaximumWhenExpanded"/> Maximum value</li>
|
|
</ul>
|
|
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|