mirror of
https://github.com/nasa/openmct.git
synced 2025-06-14 21:28:12 +00:00
UI enhancements (#3217)
* UI enhancements for #3176 - Large overlay now displays fullscreen; * UI enhancements for #3176 - Adding new ".is-in-small-container" CSS - VERY WIP! - TODO: fix table implementation; * UI fixes for NIRVSS client #170 - Hide table header filter inputs when table is in small container; * UI fixes for NIRVSS client #170 - Fixing legends and plot layout when small, and within a stacked plot; - Add new `hideLegendWhenSmall` property; - Remove 'hidden' from plot legend position options; - Reduced opacity of tabular headers in Espresso theme; - VERY, VERY WIP right now! * UI fixes for NIRVSS client #170 - Fixing legends and plot layout when small, and within a stacked plot; - Cleanups, indention, removed commented CSS; - Tightened up spacing in plot Y axis; * UI enhancements for #3176 - Move local controls for plots and imagery, prevent overlapping with view large button when in a hidden frame in a layout; - Finesse local control styling for increased legibility; - Move l-state-indicators to avoid overlap with repositioned local controls, finesse styling; * UI enhancements for #3176 - Tweak large overlay close button for better visual alignment; * UI enhancements for #3176 - Significant improvements to lines in Display Layouts; - Increased border-width for lines and boxes; - Code enhanced for proper handling of horizontal and vertical lines - but still isn't working properly; - Renamed box-view.scss to box-and-line-views.scss; - VERY WIP! * Fixed incorrect grid array reference * UI enhancements for #3176 - Fixed final issue with Display Layout line drawing object, thank you @deeptailor!; * UI enhancements for #3176 - Contrast enhancements and markup normalization for `c-object-label` elements in main view, Layout frames, Inspector and overlay; - Enhanced `l-overlay-large` layout; - Tightened up margins and spacing in plots; - Refined `is-paused` styling in Telemetry Tables; - Now hide Telemetry Tables 'Export Data' button if rows are selected, which use a separate export button; - Layout frames now hide button's text labels when small; - Layout frames spacing tightened up and improved; * UI enhancements for #3176 - Tweak Snow theme constants; * UI enhancements for #3176 - Fixed ObjectFrame getOverlayElement method, added a wrapper div around the viewed object to properly control resulting layout in the overlay; - Simplified preview CSS to remove background, border and padding; - Layout tweaks to add space between scrollbar and thumbs in Imagery view; - Removed dev "-info" element in LineView.vue; * UI enhancements for #3176 - Improved styling for 'edit lock' button; * UI enhancements for #3176 - Show Display Layout frame "-move" bar on hover, rather than select, to make it easier to select items with hidden frames, and only show -move bar's drag grippy when that frame is selected; - `pointer-events: none` applied to table's body and plot's plot areas when placed in a Layout and being edited, prevents distracting interactions (plot zoom/pan, table row selection) when selecting and moving elements in a Layout; - Refined hover styles for c-button to use $filterHov, simplified and normalized hover styling; - Converted a number of old `<a>` tags to `<buttons>` to normalize styling and use the appropriate control; - Edit lock button is now colored when locked; * Fix linting issue * Minor tweaks - Tweaked control positioning; Co-authored-by: Shefali Joshi <simplyrender@gmail.com>
This commit is contained in:
Charles Hacskaylo
committed by
GitHub
GitHub
parent
41138a1731
commit
97d80f57cc
@ -21,8 +21,11 @@
|
||||
-->
|
||||
<div class="gl-plot plot-legend-{{legend.get('position')}} {{legend.get('expanded')? 'plot-legend-expanded' : 'plot-legend-collapsed'}}">
|
||||
<div class="c-plot-legend gl-plot-legend"
|
||||
ng-class="{ 'hover-on-plot': !!highlights.length }"
|
||||
ng-show="legend.get('position') !== 'hidden'">
|
||||
ng-class="{
|
||||
'hover-on-plot': !!highlights.length,
|
||||
'is-legend-hidden': legend.get('hideLegendWhenSmall')
|
||||
}"
|
||||
>
|
||||
<div class="c-plot-legend__view-control gl-plot-legend__view-control c-disclosure-triangle is-enabled"
|
||||
ng-class="{ 'c-disclosure-triangle--expanded': legend.get('expanded') }"
|
||||
ng-click="legend.set('expanded', !legend.get('expanded'));">
|
||||
@ -36,11 +39,13 @@
|
||||
ng-class="{'is-cursor-locked': !!lockHighlightPoint }">
|
||||
<div class="c-state-indicator__alert-cursor-lock icon-cursor-lock" title="Cursor is point locked. Click anywhere in the plot to unlock."></div>
|
||||
<div class="plot-legend-item"
|
||||
ng-class="{'is-missing': series.domainObject.status === 'missing'}"
|
||||
ng-class="{
|
||||
'is-missing': series.domainObject.status === 'missing'
|
||||
}"
|
||||
ng-repeat="series in series track by $index"
|
||||
>
|
||||
<div class="plot-series-swatch-and-name">
|
||||
<span class="plot-series-color-swatch "
|
||||
<span class="plot-series-color-swatch"
|
||||
ng-style="{ 'background-color': series.get('color').asHexString() }">
|
||||
</span>
|
||||
<span class="is-missing__indicator" title="This item is missing"></span>
|
||||
@ -86,7 +91,9 @@
|
||||
</thead>
|
||||
<tr ng-repeat="series in series"
|
||||
class="plot-legend-item"
|
||||
ng-class="{'is-missing': series.domainObject.status === 'missing'}"
|
||||
ng-class="{
|
||||
'is-missing': series.domainObject.status === 'missing'
|
||||
}"
|
||||
>
|
||||
<td class="plot-series-swatch-and-name">
|
||||
<span class="plot-series-color-swatch"
|
||||
@ -128,7 +135,7 @@
|
||||
<div class="plot-wrapper-axis-and-display-area flex-elem grows">
|
||||
<div class="gl-plot-axis-area gl-plot-y has-local-controls"
|
||||
ng-style="{
|
||||
width: (tickWidth + 30) + 'px'
|
||||
width: (tickWidth + 20) + 'px'
|
||||
}">
|
||||
|
||||
<div class="gl-plot-label gl-plot-y-label"
|
||||
@ -146,7 +153,6 @@
|
||||
</option>
|
||||
</select>
|
||||
|
||||
|
||||
<mct-ticks axis="yAxis">
|
||||
<div ng-repeat="tick in ticks track by tick.value"
|
||||
class="gl-plot-tick gl-plot-y-tick-label"
|
||||
@ -159,17 +165,15 @@
|
||||
</div>
|
||||
<div class="gl-plot-wrapper-display-area-and-x-axis"
|
||||
ng-style="{
|
||||
left: (tickWidth + 30) + 'px'
|
||||
}">
|
||||
<div class="l-state-indicators">
|
||||
<span class="l-state-indicators__alert-no-lad t-object-alert t-alert-unsynced icon-alert-triangle"
|
||||
title="This plot is not currently displaying the latest data. Reset pan/zoom to view latest data."></span>
|
||||
<span class="l-state-indicators__alert-cursor-lock icon-cursor-lock"
|
||||
title="Telemetry point selection is locked. Click anywhere in the plot to unlock."
|
||||
ng-if="lockHighlightPoint"></span>
|
||||
</div>
|
||||
left: (tickWidth + 20) + 'px'
|
||||
}">
|
||||
|
||||
<div class="gl-plot-display-area has-local-controls has-cursor-guides">
|
||||
<div class="l-state-indicators">
|
||||
<span class="l-state-indicators__alert-no-lad t-object-alert t-alert-unsynced icon-alert-triangle"
|
||||
title="This plot is not currently displaying the latest data. Reset pan/zoom to view latest data."></span>
|
||||
</div>
|
||||
|
||||
<mct-ticks axis="xAxis">
|
||||
<div class="gl-plot-hash hash-v"
|
||||
ng-repeat="tick in ticks track by tick.value"
|
||||
|
||||
@ -114,6 +114,11 @@
|
||||
title="The position of the legend relative to the plot display area.">Position</div>
|
||||
<div class="grid-cell value capitalize">{{ config.legend.get('position') }}</div>
|
||||
</li>
|
||||
<li class="grid-row">
|
||||
<div class="grid-cell label"
|
||||
title="Hide the legend when the plot is small">Hide when plot small</div>
|
||||
<div class="grid-cell value">{{ config.legend.get('hideLegendWhenSmall') ? "Yes" : "No" }}</div>
|
||||
</li>
|
||||
<li class="grid-row">
|
||||
<div class="grid-cell label"
|
||||
title="Show the legend expanded by default">Expand by Default</div>
|
||||
|
||||
@ -174,7 +174,6 @@
|
||||
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>
|
||||
@ -182,6 +181,11 @@
|
||||
</select>
|
||||
</div>
|
||||
</li>
|
||||
<li class="grid-row">
|
||||
<div class="grid-cell label"
|
||||
title="Hide the legend when the plot is small">Hide when plot small</div>
|
||||
<div class="grid-cell value"><input type="checkbox" ng-model="form.hideLegendWhenSmall"/></div>
|
||||
</li>
|
||||
<li class="grid-row">
|
||||
<div class="grid-cell label"
|
||||
title="Show the legend expanded by default">Expand by default</div>
|
||||
|
||||
@ -48,6 +48,7 @@ define([
|
||||
return {
|
||||
position: 'top',
|
||||
expandByDefault: false,
|
||||
hideLegendWhenSmall: false,
|
||||
valueToShowWhenCollapsed: 'nearestValue',
|
||||
showTimestampWhenExpanded: true,
|
||||
showValueWhenExpanded: true,
|
||||
|
||||
@ -32,6 +32,11 @@ define([
|
||||
modelProp: 'position',
|
||||
objectPath: 'configuration.legend.position'
|
||||
},
|
||||
{
|
||||
modelProp: 'hideLegendWhenSmall',
|
||||
coerce: Boolean,
|
||||
objectPath: 'configuration.legend.hideLegendWhenSmall'
|
||||
},
|
||||
{
|
||||
modelProp: 'expandByDefault',
|
||||
coerce: Boolean,
|
||||
|
||||
Reference in New Issue
Block a user