[Frontend] Refactoring local controls hide and show

open #342
Now using CSS hover on pertinent plot areas;
Refining of select styling, tweaks for Firefox Linux;
Tweaks to local-control positioning in plots;
Changed *-options controls to use length > 1
instead of > 0;
This commit is contained in:
Charles Hacskaylo
2016-01-12 15:54:56 -08:00
parent 9cc03123b1
commit 8dd36d426c
5 changed files with 195 additions and 131 deletions

View File

@@ -25,6 +25,7 @@
margin: 0 0 2px 0; // Needed to avoid dropshadow from being clipped by parent containers
}
padding: 0 $interiorMargin;
overflow: hidden;
position: relative;
line-height: $formInputH;
select {
@@ -35,7 +36,7 @@
cursor: pointer;
border: none !important;
padding: 4px 25px 2px 0px;
width: 120%;
width: 130%;
option {
margin: $interiorMargin 0; // Firefox
}

View File

@@ -33,7 +33,22 @@ $plotDisplayArea: ($legendH + $interiorMargin, 0, $xBarH + $interiorMargin, $yBa
width: 100%;
height: 100%;
.gl-plot-local-controls {
@include trans-prop-nice(opacity, 150ms);
opacity: 0;
pointer-events: none;
}
.gl-plot-display-area,
.gl-plot-axis-area {
&:hover .gl-plot-local-controls {
opacity: 1;
pointer-events: inherit;
}
}
.gl-plot-axis-area {
//@include test();
position: absolute;
&.gl-plot-x {
top: auto;
@@ -114,15 +129,17 @@ $plotDisplayArea: ($legendH + $interiorMargin, 0, $xBarH + $interiorMargin, $yBa
.gl-plot-x-options,
.gl-plot-y-options {
$h: 32px;
$h: 24px;
position: absolute;
height: auto;
height: $h;
min-height: $h;
z-index: 2;
}
.gl-plot-x-options {
top: $interiorMargin;
@include transform(translateX(-50%));
bottom: 0;
left: 50%;
}
.gl-plot-y-options {
@@ -132,6 +149,12 @@ $plotDisplayArea: ($legendH + $interiorMargin, 0, $xBarH + $interiorMargin, $yBa
left: $yLabelW + $interiorMargin * 2;
}
.t-plot-display-controls {
position: absolute;
top: $interiorMargin;
right: $interiorMargin;
}
.gl-plot-hash {
position: absolute;
border: 0 $colorPlotHash $stylePlotHash;