From f23f12720727e26a6b17d7b8c47b49e9a0988450 Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Tue, 2 Jun 2015 19:29:57 -0700 Subject: [PATCH] [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; --- platform/commonUI/general/bundle.json | 4 + platform/commonUI/general/res/css/forms.css | 31 ++- .../general/res/css/theme-espresso.css | 203 +++++++++++++++--- platform/commonUI/general/res/sass/_main.scss | 1 + .../general/res/sass/controls/_controls.scss | 62 +++--- .../res/sass/controls/_time-controller.scss | 104 +++++++++ .../general/res/sass/forms/_text-input.scss | 17 +- .../templates/controls/time-controller.html | 69 ++++++ 8 files changed, 421 insertions(+), 70 deletions(-) create mode 100644 platform/commonUI/general/res/sass/controls/_time-controller.scss create mode 100644 platform/commonUI/general/res/templates/controls/time-controller.html diff --git a/platform/commonUI/general/bundle.json b/platform/commonUI/general/bundle.json index f05f0e2be4..2923d96c47 100644 --- a/platform/commonUI/general/bundle.json +++ b/platform/commonUI/general/bundle.json @@ -43,6 +43,10 @@ { "key": "indicator", "templateUrl": "templates/indicator.html" + }, + { + "key": "time-controller", + "templateUrl": "templates/controls/time-controller.html" } ], "controllers": [ diff --git a/platform/commonUI/general/res/css/forms.css b/platform/commonUI/general/res/css/forms.css index 113a906725..4fee272bb9 100644 --- a/platform/commonUI/general/res/css/forms.css +++ b/platform/commonUI/general/res/css/forms.css @@ -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; } /***************************************************************************** diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css index c3dd06eed9..c2a160e6d0 100644 --- a/platform/commonUI/general/res/css/theme-espresso.css +++ b/platform/commonUI/general/res/css/theme-espresso.css @@ -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; } /***************************************************************************** diff --git a/platform/commonUI/general/res/sass/_main.scss b/platform/commonUI/general/res/sass/_main.scss index 3eb4397f91..3c4fe84514 100644 --- a/platform/commonUI/general/res/sass/_main.scss +++ b/platform/commonUI/general/res/sass/_main.scss @@ -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"; diff --git a/platform/commonUI/general/res/sass/controls/_controls.scss b/platform/commonUI/general/res/sass/controls/_controls.scss index 721a557a32..86544886f5 100644 --- a/platform/commonUI/general/res/sass/controls/_controls.scss +++ b/platform/commonUI/general/res/sass/controls/_controls.scss @@ -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%; } } } diff --git a/platform/commonUI/general/res/sass/controls/_time-controller.scss b/platform/commonUI/general/res/sass/controls/_time-controller.scss new file mode 100644 index 0000000000..6991617ae7 --- /dev/null +++ b/platform/commonUI/general/res/sass/controls/_time-controller.scss @@ -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; + } + } + } +} \ No newline at end of file diff --git a/platform/commonUI/general/res/sass/forms/_text-input.scss b/platform/commonUI/general/res/sass/forms/_text-input.scss index f445b43aa0..eed6ebd42d 100644 --- a/platform/commonUI/general/res/sass/forms/_text-input.scss +++ b/platform/commonUI/general/res/sass/forms/_text-input.scss @@ -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; } diff --git a/platform/commonUI/general/res/templates/controls/time-controller.html b/platform/commonUI/general/res/templates/controls/time-controller.html new file mode 100644 index 0000000000..fe1b6ff14a --- /dev/null +++ b/platform/commonUI/general/res/templates/controls/time-controller.html @@ -0,0 +1,69 @@ + + +
+ +
+
+ Start: + End: +
+ +
+
+
+
+
+
+
+
05/22 14:46
+
+
+
07/22 01:21
+
+
+
+
+ +
+
+
+ {{tick}} +
+
+
+
\ No newline at end of file