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

[Frontend] Refactoring local controls hide and show

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

122
platform/commonUI/themes/espresso/res/css/theme-espresso.css
View File

@@ -4048,6 +4048,7 @@ textarea {
text-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px;
margin: 0 0 2px 0;
padding: 0 5px;
overflow: hidden;
position: relative;
line-height: 22px; }
/* line 297, ../../../../general/res/sass/_mixins.scss */
@@ -4065,7 +4066,7 @@ textarea {
/* line 304, ../../../../general/res/sass/_mixins.scss */
.select:not(.disabled):hover > .icon, .select:not(.disabled):hover > .t-item-icon {
color: #33ccff; } }
/* line 30, ../../../../general/res/sass/forms/_selects.scss */
/* line 31, ../../../../general/res/sass/forms/_selects.scss */
.select select {
-moz-appearance: none;
-webkit-appearance: none;
@@ -4077,11 +4078,11 @@ textarea {
cursor: pointer;
border: none !important;
padding: 4px 25px 2px 0px;
width: 120%; }
/* line 39, ../../../../general/res/sass/forms/_selects.scss */
width: 130%; }
/* line 40, ../../../../general/res/sass/forms/_selects.scss */
.select select option {
margin: 5px 0; }
/* line 43, ../../../../general/res/sass/forms/_selects.scss */
/* line 44, ../../../../general/res/sass/forms/_selects.scss */
.select:after {
text-shadow: none;
content: '\76';
@@ -6649,9 +6650,34 @@ table {
height: 100%;
/****************************** Limits and Out-of-Bounds data */ }
/* line 36, ../../../../general/res/sass/plots/_plots-main.scss */
.gl-plot .gl-plot-local-controls {
-moz-transition-property: opacity;
-o-transition-property: opacity;
-webkit-transition-property: opacity;
transition-property: opacity;
-moz-transition-duration: 150ms;
-o-transition-duration: 150ms;
-webkit-transition-duration: 150ms;
transition-duration: 150ms;
-moz-transition-timing-function: ease-in-out;
-o-transition-timing-function: ease-in-out;
-webkit-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
-moz-transition-delay: 0;
-o-transition-delay: 0;
-webkit-transition-delay: 0;
transition-delay: 0;
opacity: 0;
pointer-events: none; }
/* line 44, ../../../../general/res/sass/plots/_plots-main.scss */
.gl-plot .gl-plot-display-area:hover .gl-plot-local-controls,
.gl-plot .gl-plot-axis-area:hover .gl-plot-local-controls {
opacity: 1;
pointer-events: inherit; }
/* line 50, ../../../../general/res/sass/plots/_plots-main.scss */
.gl-plot .gl-plot-axis-area {
position: absolute; }
/* line 38, ../../../../general/res/sass/plots/_plots-main.scss */
/* line 53, ../../../../general/res/sass/plots/_plots-main.scss */
.gl-plot .gl-plot-axis-area.gl-plot-x {
top: auto;
right: 0;
@@ -6660,14 +6686,14 @@ table {
height: 32px;
width: auto;
overflow: hidden; }
/* line 47, ../../../../general/res/sass/plots/_plots-main.scss */
/* line 62, ../../../../general/res/sass/plots/_plots-main.scss */
.gl-plot .gl-plot-axis-area.gl-plot-y {
top: 25px;
right: auto;
bottom: 37px;
left: 0;
width: 60px; }
/* line 56, ../../../../general/res/sass/plots/_plots-main.scss */
/* line 71, ../../../../general/res/sass/plots/_plots-main.scss */
.gl-plot .gl-plot-coords {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
@@ -6684,10 +6710,10 @@ table {
bottom: auto;
left: 70px;
z-index: 10; }
/* line 68, ../../../../general/res/sass/plots/_plots-main.scss */
/* line 83, ../../../../general/res/sass/plots/_plots-main.scss */
.gl-plot .gl-plot-coords:empty {
display: none; }
/* line 73, ../../../../general/res/sass/plots/_plots-main.scss */
/* line 88, ../../../../general/res/sass/plots/_plots-main.scss */
.gl-plot .gl-plot-display-area {
background-color: rgba(0, 0, 0, 0.1);
position: absolute;
@@ -6697,13 +6723,13 @@ table {
left: 60px;
cursor: crosshair;
border: 1px solid rgba(153, 153, 153, 0.1); }
/* line 86, ../../../../general/res/sass/plots/_plots-main.scss */
/* line 101, ../../../../general/res/sass/plots/_plots-main.scss */
.gl-plot .gl-plot-label,
.gl-plot .l-plot-label {
color: #666666;
position: absolute;
text-align: center; }
/* line 92, ../../../../general/res/sass/plots/_plots-main.scss */
/* line 107, ../../../../general/res/sass/plots/_plots-main.scss */
.gl-plot .gl-plot-label.gl-plot-x-label, .gl-plot .gl-plot-label.l-plot-x-label,
.gl-plot .l-plot-label.gl-plot-x-label,
.gl-plot .l-plot-label.l-plot-x-label {
@@ -6712,7 +6738,7 @@ table {
bottom: 0;
left: 0;
height: auto; }
/* line 101, ../../../../general/res/sass/plots/_plots-main.scss */
/* line 116, ../../../../general/res/sass/plots/_plots-main.scss */
.gl-plot .gl-plot-label.gl-plot-y-label, .gl-plot .gl-plot-label.l-plot-y-label,
.gl-plot .l-plot-label.gl-plot-y-label,
.gl-plot .l-plot-label.l-plot-y-label {
@@ -6729,17 +6755,22 @@ table {
left: 0;
top: 50%;
white-space: nowrap; }
/* line 115, ../../../../general/res/sass/plots/_plots-main.scss */
/* line 130, ../../../../general/res/sass/plots/_plots-main.scss */
.gl-plot .gl-plot-x-options,
.gl-plot .gl-plot-y-options {
position: absolute;
height: auto;
min-height: 32px;
height: 24px;
min-height: 24px;
z-index: 2; }
/* line 124, ../../../../general/res/sass/plots/_plots-main.scss */
/* line 139, ../../../../general/res/sass/plots/_plots-main.scss */
.gl-plot .gl-plot-x-options {
top: 5px; }
/* line 128, ../../../../general/res/sass/plots/_plots-main.scss */
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
bottom: 0;
left: 50%; }
/* line 145, ../../../../general/res/sass/plots/_plots-main.scss */
.gl-plot .gl-plot-y-options {
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
@@ -6748,19 +6779,24 @@ table {
min-width: 150px;
top: 50%;
left: 20px; }
/* line 135, ../../../../general/res/sass/plots/_plots-main.scss */
/* line 152, ../../../../general/res/sass/plots/_plots-main.scss */
.gl-plot .t-plot-display-controls {
position: absolute;
top: 5px;
right: 5px; }
/* line 158, ../../../../general/res/sass/plots/_plots-main.scss */
.gl-plot .gl-plot-hash {
position: absolute;
border: 0 rgba(255, 255, 255, 0.2) dashed; }
/* line 138, ../../../../general/res/sass/plots/_plots-main.scss */
/* line 161, ../../../../general/res/sass/plots/_plots-main.scss */
.gl-plot .gl-plot-hash.hash-v {
border-right-width: 1px;
height: 100%; }
/* line 142, ../../../../general/res/sass/plots/_plots-main.scss */
/* line 165, ../../../../general/res/sass/plots/_plots-main.scss */
.gl-plot .gl-plot-hash.hash-h {
border-bottom-width: 1px;
width: 100%; }
/* line 148, ../../../../general/res/sass/plots/_plots-main.scss */
/* line 171, ../../../../general/res/sass/plots/_plots-main.scss */
.gl-plot .gl-plot-legend {
position: absolute;
top: 0;
@@ -6770,24 +6806,24 @@ table {
height: 20px;
overflow-x: hidden;
overflow-y: auto; }
/* line 161, ../../../../general/res/sass/plots/_plots-main.scss */
/* line 184, ../../../../general/res/sass/plots/_plots-main.scss */
.gl-plot .l-limit-bar,
.gl-plot .l-oob-data {
position: absolute;
left: 0;
right: 0;
width: auto; }
/* line 169, ../../../../general/res/sass/plots/_plots-main.scss */
/* line 192, ../../../../general/res/sass/plots/_plots-main.scss */
.gl-plot .l-limit-bar {
height: auto;
z-index: 0; }
/* line 177, ../../../../general/res/sass/plots/_plots-main.scss */
/* line 200, ../../../../general/res/sass/plots/_plots-main.scss */
.gl-plot .l-limit-bar.s-limit-yellow {
background: rgba(255, 170, 0, 0.2); }
/* line 178, ../../../../general/res/sass/plots/_plots-main.scss */
/* line 201, ../../../../general/res/sass/plots/_plots-main.scss */
.gl-plot .l-limit-bar.s-limit-red {
background: rgba(255, 0, 0, 0.2); }
/* line 181, ../../../../general/res/sass/plots/_plots-main.scss */
/* line 204, ../../../../general/res/sass/plots/_plots-main.scss */
.gl-plot .l-oob-data {
overflow: hidden;
position: absolute;
@@ -6800,7 +6836,7 @@ table {
pointer-events: none;
height: 10px;
z-index: 1; }
/* line 189, ../../../../general/res/sass/plots/_plots-main.scss */
/* line 212, ../../../../general/res/sass/plots/_plots-main.scss */
.gl-plot .l-oob-data.l-oob-data-up {
top: 0;
bottom: auto;
@@ -6809,7 +6845,7 @@ table {
background-image: -moz-linear-gradient(90deg, rgba(119, 72, 214, 0), rgba(119, 72, 214, 0.5) 100%);
background-image: -webkit-linear-gradient(90deg, rgba(119, 72, 214, 0), rgba(119, 72, 214, 0.5) 100%);
background-image: linear-gradient(0deg, rgba(119, 72, 214, 0), rgba(119, 72, 214, 0.5) 100%); }
/* line 194, ../../../../general/res/sass/plots/_plots-main.scss */
/* line 217, ../../../../general/res/sass/plots/_plots-main.scss */
.gl-plot .l-oob-data.l-oob-data-dwn {
bottom: 0;
top: auto;
@@ -6819,7 +6855,7 @@ table {
background-image: -webkit-linear-gradient(270deg, rgba(119, 72, 214, 0), rgba(119, 72, 214, 0.5) 100%);
background-image: linear-gradient(180deg, rgba(119, 72, 214, 0), rgba(119, 72, 214, 0.5) 100%); }
/* line 204, ../../../../general/res/sass/plots/_plots-main.scss */
/* line 227, ../../../../general/res/sass/plots/_plots-main.scss */
.gl-plot-legend .plot-legend-item,
.gl-plot-legend .legend-item,
.legend .plot-legend-item,
@@ -6827,13 +6863,13 @@ table {
display: inline-block;
margin-right: 10px;
margin-bottom: 3px; }
/* line 209, ../../../../general/res/sass/plots/_plots-main.scss */
/* line 232, ../../../../general/res/sass/plots/_plots-main.scss */
.gl-plot-legend .plot-legend-item span,
.gl-plot-legend .legend-item span,
.legend .plot-legend-item span,
.legend .legend-item span {
vertical-align: middle; }
/* line 212, ../../../../general/res/sass/plots/_plots-main.scss */
/* line 235, ../../../../general/res/sass/plots/_plots-main.scss */
.gl-plot-legend .plot-legend-item .plot-color-swatch,
.gl-plot-legend .plot-legend-item .color-swatch,
.gl-plot-legend .legend-item .plot-color-swatch,
@@ -6849,29 +6885,29 @@ table {
height: 8px;
width: 8px; }
/* line 223, ../../../../general/res/sass/plots/_plots-main.scss */
/* line 246, ../../../../general/res/sass/plots/_plots-main.scss */
.gl-plot-legend .plot-legend-item {
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
line-height: 1.5em;
padding: 0px 5px; }
/* line 227, ../../../../general/res/sass/plots/_plots-main.scss */
/* line 250, ../../../../general/res/sass/plots/_plots-main.scss */
.gl-plot-legend .plot-legend-item .plot-color-swatch {
border: 1px solid #333;
height: 9px;
width: 9px; }
/* line 235, ../../../../general/res/sass/plots/_plots-main.scss */
/* line 258, ../../../../general/res/sass/plots/_plots-main.scss */
.tick {
position: absolute;
border: 0 rgba(255, 255, 255, 0.2) solid; }
/* line 238, ../../../../general/res/sass/plots/_plots-main.scss */
/* line 261, ../../../../general/res/sass/plots/_plots-main.scss */
.tick.tick-x {
border-right-width: 1px;
height: 100%; }
/* line 244, ../../../../general/res/sass/plots/_plots-main.scss */
/* line 267, ../../../../general/res/sass/plots/_plots-main.scss */
.gl-plot-tick,
.tick-label {
font-size: 0.7rem;
@@ -6879,7 +6915,7 @@ table {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis; }
/* line 251, ../../../../general/res/sass/plots/_plots-main.scss */
/* line 274, ../../../../general/res/sass/plots/_plots-main.scss */
.gl-plot-tick.gl-plot-x-tick-label, .gl-plot-tick.tick-label-x,
.tick-label.gl-plot-x-tick-label,
.tick-label.tick-label-x {
@@ -6890,7 +6926,7 @@ table {
width: 20%;
margin-left: -10%;
text-align: center; }
/* line 261, ../../../../general/res/sass/plots/_plots-main.scss */
/* line 284, ../../../../general/res/sass/plots/_plots-main.scss */
.gl-plot-tick.gl-plot-y-tick-label, .gl-plot-tick.tick-label-y,
.tick-label.gl-plot-y-tick-label,
.tick-label.tick-label-y {
@@ -6900,18 +6936,18 @@ table {
margin-bottom: -0.5em;
text-align: right; }
/* line 272, ../../../../general/res/sass/plots/_plots-main.scss */
/* line 295, ../../../../general/res/sass/plots/_plots-main.scss */
.gl-plot-tick.gl-plot-x-tick-label {
top: 5px; }
/* line 275, ../../../../general/res/sass/plots/_plots-main.scss */
/* line 298, ../../../../general/res/sass/plots/_plots-main.scss */
.gl-plot-tick.gl-plot-y-tick-label {
right: 5px;
left: 5px; }
/* line 282, ../../../../general/res/sass/plots/_plots-main.scss */
/* line 305, ../../../../general/res/sass/plots/_plots-main.scss */
.tick-label.tick-label-x {
top: 0; }
/* line 285, ../../../../general/res/sass/plots/_plots-main.scss */
/* line 308, ../../../../general/res/sass/plots/_plots-main.scss */
.tick-label.tick-label-y {
right: 0;
left: 0; }