ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-06-17 14:48:13 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

[Frontend] Mods to slider .range-value elems

Browse Source 
open #889
- Text smaller, line breaks;
- Height adjustments
- Increased with of slider area;
This commit is contained in:
Charles Hacskaylo
2016-05-09 10:16:54 -07:00
parent d6aa31e4aa
commit cae85f3e30
5 changed files with 23 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
platform/commonUI/general/res/sass/_constants.scss
View File

@ -48,7 +48,7 @@ $uePaneMiniTabW: 10px;
$uePaneMiniTabCollapsedW: 11px; $uePaneMiniTabCollapsedW: 11px;
$ueEditLeftPaneW: 75%; $ueEditLeftPaneW: 75%;
$treeSearchInputBarH: 25px; $treeSearchInputBarH: 25px;
$ueTimeControlH: (33px, 20px, 20px); $ueTimeControlH: (33px, 23px, 15px);
// Panes // Panes
$ueBrowseLeftPaneTreeMinW: 150px; $ueBrowseLeftPaneTreeMinW: 150px;
$ueBrowseLeftPaneTreeMaxW: 35%; $ueBrowseLeftPaneTreeMaxW: 35%;

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

@ -404,11 +404,11 @@ body.desktop .object-header {
left: auto; left: auto;
} }
.knob-l { .knob-l {
@include border-left-radius($sliderKnobW); @include border-left-radius($sliderKnobR);
cursor: w-resize; cursor: w-resize;
} }
.knob-r { .knob-r {
@include border-right-radius($sliderKnobW); @include border-right-radius($sliderKnobR);
cursor: e-resize; cursor: e-resize;
} }
.range { .range {

25
platform/commonUI/general/res/sass/controls/_time-controller.scss
View File

@ -11,7 +11,7 @@
$knobM: ($sliderKnobW + $knobHOffset) * -1; $knobM: ($sliderKnobW + $knobHOffset) * -1;
$rangeValPad: $interiorMargin; $rangeValPad: $interiorMargin;
$rangeValOffset: $sliderKnobW; $rangeValOffset: $sliderKnobW;
$timeRangeSliderLROffset: 130px + $sliderKnobW + $rangeValOffset; $timeRangeSliderLROffset: 80px + ($sliderKnobW * 2);
$r1H: nth($ueTimeControlH,1); $r1H: nth($ueTimeControlH,1);
$r2H: nth($ueTimeControlH,2); $r2H: nth($ueTimeControlH,2);
$r3H: nth($ueTimeControlH,3); $r3H: nth($ueTimeControlH,3);
@ -76,22 +76,23 @@
&:before, &:before,
&:after { &:after {
background-color: $myC; background-color: $myC;
content: ""; //content: "";
position: absolute; position: absolute;
} }
&:before { &:before {
// Vert line // Vert line
content: "";
top: 0; right: auto; bottom: -10px; left: floor($myW/2) - 1; top: 0; right: auto; bottom: -10px; left: floor($myW/2) - 1;
width: 2px; width: 1px;
} }
&:after { /* &:after {
// Circle element // Circle element
border-radius: $myW; border-radius: $myW;
@include transform(translateY(-50%)); @include transform(translateY(-50%));
top: 50%; right: 0; bottom: auto; left: 0; top: 50%; right: 0; bottom: auto; left: 0;
width: auto; width: auto;
height: $myW; height: $myW;
} }*/
} }
&:hover .toi-line { &:hover .toi-line {
@include toiLineHovEffects; @include toiLineHovEffects;
@ -126,9 +127,9 @@
@include webkitProp(transform, translateX(-50%)); @include webkitProp(transform, translateX(-50%));
color: $colorPlotLabelFg; color: $colorPlotLabelFg;
display: inline-block; display: inline-block;
font-size: 0.9em; font-size: 0.7rem;
position: absolute; position: absolute;
top: 8px; top: 5px;
white-space: nowrap; white-space: nowrap;
z-index: 2; z-index: 2;
} }
@ -140,14 +141,18 @@
z-index: 2; z-index: 2;
.range-value { .range-value {
@include trans-prop-nice-fade(.25s); @include trans-prop-nice-fade(.25s);
//background: rgba(red, 0.4);
font-size: 0.7rem;
padding: 0 $rangeValOffset; padding: 0 $rangeValOffset;
position: absolute; position: absolute;
height: $r2H; height: $r2H;
line-height: $r2H; line-height: $r2H/2;
white-space: nowrap; z-index: 1;
} }
&:hover .range-value { &:hover {
.range-value {
color: $sliderColorKnobHov; color: $sliderColorKnobHov;
}
} }
&.knob-l { &.knob-l {
margin-left: $knobM; margin-left: $knobM;

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

@ -36,7 +36,8 @@ $sliderColorKnob: rgba($sliderColorBase, 0.6);
$sliderColorKnobHov: $sliderColorBase; $sliderColorKnobHov: $sliderColorBase;
$sliderColorRangeValHovBg: rgba($sliderColorBase, 0.1); $sliderColorRangeValHovBg: rgba($sliderColorBase, 0.1);
$sliderColorRangeValHovFg: $colorKeyFg; $sliderColorRangeValHovFg: $colorKeyFg;
$sliderKnobW: nth($ueTimeControlH,2)/2; $sliderKnobW: 5px; //nth($ueTimeControlH,2)/2;
$sliderKnobR: 2px;
$timeControllerToiLineColor: #00c2ff; $timeControllerToiLineColor: #00c2ff;
$timeControllerToiLineColorHov: #fff; $timeControllerToiLineColorHov: #fff;

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

@ -36,7 +36,8 @@ $sliderColorKnob: rgba($sliderColorBase, 0.5);
$sliderColorKnobHov: rgba($sliderColorBase, 0.7); $sliderColorKnobHov: rgba($sliderColorBase, 0.7);
$sliderColorRangeValHovBg: $sliderColorRange; //rgba($sliderColorBase, 0.1); $sliderColorRangeValHovBg: $sliderColorRange; //rgba($sliderColorBase, 0.1);
$sliderColorRangeValHovFg: $colorBodyFg; $sliderColorRangeValHovFg: $colorBodyFg;
$sliderKnobW: nth($ueTimeControlH,2)/2; $sliderKnobW: 5px; //nth($ueTimeControlH,2)/2;
$sliderKnobR: 2px;
$timeControllerToiLineColor: $colorBodyFg; $timeControllerToiLineColor: $colorBodyFg;
$timeControllerToiLineColorHov: #0052b5; $timeControllerToiLineColorHov: #0052b5;