ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-06-19 23:53:49 +00:00
Code Issues Actions 4 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
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; display: none !important;
} }
.hide-nice {
opacity: 0;
pointer-events: none;
}
.off { .off {
visibility: hidden; visibility: hidden;
opacity: 0; opacity: 0;

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

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

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

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

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

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

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

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

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

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