ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-03-25 13:28:38 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

[Frontend] Styling for controls

Browse Source 
Fixes #1324
CSS, markup, WIP adding reset button
This commit is contained in:
Charles Hacskaylo 2016-11-15 10:54:00 -08:00
parent 251e3b5646
commit 9b11684ae9
6 changed files with 27 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
platform/commonUI/general/res/sass/_global.scss
View File

@ -175,6 +175,11 @@ a.disabled {
display: none !important;
}
.hide-nice {
opacity: 0;
pointer-events: none;
}
.off {
visibility: hidden;
opacity: 0;

5
platform/commonUI/general/res/sass/controls/_controls.scss
View File

@ -122,17 +122,18 @@
// Default position is upper right
$p: $interiorMargin;
position: absolute;
top: $p; right: $p; bottom: auto; left: $p;
top: $p; right: $p; bottom: auto;
text-align: right;
z-index: 5;
}
.s-local-controls {
@include trans-prop-nice(opacity);
font-size: 0.7rem;
&.s-wrapper-transluc {
// Semi-opaque wrapper to visually distinguish a control
// from the background
background: rgba($colorBodyFg, 0.2);
background: rgba($colorTransLucBg, 0.5);
box-sizing: border-box;
border-radius: $controlCr;
}

5
platform/commonUI/general/res/sass/features/_imagery.scss
View File

@ -1,5 +1,6 @@
.l-image-main-wrapper,
.l-image-thumbs-wrapper {
.l-image-thumbs-wrapper,
.image-main {
@include absPosDefault(0, false);
}
@ -32,7 +33,7 @@
/*************************************** MAIN IMAGE */
.l-image-main,
.image-main,
.l-image-thumb-item .l-thumb {
background-size: contain;
background-position: center;

1
platform/commonUI/themes/espresso/res/sass/_constants.scss
View File

@ -50,6 +50,7 @@ $sliderKnobW: 15px;
$sliderKnobR: 2px;
$timeControllerToiLineColor: #00c2ff;
$timeControllerToiLineColorHov: #fff;
$colorTransLucBg: #666; // Used as a visual blocking element over variable backgrounds, like imagery
// General Colors
$colorAlt1: #ffc700;

1
platform/commonUI/themes/snow/res/sass/_constants.scss
View File

@ -50,6 +50,7 @@ $sliderKnobW: 15px;
$sliderKnobR: 2px;
$timeControllerToiLineColor: $colorBodyFg;
$timeControllerToiLineColorHov: #0052b5;
$colorTransLucBg: #666; // Used as a visual blocking element over variable backgrounds, like imagery
// General Colors
$colorAlt1: #776ba2;

23
platform/features/imagery/res/templates/imagery.html
View File

@ -3,24 +3,29 @@
ng-mouseenter="showLocalControls = true;"
ng-mouseleave="showLocalControls = false;">
<div class="l-local-controls s-local-controls s-wrapper-transluc"
ng-show="showLocalControls">
<input class="icon-contrast" type="range"
min="0"
max="200"
ng-model="filters.contrast">
</input>
ng-class="{ 'hide-nice': !showLocalControls }">
<input class="icon-brightness" type="range"
min="0"
max="200"
max="1000"
ng-model="filters.brightness">
</input>
<input class="icon-contrast" type="range"
min="0"
max="1000"
ng-model="filters.contrast">
</input>
<a class="s-button icon-refresh" ng-click="
filters.brightness = 100;
filters.contrast = 100
"></a>
</div>
<div class="l-image-main s-image-main flex-elem grows"
ng-class="{ paused: imagery.paused(), stale:false }"
ng-class="{ paused: imagery.paused(), stale:false }">
<div class="image-main"
mct-background-image="imagery.getImageUrl()"
filters="filters">
</div>
</div>
<div class="l-image-main-controlbar flex-elem l-flex-row">