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

[Frontend] WIP style plot legends

Browse Source 
Fixes #1590
Incremental progress.
This commit is contained in:
Charles Hacskaylo
2017-05-22 16:02:54 -07:00
parent cb154e8bd2
commit 0788397cf0
4 changed files with 61 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
platform/commonUI/general/res/sass/plots/_plots-main.scss
View File

@@ -56,16 +56,14 @@
.plot-wrapper-expanded-legend {
table {
td:not(.plot-legend-header-name) { text-align: right; }
td:not(.plot-series-swatch-and-name) { text-align: right; }
}
}
&.hover-on-plot {
// User is hovering over the plot to get a value at a point
.plot-legend-item-elem {
&.plot-series-value {
@include test(green);
}
.hover-value-enabled {
@include test($colorKey);
}
}
}
@@ -76,51 +74,62 @@
line-height: 1.5em;
padding: 0px $itemPadLR;
// General styles for both expanded and collapsed legend states
.plot-legend-item-elem {
//@include test();
&.plot-series-color-swatch {
border-radius: $smallCr;
border: 1px solid $colorBodyBg;
display: inline-block;
height: $plotSwatchD;
width: $plotSwatchD;
}
.plot-series-swatch-and-name {
white-space: nowrap;
}
&.plot-series-name {
//border: 1px solid $colorBodyBg;
//height: $plotSwatchD + 1;
//width: $plotSwatchD + 1;
}
.plot-series-color-swatch {
border-radius: $smallCr;
border: 1px solid $colorBodyBg;
display: inline-block;
height: $plotSwatchD;
width: $plotSwatchD;
}
&.plot-series-value {
//border: 1px solid $colorBodyBg;
//height: $plotSwatchD + 1;
//width: $plotSwatchD + 1;
}
.plot-series-name {
//display: inline-block;
//@include ellipsize();
//border: 1px solid $colorBodyBg;
//height: $plotSwatchD + 1;
//width: $plotSwatchD + 1;
}
.plot-series-value {
display: inline-block;
@include ellipsize();
//border: 1px solid $colorBodyBg;
//height: $plotSwatchD + 1;
//width: $plotSwatchD + 1;
}
}
&:not(.plot-legend-expanded) {
// General styles for COLLAPSED legend. .plot-legend-item is a span of spans.
//Todos:
// Legend items should be display block, value should be block as well
.plot-legend-item {
display: inline-block;
margin-right: $interiorMarginLg;
margin-bottom: $interiorMarginSm;
.plot-legend-item-elem {
display: inline-block;
vertical-align: middle;
.plot-series-swatch-and-name {
@include ellipsize();
display: block;
//max-width: $legendCollapsedNameMaxW;
}
.plot-series-name {
}
.plot-series-value {
display: block;
//max-width: 100% - $legendCollapsedNameMaxW;
}
}
}
&.plot-legend-expanded {
// General styles for EXPANDED legend. .plot-legend-item is a table row.
// General styles for EXPANDED legend.
.plot-legend-item {
// Is a <tr>
}
}
@@ -141,12 +150,15 @@
}
&:not(.plot-legend-expanded) {
.gl-plot-legend {
width: 25%;
}
.plot-legend-item {
@include test(orange);
//@include test(orange);
display: block;
}
.plot-wrapper-axis-and-display-area {
@include test(blue);
//@include test(blue);
}
}
}

1
platform/commonUI/themes/espresso/res/sass/_constants.scss
View File

@@ -173,6 +173,7 @@ $colorPlotHash: $colorTick;
$stylePlotHash: dashed;
$colorPlotAreaBorder: $colorInteriorBorder;
$colorPlotLabelFg: pushBack($colorPlotFg, 20%);
$legendCollapsedNameMaxW: 50%;
// Tree
$colorItemTreeHoverBg: pullForward($colorBodyBg, $hoverRatioPercent);

1
platform/commonUI/themes/snow/res/sass/_constants.scss
View File

@@ -173,6 +173,7 @@ $colorPlotHash: $colorTick;
$stylePlotHash: dashed;
$colorPlotAreaBorder: $colorInteriorBorder;
$colorPlotLabelFg: pushBack($colorPlotFg, 20%);
$legendCollapsedNameMaxW: 50%;
// Tree
$colorItemTreeHoverBg: pullForward($colorBodyBg, $hoverRatioPercent);

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

@@ -18,11 +18,13 @@
<div class="plot-wrapper-collapsed-legend flex-elem grows" ng-show="!legend.get('expanded')">
<span class="plot-legend-item"
ng-repeat="series in series track by $index">
<span class="plot-legend-item-elem plot-series-color-swatch"
ng-style="{ 'background-color': series.get('color').asHexString() }">
<span class="plot-series-swatch-and-name">
<span class="plot-series-color-swatch"
ng-style="{ 'background-color': series.get('color').asHexString() }">
</span>
<span class="plot-series-name">{{ series.get('name') }}</span>
</span>
<span class="plot-legend-item-elem plot-series-name">{{ series.get('name') }}</span>
<span class="plot-legend-item-elem plot-series-value">
<span class="plot-series-value hover-value-enabled">
{{ legend.get('valueToShowWhenCollapsed') === 'nearestValue' ?
series.format(series.closest, yAxis.get('key')) :
legend.get('valueToShowWhenCollapsed') === 'nearestTimestamp' ?
@@ -46,19 +48,21 @@
</tr>
</thead>
<tr ng-repeat="series in series" class="plot-legend-item">
<td class="plot-legend-header-name">
<span class="plot-legend-item-elem plot-series-color-swatch"
<td class="plot-series-swatch-and-name">
<span class="plot-series-color-swatch"
ng-style="{ 'background-color': series.get('color').asHexString() }">
</span>
<span class="plot-legend-item-elem plot-series-name">{{ series.get('name') }}</span>
<span class="plot-series-name">{{ series.get('name') }}</span>
</td>
<td class="plot-legend-item-elem plot-series-value" ng-repeat="value in legend.get('valuesToShowWhenExpanded')">
{{ value === 'nearestValue' ?
<td ng-repeat="value in legend.get('valuesToShowWhenExpanded')">
<span class="plot-series-value hover-value-enabled">
{{ value === 'nearestValue' ?
series.format(series.closest, yAxis.get('key')) :
value === 'nearestTimestamp' ?
series.closest && series.format(series.closest, xAxis.get('key')) :
series.format(series.stats.get(yAxis.get('key'))[value], yAxis.get('key'));
}}
</span>
</td>
</tr>
</table>