mirror of
https://github.com/nasa/openmct.git
synced 2025-04-16 15:29:20 +00:00
[Frontend] Markup and CSS for Time Controller
WTD-1219 Markup, CSS, etc. for time controller; New template .html file; Rebuilt from open-master and ue-frontend branches;
This commit is contained in:
Charles Hacskaylo
parent
c20ad3764d
commit
f23f127207
@ -43,6 +43,10 @@
|
||||
{
|
||||
"key": "indicator",
|
||||
"templateUrl": "templates/indicator.html"
|
||||
},
|
||||
{
|
||||
"key": "time-controller",
|
||||
"templateUrl": "templates/controls/time-controller.html"
|
||||
}
|
||||
],
|
||||
"controllers": [
|
||||
|
||||
@ -302,7 +302,8 @@ label.form-control.checkbox input {
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
/* line 22, ../sass/forms/_text-input.scss */
|
||||
input[type="text"] {
|
||||
input[type="text"],
|
||||
input[type="date"] {
|
||||
-moz-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
-moz-border-radius: 3px;
|
||||
@ -321,10 +322,32 @@ input[type="text"] {
|
||||
outline: none;
|
||||
padding: 0 3px; }
|
||||
/* line 33, ../sass/forms/_mixins.scss */
|
||||
input[type="text"].error {
|
||||
input[type="text"].error,
|
||||
input[type="date"].error {
|
||||
background: rgba(255, 0, 0, 0.5); }
|
||||
/* line 29, ../sass/forms/_text-input.scss */
|
||||
input[type="text"].numeric {
|
||||
/* line 61, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/css3/_user-interface.scss */
|
||||
input[type="text"]:-moz-placeholder,
|
||||
input[type="date"]:-moz-placeholder {
|
||||
color: gray;
|
||||
font-style: italic; }
|
||||
/* line 64, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/css3/_user-interface.scss */
|
||||
input[type="text"]::-moz-placeholder,
|
||||
input[type="date"]::-moz-placeholder {
|
||||
color: gray;
|
||||
font-style: italic; }
|
||||
/* line 67, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/css3/_user-interface.scss */
|
||||
input[type="text"]:-ms-input-placeholder,
|
||||
input[type="date"]:-ms-input-placeholder {
|
||||
color: gray;
|
||||
font-style: italic; }
|
||||
/* line 56, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/css3/_user-interface.scss */
|
||||
input[type="text"]::-webkit-input-placeholder,
|
||||
input[type="date"]::-webkit-input-placeholder {
|
||||
color: gray;
|
||||
font-style: italic; }
|
||||
/* line 34, ../sass/forms/_text-input.scss */
|
||||
input[type="text"].numeric,
|
||||
input[type="date"].numeric {
|
||||
text-align: right; }
|
||||
|
||||
/*****************************************************************************
|
||||
|
||||
@ -2050,7 +2050,11 @@ label.checkbox.custom {
|
||||
margin-right: 50px; }
|
||||
|
||||
/******************************************************** SLIDERS */
|
||||
/* line 444, ../sass/controls/_controls.scss */
|
||||
/* line 439, ../sass/controls/_controls.scss */
|
||||
.wrapper-slider {
|
||||
position: relative; }
|
||||
|
||||
/* line 447, ../sass/controls/_controls.scss */
|
||||
.slider .slot {
|
||||
-moz-border-radius: 2px;
|
||||
-webkit-border-radius: 2px;
|
||||
@ -2064,14 +2068,30 @@ label.checkbox.custom {
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
border-bottom: 1px solid rgba(77, 77, 77, 0.4);
|
||||
border-right: 1px solid rgba(77, 77, 77, 0.4);
|
||||
height: 50%;
|
||||
height: auto;
|
||||
width: auto;
|
||||
position: absolute;
|
||||
top: 25%;
|
||||
top: 10%;
|
||||
right: 0;
|
||||
bottom: auto;
|
||||
left: 0; }
|
||||
/* line 455, ../sass/controls/_controls.scss */
|
||||
bottom: 10%;
|
||||
left: 0;
|
||||
z-index: 0; }
|
||||
/* line 459, ../sass/controls/_controls.scss */
|
||||
.slider .slot .range {
|
||||
background: rgba(0, 153, 204, 0.3);
|
||||
cursor: ew-resize;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: auto;
|
||||
bottom: 0;
|
||||
left: auto;
|
||||
height: auto;
|
||||
width: auto;
|
||||
z-index: 1; }
|
||||
/* line 470, ../sass/controls/_controls.scss */
|
||||
.slider .slot .range:hover {
|
||||
background: rgba(0, 153, 204, 0.5); }
|
||||
/* line 475, ../sass/controls/_controls.scss */
|
||||
.slider .knob {
|
||||
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzRkNGQ0ZCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzQwNDA0MCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
|
||||
background-size: 100%;
|
||||
@ -2092,14 +2112,17 @@ label.checkbox.custom {
|
||||
border-top: 1px solid #666666;
|
||||
color: #999;
|
||||
display: inline-block;
|
||||
-moz-border-radius: 2px;
|
||||
-webkit-border-radius: 2px;
|
||||
border-radius: 2px;
|
||||
cursor: ew-resize;
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
height: auto;
|
||||
width: 12px;
|
||||
top: 0;
|
||||
auto: 0;
|
||||
bottom: auto;
|
||||
left: auto; }
|
||||
bottom: 0;
|
||||
left: auto;
|
||||
z-index: 2; }
|
||||
/* line 148, ../sass/_mixins.scss */
|
||||
.slider .knob:not(.disabled):hover {
|
||||
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzY2NjY2NiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzRkNGQ0ZCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
|
||||
@ -2122,28 +2145,20 @@ label.checkbox.custom {
|
||||
/* line 141, ../sass/_mixins.scss */
|
||||
.slider .knob:not(.disabled):hover:before {
|
||||
border-color: rgba(0, 153, 204, 0.9); }
|
||||
/* line 466, ../sass/controls/_controls.scss */
|
||||
/* line 487, ../sass/controls/_controls.scss */
|
||||
.slider .knob.knob-l {
|
||||
margin-left: -6px; }
|
||||
/* line 488, ../sass/controls/_controls.scss */
|
||||
.slider .knob.knob-r {
|
||||
margin-right: -6px; }
|
||||
/* line 489, ../sass/controls/_controls.scss */
|
||||
.slider .knob:before {
|
||||
top: 1px;
|
||||
bottom: 3px;
|
||||
left: 5px; }
|
||||
/* line 473, ../sass/controls/_controls.scss */
|
||||
.slider .range {
|
||||
background: rgba(0, 153, 204, 0.6);
|
||||
cursor: ew-resize;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: auto;
|
||||
bottom: 0;
|
||||
left: auto;
|
||||
height: auto;
|
||||
width: auto; }
|
||||
/* line 483, ../sass/controls/_controls.scss */
|
||||
.slider .range:hover {
|
||||
background: rgba(0, 153, 204, 0.7); }
|
||||
left: 45%; }
|
||||
|
||||
/******************************************************** BROWSER ELEMENTS */
|
||||
/* line 491, ../sass/controls/_controls.scss */
|
||||
/* line 501, ../sass/controls/_controls.scss */
|
||||
::-webkit-scrollbar {
|
||||
-moz-border-radius: 2px;
|
||||
-webkit-border-radius: 2px;
|
||||
@ -2160,7 +2175,7 @@ label.checkbox.custom {
|
||||
height: 10px;
|
||||
width: 10px; }
|
||||
|
||||
/* line 497, ../sass/controls/_controls.scss */
|
||||
/* line 507, ../sass/controls/_controls.scss */
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzY2NjY2NiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzU5NTk1OSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
|
||||
background-size: 100%;
|
||||
@ -2178,7 +2193,7 @@ label.checkbox.custom {
|
||||
-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
|
||||
box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
|
||||
border-top: 1px solid gray; }
|
||||
/* line 504, ../sass/controls/_controls.scss */
|
||||
/* line 514, ../sass/controls/_controls.scss */
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzgwODA4MCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzczNzM3MyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
|
||||
background-size: 100%;
|
||||
@ -2187,7 +2202,7 @@ label.checkbox.custom {
|
||||
background-image: -webkit-linear-gradient(#808080, #737373 20px);
|
||||
background-image: linear-gradient(#808080, #737373 20px); }
|
||||
|
||||
/* line 509, ../sass/controls/_controls.scss */
|
||||
/* line 519, ../sass/controls/_controls.scss */
|
||||
::-webkit-scrollbar-corner {
|
||||
background: rgba(0, 0, 0, 0.4); }
|
||||
|
||||
@ -2448,6 +2463,103 @@ label.checkbox.custom {
|
||||
right: 0;
|
||||
width: auto; }
|
||||
|
||||
/* line 1, ../sass/controls/_time-controller.scss */
|
||||
.l-time-controller {
|
||||
position: relative;
|
||||
margin: 10px 0;
|
||||
min-width: 400px; }
|
||||
/* line 12, ../sass/controls/_time-controller.scss */
|
||||
.l-time-controller .l-time-range-inputs-holder,
|
||||
.l-time-controller .l-time-range-slider {
|
||||
font-size: 0.8em; }
|
||||
/* line 17, ../sass/controls/_time-controller.scss */
|
||||
.l-time-controller .l-time-range-inputs-holder,
|
||||
.l-time-controller .l-time-range-slider-holder,
|
||||
.l-time-controller .l-time-range-ticks-holder {
|
||||
margin-bottom: 5px;
|
||||
position: relative; }
|
||||
/* line 24, ../sass/controls/_time-controller.scss */
|
||||
.l-time-controller .l-time-range-slider,
|
||||
.l-time-controller .l-time-range-ticks {
|
||||
overflow: visible;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: auto;
|
||||
height: auto; }
|
||||
/* line 30, ../sass/controls/_time-controller.scss */
|
||||
.l-time-controller .l-time-range-inputs-holder {
|
||||
height: 20px; }
|
||||
/* line 34, ../sass/controls/_time-controller.scss */
|
||||
.l-time-controller .l-time-range-slider,
|
||||
.l-time-controller .l-time-range-ticks {
|
||||
left: 90px;
|
||||
right: 90px; }
|
||||
/* line 40, ../sass/controls/_time-controller.scss */
|
||||
.l-time-controller .l-time-range-slider-holder {
|
||||
height: 30px; }
|
||||
/* line 42, ../sass/controls/_time-controller.scss */
|
||||
.l-time-controller .l-time-range-slider-holder .range-holder {
|
||||
-moz-box-shadow: none;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
background: none;
|
||||
border: none;
|
||||
height: 75%; }
|
||||
/* line 50, ../sass/controls/_time-controller.scss */
|
||||
.l-time-controller .l-time-range-ticks-holder {
|
||||
height: 10px; }
|
||||
/* line 52, ../sass/controls/_time-controller.scss */
|
||||
.l-time-controller .l-time-range-ticks-holder .l-time-range-ticks {
|
||||
border-top: 1px solid #4d4d4d; }
|
||||
/* line 54, ../sass/controls/_time-controller.scss */
|
||||
.l-time-controller .l-time-range-ticks-holder .l-time-range-ticks .tick {
|
||||
background-color: #4d4d4d;
|
||||
border: none;
|
||||
width: 1px;
|
||||
margin-left: -1px; }
|
||||
/* line 59, ../sass/controls/_time-controller.scss */
|
||||
.l-time-controller .l-time-range-ticks-holder .l-time-range-ticks .tick:first-child {
|
||||
margin-left: 0; }
|
||||
/* line 62, ../sass/controls/_time-controller.scss */
|
||||
.l-time-controller .l-time-range-ticks-holder .l-time-range-ticks .tick .l-time-range-tick-label {
|
||||
color: gray;
|
||||
font-size: 0.7em;
|
||||
position: absolute;
|
||||
margin-left: -25px;
|
||||
text-align: center;
|
||||
top: 10px;
|
||||
width: 50px;
|
||||
z-index: 2; }
|
||||
/* line 76, ../sass/controls/_time-controller.scss */
|
||||
.l-time-controller .knob {
|
||||
width: 9px; }
|
||||
/* line 78, ../sass/controls/_time-controller.scss */
|
||||
.l-time-controller .knob .range-value {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -7px;
|
||||
white-space: nowrap;
|
||||
width: 75px; }
|
||||
/* line 87, ../sass/controls/_time-controller.scss */
|
||||
.l-time-controller .knob:hover .range-value {
|
||||
color: #0099cc; }
|
||||
/* line 90, ../sass/controls/_time-controller.scss */
|
||||
.l-time-controller .knob.knob-l {
|
||||
margin-left: -4.5px; }
|
||||
/* line 92, ../sass/controls/_time-controller.scss */
|
||||
.l-time-controller .knob.knob-l .range-value {
|
||||
text-align: right;
|
||||
right: 14px; }
|
||||
/* line 97, ../sass/controls/_time-controller.scss */
|
||||
.l-time-controller .knob.knob-r {
|
||||
margin-right: -4.5px; }
|
||||
/* line 99, ../sass/controls/_time-controller.scss */
|
||||
.l-time-controller .knob.knob-r .range-value {
|
||||
left: 14px; }
|
||||
|
||||
/*****************************************************************************
|
||||
* Open MCT Web, Copyright (c) 2014-2015, United States Government
|
||||
* as represented by the Administrator of the National Aeronautics and Space
|
||||
@ -2697,7 +2809,8 @@ span.req {
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
/* line 22, ../sass/forms/_text-input.scss */
|
||||
input[type="text"] {
|
||||
input[type="text"],
|
||||
input[type="date"] {
|
||||
-moz-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
-moz-border-radius: 3px;
|
||||
@ -2716,10 +2829,32 @@ input[type="text"] {
|
||||
outline: none;
|
||||
padding: 0 3px; }
|
||||
/* line 33, ../sass/forms/_mixins.scss */
|
||||
input[type="text"].error {
|
||||
input[type="text"].error,
|
||||
input[type="date"].error {
|
||||
background: rgba(255, 0, 0, 0.5); }
|
||||
/* line 29, ../sass/forms/_text-input.scss */
|
||||
input[type="text"].numeric {
|
||||
/* line 61, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/css3/_user-interface.scss */
|
||||
input[type="text"]:-moz-placeholder,
|
||||
input[type="date"]:-moz-placeholder {
|
||||
color: gray;
|
||||
font-style: italic; }
|
||||
/* line 64, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/css3/_user-interface.scss */
|
||||
input[type="text"]::-moz-placeholder,
|
||||
input[type="date"]::-moz-placeholder {
|
||||
color: gray;
|
||||
font-style: italic; }
|
||||
/* line 67, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/css3/_user-interface.scss */
|
||||
input[type="text"]:-ms-input-placeholder,
|
||||
input[type="date"]:-ms-input-placeholder {
|
||||
color: gray;
|
||||
font-style: italic; }
|
||||
/* line 56, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/css3/_user-interface.scss */
|
||||
input[type="text"]::-webkit-input-placeholder,
|
||||
input[type="date"]::-webkit-input-placeholder {
|
||||
color: gray;
|
||||
font-style: italic; }
|
||||
/* line 34, ../sass/forms/_text-input.scss */
|
||||
input[type="text"].numeric,
|
||||
input[type="date"].numeric {
|
||||
text-align: right; }
|
||||
|
||||
/*****************************************************************************
|
||||
|
||||
@ -45,6 +45,7 @@
|
||||
@import "controls/controls";
|
||||
@import "controls/lists";
|
||||
@import "controls/menus";
|
||||
@import "controls/time-controller";
|
||||
@import "forms/mixins";
|
||||
@import "forms/elems";
|
||||
@import "forms/validation";
|
||||
|
||||
@ -436,52 +436,62 @@ label.checkbox.custom {
|
||||
}
|
||||
|
||||
/******************************************************** SLIDERS */
|
||||
|
||||
.wrapper-slider {
|
||||
position: relative;
|
||||
}
|
||||
.slider {
|
||||
$knobH: 100%; //14px;
|
||||
//$knobH: 70%; //14px;
|
||||
$knobW: 12px;
|
||||
$slotH: 50%;
|
||||
$slotH: 80%;
|
||||
$rangeO: 0.3;
|
||||
.slot {
|
||||
// @include border-radius($basicCr * .75);
|
||||
// @include border-radius($basicCr * .75);
|
||||
@include sliderTrack();
|
||||
height: $slotH;
|
||||
height: auto;
|
||||
width: auto;
|
||||
position: absolute;
|
||||
top: ($knobH - $slotH) / 2;
|
||||
//top: ($knobH - $slotH) / 2;
|
||||
top: (100% - $slotH)/2;
|
||||
right: 0;
|
||||
bottom: auto;
|
||||
bottom: (100% - $slotH)/2;
|
||||
left: 0;
|
||||
z-index: 0;
|
||||
.range {
|
||||
background: rgba($colorKey, $rangeO);
|
||||
cursor: ew-resize;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: auto;
|
||||
bottom: 0;
|
||||
left: auto;
|
||||
height: auto;
|
||||
width: auto;
|
||||
z-index: 1;
|
||||
&:hover {
|
||||
background: rgba($colorKey, $rangeO + 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
.knob {
|
||||
@include btnSubtle();
|
||||
@include controlGrippy(rgba(black, 0.3), vertical, 1px, solid);
|
||||
@include border-radius(2px);
|
||||
cursor: ew-resize;
|
||||
position: absolute;
|
||||
height: $knobH;
|
||||
height: auto;
|
||||
width: $knobW;
|
||||
top: 0;
|
||||
auto: 0;
|
||||
bottom: auto;
|
||||
bottom: 0;
|
||||
left: auto;
|
||||
z-index: 2;
|
||||
&.knob-l { margin-left: $knobW / -2; }
|
||||
&.knob-r { margin-right: $knobW / -2; }
|
||||
&:before {
|
||||
top: 1px;
|
||||
bottom: 3px;
|
||||
left: ($knobW / 2) - 1;
|
||||
}
|
||||
|
||||
}
|
||||
.range {
|
||||
background: rgba($colorKey, 0.6);
|
||||
cursor: ew-resize;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: auto;
|
||||
bottom: 0;
|
||||
left: auto;
|
||||
height: auto;
|
||||
width: auto;
|
||||
&:hover {
|
||||
background: rgba($colorKey, 0.7);
|
||||
//left: ($knobW / 2) - 1;
|
||||
//margin-left: -1px;
|
||||
left: 45%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -0,0 +1,104 @@
|
||||
.l-time-controller {
|
||||
$inputTxtW: 90px;
|
||||
$knobW: 9px;
|
||||
$r1H: 20px;
|
||||
$r2H: 30px;
|
||||
$r3H: 10px;
|
||||
|
||||
position: relative;
|
||||
margin: $interiorMarginLg 0;
|
||||
min-width: 400px;
|
||||
|
||||
.l-time-range-inputs-holder,
|
||||
.l-time-range-slider {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
.l-time-range-inputs-holder,
|
||||
.l-time-range-slider-holder,
|
||||
.l-time-range-ticks-holder
|
||||
{
|
||||
margin-bottom: $interiorMargin;
|
||||
position: relative;
|
||||
}
|
||||
.l-time-range-slider,
|
||||
.l-time-range-ticks {
|
||||
//@include test(red, 0.1);
|
||||
@include absPosDefault(0, visible);
|
||||
}
|
||||
|
||||
.l-time-range-inputs-holder {
|
||||
height: $r1H;
|
||||
}
|
||||
|
||||
.l-time-range-slider,
|
||||
.l-time-range-ticks {
|
||||
left: $inputTxtW; right: $inputTxtW;
|
||||
|
||||
}
|
||||
|
||||
.l-time-range-slider-holder {
|
||||
height: $r2H;
|
||||
.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;
|
||||
.tick {
|
||||
background-color: $colorInteriorBorder;
|
||||
border:none;
|
||||
width: 1px;
|
||||
margin-left: -1px;
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
.l-time-range-tick-label {
|
||||
color: lighten($colorInteriorBorder, 20%);
|
||||
font-size: 0.7em;
|
||||
position: absolute;
|
||||
margin-left: -0.5 * $tickLblW;
|
||||
text-align: center;
|
||||
top: $r3H;
|
||||
width: $tickLblW;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.knob {
|
||||
width: $knobW;
|
||||
.range-value {
|
||||
$w: 75px;
|
||||
//@include test();
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -7px; // Label is 13px high
|
||||
white-space: nowrap;
|
||||
width: $w;
|
||||
}
|
||||
&:hover .range-value {
|
||||
color: $colorKey;
|
||||
}
|
||||
&.knob-l {
|
||||
margin-left: $knobW / -2;
|
||||
.range-value {
|
||||
text-align: right;
|
||||
right: $knobW + $interiorMargin;
|
||||
}
|
||||
}
|
||||
&.knob-r {
|
||||
margin-right: $knobW / -2;
|
||||
.range-value {
|
||||
left: $knobW + $interiorMargin;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -19,13 +19,18 @@
|
||||
* this source code distribution or the Licensing information page available
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
input[type="text"] {
|
||||
input[type="text"],
|
||||
input[type="date"] {
|
||||
@include nice-input();
|
||||
&.filter {
|
||||
&.ng-dirty {
|
||||
// background: red;
|
||||
}
|
||||
}
|
||||
@include input-placeholder {
|
||||
color: darken($colorBodyFg, 10%);
|
||||
font-style: italic;
|
||||
}
|
||||
&.filter {
|
||||
&.ng-dirty {
|
||||
// background: red;
|
||||
}
|
||||
}
|
||||
&.numeric {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
@ -0,0 +1,69 @@
|
||||
<!--
|
||||
|
||||
NOTES
|
||||
|
||||
Ticks:
|
||||
The thinking is to divide whatever the current time span is by 5,
|
||||
and assign values accordingly to 5 statically-positioned ticks. So the tick x-position is a static percentage
|
||||
of the total width available, and the labels change dynamically. This is consistent
|
||||
with our current approach to the time axis of plots.
|
||||
I'm keeping the number of ticks low so that when the view portal gets narrow,
|
||||
the tick labels won't collide with each other. For extra credit, add/remove ticks as the user resizes the view area.
|
||||
Note: this eval needs to be based on the whatever is containing the
|
||||
time-controller component, not the whole browser window.
|
||||
|
||||
Range indicator and slider knobs:
|
||||
The left and right properties used in .slider .range-holder and the .knobs are
|
||||
CSS offsets from the left and right of their respective containers. You
|
||||
may want or need to calculate those positions as pure offsets from the start datetime
|
||||
(or left, as it were) and set them as left properties. No problem if so, but
|
||||
we'll need to tweak the CSS tiny bit to get the center of the knobs to line up
|
||||
properly on the range left and right bounds.
|
||||
|
||||
-->
|
||||
|
||||
<div ng-init="
|
||||
notes = 'Temporarily using an array to populate ticks so I can see what I\'m doing';
|
||||
ticks = [
|
||||
'00:00',
|
||||
'00:30',
|
||||
'01:00',
|
||||
'01:30',
|
||||
'02:00'
|
||||
];
|
||||
"></div>
|
||||
|
||||
<div class="l-time-controller">
|
||||
<div class="l-time-range-inputs-holder">
|
||||
Start: <input type="date" />
|
||||
End: <input type="date" />
|
||||
</div>
|
||||
|
||||
<div class="l-time-range-slider-holder">
|
||||
<div class="l-time-range-slider">
|
||||
<div class="slider">
|
||||
<div class="slot range-holder">
|
||||
<div class="range" style="left: 0%; right: 30%;"></div>
|
||||
</div>
|
||||
<div class="knob knob-l" style="left: 0%;">
|
||||
<div class="range-value">05/22 14:46</div>
|
||||
</div>
|
||||
<div class="knob knob-r" style="right: 30%;">
|
||||
<div class="range-value">07/22 01:21</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="l-time-range-ticks-holder">
|
||||
<div class="l-time-range-ticks">
|
||||
<div
|
||||
ng-repeat="tick in ticks"
|
||||
ng-style="{ left: $index * 25 + '%' }"
|
||||
class="tick tick-x"
|
||||
>
|
||||
<span class="l-time-range-tick-label">{{tick}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Loading…
x
Reference in New Issue
Block a user