mirror of
https://github.com/nasa/openmct.git
synced 2025-02-20 17:33:23 +00:00
[Plots] Fix wrapping of Y Axis when height is small (#6264)
* New branch to fix y-axis icons * test: fix locator --------- Co-authored-by: Jesse Mazzella <jesse.d.mazzella@nasa.gov>
This commit is contained in:
parent
b39d5e8bcc
commit
5df7971438
@ -53,7 +53,7 @@ test.describe('Overlay Plot', () => {
|
||||
await page.locator('.c-click-swatch--menu').click();
|
||||
await page.locator('.c-palette__item[style="background: rgb(255, 166, 61);"]').click();
|
||||
// gets color for swatch located in legend
|
||||
const seriesColorSwatch = page.locator('.gl-plot-label > .plot-series-color-swatch');
|
||||
const seriesColorSwatch = page.locator('.gl-plot-y-label-swatch-container > .plot-series-color-swatch');
|
||||
await expect(seriesColorSwatch).toHaveCSS('background-color', 'rgb(255, 166, 61)');
|
||||
});
|
||||
|
||||
|
@ -28,13 +28,15 @@
|
||||
<div
|
||||
class="gl-plot-label gl-plot-y-label"
|
||||
>
|
||||
<span
|
||||
v-for="(colorAsHexString, index) in seriesColors"
|
||||
:key="`${colorAsHexString}-${index}`"
|
||||
class="plot-series-color-swatch"
|
||||
:style="{ 'background-color': colorAsHexString }"
|
||||
>
|
||||
</span>
|
||||
<div class="gl-plot-y-label-swatch-container">
|
||||
<span
|
||||
v-for="(colorAsHexString, index) in seriesColors"
|
||||
:key="`${colorAsHexString}-${index}`"
|
||||
class="plot-series-color-swatch"
|
||||
:style="{ 'background-color': colorAsHexString }"
|
||||
>
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
:class="{'icon-gear-after': (yKeyOptions.length > 1 && singleSeries)}"
|
||||
>{{ canShowYAxisLabel ? yAxisLabel : `Y Axis ${id}` }}</span>
|
||||
|
@ -251,7 +251,7 @@ mct-plot {
|
||||
}
|
||||
|
||||
&.gl-plot-y-label {
|
||||
display: block;
|
||||
display: flex;
|
||||
left: 0; right: auto; bottom: 0;
|
||||
text-orientation: mixed;
|
||||
writing-mode: vertical-lr;
|
||||
@ -275,7 +275,11 @@ mct-plot {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.gl-plot-y-label-swatch-container{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
overflow: auto;
|
||||
}
|
||||
.plot-yaxis-right {
|
||||
&.gl-plot-y { margin-left: 100%; }
|
||||
|
||||
|
Loading…
x
Reference in New Issue
Block a user