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

[Frontend] Time Controller Markup and Styling

Browse Source 
open #1515
open #117
Changed slider elements layout from relative to
absolute positioning;
Refined layout in input-holder;
Tweaks to hover classes;
This commit is contained in:
Charles Hacskaylo
2015-09-24 10:34:32 -07:00
parent 9f7dc1da9b
commit 825d93cee3
9 changed files with 5988 additions and 197 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
platform/commonUI/general/res/sass/_icons.scss
View File

@@ -29,6 +29,9 @@
}
.ui-symbol {
&.type-icon {
color: $colorObjHdrIc;
}
&.icon {
color: $colorKey;
&.alert {

7
platform/commonUI/general/res/sass/_mixins.scss
View File

@@ -347,9 +347,10 @@
/* This doesn't work on an element inside an element with absolute positioning that has height: auto */
//position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
@include webkitProp(transform, translateY(-50%));
//-webkit-transform: translateY(-50%);
//-ms-transform: translateY(-50%);
//transform: translateY(-50%);
}
@mixin verticalCenterBlock($holderH, $itemH) {

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

@@ -1,12 +1,9 @@
.l-time-controller {
$timeRangeSliderLROffset: 125px;
//$sliderKnobW: 9px;
$r1H: 20px;
$r1H: 33px;
$r2H: 20px;
$r3H: 10px;
$r3H: 20px;
position: relative;
margin: $interiorMarginLg 0;
min-width: 400px;
.l-time-range-inputs-holder,
@@ -18,8 +15,10 @@
.l-time-range-slider-holder,
.l-time-range-ticks-holder
{
margin-bottom: $interiorMargin;
position: relative;
//@include test();
@include absPosDefault(0, visible);
@include box-sizing(border-box);
top: auto;
}
.l-time-range-slider,
.l-time-range-ticks {
@@ -29,10 +28,19 @@
.l-time-range-inputs-holder {
//@include test(red);
height: $r1H;
.l-time-range-input {
//display: inline-block;
margin-right: $interiorMarginLg;
height: $r1H; bottom: $r2H + $r3H + ($interiorMarginSm * 2);
padding-top: $interiorMargin;
border-top: 1px solid $colorInteriorBorder;
.type-icon {
font-size: 120%;
vertical-align: middle;
}
.l-time-range-input,
.l-time-range-inputs-elem {
margin-right: $interiorMargin;
.lbl {
color: $colorPlotLabelFg;
}
.ui-symbol.icon {
font-size: 11px;
width: 11px;
@@ -48,35 +56,36 @@
.l-time-range-slider-holder {
//@include test(green);
height: $r2H;
height: $r2H; bottom: $r3H + ($interiorMarginSm * 1);
.range-holder {
@include box-shadow(none);
background: none;
border: none;
//height: 75%;
}
}
}
.l-time-range-ticks-holder {
height: $r3H;
.l-time-range-ticks {
border-top: 1px solid $colorInteriorBorder;
border-top: 1px solid $colorTick;
.tick {
background-color: $colorInteriorBorder;
background-color: $colorTick;
border:none;
height: 5px;
width: 1px;
margin-left: -1px;
position: absolute;
&:first-child {
margin-left: 0;
}
.l-time-range-tick-label {
color: lighten($colorInteriorBorder, 20%);
@include webkitProp(transform, translateX(-50%));
color: $colorPlotLabelFg;
display: inline-block;
font-size: 0.7em;
position: absolute;
margin-left: -0.5 * $tickLblW;
text-align: center;
top: $r3H;
width: $tickLblW;
top: 8px;
white-space: nowrap;
z-index: 2;
}
}
@@ -86,19 +95,13 @@
.knob {
width: $sliderKnobW;
.range-value {
//$w: 75px;
//@include test();
//@include verticalCenter();
position: absolute;
height: $r2H;
line-height: $r2H;
//top: 50%;
//margin-top: -7px; // Label is 13px high
white-space: nowrap;
//width: $w;
}
&:hover .range-value {
color: $colorKey;
color: $sliderColorKnobHov;
}
&.knob-l {
//margin-left: $sliderKnobW / -2;
@@ -116,6 +119,9 @@
}
}
//.slot.range-holder {
// background-color: $sliderColorRangeHolder;
//}
.s-time-range-val {
//@include test();

2
platform/commonUI/general/res/sass/plots/_plots-main.scss
View File

@@ -89,7 +89,7 @@ $plotDisplayArea: ($legendH + $interiorMargin, 0, $xBarH + $interiorMargin, $yBa
.gl-plot-label,
.l-plot-label {
// @include test(yellow);
color: lighten($colorBodyFg, 20%);
color: $colorPlotLabelFg;
position: absolute;
text-align: center;
// text-transform: uppercase;

23
platform/commonUI/general/res/templates/controls/time-controller.html
View File

@@ -24,12 +24,13 @@
<div class="l-time-controller" ng-controller="TimeRangeController">
<div class="l-time-range-inputs-holder">
<span class="l-time-range-input">
Start:
<span class="s-time-range-val time-range-start">
<span class="l-time-range-inputs-elem ui-symbol type-icon">&#x43;</span>
<span class="l-time-range-input" ng-controller="ToggleController as t1">
<!--<span class="lbl">Start</span>-->
<span class="s-btn time-range-start" ng-click="t1.toggle()">
<span class="val">{{startOuterText}}</span>
<span ng-controller="ToggleController as t1">
<a class="ui-symbol icon icon-calendar" ng-click="t1.toggle()"></a>
<span>
<a class="ui-symbol icon icon-calendar"></a>
<mct-popup ng-if="t1.isActive()">
<div style="background: #222;"
mct-click-elsewhere="t1.setState(false)">
@@ -44,12 +45,14 @@
</span>
</span>
<span class="l-time-range-input">
End:
<span class="s-time-range-val time-range-end">
<span class="l-time-range-inputs-elem lbl">to</span>
<span class="l-time-range-input" ng-controller="ToggleController as t2">
<!--<span class="lbl">End</span>-->
<span class="s-btn l-time-range-input" ng-click="t2.toggle()">
<span class="val">{{endOuterText}}</span>
<span ng-controller="ToggleController as t2">
<a class="ui-symbol icon icon-calendar" ng-click="t2.toggle()"></a>
<span>
<a class="ui-symbol icon icon-calendar"></a>
<mct-popup ng-if="t2.isActive()">
<div style="background: #222;"
mct-click-elsewhere="t2.setState(false)">