ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-06-21 08:39:59 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

[Frontend] Set plot export buttons to show/hide on hover

Browse Source 
It's worth noting that I changed the .gl-plot position from relative to absolute
in an attempt to match the results to a similar requirement in MCT Table. Setting
to absolute caused no regressions as far as I could tell, but I have not attempted
browsers outside of Chrome.
This commit is contained in:
David Hudson
2016-09-02 19:36:39 +09:00
parent e7a7025961
commit 3736f84c12
1 changed files with 22 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -20,14 +20,35 @@
* at runtime from the About dialog for additional information. * at runtime from the About dialog for additional information.
*****************************************************************************/ *****************************************************************************/
.abs.holder-plot { .abs.holder-plot {
$btnExportH: $btnFrameH;
// Fend off the scrollbar when less than min-height; // Fend off the scrollbar when less than min-height;
right: $interiorMargin; right: $interiorMargin;
.s-button.t-export {
@include trans-prop-nice(opacity, $dur: 50ms);
opacity: 0;
}
.gl-plot {
@include trans-prop-nice(top, $dur: 150ms, $delay: 50ms);
top: 0;
}
&:hover {
.s-button.t-export {
@include trans-prop-nice(opacity, 150ms, 100ms);
opacity: 1;
}
.gl-plot {
@include trans-prop-nice(top, $dur: 150ms);
top: $btnExportH + $interiorMargin;
}
}
} }
.gl-plot { .gl-plot {
color: $colorPlotFg; color: $colorPlotFg;
font-size: 0.7rem; font-size: 0.7rem;
position: relative; position: absolute;
width: 100%; width: 100%;
height: 100%; height: 100%;
min-height: $plotMinH; min-height: $plotMinH;