ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2024-12-19 13:17:53 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Fix Plot Legend placement (#2527)

Browse Source 
* Push test

* Enhance plot legend placement for #2486

- Left and right legends now maintain position when expanded;

* Update index.html

- Remove erroneously committed temp change ;
This commit is contained in:
Charles Hacskaylo 2019-11-08 15:31:29 -08:00 committed by Deep Tailor
parent 527c5ec7dd
commit e58e9d3a26
2 changed files with 20 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/styles/_constants.scss
View File

@ -58,6 +58,8 @@ $plotYLabelMinH: 20px;
$plotYLabelW: 10px;
$plotXBarH: 35px;
$plotLegendH: 20px;
$plotLegendWidthCollapsed: 20%;
$plotLegendWidthExpanded: 50%;
$plotSwatchD: 8px;
$plotDisplayArea: (0, 0, $plotXBarH, $plotYBarW); // 1: Top, 2: right, 3: bottom, 4: left
$plotMinH: 95px;

30
src/styles/_legacy-plots.scss
View File

@ -78,7 +78,6 @@ mct-plot {
/*********************** AXIS AND DISPLAY AREA */
.plot-wrapper-axis-and-display-area {
margin-top: $interiorMargin; // Keep the top tick label from getting clipped
position: relative;
flex: 1 1 auto;
@ -460,13 +459,14 @@ mct-plot {
&.plot-legend-collapsed .icon-cursor-lock::before { padding-right: 5px; }
&.plot-legend-expanded .icon-cursor-lock::before { padding-right: 5px; }
&.plot-legend-top .gl-plot-legend { margin-bottom: $interiorMargin; }
&.plot-legend-bottom .gl-plot-legend { margin-top: $interiorMargin; }
&.plot-legend-right .gl-plot-legend { margin-left: $interiorMargin; }
&.plot-legend-left .gl-plot-legend { margin-right: $interiorMargin; }
/***************** GENERAL STYLES, COLLAPSED */
&.plot-legend-collapsed {
// .plot-legend-item is a span of spans.
&.plot-legend-top .gl-plot-legend { margin-bottom: $interiorMargin; }
&.plot-legend-bottom .gl-plot-legend { margin-top: $interiorMargin; }
&.plot-legend-right .gl-plot-legend { margin-left: $interiorMargin; }
&.plot-legend-left .gl-plot-legend { margin-right: $interiorMargin; }
.plot-legend-item {
display: flex;
@ -494,7 +494,7 @@ mct-plot {
/***************** GENERAL STYLES, EXPANDED */
&.plot-legend-expanded {
.gl-plot-legend {
max-height: 70%;
// max-height: 70%;
}
.plot-wrapper-expanded-legend {
@ -518,21 +518,27 @@ mct-plot {
}
}
/***************** EITHER SIDE */
/***************** LEFT OR RIGHT */
&.plot-legend-left,
&.plot-legend-right {
// If the legend is expanded, use flex-col instead so that the legend gets the width it needs.
// General styles when legend is on left or right
.gl-plot-legend {
max-height: inherit;
}
&.plot-legend-expanded {
// EXPANDED, ON EITHER SIDE
flex-direction: column;
.gl-plot-legend {
width: $plotLegendWidthExpanded;
}
}
&.plot-legend-collapsed {
// COLLAPSED, ON EITHER SIDE
.gl-plot-legend {
max-height: inherit;
width: 25%;
width: $plotLegendWidthCollapsed;
}
.plot-wrapper-collapsed-legend {
display: flex;
flex-flow: column nowrap;
@ -557,7 +563,7 @@ mct-plot {
}
/***************** ON BOTTOM OR RIGHT */
&.plot-legend-right:not(.plot-legend-expanded),
&.plot-legend-right,
&.plot-legend-bottom {
.gl-plot-legend {
order: 2;