From badaca53d3e264d5c8251fb08f537d843adc3aa1 Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Fri, 25 Sep 2015 18:12:36 -0700 Subject: [PATCH 01/23] [Frontend] Time Controller Markup and Styling open #1515 open #117 Significant mods to slider scss; Added toi-line element and hover styles; --- .../general/res/sass/controls/_controls.scss | 24 +- .../res/sass/controls/_time-controller.scss | 69 ++- .../templates/controls/time-controller.html | 17 +- .../espresso/res/css/theme-espresso.css | 467 +++++++++++------- .../themes/espresso/res/sass/_constants.scss | 5 +- .../themes/snow/res/css/theme-snow.css | 458 ++++++++++------- .../themes/snow/res/sass/_constants.scss | 13 +- 7 files changed, 658 insertions(+), 395 deletions(-) diff --git a/platform/commonUI/general/res/sass/controls/_controls.scss b/platform/commonUI/general/res/sass/controls/_controls.scss index 941ef734f6..f5dc2e102f 100644 --- a/platform/commonUI/general/res/sass/controls/_controls.scss +++ b/platform/commonUI/general/res/sass/controls/_controls.scss @@ -295,15 +295,11 @@ label.checkbox.custom { .slider { $knobH: 100%; //14px; - $knobW: 12px; - $slotH: 50%; .slot { // @include border-radius($basicCr * .75); //@include sliderTrack(); - //height: $slotH; width: auto; position: absolute; - //top: ($knobH - $slotH) / 2; top: 0; right: 0; bottom: 0; @@ -317,30 +313,30 @@ label.checkbox.custom { &:hover { background-color: $sliderColorKnobHov; } - cursor: ew-resize; position: absolute; height: $knobH; - width: $knobW; + width: $sliderKnobW; top: 0; auto: 0; bottom: auto; left: auto; - //&:before { - // top: 1px; - // bottom: 3px; - // left: ($knobW / 2) - 1; - //} - + } + .knob-l { + @include border-left-radius($sliderKnobW); + cursor: w-resize; + } + .knob-r { + @include border-right-radius($sliderKnobW); + cursor: e-resize; } .range { - $tbOffset: 2px; @include trans-prop-nice-fade(.25s); background-color: $sliderColorRange; cursor: ew-resize; position: absolute; top: 0; //$tbOffset; right: auto; - bottom: $tbOffset; + bottom: 0; left: auto; height: auto; width: auto; diff --git a/platform/commonUI/general/res/sass/controls/_time-controller.scss b/platform/commonUI/general/res/sass/controls/_time-controller.scss index d2079855b2..96cfa1f7ab 100644 --- a/platform/commonUI/general/res/sass/controls/_time-controller.scss +++ b/platform/commonUI/general/res/sass/controls/_time-controller.scss @@ -1,14 +1,21 @@ +@mixin toiLineHovEffects() { + //@include pulse(.25s); + &:before, + &:after { + background-color: $timeControllerToiLineColorHov; + } +} + .l-time-controller { $minW: 400px; - $knobM: ($sliderKnobW + 1) * -1; - $rangeValOffset: $interiorMargin + $sliderKnobW; - $knobCr: $sliderKnobW; - //@if $sliderKnobW > 3 { - // $knobCr: $sliderKnobW / 2; - //} - $timeRangeSliderLROffset: 130px + $sliderKnobW; + $knobHOffset: 0px; + $knobM: ($sliderKnobW + $knobHOffset) * -1; + $rangeValPad: $interiorMargin; + $rangeValOffset: $sliderKnobW; + //$knobCr: $sliderKnobW; + $timeRangeSliderLROffset: 130px + $sliderKnobW + $rangeValOffset; $r1H: 33px; - $r2H: 20px; + $r2H: $sliderH; $r3H: 20px; .l-time-range-inputs-holder, @@ -67,6 +74,42 @@ @include box-shadow(none); background: none; border: none; + .range { + .toi-line { + $myC: $timeControllerToiLineColor; + $myW: 8px; + @include transform(translateX(50%)); + position: absolute; + //@include test(); + top: 0; right: 0; bottom: 0px; left: auto; + width: $myW; + height: auto; + z-index: 2; + &:before, + &:after { + background-color: $myC; + content: ""; + position: absolute; + } + &:before { + // Vert line + top: 0; right: auto; bottom: -10px; left: floor($myW/2) - 1; + width: 2px; + //top: 0; right: 3px; bottom: 0; left: 3px; + } + &:after { + // Circle element + @include border-radius($myW); + @include transform(translateY(-50%)); + top: 50%; right: 0; bottom: auto; left: 0; + width: auto; + height: $myW; + } + } + &:hover .toi-line { + @include toiLineHovEffects; + } + } } } @@ -99,10 +142,11 @@ } .knob { - width: $sliderKnobW; + z-index: 2; .range-value { //@include test($sliderColorRange); @include trans-prop-nice-fade(.25s); + padding: 0 $rangeValOffset; position: absolute; height: $r2H; line-height: $r2H; @@ -112,7 +156,7 @@ color: $sliderColorKnobHov; } &.knob-l { - @include border-bottom-left-radius($knobCr); + //@include border-bottom-left-radius($knobCr); // MOVED TO _CONTROLS.SCSS margin-left: $knobM; .range-value { text-align: right; @@ -120,11 +164,14 @@ } } &.knob-r { - @include border-bottom-right-radius($knobCr); + //@include border-bottom-right-radius($knobCr); margin-right: $knobM; .range-value { left: $rangeValOffset; } + &:hover + .range-holder .range .toi-line { + @include toiLineHovEffects; + } } } } diff --git a/platform/commonUI/general/res/templates/controls/time-controller.html b/platform/commonUI/general/res/templates/controls/time-controller.html index dce85a3bf0..61a4feedb8 100644 --- a/platform/commonUI/general/res/templates/controls/time-controller.html +++ b/platform/commonUI/general/res/templates/controls/time-controller.html @@ -48,7 +48,7 @@ {{endOuterText}} -
+
-
-
-
-
{{endInnerText}}
+
+
+
+
+
diff --git a/platform/commonUI/themes/espresso/res/css/theme-espresso.css b/platform/commonUI/themes/espresso/res/css/theme-espresso.css index d90027c9aa..aeb8d6cee8 100644 --- a/platform/commonUI/themes/espresso/res/css/theme-espresso.css +++ b/platform/commonUI/themes/espresso/res/css/theme-espresso.css @@ -1321,7 +1321,7 @@ mct-container { -o-transition: background, 0.25s; -webkit-transition: background, 0.25s; transition: background, 0.25s; - text-shadow: rgba(0, 0, 0, 0.3) 0 1px 1px; } + text-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px; } /* line 272, ../../../../general/res/sass/_mixins.scss */ .s-btn.major .icon, .major.s-menu-btn .icon { color: #fff; } @@ -1360,7 +1360,7 @@ mct-container { -o-transition: background, 0.25s; -webkit-transition: background, 0.25s; transition: background, 0.25s; - text-shadow: rgba(0, 0, 0, 0.3) 0 1px 1px; } + text-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px; } /* line 272, ../../../../general/res/sass/_mixins.scss */ .s-btn:not(.major) .icon, .s-menu-btn:not(.major) .icon { color: #0099cc; } @@ -1402,7 +1402,7 @@ mct-container { -o-transition: background, 0.25s; -webkit-transition: background, 0.25s; transition: background, 0.25s; - text-shadow: rgba(0, 0, 0, 0.3) 0 1px 1px; } + text-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px; } /* line 272, ../../../../general/res/sass/_mixins.scss */ .s-btn.pause-play.paused .icon, .pause-play.paused.s-menu-btn .icon { color: #fff; } @@ -1840,7 +1840,7 @@ label.checkbox.custom { opacity: 1; } } /******************************************************** SLIDERS */ -/* line 300, ../../../../general/res/sass/controls/_controls.scss */ +/* line 298, ../../../../general/res/sass/controls/_controls.scss */ .slider .slot { width: auto; position: absolute; @@ -1848,7 +1848,7 @@ label.checkbox.custom { right: 0; bottom: 0; left: 0; } -/* line 312, ../../../../general/res/sass/controls/_controls.scss */ +/* line 308, ../../../../general/res/sass/controls/_controls.scss */ .slider .knob { -moz-transition-property: visibility, opacity, background-color, border-color; -o-transition-property: visibility, opacity, background-color, border-color; @@ -1862,19 +1862,36 @@ label.checkbox.custom { -o-transition-timing-function: ease-in-out; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; - background-color: rgba(0, 153, 204, 0.3); - cursor: ew-resize; + background-color: rgba(0, 153, 204, 0.6); position: absolute; height: 100%; - width: 12px; + width: 10px; top: 0; auto: 0; bottom: auto; left: auto; } - /* line 317, ../../../../general/res/sass/controls/_controls.scss */ + /* line 313, ../../../../general/res/sass/controls/_controls.scss */ .slider .knob:hover { background-color: #0099cc; } -/* line 335, ../../../../general/res/sass/controls/_controls.scss */ +/* line 324, ../../../../general/res/sass/controls/_controls.scss */ +.slider .knob-l { + -moz-border-radius-topleft: 10px; + -webkit-border-top-left-radius: 10px; + border-top-left-radius: 10px; + -moz-border-radius-bottomleft: 10px; + -webkit-border-bottom-left-radius: 10px; + border-bottom-left-radius: 10px; + cursor: w-resize; } +/* line 328, ../../../../general/res/sass/controls/_controls.scss */ +.slider .knob-r { + -moz-border-radius-topright: 10px; + -webkit-border-top-right-radius: 10px; + border-top-right-radius: 10px; + -moz-border-radius-bottomright: 10px; + -webkit-border-bottom-right-radius: 10px; + border-bottom-right-radius: 10px; + cursor: e-resize; } +/* line 332, ../../../../general/res/sass/controls/_controls.scss */ .slider .range { -moz-transition-property: visibility, opacity, background-color, border-color; -o-transition-property: visibility, opacity, background-color, border-color; @@ -1897,12 +1914,12 @@ label.checkbox.custom { left: auto; height: auto; width: auto; } - /* line 346, ../../../../general/res/sass/controls/_controls.scss */ + /* line 343, ../../../../general/res/sass/controls/_controls.scss */ .slider .range:hover { background-color: rgba(0, 153, 204, 0.5); } /******************************************************** DATETIME PICKER */ -/* line 353, ../../../../general/res/sass/controls/_controls.scss */ +/* line 350, ../../../../general/res/sass/controls/_controls.scss */ .l-datetime-picker { -moz-user-select: -moz-none; -ms-user-select: none; @@ -1911,59 +1928,66 @@ label.checkbox.custom { font-size: 0.8rem; padding: 10px !important; width: 230px; } - /* line 359, ../../../../general/res/sass/controls/_controls.scss */ + /* line 356, ../../../../general/res/sass/controls/_controls.scss */ .l-datetime-picker .l-month-year-pager { font-size: 0.8rem; height: 15px; margin-bottom: 5px; position: relative; } - /* line 371, ../../../../general/res/sass/controls/_controls.scss */ + /* line 368, ../../../../general/res/sass/controls/_controls.scss */ .l-datetime-picker .l-month-year-pager .pager { width: 20px; } - /* line 374, ../../../../general/res/sass/controls/_controls.scss */ + /* line 371, ../../../../general/res/sass/controls/_controls.scss */ .l-datetime-picker .l-month-year-pager .pager.prev { right: auto; } - /* line 376, ../../../../general/res/sass/controls/_controls.scss */ + /* line 373, ../../../../general/res/sass/controls/_controls.scss */ .l-datetime-picker .l-month-year-pager .pager.prev:before { content: "\3c"; } - /* line 380, ../../../../general/res/sass/controls/_controls.scss */ + /* line 377, ../../../../general/res/sass/controls/_controls.scss */ .l-datetime-picker .l-month-year-pager .pager.next { left: auto; text-align: right; } - /* line 383, ../../../../general/res/sass/controls/_controls.scss */ + /* line 380, ../../../../general/res/sass/controls/_controls.scss */ .l-datetime-picker .l-month-year-pager .pager.next:before { content: "\3e"; } - /* line 388, ../../../../general/res/sass/controls/_controls.scss */ + /* line 385, ../../../../general/res/sass/controls/_controls.scss */ .l-datetime-picker .l-month-year-pager .val { text-align: center; left: 25px; right: 25px; } + /* line 391, ../../../../general/res/sass/controls/_controls.scss */ + .l-datetime-picker .l-calendar, + .l-datetime-picker .l-time-selects { + border-top: 1px solid rgba(153, 153, 153, 0.1); } + /* line 395, ../../../../general/res/sass/controls/_controls.scss */ + .l-datetime-picker .l-time-selects { + line-height: 22px; } /******************************************************** CALENDAR */ -/* line 399, ../../../../general/res/sass/controls/_controls.scss */ +/* line 403, ../../../../general/res/sass/controls/_controls.scss */ .l-calendar ul.l-cal-row { display: -webkit-flex; display: flex; -webkit-flex-flow: row nowrap; flex-flow: row nowrap; margin-top: 1px; } - /* line 403, ../../../../general/res/sass/controls/_controls.scss */ + /* line 407, ../../../../general/res/sass/controls/_controls.scss */ .l-calendar ul.l-cal-row:first-child { margin-top: 0; } - /* line 406, ../../../../general/res/sass/controls/_controls.scss */ + /* line 410, ../../../../general/res/sass/controls/_controls.scss */ .l-calendar ul.l-cal-row li { -webkit-flex: 1 0; flex: 1 0; margin-left: 1px; padding: 5px; text-align: center; } - /* line 412, ../../../../general/res/sass/controls/_controls.scss */ + /* line 416, ../../../../general/res/sass/controls/_controls.scss */ .l-calendar ul.l-cal-row li:first-child { margin-left: 0; } - /* line 416, ../../../../general/res/sass/controls/_controls.scss */ + /* line 420, ../../../../general/res/sass/controls/_controls.scss */ .l-calendar ul.l-cal-row.l-header li { color: #b3b3b3; } - /* line 419, ../../../../general/res/sass/controls/_controls.scss */ + /* line 423, ../../../../general/res/sass/controls/_controls.scss */ .l-calendar ul.l-cal-row.l-body li { -moz-transition-property: background-color; -o-transition-property: background-color; @@ -1978,31 +2002,31 @@ label.checkbox.custom { -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; cursor: pointer; } - /* line 422, ../../../../general/res/sass/controls/_controls.scss */ + /* line 426, ../../../../general/res/sass/controls/_controls.scss */ .l-calendar ul.l-cal-row.l-body li.in-month { background-color: #616161; } - /* line 425, ../../../../general/res/sass/controls/_controls.scss */ + /* line 429, ../../../../general/res/sass/controls/_controls.scss */ .l-calendar ul.l-cal-row.l-body li .sub { color: #b3b3b3; font-size: 0.8em; } - /* line 429, ../../../../general/res/sass/controls/_controls.scss */ + /* line 433, ../../../../general/res/sass/controls/_controls.scss */ .l-calendar ul.l-cal-row.l-body li.selected { background: #006080; color: #cccccc; } - /* line 432, ../../../../general/res/sass/controls/_controls.scss */ + /* line 436, ../../../../general/res/sass/controls/_controls.scss */ .l-calendar ul.l-cal-row.l-body li.selected .sub { color: inherit; } - /* line 436, ../../../../general/res/sass/controls/_controls.scss */ + /* line 440, ../../../../general/res/sass/controls/_controls.scss */ .l-calendar ul.l-cal-row.l-body li:hover { background-color: #0099cc; color: #fff; } - /* line 439, ../../../../general/res/sass/controls/_controls.scss */ + /* line 443, ../../../../general/res/sass/controls/_controls.scss */ .l-calendar ul.l-cal-row.l-body li:hover .sub { color: inherit; } /******************************************************** BROWSER ELEMENTS */ @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) { - /* line 450, ../../../../general/res/sass/controls/_controls.scss */ + /* line 454, ../../../../general/res/sass/controls/_controls.scss */ ::-webkit-scrollbar { -moz-border-radius: 2px; -webkit-border-radius: 2px; @@ -2017,7 +2041,7 @@ label.checkbox.custom { height: 10px; width: 10px; } - /* line 459, ../../../../general/res/sass/controls/_controls.scss */ + /* line 463, ../../../../general/res/sass/controls/_controls.scss */ ::-webkit-scrollbar-thumb { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzU5NTk1OSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzRkNGQ0ZCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; @@ -2031,7 +2055,7 @@ label.checkbox.custom { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } - /* line 468, ../../../../general/res/sass/controls/_controls.scss */ + /* line 472, ../../../../general/res/sass/controls/_controls.scss */ ::-webkit-scrollbar-thumb:hover { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzVlNWU1ZSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzUyNTI1MiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; @@ -2040,7 +2064,7 @@ label.checkbox.custom { background-image: -webkit-linear-gradient(#5e5e5e, #525252 20px); background-image: linear-gradient(#5e5e5e, #525252 20px); } - /* line 473, ../../../../general/res/sass/controls/_controls.scss */ + /* line 477, ../../../../general/res/sass/controls/_controls.scss */ ::-webkit-scrollbar-corner { background: rgba(0, 0, 0, 0.4); } } /***************************************************************************** @@ -2346,130 +2370,194 @@ label.checkbox.custom { right: 0; width: auto; } -/* line 1, ../../../../general/res/sass/controls/_time-controller.scss */ -.l-time-controller { - min-width: 400px; } - /* line 9, ../../../../general/res/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 14, ../../../../general/res/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 { - overflow: visible; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - width: auto; - height: auto; - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; - top: auto; } - /* line 23, ../../../../general/res/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 29, ../../../../general/res/sass/controls/_time-controller.scss */ - .l-time-controller .l-time-range-inputs-holder { - height: 33px; - bottom: 46px; - padding-top: 5px; - border-top: 1px solid rgba(153, 153, 153, 0.1); } - /* line 34, ../../../../general/res/sass/controls/_time-controller.scss */ - .l-time-controller .l-time-range-inputs-holder .type-icon { - font-size: 120%; - vertical-align: middle; } - /* line 38, ../../../../general/res/sass/controls/_time-controller.scss */ - .l-time-controller .l-time-range-inputs-holder .l-time-range-input, - .l-time-controller .l-time-range-inputs-holder .l-time-range-inputs-elem { - margin-right: 5px; } - /* line 41, ../../../../general/res/sass/controls/_time-controller.scss */ - .l-time-controller .l-time-range-inputs-holder .l-time-range-input .lbl, - .l-time-controller .l-time-range-inputs-holder .l-time-range-inputs-elem .lbl { - color: #666666; } - /* line 44, ../../../../general/res/sass/controls/_time-controller.scss */ - .l-time-controller .l-time-range-inputs-holder .l-time-range-input .ui-symbol.icon, .l-time-controller .l-time-range-inputs-holder .l-time-range-input .l-datetime-picker .l-month-year-pager .icon.pager, .l-datetime-picker .l-month-year-pager .l-time-controller .l-time-range-inputs-holder .l-time-range-input .icon.pager, - .l-time-controller .l-time-range-inputs-holder .l-time-range-inputs-elem .ui-symbol.icon, - .l-time-controller .l-time-range-inputs-holder .l-time-range-inputs-elem .l-datetime-picker .l-month-year-pager .icon.pager, - .l-datetime-picker .l-month-year-pager .l-time-controller .l-time-range-inputs-holder .l-time-range-inputs-elem .icon.pager { - font-size: 11px; - width: 11px; } +/* line 21, ../../../../general/res/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 26, ../../../../general/res/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 { + overflow: visible; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + width: auto; + height: auto; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + min-width: 400px; + top: auto; } +/* line 36, ../../../../general/res/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 42, ../../../../general/res/sass/controls/_time-controller.scss */ +.l-time-controller .l-time-range-inputs-holder { + height: 33px; + bottom: 46px; + padding-top: 5px; + border-top: 1px solid rgba(153, 153, 153, 0.1); } + /* line 47, ../../../../general/res/sass/controls/_time-controller.scss */ + .l-time-controller .l-time-range-inputs-holder .type-icon { + font-size: 120%; + vertical-align: middle; } /* line 51, ../../../../general/res/sass/controls/_time-controller.scss */ - .l-time-controller .l-time-range-slider, - .l-time-controller .l-time-range-ticks { - left: 125px; - right: 125px; } - /* line 57, ../../../../general/res/sass/controls/_time-controller.scss */ - .l-time-controller .l-time-range-slider-holder { - height: 20px; - bottom: 23px; } - /* line 60, ../../../../general/res/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; } - /* line 67, ../../../../general/res/sass/controls/_time-controller.scss */ - .l-time-controller .l-time-range-ticks-holder { - height: 20px; } - /* line 69, ../../../../general/res/sass/controls/_time-controller.scss */ - .l-time-controller .l-time-range-ticks-holder .l-time-range-ticks { - border-top: 1px solid rgba(255, 255, 255, 0.2); } - /* line 71, ../../../../general/res/sass/controls/_time-controller.scss */ - .l-time-controller .l-time-range-ticks-holder .l-time-range-ticks .tick { - background-color: rgba(255, 255, 255, 0.2); - border: none; - height: 5px; - width: 1px; - margin-left: -1px; - position: absolute; } - /* line 78, ../../../../general/res/sass/controls/_time-controller.scss */ - .l-time-controller .l-time-range-ticks-holder .l-time-range-ticks .tick:first-child { - margin-left: 0; } - /* line 81, ../../../../general/res/sass/controls/_time-controller.scss */ - .l-time-controller .l-time-range-ticks-holder .l-time-range-ticks .tick .l-time-range-tick-label { - transform: translateX(-50%); - -webkit-transform: translateX(-50%); - color: #666666; - display: inline-block; - font-size: 0.7em; - position: absolute; - top: 8px; - white-space: nowrap; - z-index: 2; } - /* line 95, ../../../../general/res/sass/controls/_time-controller.scss */ - .l-time-controller .knob { - width: 5px; } - /* line 97, ../../../../general/res/sass/controls/_time-controller.scss */ - .l-time-controller .knob .range-value { + .l-time-controller .l-time-range-inputs-holder .l-time-range-input, + .l-time-controller .l-time-range-inputs-holder .l-time-range-inputs-elem { + margin-right: 5px; } + /* line 54, ../../../../general/res/sass/controls/_time-controller.scss */ + .l-time-controller .l-time-range-inputs-holder .l-time-range-input .lbl, + .l-time-controller .l-time-range-inputs-holder .l-time-range-inputs-elem .lbl { + color: #666666; } + /* line 57, ../../../../general/res/sass/controls/_time-controller.scss */ + .l-time-controller .l-time-range-inputs-holder .l-time-range-input .ui-symbol.icon, .l-time-controller .l-time-range-inputs-holder .l-time-range-input .l-datetime-picker .l-month-year-pager .icon.pager, .l-datetime-picker .l-month-year-pager .l-time-controller .l-time-range-inputs-holder .l-time-range-input .icon.pager, + .l-time-controller .l-time-range-inputs-holder .l-time-range-inputs-elem .ui-symbol.icon, + .l-time-controller .l-time-range-inputs-holder .l-time-range-inputs-elem .l-datetime-picker .l-month-year-pager .icon.pager, + .l-datetime-picker .l-month-year-pager .l-time-controller .l-time-range-inputs-holder .l-time-range-inputs-elem .icon.pager { + font-size: 11px; + width: 11px; } +/* line 64, ../../../../general/res/sass/controls/_time-controller.scss */ +.l-time-controller .l-time-range-slider, +.l-time-controller .l-time-range-ticks { + left: 150px; + right: 150px; } +/* line 70, ../../../../general/res/sass/controls/_time-controller.scss */ +.l-time-controller .l-time-range-slider-holder { + height: 20px; + bottom: 23px; } + /* line 73, ../../../../general/res/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; } + /* line 78, ../../../../general/res/sass/controls/_time-controller.scss */ + .l-time-controller .l-time-range-slider-holder .range-holder .range .toi-line { + -moz-transform: translateX(50%); + -ms-transform: translateX(50%); + -webkit-transform: translateX(50%); + transform: translateX(50%); position: absolute; - height: 20px; - line-height: 20px; - white-space: nowrap; } - /* line 103, ../../../../general/res/sass/controls/_time-controller.scss */ - .l-time-controller .knob:hover .range-value { - color: #0099cc; } - /* line 108, ../../../../general/res/sass/controls/_time-controller.scss */ + top: 0; + right: 0; + bottom: 0px; + left: auto; + width: 8px; + height: auto; + z-index: 2; } + /* line 88, ../../../../general/res/sass/controls/_time-controller.scss */ + .l-time-controller .l-time-range-slider-holder .range-holder .range .toi-line:before, .l-time-controller .l-time-range-slider-holder .range-holder .range .toi-line:after { + background-color: #00c2ff; + content: ""; + position: absolute; } + /* line 94, ../../../../general/res/sass/controls/_time-controller.scss */ + .l-time-controller .l-time-range-slider-holder .range-holder .range .toi-line:before { + top: 0; + right: auto; + bottom: -10px; + left: 3px; + width: 2px; } + /* line 100, ../../../../general/res/sass/controls/_time-controller.scss */ + .l-time-controller .l-time-range-slider-holder .range-holder .range .toi-line:after { + -moz-border-radius: 8px; + -webkit-border-radius: 8px; + border-radius: 8px; + -moz-transform: translateY(-50%); + -ms-transform: translateY(-50%); + -webkit-transform: translateY(-50%); + transform: translateY(-50%); + top: 50%; + right: 0; + bottom: auto; + left: 0; + width: auto; + height: 8px; } + /* line 3, ../../../../general/res/sass/controls/_time-controller.scss */ + .l-time-controller .l-time-range-slider-holder .range-holder .range:hover .toi-line:before, .l-time-controller .l-time-range-slider-holder .range-holder .range:hover .toi-line:after { + background-color: #fff; } +/* line 116, ../../../../general/res/sass/controls/_time-controller.scss */ +.l-time-controller .l-time-range-ticks-holder { + height: 20px; } + /* line 118, ../../../../general/res/sass/controls/_time-controller.scss */ + .l-time-controller .l-time-range-ticks-holder .l-time-range-ticks { + border-top: 1px solid rgba(255, 255, 255, 0.2); } + /* line 120, ../../../../general/res/sass/controls/_time-controller.scss */ + .l-time-controller .l-time-range-ticks-holder .l-time-range-ticks .tick { + background-color: rgba(255, 255, 255, 0.2); + border: none; + height: 5px; + width: 1px; + margin-left: -1px; + position: absolute; } + /* line 127, ../../../../general/res/sass/controls/_time-controller.scss */ + .l-time-controller .l-time-range-ticks-holder .l-time-range-ticks .tick:first-child { + margin-left: 0; } + /* line 130, ../../../../general/res/sass/controls/_time-controller.scss */ + .l-time-controller .l-time-range-ticks-holder .l-time-range-ticks .tick .l-time-range-tick-label { + transform: translateX(-50%); + -webkit-transform: translateX(-50%); + color: #666666; + display: inline-block; + font-size: 0.7em; + position: absolute; + top: 8px; + white-space: nowrap; + z-index: 2; } +/* line 144, ../../../../general/res/sass/controls/_time-controller.scss */ +.l-time-controller .knob { + z-index: 2; } + /* line 146, ../../../../general/res/sass/controls/_time-controller.scss */ + .l-time-controller .knob .range-value { + -moz-transition-property: visibility, opacity, background-color, border-color; + -o-transition-property: visibility, opacity, background-color, border-color; + -webkit-transition-property: visibility, opacity, background-color, border-color; + transition-property: visibility, opacity, background-color, border-color; + -moz-transition-duration: 0.25s; + -o-transition-duration: 0.25s; + -webkit-transition-duration: 0.25s; + transition-duration: 0.25s; + -moz-transition-timing-function: ease-in-out; + -o-transition-timing-function: ease-in-out; + -webkit-transition-timing-function: ease-in-out; + transition-timing-function: ease-in-out; + padding: 0 10px; + position: absolute; + height: 20px; + line-height: 20px; + white-space: nowrap; } + /* line 155, ../../../../general/res/sass/controls/_time-controller.scss */ + .l-time-controller .knob:hover .range-value { + color: #0099cc; } + /* line 158, ../../../../general/res/sass/controls/_time-controller.scss */ + .l-time-controller .knob.knob-l { + margin-left: -10px; } + /* line 161, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller .knob.knob-l .range-value { text-align: right; right: 10px; } - /* line 115, ../../../../general/res/sass/controls/_time-controller.scss */ + /* line 166, ../../../../general/res/sass/controls/_time-controller.scss */ + .l-time-controller .knob.knob-r { + margin-right: -10px; } + /* line 169, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller .knob.knob-r .range-value { left: 10px; } + /* line 3, ../../../../general/res/sass/controls/_time-controller.scss */ + .l-time-controller .knob.knob-r:hover + .range-holder .range .toi-line:before, .l-time-controller .knob.knob-r:hover + .range-holder .range .toi-line:after { + background-color: #fff; } -/* line 126, ../../../../general/res/sass/controls/_time-controller.scss */ +/* line 183, ../../../../general/res/sass/controls/_time-controller.scss */ .s-time-range-val { -moz-border-radius: 3px; -webkit-border-radius: 3px; @@ -2769,11 +2857,12 @@ textarea { -o-transition: background, 0.25s; -webkit-transition: background, 0.25s; transition: background, 0.25s; - text-shadow: rgba(0, 0, 0, 0.3) 0 1px 1px; - margin: 0 0 2px 2px; + text-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px; + margin: 0 0 2px 0; padding: 0 5px; overflow: hidden; - position: relative; } + position: relative; + line-height: 22px; } /* line 272, ../../../../general/res/sass/_mixins.scss */ .select .icon { color: #0099cc; } @@ -2784,7 +2873,7 @@ textarea { /* line 279, ../../../../general/res/sass/_mixins.scss */ .select:not(.disabled):hover > .icon { color: #33ccff; } } - /* line 28, ../../../../general/res/sass/forms/_selects.scss */ + /* line 31, ../../../../general/res/sass/forms/_selects.scss */ .select select { -moz-appearance: none; -webkit-appearance: none; @@ -2797,10 +2886,10 @@ textarea { border: none !important; padding: 4px 25px 2px 0px; width: 120%; } - /* line 37, ../../../../general/res/sass/forms/_selects.scss */ + /* line 40, ../../../../general/res/sass/forms/_selects.scss */ .select select option { margin: 5px 0; } - /* line 41, ../../../../general/res/sass/forms/_selects.scss */ + /* line 44, ../../../../general/res/sass/forms/_selects.scss */ .select:after { text-shadow: none; content: '\76'; @@ -2896,26 +2985,44 @@ textarea { * this source code distribution or the Licensing information page available * at runtime from the About dialog for additional information. *****************************************************************************/ -/* line 23, ../../../../general/res/sass/forms/_datetime.scss */ -.complex.datetime span { - display: inline-block; - margin-right: 5px; } -/* line 36, ../../../../general/res/sass/forms/_datetime.scss */ -.complex.datetime .fields { - margin-top: 3px 0; - padding: 3px 0; } -/* line 41, ../../../../general/res/sass/forms/_datetime.scss */ -.complex.datetime .date { - width: 85px; } - /* line 44, ../../../../general/res/sass/forms/_datetime.scss */ - .complex.datetime .date input { - width: 80px; } -/* line 50, ../../../../general/res/sass/forms/_datetime.scss */ -.complex.datetime .time.sm { - width: 45px; } - /* line 53, ../../../../general/res/sass/forms/_datetime.scss */ - .complex.datetime .time.sm input { - width: 40px; } +/* line 29, ../../../../general/res/sass/forms/_datetime.scss */ +.complex.datetime { + /* + .field-hints, + .fields { + } + + + .field-hints { + + } + */ } + /* line 30, ../../../../general/res/sass/forms/_datetime.scss */ + .complex.datetime span { + display: inline-block; + margin-right: 5px; } + /* line 46, ../../../../general/res/sass/forms/_datetime.scss */ + .complex.datetime .fields { + margin-top: 3px 0; + padding: 3px 0; } + /* line 51, ../../../../general/res/sass/forms/_datetime.scss */ + .complex.datetime .date { + width: 85px; } + /* line 24, ../../../../general/res/sass/forms/_datetime.scss */ + .complex.datetime .date input[type="text"] { + width: 80px; } + /* line 55, ../../../../general/res/sass/forms/_datetime.scss */ + .complex.datetime .time.md { + width: 65px; } + /* line 24, ../../../../general/res/sass/forms/_datetime.scss */ + .complex.datetime .time.md input[type="text"] { + width: 60px; } + /* line 59, ../../../../general/res/sass/forms/_datetime.scss */ + .complex.datetime .time.sm { + width: 45px; } + /* line 24, ../../../../general/res/sass/forms/_datetime.scss */ + .complex.datetime .time.sm input[type="text"] { + width: 40px; } /***************************************************************************** * Open MCT Web, Copyright (c) 2014-2015, United States Government @@ -4093,7 +4200,7 @@ span.req { -o-transition: background, 0.25s; -webkit-transition: background, 0.25s; transition: background, 0.25s; - text-shadow: rgba(0, 0, 0, 0.3) 0 1px 1px; } + text-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px; } /* line 272, ../../../../general/res/sass/_mixins.scss */ .overlay .bottom-bar .s-btn:not(.major) .icon, .overlay .bottom-bar .s-menu-btn:not(.major) .icon { color: #fff; } @@ -5464,7 +5571,7 @@ table { -o-transition: background, 0.25s; -webkit-transition: background, 0.25s; transition: background, 0.25s; - text-shadow: rgba(0, 0, 0, 0.3) 0 1px 1px; + text-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px; box-sizing: border-box; cursor: pointer; float: left; @@ -5613,7 +5720,7 @@ table { -o-transition: background, 0.25s; -webkit-transition: background, 0.25s; transition: background, 0.25s; - text-shadow: rgba(0, 0, 0, 0.3) 0 1px 1px; + text-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px; color: #80dfff; } /* line 272, ../../../../general/res/sass/_mixins.scss */ .items-holder .item.grid-item.selected .icon { diff --git a/platform/commonUI/themes/espresso/res/sass/_constants.scss b/platform/commonUI/themes/espresso/res/sass/_constants.scss index 5d6d33ab5c..9a39f73bf3 100644 --- a/platform/commonUI/themes/espresso/res/sass/_constants.scss +++ b/platform/commonUI/themes/espresso/res/sass/_constants.scss @@ -31,7 +31,10 @@ $sliderColorKnob: rgba($sliderColorBase, 0.6); $sliderColorKnobHov: $sliderColorBase; $sliderColorRangeValHovBg: rgba($sliderColorBase, 0.1); $sliderColorRangeValHovFg: $colorKeyFg; -$sliderKnobW: 4px; +$sliderH: 20px; +$sliderKnobW: $sliderH/2; +$timeControllerToiLineColor: #00c2ff; +$timeControllerToiLineColorHov: #fff; // General Colors $colorAlt1: #ffc700; diff --git a/platform/commonUI/themes/snow/res/css/theme-snow.css b/platform/commonUI/themes/snow/res/css/theme-snow.css index 171b6b0ce5..e057283563 100644 --- a/platform/commonUI/themes/snow/res/css/theme-snow.css +++ b/platform/commonUI/themes/snow/res/css/theme-snow.css @@ -1810,7 +1810,7 @@ label.checkbox.custom { opacity: 1; } } /******************************************************** SLIDERS */ -/* line 300, ../../../../general/res/sass/controls/_controls.scss */ +/* line 298, ../../../../general/res/sass/controls/_controls.scss */ .slider .slot { width: auto; position: absolute; @@ -1818,7 +1818,7 @@ label.checkbox.custom { right: 0; bottom: 0; left: 0; } -/* line 312, ../../../../general/res/sass/controls/_controls.scss */ +/* line 308, ../../../../general/res/sass/controls/_controls.scss */ .slider .knob { -moz-transition-property: visibility, opacity, background-color, border-color; -o-transition-property: visibility, opacity, background-color, border-color; @@ -1832,19 +1832,36 @@ label.checkbox.custom { -o-transition-timing-function: ease-in-out; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; - background-color: rgba(0, 153, 204, 0.3); - cursor: ew-resize; + background-color: rgba(0, 153, 204, 0.5); position: absolute; height: 100%; - width: 12px; + width: 10px; top: 0; auto: 0; bottom: auto; left: auto; } - /* line 317, ../../../../general/res/sass/controls/_controls.scss */ + /* line 313, ../../../../general/res/sass/controls/_controls.scss */ .slider .knob:hover { - background-color: #0099cc; } -/* line 335, ../../../../general/res/sass/controls/_controls.scss */ + background-color: rgba(0, 153, 204, 0.7); } +/* line 324, ../../../../general/res/sass/controls/_controls.scss */ +.slider .knob-l { + -moz-border-radius-topleft: 10px; + -webkit-border-top-left-radius: 10px; + border-top-left-radius: 10px; + -moz-border-radius-bottomleft: 10px; + -webkit-border-bottom-left-radius: 10px; + border-bottom-left-radius: 10px; + cursor: w-resize; } +/* line 328, ../../../../general/res/sass/controls/_controls.scss */ +.slider .knob-r { + -moz-border-radius-topright: 10px; + -webkit-border-top-right-radius: 10px; + border-top-right-radius: 10px; + -moz-border-radius-bottomright: 10px; + -webkit-border-bottom-right-radius: 10px; + border-bottom-right-radius: 10px; + cursor: e-resize; } +/* line 332, ../../../../general/res/sass/controls/_controls.scss */ .slider .range { -moz-transition-property: visibility, opacity, background-color, border-color; -o-transition-property: visibility, opacity, background-color, border-color; @@ -1858,7 +1875,7 @@ label.checkbox.custom { -o-transition-timing-function: ease-in-out; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; - background-color: rgba(0, 153, 204, 0.3); + background-color: rgba(0, 153, 204, 0.2); cursor: ew-resize; position: absolute; top: 0; @@ -1867,12 +1884,12 @@ label.checkbox.custom { left: auto; height: auto; width: auto; } - /* line 346, ../../../../general/res/sass/controls/_controls.scss */ + /* line 343, ../../../../general/res/sass/controls/_controls.scss */ .slider .range:hover { - background-color: rgba(0, 153, 204, 0.5); } + background-color: rgba(0, 153, 204, 0.4); } /******************************************************** DATETIME PICKER */ -/* line 353, ../../../../general/res/sass/controls/_controls.scss */ +/* line 350, ../../../../general/res/sass/controls/_controls.scss */ .l-datetime-picker { -moz-user-select: -moz-none; -ms-user-select: none; @@ -1881,59 +1898,66 @@ label.checkbox.custom { font-size: 0.8rem; padding: 10px !important; width: 230px; } - /* line 359, ../../../../general/res/sass/controls/_controls.scss */ + /* line 356, ../../../../general/res/sass/controls/_controls.scss */ .l-datetime-picker .l-month-year-pager { font-size: 0.8rem; height: 15px; margin-bottom: 5px; position: relative; } - /* line 371, ../../../../general/res/sass/controls/_controls.scss */ + /* line 368, ../../../../general/res/sass/controls/_controls.scss */ .l-datetime-picker .l-month-year-pager .pager { width: 20px; } - /* line 374, ../../../../general/res/sass/controls/_controls.scss */ + /* line 371, ../../../../general/res/sass/controls/_controls.scss */ .l-datetime-picker .l-month-year-pager .pager.prev { right: auto; } - /* line 376, ../../../../general/res/sass/controls/_controls.scss */ + /* line 373, ../../../../general/res/sass/controls/_controls.scss */ .l-datetime-picker .l-month-year-pager .pager.prev:before { content: "\3c"; } - /* line 380, ../../../../general/res/sass/controls/_controls.scss */ + /* line 377, ../../../../general/res/sass/controls/_controls.scss */ .l-datetime-picker .l-month-year-pager .pager.next { left: auto; text-align: right; } - /* line 383, ../../../../general/res/sass/controls/_controls.scss */ + /* line 380, ../../../../general/res/sass/controls/_controls.scss */ .l-datetime-picker .l-month-year-pager .pager.next:before { content: "\3e"; } - /* line 388, ../../../../general/res/sass/controls/_controls.scss */ + /* line 385, ../../../../general/res/sass/controls/_controls.scss */ .l-datetime-picker .l-month-year-pager .val { text-align: center; left: 25px; right: 25px; } + /* line 391, ../../../../general/res/sass/controls/_controls.scss */ + .l-datetime-picker .l-calendar, + .l-datetime-picker .l-time-selects { + border-top: 1px solid rgba(102, 102, 102, 0.2); } + /* line 395, ../../../../general/res/sass/controls/_controls.scss */ + .l-datetime-picker .l-time-selects { + line-height: 22px; } /******************************************************** CALENDAR */ -/* line 399, ../../../../general/res/sass/controls/_controls.scss */ +/* line 403, ../../../../general/res/sass/controls/_controls.scss */ .l-calendar ul.l-cal-row { display: -webkit-flex; display: flex; -webkit-flex-flow: row nowrap; flex-flow: row nowrap; margin-top: 1px; } - /* line 403, ../../../../general/res/sass/controls/_controls.scss */ + /* line 407, ../../../../general/res/sass/controls/_controls.scss */ .l-calendar ul.l-cal-row:first-child { margin-top: 0; } - /* line 406, ../../../../general/res/sass/controls/_controls.scss */ + /* line 410, ../../../../general/res/sass/controls/_controls.scss */ .l-calendar ul.l-cal-row li { -webkit-flex: 1 0; flex: 1 0; margin-left: 1px; padding: 5px; text-align: center; } - /* line 412, ../../../../general/res/sass/controls/_controls.scss */ + /* line 416, ../../../../general/res/sass/controls/_controls.scss */ .l-calendar ul.l-cal-row li:first-child { margin-left: 0; } - /* line 416, ../../../../general/res/sass/controls/_controls.scss */ + /* line 420, ../../../../general/res/sass/controls/_controls.scss */ .l-calendar ul.l-cal-row.l-header li { color: #999999; } - /* line 419, ../../../../general/res/sass/controls/_controls.scss */ + /* line 423, ../../../../general/res/sass/controls/_controls.scss */ .l-calendar ul.l-cal-row.l-body li { -moz-transition-property: background-color; -o-transition-property: background-color; @@ -1948,31 +1972,31 @@ label.checkbox.custom { -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; cursor: pointer; } - /* line 422, ../../../../general/res/sass/controls/_controls.scss */ + /* line 426, ../../../../general/res/sass/controls/_controls.scss */ .l-calendar ul.l-cal-row.l-body li.in-month { background-color: #f2f2f2; } - /* line 425, ../../../../general/res/sass/controls/_controls.scss */ + /* line 429, ../../../../general/res/sass/controls/_controls.scss */ .l-calendar ul.l-cal-row.l-body li .sub { color: #999999; font-size: 0.8em; } - /* line 429, ../../../../general/res/sass/controls/_controls.scss */ + /* line 433, ../../../../general/res/sass/controls/_controls.scss */ .l-calendar ul.l-cal-row.l-body li.selected { background: #1ac6ff; color: #fcfcfc; } - /* line 432, ../../../../general/res/sass/controls/_controls.scss */ + /* line 436, ../../../../general/res/sass/controls/_controls.scss */ .l-calendar ul.l-cal-row.l-body li.selected .sub { color: inherit; } - /* line 436, ../../../../general/res/sass/controls/_controls.scss */ + /* line 440, ../../../../general/res/sass/controls/_controls.scss */ .l-calendar ul.l-cal-row.l-body li:hover { background-color: #0099cc; color: #fff; } - /* line 439, ../../../../general/res/sass/controls/_controls.scss */ + /* line 443, ../../../../general/res/sass/controls/_controls.scss */ .l-calendar ul.l-cal-row.l-body li:hover .sub { color: inherit; } /******************************************************** BROWSER ELEMENTS */ @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) { - /* line 450, ../../../../general/res/sass/controls/_controls.scss */ + /* line 454, ../../../../general/res/sass/controls/_controls.scss */ ::-webkit-scrollbar { -moz-border-radius: 2px; -webkit-border-radius: 2px; @@ -1987,7 +2011,7 @@ label.checkbox.custom { height: 10px; width: 10px; } - /* line 459, ../../../../general/res/sass/controls/_controls.scss */ + /* line 463, ../../../../general/res/sass/controls/_controls.scss */ ::-webkit-scrollbar-thumb { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzg5ODk4OSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzdkN2Q3ZCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; @@ -2001,7 +2025,7 @@ label.checkbox.custom { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } - /* line 468, ../../../../general/res/sass/controls/_controls.scss */ + /* line 472, ../../../../general/res/sass/controls/_controls.scss */ ::-webkit-scrollbar-thumb:hover { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwYWNlNiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwOTljYyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; @@ -2010,7 +2034,7 @@ label.checkbox.custom { background-image: -webkit-linear-gradient(#00ace6, #0099cc 20px); background-image: linear-gradient(#00ace6, #0099cc 20px); } - /* line 473, ../../../../general/res/sass/controls/_controls.scss */ + /* line 477, ../../../../general/res/sass/controls/_controls.scss */ ::-webkit-scrollbar-corner { background: rgba(0, 0, 0, 0.1); } } /***************************************************************************** @@ -2310,130 +2334,194 @@ label.checkbox.custom { right: 0; width: auto; } -/* line 1, ../../../../general/res/sass/controls/_time-controller.scss */ -.l-time-controller { - min-width: 400px; } - /* line 9, ../../../../general/res/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 14, ../../../../general/res/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 { - overflow: visible; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - width: auto; - height: auto; - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; - top: auto; } - /* line 23, ../../../../general/res/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 29, ../../../../general/res/sass/controls/_time-controller.scss */ - .l-time-controller .l-time-range-inputs-holder { - height: 33px; - bottom: 46px; - padding-top: 5px; - border-top: 1px solid rgba(102, 102, 102, 0.2); } - /* line 34, ../../../../general/res/sass/controls/_time-controller.scss */ - .l-time-controller .l-time-range-inputs-holder .type-icon { - font-size: 120%; - vertical-align: middle; } - /* line 38, ../../../../general/res/sass/controls/_time-controller.scss */ - .l-time-controller .l-time-range-inputs-holder .l-time-range-input, - .l-time-controller .l-time-range-inputs-holder .l-time-range-inputs-elem { - margin-right: 5px; } - /* line 41, ../../../../general/res/sass/controls/_time-controller.scss */ - .l-time-controller .l-time-range-inputs-holder .l-time-range-input .lbl, - .l-time-controller .l-time-range-inputs-holder .l-time-range-inputs-elem .lbl { - color: #999999; } - /* line 44, ../../../../general/res/sass/controls/_time-controller.scss */ - .l-time-controller .l-time-range-inputs-holder .l-time-range-input .ui-symbol.icon, .l-time-controller .l-time-range-inputs-holder .l-time-range-input .l-datetime-picker .l-month-year-pager .icon.pager, .l-datetime-picker .l-month-year-pager .l-time-controller .l-time-range-inputs-holder .l-time-range-input .icon.pager, - .l-time-controller .l-time-range-inputs-holder .l-time-range-inputs-elem .ui-symbol.icon, - .l-time-controller .l-time-range-inputs-holder .l-time-range-inputs-elem .l-datetime-picker .l-month-year-pager .icon.pager, - .l-datetime-picker .l-month-year-pager .l-time-controller .l-time-range-inputs-holder .l-time-range-inputs-elem .icon.pager { - font-size: 11px; - width: 11px; } +/* line 21, ../../../../general/res/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 26, ../../../../general/res/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 { + overflow: visible; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + width: auto; + height: auto; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + min-width: 400px; + top: auto; } +/* line 36, ../../../../general/res/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 42, ../../../../general/res/sass/controls/_time-controller.scss */ +.l-time-controller .l-time-range-inputs-holder { + height: 33px; + bottom: 46px; + padding-top: 5px; + border-top: 1px solid rgba(102, 102, 102, 0.2); } + /* line 47, ../../../../general/res/sass/controls/_time-controller.scss */ + .l-time-controller .l-time-range-inputs-holder .type-icon { + font-size: 120%; + vertical-align: middle; } /* line 51, ../../../../general/res/sass/controls/_time-controller.scss */ - .l-time-controller .l-time-range-slider, - .l-time-controller .l-time-range-ticks { - left: 125px; - right: 125px; } - /* line 57, ../../../../general/res/sass/controls/_time-controller.scss */ - .l-time-controller .l-time-range-slider-holder { - height: 20px; - bottom: 23px; } - /* line 60, ../../../../general/res/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; } - /* line 67, ../../../../general/res/sass/controls/_time-controller.scss */ - .l-time-controller .l-time-range-ticks-holder { - height: 20px; } - /* line 69, ../../../../general/res/sass/controls/_time-controller.scss */ - .l-time-controller .l-time-range-ticks-holder .l-time-range-ticks { - border-top: 1px solid rgba(0, 0, 0, 0.2); } - /* line 71, ../../../../general/res/sass/controls/_time-controller.scss */ - .l-time-controller .l-time-range-ticks-holder .l-time-range-ticks .tick { - background-color: rgba(0, 0, 0, 0.2); - border: none; - height: 5px; - width: 1px; - margin-left: -1px; - position: absolute; } - /* line 78, ../../../../general/res/sass/controls/_time-controller.scss */ - .l-time-controller .l-time-range-ticks-holder .l-time-range-ticks .tick:first-child { - margin-left: 0; } - /* line 81, ../../../../general/res/sass/controls/_time-controller.scss */ - .l-time-controller .l-time-range-ticks-holder .l-time-range-ticks .tick .l-time-range-tick-label { - transform: translateX(-50%); - -webkit-transform: translateX(-50%); - color: #999999; - display: inline-block; - font-size: 0.7em; - position: absolute; - top: 8px; - white-space: nowrap; - z-index: 2; } - /* line 95, ../../../../general/res/sass/controls/_time-controller.scss */ - .l-time-controller .knob { - width: 5px; } - /* line 97, ../../../../general/res/sass/controls/_time-controller.scss */ - .l-time-controller .knob .range-value { + .l-time-controller .l-time-range-inputs-holder .l-time-range-input, + .l-time-controller .l-time-range-inputs-holder .l-time-range-inputs-elem { + margin-right: 5px; } + /* line 54, ../../../../general/res/sass/controls/_time-controller.scss */ + .l-time-controller .l-time-range-inputs-holder .l-time-range-input .lbl, + .l-time-controller .l-time-range-inputs-holder .l-time-range-inputs-elem .lbl { + color: #999999; } + /* line 57, ../../../../general/res/sass/controls/_time-controller.scss */ + .l-time-controller .l-time-range-inputs-holder .l-time-range-input .ui-symbol.icon, .l-time-controller .l-time-range-inputs-holder .l-time-range-input .l-datetime-picker .l-month-year-pager .icon.pager, .l-datetime-picker .l-month-year-pager .l-time-controller .l-time-range-inputs-holder .l-time-range-input .icon.pager, + .l-time-controller .l-time-range-inputs-holder .l-time-range-inputs-elem .ui-symbol.icon, + .l-time-controller .l-time-range-inputs-holder .l-time-range-inputs-elem .l-datetime-picker .l-month-year-pager .icon.pager, + .l-datetime-picker .l-month-year-pager .l-time-controller .l-time-range-inputs-holder .l-time-range-inputs-elem .icon.pager { + font-size: 11px; + width: 11px; } +/* line 64, ../../../../general/res/sass/controls/_time-controller.scss */ +.l-time-controller .l-time-range-slider, +.l-time-controller .l-time-range-ticks { + left: 150px; + right: 150px; } +/* line 70, ../../../../general/res/sass/controls/_time-controller.scss */ +.l-time-controller .l-time-range-slider-holder { + height: 20px; + bottom: 23px; } + /* line 73, ../../../../general/res/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; } + /* line 78, ../../../../general/res/sass/controls/_time-controller.scss */ + .l-time-controller .l-time-range-slider-holder .range-holder .range .toi-line { + -moz-transform: translateX(50%); + -ms-transform: translateX(50%); + -webkit-transform: translateX(50%); + transform: translateX(50%); position: absolute; - height: 20px; - line-height: 20px; - white-space: nowrap; } - /* line 103, ../../../../general/res/sass/controls/_time-controller.scss */ - .l-time-controller .knob:hover .range-value { - color: #0099cc; } - /* line 108, ../../../../general/res/sass/controls/_time-controller.scss */ + top: 0; + right: 0; + bottom: 0px; + left: auto; + width: 8px; + height: auto; + z-index: 2; } + /* line 88, ../../../../general/res/sass/controls/_time-controller.scss */ + .l-time-controller .l-time-range-slider-holder .range-holder .range .toi-line:before, .l-time-controller .l-time-range-slider-holder .range-holder .range .toi-line:after { + background-color: #666; + content: ""; + position: absolute; } + /* line 94, ../../../../general/res/sass/controls/_time-controller.scss */ + .l-time-controller .l-time-range-slider-holder .range-holder .range .toi-line:before { + top: 0; + right: auto; + bottom: -10px; + left: 3px; + width: 2px; } + /* line 100, ../../../../general/res/sass/controls/_time-controller.scss */ + .l-time-controller .l-time-range-slider-holder .range-holder .range .toi-line:after { + -moz-border-radius: 8px; + -webkit-border-radius: 8px; + border-radius: 8px; + -moz-transform: translateY(-50%); + -ms-transform: translateY(-50%); + -webkit-transform: translateY(-50%); + transform: translateY(-50%); + top: 50%; + right: 0; + bottom: auto; + left: 0; + width: auto; + height: 8px; } + /* line 3, ../../../../general/res/sass/controls/_time-controller.scss */ + .l-time-controller .l-time-range-slider-holder .range-holder .range:hover .toi-line:before, .l-time-controller .l-time-range-slider-holder .range-holder .range:hover .toi-line:after { + background-color: #0052b5; } +/* line 116, ../../../../general/res/sass/controls/_time-controller.scss */ +.l-time-controller .l-time-range-ticks-holder { + height: 20px; } + /* line 118, ../../../../general/res/sass/controls/_time-controller.scss */ + .l-time-controller .l-time-range-ticks-holder .l-time-range-ticks { + border-top: 1px solid rgba(0, 0, 0, 0.2); } + /* line 120, ../../../../general/res/sass/controls/_time-controller.scss */ + .l-time-controller .l-time-range-ticks-holder .l-time-range-ticks .tick { + background-color: rgba(0, 0, 0, 0.2); + border: none; + height: 5px; + width: 1px; + margin-left: -1px; + position: absolute; } + /* line 127, ../../../../general/res/sass/controls/_time-controller.scss */ + .l-time-controller .l-time-range-ticks-holder .l-time-range-ticks .tick:first-child { + margin-left: 0; } + /* line 130, ../../../../general/res/sass/controls/_time-controller.scss */ + .l-time-controller .l-time-range-ticks-holder .l-time-range-ticks .tick .l-time-range-tick-label { + transform: translateX(-50%); + -webkit-transform: translateX(-50%); + color: #999999; + display: inline-block; + font-size: 0.7em; + position: absolute; + top: 8px; + white-space: nowrap; + z-index: 2; } +/* line 144, ../../../../general/res/sass/controls/_time-controller.scss */ +.l-time-controller .knob { + z-index: 2; } + /* line 146, ../../../../general/res/sass/controls/_time-controller.scss */ + .l-time-controller .knob .range-value { + -moz-transition-property: visibility, opacity, background-color, border-color; + -o-transition-property: visibility, opacity, background-color, border-color; + -webkit-transition-property: visibility, opacity, background-color, border-color; + transition-property: visibility, opacity, background-color, border-color; + -moz-transition-duration: 0.25s; + -o-transition-duration: 0.25s; + -webkit-transition-duration: 0.25s; + transition-duration: 0.25s; + -moz-transition-timing-function: ease-in-out; + -o-transition-timing-function: ease-in-out; + -webkit-transition-timing-function: ease-in-out; + transition-timing-function: ease-in-out; + padding: 0 10px; + position: absolute; + height: 20px; + line-height: 20px; + white-space: nowrap; } + /* line 155, ../../../../general/res/sass/controls/_time-controller.scss */ + .l-time-controller .knob:hover .range-value { + color: rgba(0, 153, 204, 0.7); } + /* line 158, ../../../../general/res/sass/controls/_time-controller.scss */ + .l-time-controller .knob.knob-l { + margin-left: -10px; } + /* line 161, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller .knob.knob-l .range-value { text-align: right; right: 10px; } - /* line 115, ../../../../general/res/sass/controls/_time-controller.scss */ + /* line 166, ../../../../general/res/sass/controls/_time-controller.scss */ + .l-time-controller .knob.knob-r { + margin-right: -10px; } + /* line 169, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller .knob.knob-r .range-value { left: 10px; } + /* line 3, ../../../../general/res/sass/controls/_time-controller.scss */ + .l-time-controller .knob.knob-r:hover + .range-holder .range .toi-line:before, .l-time-controller .knob.knob-r:hover + .range-holder .range .toi-line:after { + background-color: #0052b5; } -/* line 126, ../../../../general/res/sass/controls/_time-controller.scss */ +/* line 183, ../../../../general/res/sass/controls/_time-controller.scss */ .s-time-range-val { -moz-border-radius: 4px; -webkit-border-radius: 4px; @@ -2725,14 +2813,14 @@ textarea { -webkit-transition: background, 0.25s; transition: background, 0.25s; text-shadow: none; - margin: 0 0 2px 2px; padding: 0 5px; overflow: hidden; - position: relative; } + position: relative; + line-height: 22px; } /* line 272, ../../../../general/res/sass/_mixins.scss */ .select .icon { color: #eee; } - /* line 28, ../../../../general/res/sass/forms/_selects.scss */ + /* line 31, ../../../../general/res/sass/forms/_selects.scss */ .select select { -moz-appearance: none; -webkit-appearance: none; @@ -2745,10 +2833,10 @@ textarea { border: none !important; padding: 4px 25px 2px 0px; width: 120%; } - /* line 37, ../../../../general/res/sass/forms/_selects.scss */ + /* line 40, ../../../../general/res/sass/forms/_selects.scss */ .select select option { margin: 5px 0; } - /* line 41, ../../../../general/res/sass/forms/_selects.scss */ + /* line 44, ../../../../general/res/sass/forms/_selects.scss */ .select:after { text-shadow: none; content: '\76'; @@ -2844,26 +2932,44 @@ textarea { * this source code distribution or the Licensing information page available * at runtime from the About dialog for additional information. *****************************************************************************/ -/* line 23, ../../../../general/res/sass/forms/_datetime.scss */ -.complex.datetime span { - display: inline-block; - margin-right: 5px; } -/* line 36, ../../../../general/res/sass/forms/_datetime.scss */ -.complex.datetime .fields { - margin-top: 3px 0; - padding: 3px 0; } -/* line 41, ../../../../general/res/sass/forms/_datetime.scss */ -.complex.datetime .date { - width: 85px; } - /* line 44, ../../../../general/res/sass/forms/_datetime.scss */ - .complex.datetime .date input { - width: 80px; } -/* line 50, ../../../../general/res/sass/forms/_datetime.scss */ -.complex.datetime .time.sm { - width: 45px; } - /* line 53, ../../../../general/res/sass/forms/_datetime.scss */ - .complex.datetime .time.sm input { - width: 40px; } +/* line 29, ../../../../general/res/sass/forms/_datetime.scss */ +.complex.datetime { + /* + .field-hints, + .fields { + } + + + .field-hints { + + } + */ } + /* line 30, ../../../../general/res/sass/forms/_datetime.scss */ + .complex.datetime span { + display: inline-block; + margin-right: 5px; } + /* line 46, ../../../../general/res/sass/forms/_datetime.scss */ + .complex.datetime .fields { + margin-top: 3px 0; + padding: 3px 0; } + /* line 51, ../../../../general/res/sass/forms/_datetime.scss */ + .complex.datetime .date { + width: 85px; } + /* line 24, ../../../../general/res/sass/forms/_datetime.scss */ + .complex.datetime .date input[type="text"] { + width: 80px; } + /* line 55, ../../../../general/res/sass/forms/_datetime.scss */ + .complex.datetime .time.md { + width: 65px; } + /* line 24, ../../../../general/res/sass/forms/_datetime.scss */ + .complex.datetime .time.md input[type="text"] { + width: 60px; } + /* line 59, ../../../../general/res/sass/forms/_datetime.scss */ + .complex.datetime .time.sm { + width: 45px; } + /* line 24, ../../../../general/res/sass/forms/_datetime.scss */ + .complex.datetime .time.sm input[type="text"] { + width: 40px; } /***************************************************************************** * Open MCT Web, Copyright (c) 2014-2015, United States Government diff --git a/platform/commonUI/themes/snow/res/sass/_constants.scss b/platform/commonUI/themes/snow/res/sass/_constants.scss index fc08201622..3fc49b1486 100644 --- a/platform/commonUI/themes/snow/res/sass/_constants.scss +++ b/platform/commonUI/themes/snow/res/sass/_constants.scss @@ -25,13 +25,16 @@ $contrastInvokeMenuPercent: 40%; $shdwBtns: none; $sliderColorBase: $colorKey; $sliderColorRangeHolder: rgba(black, 0.07); -$sliderColorRange: rgba($sliderColorBase, 0.3); -$sliderColorRangeHov: rgba($sliderColorBase, 0.5); -$sliderColorKnob: rgba($sliderColorBase, 0.6); -$sliderColorKnobHov: $sliderColorBase; +$sliderColorRange: rgba($sliderColorBase, 0.2); +$sliderColorRangeHov: rgba($sliderColorBase, 0.4); +$sliderColorKnob: rgba($sliderColorBase, 0.5); +$sliderColorKnobHov: rgba($sliderColorBase, 0.7); $sliderColorRangeValHovBg: $sliderColorRange; //rgba($sliderColorBase, 0.1); $sliderColorRangeValHovFg: $colorBodyFg; -$sliderKnobW: 4px; +$sliderH: 20px; +$sliderKnobW: $sliderH/2; +$timeControllerToiLineColor: $colorBodyFg; +$timeControllerToiLineColorHov: #0052b5; // General Colors $colorAlt1: #ff6600; From 23de3917bb1042abfe3e6fcc24bbdc1945a36526 Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Sun, 27 Sep 2015 16:24:43 -0700 Subject: [PATCH 02/23] [Frontend] Time Controller Markup and Styling open #1515 open #117 Animation added to .knob and .range; --- .../res/sass/controls/_time-controller.scss | 18 +++-- .../espresso/res/css/theme-espresso.css | 78 +++++++++++-------- .../themes/snow/res/css/theme-snow.css | 78 +++++++++++-------- 3 files changed, 102 insertions(+), 72 deletions(-) diff --git a/platform/commonUI/general/res/sass/controls/_time-controller.scss b/platform/commonUI/general/res/sass/controls/_time-controller.scss index 96cfa1f7ab..6942b8b57a 100644 --- a/platform/commonUI/general/res/sass/controls/_time-controller.scss +++ b/platform/commonUI/general/res/sass/controls/_time-controller.scss @@ -18,6 +18,8 @@ $r2H: $sliderH; $r3H: 20px; + //height: $r1H + $r2H + $r3H + ($interiorMargin * 2); + .l-time-range-inputs-holder, .l-time-range-slider { font-size: 0.8em; @@ -37,6 +39,7 @@ .l-time-range-ticks { //@include test(red, 0.1); @include absPosDefault(0, visible); + left: $timeRangeSliderLROffset; right: $timeRangeSliderLROffset; } .l-time-range-inputs-holder { @@ -61,12 +64,6 @@ } } - .l-time-range-slider, - .l-time-range-ticks { - left: $timeRangeSliderLROffset; right: $timeRangeSliderLROffset; - - } - .l-time-range-slider-holder { //@include test(green); height: $r2H; bottom: $r3H + ($interiorMarginSm * 1); @@ -111,6 +108,15 @@ } } } + &:not(:active) { + //@include test(#ff00cc); + .knob, + .range { + @include transition-property(left, right); + @include transition-duration(500ms); + @include transition-timing-function(ease-in-out); + } + } } .l-time-range-ticks-holder { diff --git a/platform/commonUI/themes/espresso/res/css/theme-espresso.css b/platform/commonUI/themes/espresso/res/css/theme-espresso.css index aeb8d6cee8..346af1ba45 100644 --- a/platform/commonUI/themes/espresso/res/css/theme-espresso.css +++ b/platform/commonUI/themes/espresso/res/css/theme-espresso.css @@ -2370,11 +2370,11 @@ label.checkbox.custom { right: 0; width: auto; } -/* line 21, ../../../../general/res/sass/controls/_time-controller.scss */ +/* line 23, ../../../../general/res/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 26, ../../../../general/res/sass/controls/_time-controller.scss */ +/* line 28, ../../../../general/res/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 { @@ -2391,7 +2391,7 @@ label.checkbox.custom { box-sizing: border-box; min-width: 400px; top: auto; } -/* line 36, ../../../../general/res/sass/controls/_time-controller.scss */ +/* line 38, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller .l-time-range-slider, .l-time-controller .l-time-range-ticks { overflow: visible; @@ -2401,49 +2401,46 @@ label.checkbox.custom { bottom: 0; left: 0; width: auto; - height: auto; } -/* line 42, ../../../../general/res/sass/controls/_time-controller.scss */ + height: auto; + left: 150px; + right: 150px; } +/* line 45, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller .l-time-range-inputs-holder { height: 33px; bottom: 46px; padding-top: 5px; border-top: 1px solid rgba(153, 153, 153, 0.1); } - /* line 47, ../../../../general/res/sass/controls/_time-controller.scss */ + /* line 50, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller .l-time-range-inputs-holder .type-icon { font-size: 120%; vertical-align: middle; } - /* line 51, ../../../../general/res/sass/controls/_time-controller.scss */ + /* line 54, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller .l-time-range-inputs-holder .l-time-range-input, .l-time-controller .l-time-range-inputs-holder .l-time-range-inputs-elem { margin-right: 5px; } - /* line 54, ../../../../general/res/sass/controls/_time-controller.scss */ + /* line 57, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller .l-time-range-inputs-holder .l-time-range-input .lbl, .l-time-controller .l-time-range-inputs-holder .l-time-range-inputs-elem .lbl { color: #666666; } - /* line 57, ../../../../general/res/sass/controls/_time-controller.scss */ + /* line 60, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller .l-time-range-inputs-holder .l-time-range-input .ui-symbol.icon, .l-time-controller .l-time-range-inputs-holder .l-time-range-input .l-datetime-picker .l-month-year-pager .icon.pager, .l-datetime-picker .l-month-year-pager .l-time-controller .l-time-range-inputs-holder .l-time-range-input .icon.pager, .l-time-controller .l-time-range-inputs-holder .l-time-range-inputs-elem .ui-symbol.icon, .l-time-controller .l-time-range-inputs-holder .l-time-range-inputs-elem .l-datetime-picker .l-month-year-pager .icon.pager, .l-datetime-picker .l-month-year-pager .l-time-controller .l-time-range-inputs-holder .l-time-range-inputs-elem .icon.pager { font-size: 11px; width: 11px; } -/* line 64, ../../../../general/res/sass/controls/_time-controller.scss */ -.l-time-controller .l-time-range-slider, -.l-time-controller .l-time-range-ticks { - left: 150px; - right: 150px; } -/* line 70, ../../../../general/res/sass/controls/_time-controller.scss */ +/* line 67, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller .l-time-range-slider-holder { height: 20px; bottom: 23px; } - /* line 73, ../../../../general/res/sass/controls/_time-controller.scss */ + /* line 70, ../../../../general/res/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; } - /* line 78, ../../../../general/res/sass/controls/_time-controller.scss */ + /* line 75, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller .l-time-range-slider-holder .range-holder .range .toi-line { -moz-transform: translateX(50%); -ms-transform: translateX(50%); @@ -2457,19 +2454,19 @@ label.checkbox.custom { width: 8px; height: auto; z-index: 2; } - /* line 88, ../../../../general/res/sass/controls/_time-controller.scss */ + /* line 85, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller .l-time-range-slider-holder .range-holder .range .toi-line:before, .l-time-controller .l-time-range-slider-holder .range-holder .range .toi-line:after { background-color: #00c2ff; content: ""; position: absolute; } - /* line 94, ../../../../general/res/sass/controls/_time-controller.scss */ + /* line 91, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller .l-time-range-slider-holder .range-holder .range .toi-line:before { top: 0; right: auto; bottom: -10px; left: 3px; width: 2px; } - /* line 100, ../../../../general/res/sass/controls/_time-controller.scss */ + /* line 97, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller .l-time-range-slider-holder .range-holder .range .toi-line:after { -moz-border-radius: 8px; -webkit-border-radius: 8px; @@ -2487,13 +2484,28 @@ label.checkbox.custom { /* line 3, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller .l-time-range-slider-holder .range-holder .range:hover .toi-line:before, .l-time-controller .l-time-range-slider-holder .range-holder .range:hover .toi-line:after { background-color: #fff; } -/* line 116, ../../../../general/res/sass/controls/_time-controller.scss */ + /* line 113, ../../../../general/res/sass/controls/_time-controller.scss */ + .l-time-controller .l-time-range-slider-holder:not(:active) .knob, + .l-time-controller .l-time-range-slider-holder:not(:active) .range { + -moz-transition-property: left, right; + -o-transition-property: left, right; + -webkit-transition-property: left, right; + transition-property: left, right; + -moz-transition-duration: 500ms; + -o-transition-duration: 500ms; + -webkit-transition-duration: 500ms; + transition-duration: 500ms; + -moz-transition-timing-function: ease-in-out; + -o-transition-timing-function: ease-in-out; + -webkit-transition-timing-function: ease-in-out; + transition-timing-function: ease-in-out; } +/* line 122, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller .l-time-range-ticks-holder { height: 20px; } - /* line 118, ../../../../general/res/sass/controls/_time-controller.scss */ + /* line 124, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller .l-time-range-ticks-holder .l-time-range-ticks { border-top: 1px solid rgba(255, 255, 255, 0.2); } - /* line 120, ../../../../general/res/sass/controls/_time-controller.scss */ + /* line 126, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller .l-time-range-ticks-holder .l-time-range-ticks .tick { background-color: rgba(255, 255, 255, 0.2); border: none; @@ -2501,10 +2513,10 @@ label.checkbox.custom { width: 1px; margin-left: -1px; position: absolute; } - /* line 127, ../../../../general/res/sass/controls/_time-controller.scss */ + /* line 133, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller .l-time-range-ticks-holder .l-time-range-ticks .tick:first-child { margin-left: 0; } - /* line 130, ../../../../general/res/sass/controls/_time-controller.scss */ + /* line 136, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller .l-time-range-ticks-holder .l-time-range-ticks .tick .l-time-range-tick-label { transform: translateX(-50%); -webkit-transform: translateX(-50%); @@ -2515,10 +2527,10 @@ label.checkbox.custom { top: 8px; white-space: nowrap; z-index: 2; } -/* line 144, ../../../../general/res/sass/controls/_time-controller.scss */ +/* line 150, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller .knob { z-index: 2; } - /* line 146, ../../../../general/res/sass/controls/_time-controller.scss */ + /* line 152, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller .knob .range-value { -moz-transition-property: visibility, opacity, background-color, border-color; -o-transition-property: visibility, opacity, background-color, border-color; @@ -2537,27 +2549,27 @@ label.checkbox.custom { height: 20px; line-height: 20px; white-space: nowrap; } - /* line 155, ../../../../general/res/sass/controls/_time-controller.scss */ + /* line 161, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller .knob:hover .range-value { color: #0099cc; } - /* line 158, ../../../../general/res/sass/controls/_time-controller.scss */ + /* line 164, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller .knob.knob-l { margin-left: -10px; } - /* line 161, ../../../../general/res/sass/controls/_time-controller.scss */ + /* line 167, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller .knob.knob-l .range-value { text-align: right; right: 10px; } - /* line 166, ../../../../general/res/sass/controls/_time-controller.scss */ + /* line 172, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller .knob.knob-r { margin-right: -10px; } - /* line 169, ../../../../general/res/sass/controls/_time-controller.scss */ + /* line 175, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller .knob.knob-r .range-value { left: 10px; } /* line 3, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller .knob.knob-r:hover + .range-holder .range .toi-line:before, .l-time-controller .knob.knob-r:hover + .range-holder .range .toi-line:after { background-color: #fff; } -/* line 183, ../../../../general/res/sass/controls/_time-controller.scss */ +/* line 189, ../../../../general/res/sass/controls/_time-controller.scss */ .s-time-range-val { -moz-border-radius: 3px; -webkit-border-radius: 3px; diff --git a/platform/commonUI/themes/snow/res/css/theme-snow.css b/platform/commonUI/themes/snow/res/css/theme-snow.css index e057283563..f9c179231c 100644 --- a/platform/commonUI/themes/snow/res/css/theme-snow.css +++ b/platform/commonUI/themes/snow/res/css/theme-snow.css @@ -2334,11 +2334,11 @@ label.checkbox.custom { right: 0; width: auto; } -/* line 21, ../../../../general/res/sass/controls/_time-controller.scss */ +/* line 23, ../../../../general/res/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 26, ../../../../general/res/sass/controls/_time-controller.scss */ +/* line 28, ../../../../general/res/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 { @@ -2355,7 +2355,7 @@ label.checkbox.custom { box-sizing: border-box; min-width: 400px; top: auto; } -/* line 36, ../../../../general/res/sass/controls/_time-controller.scss */ +/* line 38, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller .l-time-range-slider, .l-time-controller .l-time-range-ticks { overflow: visible; @@ -2365,49 +2365,46 @@ label.checkbox.custom { bottom: 0; left: 0; width: auto; - height: auto; } -/* line 42, ../../../../general/res/sass/controls/_time-controller.scss */ + height: auto; + left: 150px; + right: 150px; } +/* line 45, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller .l-time-range-inputs-holder { height: 33px; bottom: 46px; padding-top: 5px; border-top: 1px solid rgba(102, 102, 102, 0.2); } - /* line 47, ../../../../general/res/sass/controls/_time-controller.scss */ + /* line 50, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller .l-time-range-inputs-holder .type-icon { font-size: 120%; vertical-align: middle; } - /* line 51, ../../../../general/res/sass/controls/_time-controller.scss */ + /* line 54, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller .l-time-range-inputs-holder .l-time-range-input, .l-time-controller .l-time-range-inputs-holder .l-time-range-inputs-elem { margin-right: 5px; } - /* line 54, ../../../../general/res/sass/controls/_time-controller.scss */ + /* line 57, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller .l-time-range-inputs-holder .l-time-range-input .lbl, .l-time-controller .l-time-range-inputs-holder .l-time-range-inputs-elem .lbl { color: #999999; } - /* line 57, ../../../../general/res/sass/controls/_time-controller.scss */ + /* line 60, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller .l-time-range-inputs-holder .l-time-range-input .ui-symbol.icon, .l-time-controller .l-time-range-inputs-holder .l-time-range-input .l-datetime-picker .l-month-year-pager .icon.pager, .l-datetime-picker .l-month-year-pager .l-time-controller .l-time-range-inputs-holder .l-time-range-input .icon.pager, .l-time-controller .l-time-range-inputs-holder .l-time-range-inputs-elem .ui-symbol.icon, .l-time-controller .l-time-range-inputs-holder .l-time-range-inputs-elem .l-datetime-picker .l-month-year-pager .icon.pager, .l-datetime-picker .l-month-year-pager .l-time-controller .l-time-range-inputs-holder .l-time-range-inputs-elem .icon.pager { font-size: 11px; width: 11px; } -/* line 64, ../../../../general/res/sass/controls/_time-controller.scss */ -.l-time-controller .l-time-range-slider, -.l-time-controller .l-time-range-ticks { - left: 150px; - right: 150px; } -/* line 70, ../../../../general/res/sass/controls/_time-controller.scss */ +/* line 67, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller .l-time-range-slider-holder { height: 20px; bottom: 23px; } - /* line 73, ../../../../general/res/sass/controls/_time-controller.scss */ + /* line 70, ../../../../general/res/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; } - /* line 78, ../../../../general/res/sass/controls/_time-controller.scss */ + /* line 75, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller .l-time-range-slider-holder .range-holder .range .toi-line { -moz-transform: translateX(50%); -ms-transform: translateX(50%); @@ -2421,19 +2418,19 @@ label.checkbox.custom { width: 8px; height: auto; z-index: 2; } - /* line 88, ../../../../general/res/sass/controls/_time-controller.scss */ + /* line 85, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller .l-time-range-slider-holder .range-holder .range .toi-line:before, .l-time-controller .l-time-range-slider-holder .range-holder .range .toi-line:after { background-color: #666; content: ""; position: absolute; } - /* line 94, ../../../../general/res/sass/controls/_time-controller.scss */ + /* line 91, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller .l-time-range-slider-holder .range-holder .range .toi-line:before { top: 0; right: auto; bottom: -10px; left: 3px; width: 2px; } - /* line 100, ../../../../general/res/sass/controls/_time-controller.scss */ + /* line 97, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller .l-time-range-slider-holder .range-holder .range .toi-line:after { -moz-border-radius: 8px; -webkit-border-radius: 8px; @@ -2451,13 +2448,28 @@ label.checkbox.custom { /* line 3, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller .l-time-range-slider-holder .range-holder .range:hover .toi-line:before, .l-time-controller .l-time-range-slider-holder .range-holder .range:hover .toi-line:after { background-color: #0052b5; } -/* line 116, ../../../../general/res/sass/controls/_time-controller.scss */ + /* line 113, ../../../../general/res/sass/controls/_time-controller.scss */ + .l-time-controller .l-time-range-slider-holder:not(:active) .knob, + .l-time-controller .l-time-range-slider-holder:not(:active) .range { + -moz-transition-property: left, right; + -o-transition-property: left, right; + -webkit-transition-property: left, right; + transition-property: left, right; + -moz-transition-duration: 500ms; + -o-transition-duration: 500ms; + -webkit-transition-duration: 500ms; + transition-duration: 500ms; + -moz-transition-timing-function: ease-in-out; + -o-transition-timing-function: ease-in-out; + -webkit-transition-timing-function: ease-in-out; + transition-timing-function: ease-in-out; } +/* line 122, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller .l-time-range-ticks-holder { height: 20px; } - /* line 118, ../../../../general/res/sass/controls/_time-controller.scss */ + /* line 124, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller .l-time-range-ticks-holder .l-time-range-ticks { border-top: 1px solid rgba(0, 0, 0, 0.2); } - /* line 120, ../../../../general/res/sass/controls/_time-controller.scss */ + /* line 126, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller .l-time-range-ticks-holder .l-time-range-ticks .tick { background-color: rgba(0, 0, 0, 0.2); border: none; @@ -2465,10 +2477,10 @@ label.checkbox.custom { width: 1px; margin-left: -1px; position: absolute; } - /* line 127, ../../../../general/res/sass/controls/_time-controller.scss */ + /* line 133, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller .l-time-range-ticks-holder .l-time-range-ticks .tick:first-child { margin-left: 0; } - /* line 130, ../../../../general/res/sass/controls/_time-controller.scss */ + /* line 136, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller .l-time-range-ticks-holder .l-time-range-ticks .tick .l-time-range-tick-label { transform: translateX(-50%); -webkit-transform: translateX(-50%); @@ -2479,10 +2491,10 @@ label.checkbox.custom { top: 8px; white-space: nowrap; z-index: 2; } -/* line 144, ../../../../general/res/sass/controls/_time-controller.scss */ +/* line 150, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller .knob { z-index: 2; } - /* line 146, ../../../../general/res/sass/controls/_time-controller.scss */ + /* line 152, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller .knob .range-value { -moz-transition-property: visibility, opacity, background-color, border-color; -o-transition-property: visibility, opacity, background-color, border-color; @@ -2501,27 +2513,27 @@ label.checkbox.custom { height: 20px; line-height: 20px; white-space: nowrap; } - /* line 155, ../../../../general/res/sass/controls/_time-controller.scss */ + /* line 161, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller .knob:hover .range-value { color: rgba(0, 153, 204, 0.7); } - /* line 158, ../../../../general/res/sass/controls/_time-controller.scss */ + /* line 164, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller .knob.knob-l { margin-left: -10px; } - /* line 161, ../../../../general/res/sass/controls/_time-controller.scss */ + /* line 167, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller .knob.knob-l .range-value { text-align: right; right: 10px; } - /* line 166, ../../../../general/res/sass/controls/_time-controller.scss */ + /* line 172, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller .knob.knob-r { margin-right: -10px; } - /* line 169, ../../../../general/res/sass/controls/_time-controller.scss */ + /* line 175, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller .knob.knob-r .range-value { left: 10px; } /* line 3, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller .knob.knob-r:hover + .range-holder .range .toi-line:before, .l-time-controller .knob.knob-r:hover + .range-holder .range .toi-line:after { background-color: #0052b5; } -/* line 183, ../../../../general/res/sass/controls/_time-controller.scss */ +/* line 189, ../../../../general/res/sass/controls/_time-controller.scss */ .s-time-range-val { -moz-border-radius: 4px; -webkit-border-radius: 4px; From 333f7cb8487b02c371579c8fcf61040cf16ec46f Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Tue, 29 Sep 2015 08:43:34 -0700 Subject: [PATCH 03/23] [Frontend] Time controller-related styling open #1515 open #117 Markup changed to utilize mct-representation via CSS; time-controller now uses list-based _constants values; ConductorRepresenter.js modded to remove inline styling and to add CSS classes to enclosing mct-representation; --- .../browse/res/templates/browse-object.html | 9 +- .../edit/res/templates/edit-object.html | 11 +- .../commonUI/general/res/sass/_constants.scss | 1 + .../commonUI/general/res/sass/_global.scss | 8 + .../commonUI/general/res/sass/_views.scss | 3 - .../res/sass/controls/_time-controller.scss | 10 +- .../res/sass/user-environ/_layout.scss | 278 +++++++++--------- .../espresso/res/css/theme-espresso.css | 157 +++++----- .../themes/espresso/res/sass/_constants.scss | 3 +- .../themes/snow/res/css/theme-snow.css | 157 +++++----- .../themes/snow/res/sass/_constants.scss | 3 +- .../conductor/src/ConductorRepresenter.js | 10 +- .../features/layout/res/templates/layout.html | 2 +- platform/features/pages/res/iframe.html | 2 +- 14 files changed, 339 insertions(+), 315 deletions(-) diff --git a/platform/commonUI/browse/res/templates/browse-object.html b/platform/commonUI/browse/res/templates/browse-object.html index ebe53b368f..3bd6138da6 100644 --- a/platform/commonUI/browse/res/templates/browse-object.html +++ b/platform/commonUI/browse/res/templates/browse-object.html @@ -42,9 +42,8 @@ -
- - -
+ + diff --git a/platform/commonUI/edit/res/templates/edit-object.html b/platform/commonUI/edit/res/templates/edit-object.html index c2089781a4..71dc233a82 100644 --- a/platform/commonUI/edit/res/templates/edit-object.html +++ b/platform/commonUI/edit/res/templates/edit-object.html @@ -30,12 +30,11 @@ structure="toolbar.structure" ng-model="toolbar.state"> -
- - -
+ +
.contents { - left: 0; - right: 0; - } - } + .browse-area, + .edit-area { + > .contents { + left: 0; + right: 0; + } + } - .edit-area { - $tbH: $btnToolbarH + $interiorMargin; - top: $bodyMargin + $ueTopBarEditH + ($interiorMargin); - .tool-bar { - bottom: auto; - height: $tbH; - line-height: $btnToolbarH; - } - .work-area { - top: $tbH + $interiorMargin * 2; - } - } + .edit-area { + $tbH: $btnToolbarH + $interiorMargin; + top: $bodyMargin + $ueTopBarEditH + ($interiorMargin); + .tool-bar { + bottom: auto; + height: $tbH; + line-height: $btnToolbarH; + } + .work-area { + top: $tbH + $interiorMargin * 2; + } + } - .ue-bottom-bar { + .ue-bottom-bar { //@include absPosDefault($bodyMargin); - @include absPosDefault(0);// New status bar design - top: auto; - height: $ueFooterH; - .status-holder { - //right: $ueAppLogoW + $bodyMargin; New status bar design - z-index: 1; - } - .app-logo { - left: auto; - width: $ueAppLogoW; - z-index: 2; - } - } + @include absPosDefault(0); // New status bar design + top: auto; + height: $ueFooterH; + .status-holder { + //right: $ueAppLogoW + $bodyMargin; New status bar design + z-index: 1; + } + .app-logo { + left: auto; + width: $ueAppLogoW; + z-index: 2; + } + } } .cols { @@ -225,78 +225,80 @@ } } - - .pane { position: absolute; &.treeview.left { - .create-btn-holder { - bottom: auto; top: 0; - height: $ueTopBarH; - .wrapper.menu-element { - position: absolute; - bottom: $interiorMargin; - } - } - .search-holder { - top: $ueTopBarH + $interiorMarginLg; - } - .tree-holder { - overflow: auto; - top: $ueTopBarH + $interiorMarginLg + $treeSearchInputBarH + $interiorMargin; - } + .create-btn-holder { + bottom: auto; + top: 0; + height: $ueTopBarH; + .wrapper.menu-element { + position: absolute; + bottom: $interiorMargin; + } + } + .search-holder { + top: $ueTopBarH + $interiorMarginLg; + } + .tree-holder { + overflow: auto; + top: $ueTopBarH + $interiorMarginLg + $treeSearchInputBarH + $interiorMargin; + } } &.items { .object-browse-bar { - .left.abs, - .right.abs { - top: auto; - } - //.left.abs { - // @include tmpBorder(green); - //} - //.right.abs { - // @include tmpBorder(red); - //} - } - .object-holder { - top: $ueTopBarH + $interiorMarginLg; + .left.abs, + .right.abs { + top: auto; + } } } - .object-holder { - overflow: auto; - } } .split-layout { - &.horizontal { - // Slides up and down - >.pane { -// @include test(); - margin-top: $interiorMargin; - &:first-child { - margin-top: 0; - } - } - } - &.vertical { - // Slides left and right - >.pane { -// @include test(); - margin-left: $interiorMargin; - >.holder { - left: 0; - right: 0; - } - &:first-child { - margin-left: 0; - .holder { - right: $interiorMarginSm; - } - } - } + &.horizontal { + // Slides up and down + > .pane { + // @include test(); + margin-top: $interiorMargin; + &:first-child { + margin-top: 0; + } + } + } + &.vertical { + // Slides left and right + > .pane { + // @include test(); + margin-left: $interiorMargin; + > .holder { + left: 0; + right: 0; + } + &:first-child { + margin-left: 0; + .holder { + right: $interiorMarginSm; + } + } + } - } + } +} + +.object-holder { + overflow: hidden; // Contained objects need to handle their own overflow now + top: $ueTopBarH + $interiorMarginLg; + > ng-include { + @include absPosDefault(0, auto); + } + &.l-controls-visible { + &.l-time-controller-visible { + > ng-include { + bottom: nth($ueTimeControlH,1) + nth($ueTimeControlH,2) +nth($ueTimeControlH,3) + ($interiorMargin * 3); + } + } + } } .object-browse-bar .s-btn, @@ -304,10 +306,10 @@ .top-bar .s-menu-btn, .tool-bar .s-btn, .tool-bar .s-menu-btn { - $h: $btnToolbarH; - height: $h; - line-height: $h; - vertical-align: top; + $h: $btnToolbarH; + height: $h; + line-height: $h; + vertical-align: top; } .object-browse-bar, @@ -318,33 +320,29 @@ } .object-browse-bar { - //@include test(blue); - @include absPosDefault(0, visible); - @include box-sizing(border-box); - height: $ueTopBarH; - line-height: $ueTopBarH; - white-space: nowrap; + //@include test(blue); + @include absPosDefault(0, visible); + @include box-sizing(border-box); + height: $ueTopBarH; + line-height: $ueTopBarH; + white-space: nowrap; - .left { - padding-right: $interiorMarginLg * 2; - .l-back { - display: inline-block; - float: left; - margin-right: $interiorMarginLg; - } - } + .left { + padding-right: $interiorMarginLg * 2; + .l-back { + display: inline-block; + float: left; + margin-right: $interiorMarginLg; + } + } } .l-flex { - @include webkitVal('display', 'flex'); - @include webkitProp('flex-flow', 'row nowrap'); - .left { - //@include test(red); - @include webkitProp(flex, '1 1 0'); - padding-right: $interiorMarginLg; - } -} - -.vscroll { - overflow-y: auto; -} + @include webkitVal('display', 'flex'); + @include webkitProp('flex-flow', 'row nowrap'); + .left { + //@include test(red); + @include webkitProp(flex, '1 1 0'); + padding-right: $interiorMarginLg; + } +} \ No newline at end of file diff --git a/platform/commonUI/themes/espresso/res/css/theme-espresso.css b/platform/commonUI/themes/espresso/res/css/theme-espresso.css index 346af1ba45..4950c5b6c2 100644 --- a/platform/commonUI/themes/espresso/res/css/theme-espresso.css +++ b/platform/commonUI/themes/espresso/res/css/theme-espresso.css @@ -20,7 +20,7 @@ * this source code distribution or the Licensing information page available * at runtime from the About dialog for additional information. *****************************************************************************/ -/* line 5, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 5, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, @@ -41,38 +41,38 @@ time, mark, audio, video { font-size: 100%; vertical-align: baseline; } -/* line 22, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 22, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ html { line-height: 1; } -/* line 24, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 24, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ ol, ul { list-style: none; } -/* line 26, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 26, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ table { border-collapse: collapse; border-spacing: 0; } -/* line 28, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 28, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ caption, th, td { text-align: left; font-weight: normal; vertical-align: middle; } -/* line 30, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 30, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ q, blockquote { quotes: none; } - /* line 103, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ + /* line 103, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ q:before, q:after, blockquote:before, blockquote:after { content: ""; content: none; } -/* line 32, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 32, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ a img { border: none; } -/* line 116, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 116, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; } @@ -404,21 +404,29 @@ mct-container { text-align: center; } /* line 128, ../../../../general/res/sass/_global.scss */ +.scrolling { + overflow: auto; } + +/* line 132, ../../../../general/res/sass/_global.scss */ +.vscroll { + overflow-y: auto; } + +/* line 136, ../../../../general/res/sass/_global.scss */ .no-margin { margin: 0; } -/* line 132, ../../../../general/res/sass/_global.scss */ +/* line 140, ../../../../general/res/sass/_global.scss */ .ds { -moz-box-shadow: rgba(0, 0, 0, 0.7) 0 4px 10px 2px; -webkit-box-shadow: rgba(0, 0, 0, 0.7) 0 4px 10px 2px; box-shadow: rgba(0, 0, 0, 0.7) 0 4px 10px 2px; } -/* line 136, ../../../../general/res/sass/_global.scss */ +/* line 144, ../../../../general/res/sass/_global.scss */ .hide, .hidden { display: none !important; } -/* line 141, ../../../../general/res/sass/_global.scss */ +/* line 149, ../../../../general/res/sass/_global.scss */ .sep { color: rgba(255, 255, 255, 0.2); } @@ -2370,11 +2378,11 @@ label.checkbox.custom { right: 0; width: auto; } -/* line 23, ../../../../general/res/sass/controls/_time-controller.scss */ +/* line 27, ../../../../general/res/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 28, ../../../../general/res/sass/controls/_time-controller.scss */ +/* line 32, ../../../../general/res/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 { @@ -2391,7 +2399,7 @@ label.checkbox.custom { box-sizing: border-box; min-width: 400px; top: auto; } -/* line 38, ../../../../general/res/sass/controls/_time-controller.scss */ +/* line 42, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller .l-time-range-slider, .l-time-controller .l-time-range-ticks { overflow: visible; @@ -2404,43 +2412,43 @@ label.checkbox.custom { height: auto; left: 150px; right: 150px; } -/* line 45, ../../../../general/res/sass/controls/_time-controller.scss */ +/* line 49, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller .l-time-range-inputs-holder { height: 33px; bottom: 46px; padding-top: 5px; border-top: 1px solid rgba(153, 153, 153, 0.1); } - /* line 50, ../../../../general/res/sass/controls/_time-controller.scss */ + /* line 54, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller .l-time-range-inputs-holder .type-icon { font-size: 120%; vertical-align: middle; } - /* line 54, ../../../../general/res/sass/controls/_time-controller.scss */ + /* line 58, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller .l-time-range-inputs-holder .l-time-range-input, .l-time-controller .l-time-range-inputs-holder .l-time-range-inputs-elem { margin-right: 5px; } - /* line 57, ../../../../general/res/sass/controls/_time-controller.scss */ + /* line 61, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller .l-time-range-inputs-holder .l-time-range-input .lbl, .l-time-controller .l-time-range-inputs-holder .l-time-range-inputs-elem .lbl { color: #666666; } - /* line 60, ../../../../general/res/sass/controls/_time-controller.scss */ + /* line 64, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller .l-time-range-inputs-holder .l-time-range-input .ui-symbol.icon, .l-time-controller .l-time-range-inputs-holder .l-time-range-input .l-datetime-picker .l-month-year-pager .icon.pager, .l-datetime-picker .l-month-year-pager .l-time-controller .l-time-range-inputs-holder .l-time-range-input .icon.pager, .l-time-controller .l-time-range-inputs-holder .l-time-range-inputs-elem .ui-symbol.icon, .l-time-controller .l-time-range-inputs-holder .l-time-range-inputs-elem .l-datetime-picker .l-month-year-pager .icon.pager, .l-datetime-picker .l-month-year-pager .l-time-controller .l-time-range-inputs-holder .l-time-range-inputs-elem .icon.pager { font-size: 11px; width: 11px; } -/* line 67, ../../../../general/res/sass/controls/_time-controller.scss */ +/* line 71, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller .l-time-range-slider-holder { height: 20px; bottom: 23px; } - /* line 70, ../../../../general/res/sass/controls/_time-controller.scss */ + /* line 74, ../../../../general/res/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; } - /* line 75, ../../../../general/res/sass/controls/_time-controller.scss */ + /* line 79, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller .l-time-range-slider-holder .range-holder .range .toi-line { -moz-transform: translateX(50%); -ms-transform: translateX(50%); @@ -2454,19 +2462,19 @@ label.checkbox.custom { width: 8px; height: auto; z-index: 2; } - /* line 85, ../../../../general/res/sass/controls/_time-controller.scss */ + /* line 89, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller .l-time-range-slider-holder .range-holder .range .toi-line:before, .l-time-controller .l-time-range-slider-holder .range-holder .range .toi-line:after { background-color: #00c2ff; content: ""; position: absolute; } - /* line 91, ../../../../general/res/sass/controls/_time-controller.scss */ + /* line 95, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller .l-time-range-slider-holder .range-holder .range .toi-line:before { top: 0; right: auto; bottom: -10px; left: 3px; width: 2px; } - /* line 97, ../../../../general/res/sass/controls/_time-controller.scss */ + /* line 101, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller .l-time-range-slider-holder .range-holder .range .toi-line:after { -moz-border-radius: 8px; -webkit-border-radius: 8px; @@ -2484,7 +2492,7 @@ label.checkbox.custom { /* line 3, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller .l-time-range-slider-holder .range-holder .range:hover .toi-line:before, .l-time-controller .l-time-range-slider-holder .range-holder .range:hover .toi-line:after { background-color: #fff; } - /* line 113, ../../../../general/res/sass/controls/_time-controller.scss */ + /* line 117, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller .l-time-range-slider-holder:not(:active) .knob, .l-time-controller .l-time-range-slider-holder:not(:active) .range { -moz-transition-property: left, right; @@ -2499,13 +2507,13 @@ label.checkbox.custom { -o-transition-timing-function: ease-in-out; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; } -/* line 122, ../../../../general/res/sass/controls/_time-controller.scss */ +/* line 126, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller .l-time-range-ticks-holder { height: 20px; } - /* line 124, ../../../../general/res/sass/controls/_time-controller.scss */ + /* line 128, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller .l-time-range-ticks-holder .l-time-range-ticks { border-top: 1px solid rgba(255, 255, 255, 0.2); } - /* line 126, ../../../../general/res/sass/controls/_time-controller.scss */ + /* line 130, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller .l-time-range-ticks-holder .l-time-range-ticks .tick { background-color: rgba(255, 255, 255, 0.2); border: none; @@ -2513,10 +2521,10 @@ label.checkbox.custom { width: 1px; margin-left: -1px; position: absolute; } - /* line 133, ../../../../general/res/sass/controls/_time-controller.scss */ + /* line 137, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller .l-time-range-ticks-holder .l-time-range-ticks .tick:first-child { margin-left: 0; } - /* line 136, ../../../../general/res/sass/controls/_time-controller.scss */ + /* line 140, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller .l-time-range-ticks-holder .l-time-range-ticks .tick .l-time-range-tick-label { transform: translateX(-50%); -webkit-transform: translateX(-50%); @@ -2527,10 +2535,10 @@ label.checkbox.custom { top: 8px; white-space: nowrap; z-index: 2; } -/* line 150, ../../../../general/res/sass/controls/_time-controller.scss */ +/* line 154, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller .knob { z-index: 2; } - /* line 152, ../../../../general/res/sass/controls/_time-controller.scss */ + /* line 156, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller .knob .range-value { -moz-transition-property: visibility, opacity, background-color, border-color; -o-transition-property: visibility, opacity, background-color, border-color; @@ -2549,27 +2557,27 @@ label.checkbox.custom { height: 20px; line-height: 20px; white-space: nowrap; } - /* line 161, ../../../../general/res/sass/controls/_time-controller.scss */ + /* line 165, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller .knob:hover .range-value { color: #0099cc; } - /* line 164, ../../../../general/res/sass/controls/_time-controller.scss */ + /* line 168, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller .knob.knob-l { margin-left: -10px; } - /* line 167, ../../../../general/res/sass/controls/_time-controller.scss */ + /* line 171, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller .knob.knob-l .range-value { text-align: right; right: 10px; } - /* line 172, ../../../../general/res/sass/controls/_time-controller.scss */ + /* line 176, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller .knob.knob-r { margin-right: -10px; } - /* line 175, ../../../../general/res/sass/controls/_time-controller.scss */ + /* line 179, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller .knob.knob-r .range-value { left: 10px; } /* line 3, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller .knob.knob-r:hover + .range-holder .range .toi-line:before, .l-time-controller .knob.knob-r:hover + .range-holder .range .toi-line:after { background-color: #fff; } -/* line 189, ../../../../general/res/sass/controls/_time-controller.scss */ +/* line 193, ../../../../general/res/sass/controls/_time-controller.scss */ .s-time-range-val { -moz-border-radius: 3px; -webkit-border-radius: 3px; @@ -3438,26 +3446,26 @@ span.req { min-height: 50px; height: 30%; } -/* line 230, ../../../../general/res/sass/user-environ/_layout.scss */ +/* line 228, ../../../../general/res/sass/user-environ/_layout.scss */ .pane { position: absolute; } - /* line 233, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 231, ../../../../general/res/sass/user-environ/_layout.scss */ .pane.treeview.left .create-btn-holder { bottom: auto; top: 0; height: 24px; } - /* line 236, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 235, ../../../../general/res/sass/user-environ/_layout.scss */ .pane.treeview.left .create-btn-holder .wrapper.menu-element { position: absolute; bottom: 5px; } - /* line 241, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 240, ../../../../general/res/sass/user-environ/_layout.scss */ .pane.treeview.left .search-holder { top: 34px; } - /* line 244, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 243, ../../../../general/res/sass/user-environ/_layout.scss */ .pane.treeview.left .tree-holder { overflow: auto; top: 64px; } - /* line 251, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 250, ../../../../general/res/sass/user-environ/_layout.scss */ .pane.items .object-browse-bar .left.abs, .pane.items .object-browse-bar .l-datetime-picker .l-month-year-pager .left.pager, .l-datetime-picker .l-month-year-pager .pane.items .object-browse-bar .left.pager, .pane.items .object-browse-bar .l-datetime-picker .l-month-year-pager .left.val, .l-datetime-picker .l-month-year-pager .pane.items .object-browse-bar .left.val, .pane.items .object-browse-bar .s-menu-btn span.left.l-click-area, .s-menu-btn .pane.items .object-browse-bar span.left.l-click-area, @@ -3469,34 +3477,46 @@ span.req { .pane.items .object-browse-bar .s-menu-btn span.right.l-click-area, .s-menu-btn .pane.items .object-browse-bar span.right.l-click-area { top: auto; } - /* line 262, ../../../../general/res/sass/user-environ/_layout.scss */ - .pane.items .object-holder { - top: 34px; } - /* line 266, ../../../../general/res/sass/user-environ/_layout.scss */ - .pane .object-holder { - overflow: auto; } -/* line 274, ../../../../general/res/sass/user-environ/_layout.scss */ +/* line 261, ../../../../general/res/sass/user-environ/_layout.scss */ .split-layout.horizontal > .pane { margin-top: 5px; } - /* line 277, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 264, ../../../../general/res/sass/user-environ/_layout.scss */ .split-layout.horizontal > .pane:first-child { margin-top: 0; } -/* line 284, ../../../../general/res/sass/user-environ/_layout.scss */ +/* line 271, ../../../../general/res/sass/user-environ/_layout.scss */ .split-layout.vertical > .pane { margin-left: 5px; } - /* line 287, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 274, ../../../../general/res/sass/user-environ/_layout.scss */ .split-layout.vertical > .pane > .holder { left: 0; right: 0; } - /* line 291, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 278, ../../../../general/res/sass/user-environ/_layout.scss */ .split-layout.vertical > .pane:first-child { margin-left: 0; } - /* line 293, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 280, ../../../../general/res/sass/user-environ/_layout.scss */ .split-layout.vertical > .pane:first-child .holder { right: 3px; } -/* line 302, ../../../../general/res/sass/user-environ/_layout.scss */ +/* line 289, ../../../../general/res/sass/user-environ/_layout.scss */ +.object-holder { + overflow: hidden; + top: 34px; } + /* line 292, ../../../../general/res/sass/user-environ/_layout.scss */ + .object-holder > ng-include { + overflow: auto; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + width: auto; + height: auto; } + /* line 297, ../../../../general/res/sass/user-environ/_layout.scss */ + .object-holder.l-controls-visible.l-time-controller-visible > ng-include { + bottom: 88px; } + +/* line 304, ../../../../general/res/sass/user-environ/_layout.scss */ .object-browse-bar .s-btn, .object-browse-bar .s-menu-btn, .top-bar .buttons-main .s-btn, .top-bar .buttons-main .s-menu-btn, @@ -3508,12 +3528,12 @@ span.req { line-height: 25px; vertical-align: top; } -/* line 315, ../../../../general/res/sass/user-environ/_layout.scss */ +/* line 317, ../../../../general/res/sass/user-environ/_layout.scss */ .object-browse-bar .view-switcher, .top-bar .view-switcher { margin-right: 20px; } -/* line 320, ../../../../general/res/sass/user-environ/_layout.scss */ +/* line 322, ../../../../general/res/sass/user-environ/_layout.scss */ .object-browse-bar { overflow: visible; position: absolute; @@ -3529,31 +3549,27 @@ span.req { height: 24px; line-height: 24px; white-space: nowrap; } - /* line 328, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 330, ../../../../general/res/sass/user-environ/_layout.scss */ .object-browse-bar .left { padding-right: 20px; } - /* line 330, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 332, ../../../../general/res/sass/user-environ/_layout.scss */ .object-browse-bar .left .l-back { display: inline-block; float: left; margin-right: 10px; } -/* line 338, ../../../../general/res/sass/user-environ/_layout.scss */ +/* line 340, ../../../../general/res/sass/user-environ/_layout.scss */ .l-flex { display: flex; display: -webkit-flex; flex-flow: row nowrap; -webkit-flex-flow: row nowrap; } - /* line 341, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 343, ../../../../general/res/sass/user-environ/_layout.scss */ .l-flex .left { flex: 1 1 0; -webkit-flex: 1 1 0; padding-right: 10px; } -/* line 348, ../../../../general/res/sass/user-environ/_layout.scss */ -.vscroll { - overflow-y: auto; } - /***************************************************************************** * Open MCT Web, Copyright (c) 2014-2015, United States Government * as represented by the Administrator of the National Aeronautics and Space @@ -5518,9 +5534,6 @@ table { .l-view-section.fixed { font-size: 0.8em; } /* line 13, ../../../../general/res/sass/_views.scss */ - .l-view-section.scrolling { - overflow: auto; } - /* line 16, ../../../../general/res/sass/_views.scss */ .l-view-section .controls, .l-view-section label, .l-view-section .inline-block { diff --git a/platform/commonUI/themes/espresso/res/sass/_constants.scss b/platform/commonUI/themes/espresso/res/sass/_constants.scss index 9a39f73bf3..e6106d049c 100644 --- a/platform/commonUI/themes/espresso/res/sass/_constants.scss +++ b/platform/commonUI/themes/espresso/res/sass/_constants.scss @@ -31,8 +31,7 @@ $sliderColorKnob: rgba($sliderColorBase, 0.6); $sliderColorKnobHov: $sliderColorBase; $sliderColorRangeValHovBg: rgba($sliderColorBase, 0.1); $sliderColorRangeValHovFg: $colorKeyFg; -$sliderH: 20px; -$sliderKnobW: $sliderH/2; +$sliderKnobW: nth($ueTimeControlH,2)/2; $timeControllerToiLineColor: #00c2ff; $timeControllerToiLineColorHov: #fff; diff --git a/platform/commonUI/themes/snow/res/css/theme-snow.css b/platform/commonUI/themes/snow/res/css/theme-snow.css index f9c179231c..2650b2b90b 100644 --- a/platform/commonUI/themes/snow/res/css/theme-snow.css +++ b/platform/commonUI/themes/snow/res/css/theme-snow.css @@ -20,7 +20,7 @@ * this source code distribution or the Licensing information page available * at runtime from the About dialog for additional information. *****************************************************************************/ -/* line 5, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 5, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, @@ -41,38 +41,38 @@ time, mark, audio, video { font-size: 100%; vertical-align: baseline; } -/* line 22, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 22, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ html { line-height: 1; } -/* line 24, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 24, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ ol, ul { list-style: none; } -/* line 26, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 26, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ table { border-collapse: collapse; border-spacing: 0; } -/* line 28, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 28, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ caption, th, td { text-align: left; font-weight: normal; vertical-align: middle; } -/* line 30, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 30, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ q, blockquote { quotes: none; } - /* line 103, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ + /* line 103, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ q:before, q:after, blockquote:before, blockquote:after { content: ""; content: none; } -/* line 32, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 32, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ a img { border: none; } -/* line 116, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 116, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; } @@ -404,21 +404,29 @@ mct-container { text-align: center; } /* line 128, ../../../../general/res/sass/_global.scss */ +.scrolling { + overflow: auto; } + +/* line 132, ../../../../general/res/sass/_global.scss */ +.vscroll { + overflow-y: auto; } + +/* line 136, ../../../../general/res/sass/_global.scss */ .no-margin { margin: 0; } -/* line 132, ../../../../general/res/sass/_global.scss */ +/* line 140, ../../../../general/res/sass/_global.scss */ .ds { -moz-box-shadow: rgba(0, 0, 0, 0.7) 0 4px 10px 2px; -webkit-box-shadow: rgba(0, 0, 0, 0.7) 0 4px 10px 2px; box-shadow: rgba(0, 0, 0, 0.7) 0 4px 10px 2px; } -/* line 136, ../../../../general/res/sass/_global.scss */ +/* line 144, ../../../../general/res/sass/_global.scss */ .hide, .hidden { display: none !important; } -/* line 141, ../../../../general/res/sass/_global.scss */ +/* line 149, ../../../../general/res/sass/_global.scss */ .sep { color: rgba(255, 255, 255, 0.2); } @@ -2334,11 +2342,11 @@ label.checkbox.custom { right: 0; width: auto; } -/* line 23, ../../../../general/res/sass/controls/_time-controller.scss */ +/* line 27, ../../../../general/res/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 28, ../../../../general/res/sass/controls/_time-controller.scss */ +/* line 32, ../../../../general/res/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 { @@ -2355,7 +2363,7 @@ label.checkbox.custom { box-sizing: border-box; min-width: 400px; top: auto; } -/* line 38, ../../../../general/res/sass/controls/_time-controller.scss */ +/* line 42, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller .l-time-range-slider, .l-time-controller .l-time-range-ticks { overflow: visible; @@ -2368,43 +2376,43 @@ label.checkbox.custom { height: auto; left: 150px; right: 150px; } -/* line 45, ../../../../general/res/sass/controls/_time-controller.scss */ +/* line 49, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller .l-time-range-inputs-holder { height: 33px; bottom: 46px; padding-top: 5px; border-top: 1px solid rgba(102, 102, 102, 0.2); } - /* line 50, ../../../../general/res/sass/controls/_time-controller.scss */ + /* line 54, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller .l-time-range-inputs-holder .type-icon { font-size: 120%; vertical-align: middle; } - /* line 54, ../../../../general/res/sass/controls/_time-controller.scss */ + /* line 58, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller .l-time-range-inputs-holder .l-time-range-input, .l-time-controller .l-time-range-inputs-holder .l-time-range-inputs-elem { margin-right: 5px; } - /* line 57, ../../../../general/res/sass/controls/_time-controller.scss */ + /* line 61, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller .l-time-range-inputs-holder .l-time-range-input .lbl, .l-time-controller .l-time-range-inputs-holder .l-time-range-inputs-elem .lbl { color: #999999; } - /* line 60, ../../../../general/res/sass/controls/_time-controller.scss */ + /* line 64, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller .l-time-range-inputs-holder .l-time-range-input .ui-symbol.icon, .l-time-controller .l-time-range-inputs-holder .l-time-range-input .l-datetime-picker .l-month-year-pager .icon.pager, .l-datetime-picker .l-month-year-pager .l-time-controller .l-time-range-inputs-holder .l-time-range-input .icon.pager, .l-time-controller .l-time-range-inputs-holder .l-time-range-inputs-elem .ui-symbol.icon, .l-time-controller .l-time-range-inputs-holder .l-time-range-inputs-elem .l-datetime-picker .l-month-year-pager .icon.pager, .l-datetime-picker .l-month-year-pager .l-time-controller .l-time-range-inputs-holder .l-time-range-inputs-elem .icon.pager { font-size: 11px; width: 11px; } -/* line 67, ../../../../general/res/sass/controls/_time-controller.scss */ +/* line 71, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller .l-time-range-slider-holder { height: 20px; bottom: 23px; } - /* line 70, ../../../../general/res/sass/controls/_time-controller.scss */ + /* line 74, ../../../../general/res/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; } - /* line 75, ../../../../general/res/sass/controls/_time-controller.scss */ + /* line 79, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller .l-time-range-slider-holder .range-holder .range .toi-line { -moz-transform: translateX(50%); -ms-transform: translateX(50%); @@ -2418,19 +2426,19 @@ label.checkbox.custom { width: 8px; height: auto; z-index: 2; } - /* line 85, ../../../../general/res/sass/controls/_time-controller.scss */ + /* line 89, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller .l-time-range-slider-holder .range-holder .range .toi-line:before, .l-time-controller .l-time-range-slider-holder .range-holder .range .toi-line:after { background-color: #666; content: ""; position: absolute; } - /* line 91, ../../../../general/res/sass/controls/_time-controller.scss */ + /* line 95, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller .l-time-range-slider-holder .range-holder .range .toi-line:before { top: 0; right: auto; bottom: -10px; left: 3px; width: 2px; } - /* line 97, ../../../../general/res/sass/controls/_time-controller.scss */ + /* line 101, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller .l-time-range-slider-holder .range-holder .range .toi-line:after { -moz-border-radius: 8px; -webkit-border-radius: 8px; @@ -2448,7 +2456,7 @@ label.checkbox.custom { /* line 3, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller .l-time-range-slider-holder .range-holder .range:hover .toi-line:before, .l-time-controller .l-time-range-slider-holder .range-holder .range:hover .toi-line:after { background-color: #0052b5; } - /* line 113, ../../../../general/res/sass/controls/_time-controller.scss */ + /* line 117, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller .l-time-range-slider-holder:not(:active) .knob, .l-time-controller .l-time-range-slider-holder:not(:active) .range { -moz-transition-property: left, right; @@ -2463,13 +2471,13 @@ label.checkbox.custom { -o-transition-timing-function: ease-in-out; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; } -/* line 122, ../../../../general/res/sass/controls/_time-controller.scss */ +/* line 126, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller .l-time-range-ticks-holder { height: 20px; } - /* line 124, ../../../../general/res/sass/controls/_time-controller.scss */ + /* line 128, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller .l-time-range-ticks-holder .l-time-range-ticks { border-top: 1px solid rgba(0, 0, 0, 0.2); } - /* line 126, ../../../../general/res/sass/controls/_time-controller.scss */ + /* line 130, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller .l-time-range-ticks-holder .l-time-range-ticks .tick { background-color: rgba(0, 0, 0, 0.2); border: none; @@ -2477,10 +2485,10 @@ label.checkbox.custom { width: 1px; margin-left: -1px; position: absolute; } - /* line 133, ../../../../general/res/sass/controls/_time-controller.scss */ + /* line 137, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller .l-time-range-ticks-holder .l-time-range-ticks .tick:first-child { margin-left: 0; } - /* line 136, ../../../../general/res/sass/controls/_time-controller.scss */ + /* line 140, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller .l-time-range-ticks-holder .l-time-range-ticks .tick .l-time-range-tick-label { transform: translateX(-50%); -webkit-transform: translateX(-50%); @@ -2491,10 +2499,10 @@ label.checkbox.custom { top: 8px; white-space: nowrap; z-index: 2; } -/* line 150, ../../../../general/res/sass/controls/_time-controller.scss */ +/* line 154, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller .knob { z-index: 2; } - /* line 152, ../../../../general/res/sass/controls/_time-controller.scss */ + /* line 156, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller .knob .range-value { -moz-transition-property: visibility, opacity, background-color, border-color; -o-transition-property: visibility, opacity, background-color, border-color; @@ -2513,27 +2521,27 @@ label.checkbox.custom { height: 20px; line-height: 20px; white-space: nowrap; } - /* line 161, ../../../../general/res/sass/controls/_time-controller.scss */ + /* line 165, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller .knob:hover .range-value { color: rgba(0, 153, 204, 0.7); } - /* line 164, ../../../../general/res/sass/controls/_time-controller.scss */ + /* line 168, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller .knob.knob-l { margin-left: -10px; } - /* line 167, ../../../../general/res/sass/controls/_time-controller.scss */ + /* line 171, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller .knob.knob-l .range-value { text-align: right; right: 10px; } - /* line 172, ../../../../general/res/sass/controls/_time-controller.scss */ + /* line 176, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller .knob.knob-r { margin-right: -10px; } - /* line 175, ../../../../general/res/sass/controls/_time-controller.scss */ + /* line 179, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller .knob.knob-r .range-value { left: 10px; } /* line 3, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller .knob.knob-r:hover + .range-holder .range .toi-line:before, .l-time-controller .knob.knob-r:hover + .range-holder .range .toi-line:after { background-color: #0052b5; } -/* line 189, ../../../../general/res/sass/controls/_time-controller.scss */ +/* line 193, ../../../../general/res/sass/controls/_time-controller.scss */ .s-time-range-val { -moz-border-radius: 4px; -webkit-border-radius: 4px; @@ -3385,26 +3393,26 @@ span.req { min-height: 50px; height: 30%; } -/* line 230, ../../../../general/res/sass/user-environ/_layout.scss */ +/* line 228, ../../../../general/res/sass/user-environ/_layout.scss */ .pane { position: absolute; } - /* line 233, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 231, ../../../../general/res/sass/user-environ/_layout.scss */ .pane.treeview.left .create-btn-holder { bottom: auto; top: 0; height: 24px; } - /* line 236, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 235, ../../../../general/res/sass/user-environ/_layout.scss */ .pane.treeview.left .create-btn-holder .wrapper.menu-element { position: absolute; bottom: 5px; } - /* line 241, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 240, ../../../../general/res/sass/user-environ/_layout.scss */ .pane.treeview.left .search-holder { top: 34px; } - /* line 244, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 243, ../../../../general/res/sass/user-environ/_layout.scss */ .pane.treeview.left .tree-holder { overflow: auto; top: 64px; } - /* line 251, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 250, ../../../../general/res/sass/user-environ/_layout.scss */ .pane.items .object-browse-bar .left.abs, .pane.items .object-browse-bar .l-datetime-picker .l-month-year-pager .left.pager, .l-datetime-picker .l-month-year-pager .pane.items .object-browse-bar .left.pager, .pane.items .object-browse-bar .l-datetime-picker .l-month-year-pager .left.val, .l-datetime-picker .l-month-year-pager .pane.items .object-browse-bar .left.val, .pane.items .object-browse-bar .s-menu-btn span.left.l-click-area, .s-menu-btn .pane.items .object-browse-bar span.left.l-click-area, @@ -3416,34 +3424,46 @@ span.req { .pane.items .object-browse-bar .s-menu-btn span.right.l-click-area, .s-menu-btn .pane.items .object-browse-bar span.right.l-click-area { top: auto; } - /* line 262, ../../../../general/res/sass/user-environ/_layout.scss */ - .pane.items .object-holder { - top: 34px; } - /* line 266, ../../../../general/res/sass/user-environ/_layout.scss */ - .pane .object-holder { - overflow: auto; } -/* line 274, ../../../../general/res/sass/user-environ/_layout.scss */ +/* line 261, ../../../../general/res/sass/user-environ/_layout.scss */ .split-layout.horizontal > .pane { margin-top: 5px; } - /* line 277, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 264, ../../../../general/res/sass/user-environ/_layout.scss */ .split-layout.horizontal > .pane:first-child { margin-top: 0; } -/* line 284, ../../../../general/res/sass/user-environ/_layout.scss */ +/* line 271, ../../../../general/res/sass/user-environ/_layout.scss */ .split-layout.vertical > .pane { margin-left: 5px; } - /* line 287, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 274, ../../../../general/res/sass/user-environ/_layout.scss */ .split-layout.vertical > .pane > .holder { left: 0; right: 0; } - /* line 291, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 278, ../../../../general/res/sass/user-environ/_layout.scss */ .split-layout.vertical > .pane:first-child { margin-left: 0; } - /* line 293, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 280, ../../../../general/res/sass/user-environ/_layout.scss */ .split-layout.vertical > .pane:first-child .holder { right: 3px; } -/* line 302, ../../../../general/res/sass/user-environ/_layout.scss */ +/* line 289, ../../../../general/res/sass/user-environ/_layout.scss */ +.object-holder { + overflow: hidden; + top: 34px; } + /* line 292, ../../../../general/res/sass/user-environ/_layout.scss */ + .object-holder > ng-include { + overflow: auto; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + width: auto; + height: auto; } + /* line 297, ../../../../general/res/sass/user-environ/_layout.scss */ + .object-holder.l-controls-visible.l-time-controller-visible > ng-include { + bottom: 88px; } + +/* line 304, ../../../../general/res/sass/user-environ/_layout.scss */ .object-browse-bar .s-btn, .object-browse-bar .s-menu-btn, .top-bar .buttons-main .s-btn, .top-bar .buttons-main .s-menu-btn, @@ -3455,12 +3475,12 @@ span.req { line-height: 25px; vertical-align: top; } -/* line 315, ../../../../general/res/sass/user-environ/_layout.scss */ +/* line 317, ../../../../general/res/sass/user-environ/_layout.scss */ .object-browse-bar .view-switcher, .top-bar .view-switcher { margin-right: 20px; } -/* line 320, ../../../../general/res/sass/user-environ/_layout.scss */ +/* line 322, ../../../../general/res/sass/user-environ/_layout.scss */ .object-browse-bar { overflow: visible; position: absolute; @@ -3476,31 +3496,27 @@ span.req { height: 24px; line-height: 24px; white-space: nowrap; } - /* line 328, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 330, ../../../../general/res/sass/user-environ/_layout.scss */ .object-browse-bar .left { padding-right: 20px; } - /* line 330, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 332, ../../../../general/res/sass/user-environ/_layout.scss */ .object-browse-bar .left .l-back { display: inline-block; float: left; margin-right: 10px; } -/* line 338, ../../../../general/res/sass/user-environ/_layout.scss */ +/* line 340, ../../../../general/res/sass/user-environ/_layout.scss */ .l-flex { display: flex; display: -webkit-flex; flex-flow: row nowrap; -webkit-flex-flow: row nowrap; } - /* line 341, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 343, ../../../../general/res/sass/user-environ/_layout.scss */ .l-flex .left { flex: 1 1 0; -webkit-flex: 1 1 0; padding-right: 10px; } -/* line 348, ../../../../general/res/sass/user-environ/_layout.scss */ -.vscroll { - overflow-y: auto; } - /***************************************************************************** * Open MCT Web, Copyright (c) 2014-2015, United States Government * as represented by the Administrator of the National Aeronautics and Space @@ -5446,9 +5462,6 @@ table { .l-view-section.fixed { font-size: 0.8em; } /* line 13, ../../../../general/res/sass/_views.scss */ - .l-view-section.scrolling { - overflow: auto; } - /* line 16, ../../../../general/res/sass/_views.scss */ .l-view-section .controls, .l-view-section label, .l-view-section .inline-block { diff --git a/platform/commonUI/themes/snow/res/sass/_constants.scss b/platform/commonUI/themes/snow/res/sass/_constants.scss index 3fc49b1486..e24d0d8b5a 100644 --- a/platform/commonUI/themes/snow/res/sass/_constants.scss +++ b/platform/commonUI/themes/snow/res/sass/_constants.scss @@ -31,8 +31,7 @@ $sliderColorKnob: rgba($sliderColorBase, 0.5); $sliderColorKnobHov: rgba($sliderColorBase, 0.7); $sliderColorRangeValHovBg: $sliderColorRange; //rgba($sliderColorBase, 0.1); $sliderColorRangeValHovFg: $colorBodyFg; -$sliderH: 20px; -$sliderKnobW: $sliderH/2; +$sliderKnobW: nth($ueTimeControlH,2)/2; $timeControllerToiLineColor: $colorBodyFg; $timeControllerToiLineColorHov: #0052b5; diff --git a/platform/features/conductor/src/ConductorRepresenter.js b/platform/features/conductor/src/ConductorRepresenter.js index b1b35477b6..423ab1813e 100644 --- a/platform/features/conductor/src/ConductorRepresenter.js +++ b/platform/features/conductor/src/ConductorRepresenter.js @@ -28,13 +28,8 @@ define( var CONDUCTOR_HEIGHT = "100px", TEMPLATE = [ - '
', "", - "", - '
' + "" ].join(''), GLOBAL_SHOWING = false; @@ -126,8 +121,7 @@ define( this.conductorElement = this.$compile(TEMPLATE)(this.conductorScope()); this.element.after(this.conductorElement[0]); - this.element.addClass('abs'); - this.element.css('bottom', CONDUCTOR_HEIGHT); + this.element.addClass('l-controls-visible l-time-controller-visible'); GLOBAL_SHOWING = true; } }; diff --git a/platform/features/layout/res/templates/layout.html b/platform/features/layout/res/templates/layout.html index ca3a359dba..1811f35236 100644 --- a/platform/features/layout/res/templates/layout.html +++ b/platform/features/layout/res/templates/layout.html @@ -19,7 +19,7 @@ this source code distribution or the Licensing information page available at runtime from the About dialog for additional information. --> -
-
+
From ad7d3d642ef386e09540aaf92ad20d355131226a Mon Sep 17 00:00:00 2001 From: Victor Woeltjen Date: Tue, 29 Sep 2015 10:54:14 -0700 Subject: [PATCH 04/23] [Search] Move reindex function Move function used to listen for mutation changes (to trigger reindexing) up in scope, to avoid retaining references to domain objects via closure. nasa/openmctweb#141 Also, includes misc. whitespace normalization (provided by code editor.) --- .../src/services/GenericSearchProvider.js | 88 ++++++++++--------- 1 file changed, 45 insertions(+), 43 deletions(-) diff --git a/platform/search/src/services/GenericSearchProvider.js b/platform/search/src/services/GenericSearchProvider.js index 014d8d7fda..8688fae68a 100644 --- a/platform/search/src/services/GenericSearchProvider.js +++ b/platform/search/src/services/GenericSearchProvider.js @@ -28,13 +28,13 @@ define( [], function () { "use strict"; - + var DEFAULT_MAX_RESULTS = 100, DEFAULT_TIMEOUT = 1000, stopTime; - + /** - * A search service which searches through domain objects in + * A search service which searches through domain objects in * the filetree without using external search implementations. * * @constructor @@ -44,7 +44,7 @@ define( * domain objects can be gotten. * @param {WorkerService} workerService The service which allows * more easy creation of web workers. - * @param {GENERIC_SEARCH_ROOTS} ROOTS An array of the root + * @param {GENERIC_SEARCH_ROOTS} ROOTS An array of the root * domain objects' IDs. */ function GenericSearchProvider($q, $timeout, objectService, workerService, ROOTS) { @@ -57,11 +57,11 @@ define( this.$q = $q; // pendingQueries is a dictionary with the key value pairs st // the key is the timestamp and the value is the promise - + // Tell the web worker to add a domain object's model to its list of items. function indexItem(domainObject) { var message; - + // undefined check if (domainObject && domainObject.getModel) { // Using model instead of whole domain object because @@ -74,15 +74,15 @@ define( worker.postMessage(message); } } - - // Handles responses from the web worker. Namely, the results of - // a search request. + + // Handles responses from the web worker. Namely, the results of + // a search request. function handleResponse(event) { var ids = [], id; - - // If we have the results from a search + + // If we have the results from a search if (event.data.request === 'search') { // Convert the ids given from the web worker into domain objects for (id in event.data.results) { @@ -91,7 +91,7 @@ define( objectService.getObjects(ids).then(function (objects) { var searchResults = [], id; - + // Create searchResult objects for (id in objects) { searchResults.push({ @@ -100,8 +100,8 @@ define( score: event.data.results[id] }); } - - // Resove the promise corresponding to this + + // Resove the promise corresponding to this pendingQueries[event.data.timestamp].resolve({ hits: searchResults, total: event.data.total, @@ -110,27 +110,44 @@ define( }); } } - + // Helper function for getItems(). Indexes the tree. function indexItems(nodes) { + function handleMutation(model) { + if (model && model.composition) { + // If the node was mutated to have children, get the child domain objects + objectService.getObjects(listener.composition).then(function (objectsById) { + var objects = [], + id; + + // Get each of the domain objects in objectsById + for (id in objectsById) { + objects.push(objectsById[id]); + } + + indexItems(objects); + }); + } + } + nodes.forEach(function (node) { var id = node && node.getId && node.getId(); - + // If we have already indexed this item, stop here if (indexed[id]) { return; } - + // Index each item with the web worker indexItem(node); indexed[id] = true; - - + + // If this node has children, index those if (node && node.hasCapability && node.hasCapability('composition')) { // Make sure that this is async, so doesn't block up page $timeout(function () { - // Get the children... + // Get the children... node.useCapability('composition').then(function (children) { $timeout(function () { // ... then index the children @@ -143,41 +160,26 @@ define( }); }, 0); } - - // Watch for changes to this item, in case it gets new children - if (node && node.hasCapability && node.hasCapability('mutation')) { - node.getCapability('mutation').listen(function (listener) { - if (listener && listener.composition) { - // If the node was mutated to have children, get the child domain objects - objectService.getObjects(listener.composition).then(function (objectsById) { - var objects = [], - id; - // Get each of the domain objects in objectsById - for (id in objectsById) { - objects.push(objectsById[id]); - } - - indexItems(objects); - }); - } - }); + // Watch for changes to this item, in case it gets new children + if (node && node.hasCapability && node.hasCapability('mutation')) { + node.getCapability('mutation').listen(handleMutation); } }); } - + // Converts the filetree into a list function getItems() { // Aquire root objects objectService.getObjects(ROOTS).then(function (objectsById) { var objects = [], id; - + // Get each of the domain objects in objectsById for (id in objectsById) { objects.push(objectsById[id]); } - + // Index all of the roots' descendents indexItems(objects); }); @@ -185,7 +187,7 @@ define( worker.onmessage = handleResponse; - // Index the tree's contents once at the beginning + // Index the tree's contents once at the beginning getItems(); } @@ -266,4 +268,4 @@ define( return GenericSearchProvider; } -); \ No newline at end of file +); From 866c8882ca511862c152e46e79bfbd59946191bc Mon Sep 17 00:00:00 2001 From: Victor Woeltjen Date: Tue, 29 Sep 2015 11:47:02 -0700 Subject: [PATCH 05/23] [Search] Listen on a global mutation topic Listen on a global mutation topic to remove the need to retain listeners per domain object. --- .../src/capabilities/MutationCapability.js | 21 +++++++++--- platform/search/bundle.json | 11 +++++-- .../src/services/GenericSearchProvider.js | 32 +++++-------------- 3 files changed, 34 insertions(+), 30 deletions(-) diff --git a/platform/core/src/capabilities/MutationCapability.js b/platform/core/src/capabilities/MutationCapability.js index b9f49ca969..8746b9af64 100644 --- a/platform/core/src/capabilities/MutationCapability.js +++ b/platform/core/src/capabilities/MutationCapability.js @@ -29,7 +29,8 @@ define( function () { "use strict"; - var TOPIC_PREFIX = "mutation:"; + var GENERAL_TOPIC = "mutation", + TOPIC_PREFIX = "mutation:"; // Utility function to overwrite a destination object // with the contents of a source object. @@ -78,7 +79,11 @@ define( * @implements {Capability} */ function MutationCapability(topic, now, domainObject) { - this.mutationTopic = topic(TOPIC_PREFIX + domainObject.getId()); + this.generalMutationTopic = + topic(GENERAL_TOPIC); + this.specificMutationTopic = + topic(TOPIC_PREFIX + domainObject.getId()); + this.now = now; this.domainObject = domainObject; } @@ -115,11 +120,19 @@ define( // mutator function has a temporary copy to work with. var domainObject = this.domainObject, now = this.now, - t = this.mutationTopic, + generalTopic = this.generalMutationTopic, + specificTopic = this.specificMutationTopic, model = domainObject.getModel(), clone = JSON.parse(JSON.stringify(model)), useTimestamp = arguments.length > 1; + function notifyListeners(model) { + // Broadcast a general event... + generalTopic.notify(domainObject); + // ...and also notify listeners watching this specific object. + specificTopic.notify(model); + } + // Function to handle copying values to the actual function handleMutation(mutationResult) { // If mutation result was undefined, just use @@ -136,7 +149,7 @@ define( copyValues(model, result); } model.modified = useTimestamp ? timestamp : now(); - t.notify(model); + notifyListeners(model); } // Report the result of the mutation diff --git a/platform/search/bundle.json b/platform/search/bundle.json index 7ea1536556..4602227c27 100644 --- a/platform/search/bundle.json +++ b/platform/search/bundle.json @@ -45,7 +45,14 @@ "provides": "searchService", "type": "provider", "implementation": "services/GenericSearchProvider.js", - "depends": [ "$q", "$timeout", "objectService", "workerService", "GENERIC_SEARCH_ROOTS" ] + "depends": [ + "$q", + "$timeout", + "objectService", + "workerService", + "topic", + "GENERIC_SEARCH_ROOTS" + ] }, { "provides": "searchService", @@ -61,4 +68,4 @@ } ] } -} \ No newline at end of file +} diff --git a/platform/search/src/services/GenericSearchProvider.js b/platform/search/src/services/GenericSearchProvider.js index 8688fae68a..eba2b7f725 100644 --- a/platform/search/src/services/GenericSearchProvider.js +++ b/platform/search/src/services/GenericSearchProvider.js @@ -47,10 +47,11 @@ define( * @param {GENERIC_SEARCH_ROOTS} ROOTS An array of the root * domain objects' IDs. */ - function GenericSearchProvider($q, $timeout, objectService, workerService, ROOTS) { + function GenericSearchProvider($q, $timeout, objectService, workerService, topic, ROOTS) { var indexed = {}, pendingQueries = {}, - worker = workerService.run('genericSearchWorker'); + worker = workerService.run('genericSearchWorker'), + mutationTopic = topic("mutation"); this.worker = worker; this.pendingQueries = pendingQueries; @@ -113,23 +114,6 @@ define( // Helper function for getItems(). Indexes the tree. function indexItems(nodes) { - function handleMutation(model) { - if (model && model.composition) { - // If the node was mutated to have children, get the child domain objects - objectService.getObjects(listener.composition).then(function (objectsById) { - var objects = [], - id; - - // Get each of the domain objects in objectsById - for (id in objectsById) { - objects.push(objectsById[id]); - } - - indexItems(objects); - }); - } - } - nodes.forEach(function (node) { var id = node && node.getId && node.getId(); @@ -160,11 +144,6 @@ define( }); }, 0); } - - // Watch for changes to this item, in case it gets new children - if (node && node.hasCapability && node.hasCapability('mutation')) { - node.getCapability('mutation').listen(handleMutation); - } }); } @@ -189,6 +168,11 @@ define( // Index the tree's contents once at the beginning getItems(); + + // Re-index items when they are mutated + mutationTopic.listen(function (domainObject) { + indexItems([domainObject]); + }); } /** From fe8543158e78bf1d802c7047e27c7843cacec308 Mon Sep 17 00:00:00 2001 From: Victor Woeltjen Date: Tue, 29 Sep 2015 12:00:05 -0700 Subject: [PATCH 06/23] [Search] Fix reindexing Flag domain objects as non-indexed on mutation to ensure reindexing. Done in the context of nasa/openmctweb#141. --- platform/search/src/services/GenericSearchProvider.js | 1 + 1 file changed, 1 insertion(+) diff --git a/platform/search/src/services/GenericSearchProvider.js b/platform/search/src/services/GenericSearchProvider.js index eba2b7f725..a8e7976c31 100644 --- a/platform/search/src/services/GenericSearchProvider.js +++ b/platform/search/src/services/GenericSearchProvider.js @@ -171,6 +171,7 @@ define( // Re-index items when they are mutated mutationTopic.listen(function (domainObject) { + indexed[domainObject.getId()] = false; indexItems([domainObject]); }); } From 77c399f2a26380c9dead3bb9239bb753ffef33cb Mon Sep 17 00:00:00 2001 From: Victor Woeltjen Date: Tue, 29 Sep 2015 12:19:35 -0700 Subject: [PATCH 07/23] [Search] Don't trigger digest cycles while indexing Avoid triggering digest cycles while indexing; remove extra call to $timeout --- .../search/src/services/GenericSearchProvider.js | 14 ++------------ 1 file changed, 2 insertions(+), 12 deletions(-) diff --git a/platform/search/src/services/GenericSearchProvider.js b/platform/search/src/services/GenericSearchProvider.js index a8e7976c31..e05b58ca96 100644 --- a/platform/search/src/services/GenericSearchProvider.js +++ b/platform/search/src/services/GenericSearchProvider.js @@ -126,23 +126,13 @@ define( indexItem(node); indexed[id] = true; - // If this node has children, index those if (node && node.hasCapability && node.hasCapability('composition')) { // Make sure that this is async, so doesn't block up page $timeout(function () { // Get the children... - node.useCapability('composition').then(function (children) { - $timeout(function () { - // ... then index the children - if (children.constructor === Array) { - indexItems(children); - } else { - indexItems([children]); - } - }, 0); - }); - }, 0); + node.useCapability('composition').then(indexItems); + }, 0, false); } }); } From 2979ee90a38dbbb0b197c9e4414cc6a9207ba333 Mon Sep 17 00:00:00 2001 From: Victor Woeltjen Date: Tue, 29 Sep 2015 14:59:49 -0700 Subject: [PATCH 08/23] Revert "[Search] Don't trigger digest cycles while indexing" This reverts commit 4b8a5ac0b257737ee33effc966816afca6c11b94. Performance measurements indicates this is harmful for performance, although this is not well-explained. --- .../search/src/services/GenericSearchProvider.js | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/platform/search/src/services/GenericSearchProvider.js b/platform/search/src/services/GenericSearchProvider.js index e05b58ca96..a8e7976c31 100644 --- a/platform/search/src/services/GenericSearchProvider.js +++ b/platform/search/src/services/GenericSearchProvider.js @@ -126,13 +126,23 @@ define( indexItem(node); indexed[id] = true; + // If this node has children, index those if (node && node.hasCapability && node.hasCapability('composition')) { // Make sure that this is async, so doesn't block up page $timeout(function () { // Get the children... - node.useCapability('composition').then(indexItems); - }, 0, false); + node.useCapability('composition').then(function (children) { + $timeout(function () { + // ... then index the children + if (children.constructor === Array) { + indexItems(children); + } else { + indexItems([children]); + } + }, 0); + }); + }, 0); } }); } From 0891e15936807a37923c0c2ffe83278eea0851b2 Mon Sep 17 00:00:00 2001 From: Victor Woeltjen Date: Tue, 29 Sep 2015 15:01:09 -0700 Subject: [PATCH 09/23] [Search] Add digest indicator Add digest indicator to example/profiling to aid in diagnosing digest-related performance issues (or ruling out excessive digest cycles as a cause of performance issues.) --- example/profiling/bundle.json | 6 +- example/profiling/src/DigestIndicator.js | 77 ++++++++++++++++++++++++ 2 files changed, 82 insertions(+), 1 deletion(-) create mode 100644 example/profiling/src/DigestIndicator.js diff --git a/example/profiling/bundle.json b/example/profiling/bundle.json index b6090717d2..25c1b10749 100644 --- a/example/profiling/bundle.json +++ b/example/profiling/bundle.json @@ -4,7 +4,11 @@ { "implementation": "WatchIndicator.js", "depends": ["$interval", "$rootScope"] + }, + { + "implementation": "DigestIndicator.js", + "depends": ["$interval", "$rootScope"] } ] } -} \ No newline at end of file +} diff --git a/example/profiling/src/DigestIndicator.js b/example/profiling/src/DigestIndicator.js new file mode 100644 index 0000000000..02fbc7a08b --- /dev/null +++ b/example/profiling/src/DigestIndicator.js @@ -0,0 +1,77 @@ +/***************************************************************************** + * Open MCT Web, Copyright (c) 2014-2015, United States Government + * as represented by the Administrator of the National Aeronautics and Space + * Administration. All rights reserved. + * + * Open MCT Web is licensed under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * http://www.apache.org/licenses/LICENSE-2.0. + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the + * License for the specific language governing permissions and limitations + * under the License. + * + * Open MCT Web includes source code licensed under additional open source + * licenses. See the Open Source Licenses file (LICENSES.md) included with + * this source code distribution or the Licensing information page available + * at runtime from the About dialog for additional information. + *****************************************************************************/ +/*global define*/ + +define( + [], + function () { + "use strict"; + + /** + * Displays the number of digests that have occurred since the + * indicator was first instantiated. + * @constructor + * @param $interval Angular's $interval + * @implements {Indicator} + */ + function DigestIndicator($interval, $rootScope) { + var digests = 0, + displayed = 0, + start = Date.now(); + + function update() { + var secs = (Date.now() - start) / 1000; + displayed = Math.round(digests / secs); + } + + function increment() { + digests += 1; + } + + $rootScope.$watch(increment); + + // Update state every second + $interval(update, 1000); + + // Provide initial state, too + update(); + + return { + getGlyph: function () { + return "."; + }, + getGlyphClass: function () { + return undefined; + }, + getText: function () { + return displayed + " digests/sec"; + }, + getDescription: function () { + return ""; + } + }; + } + + return DigestIndicator; + + } +); From 77c66053f3964456ae47317eb1d750584161b255 Mon Sep 17 00:00:00 2001 From: Victor Woeltjen Date: Tue, 29 Sep 2015 15:57:08 -0700 Subject: [PATCH 10/23] [Search] Change indexing approach Change indexing approach to more carefully control the rate at which objects are loaded to be indexed, to improve performance. nasa/openmctweb#141. --- platform/search/bundle.json | 2 +- .../src/services/GenericSearchProvider.js | 115 ++++++++---------- 2 files changed, 50 insertions(+), 67 deletions(-) diff --git a/platform/search/bundle.json b/platform/search/bundle.json index 4602227c27..c0dd7e29a9 100644 --- a/platform/search/bundle.json +++ b/platform/search/bundle.json @@ -47,7 +47,7 @@ "implementation": "services/GenericSearchProvider.js", "depends": [ "$q", - "$timeout", + "throttle", "objectService", "workerService", "topic", diff --git a/platform/search/src/services/GenericSearchProvider.js b/platform/search/src/services/GenericSearchProvider.js index a8e7976c31..a2b0fdd407 100644 --- a/platform/search/src/services/GenericSearchProvider.js +++ b/platform/search/src/services/GenericSearchProvider.js @@ -31,6 +31,8 @@ define( var DEFAULT_MAX_RESULTS = 100, DEFAULT_TIMEOUT = 1000, + FLUSH_SIZE = 24, + FLUSH_INTERVAL = 25, stopTime; /** @@ -39,7 +41,7 @@ define( * * @constructor * @param $q Angular's $q, for promise consolidation. - * @param $timeout Angular's $timeout, for delayed function execution. + * @param {Function} throttle a function to throttle function invocations * @param {ObjectService} objectService The service from which * domain objects can be gotten. * @param {WorkerService} workerService The service which allows @@ -47,11 +49,13 @@ define( * @param {GENERIC_SEARCH_ROOTS} ROOTS An array of the root * domain objects' IDs. */ - function GenericSearchProvider($q, $timeout, objectService, workerService, topic, ROOTS) { + function GenericSearchProvider($q, throttle, objectService, workerService, topic, ROOTS) { var indexed = {}, pendingQueries = {}, + toIndex = {}, worker = workerService.run('genericSearchWorker'), - mutationTopic = topic("mutation"); + mutationTopic = topic("mutation"), + scheduleFlush; this.worker = worker; this.pendingQueries = pendingQueries; @@ -59,23 +63,30 @@ define( // pendingQueries is a dictionary with the key value pairs st // the key is the timestamp and the value is the promise - // Tell the web worker to add a domain object's model to its list of items. - function indexItem(domainObject) { - var message; - - // undefined check - if (domainObject && domainObject.getModel) { - // Using model instead of whole domain object because - // it's a JSON object. - message = { - request: 'index', - model: domainObject.getModel(), - id: domainObject.getId() - }; - worker.postMessage(message); - } + function scheduleIdsForIndexing(ids) { + ids.forEach(function (id) { + if (!indexed[id]) { + indexed[id] = true; + toIndex[id] = true; + } + }); + scheduleFlush(); } + // Tell the web worker to add a domain object's model to its list of items. + function indexItem(domainObject) { + var model = domainObject.getModel(); + + worker.postMessage({ + request: 'index', + model: model, + id: domainObject.getId() + }); + + if (Array.isArray(model.composition)) { + scheduleIdsForIndexing(model.composition); + } + } // Handles responses from the web worker. Namely, the results of // a search request. @@ -112,67 +123,39 @@ define( } } - // Helper function for getItems(). Indexes the tree. - function indexItems(nodes) { - nodes.forEach(function (node) { - var id = node && node.getId && node.getId(); + scheduleFlush = throttle(function flush() { + var ids = Object.keys(toIndex).slice(0, FLUSH_SIZE); - // If we have already indexed this item, stop here - if (indexed[id]) { - return; - } - - // Index each item with the web worker - indexItem(node); - indexed[id] = true; - - - // If this node has children, index those - if (node && node.hasCapability && node.hasCapability('composition')) { - // Make sure that this is async, so doesn't block up page - $timeout(function () { - // Get the children... - node.useCapability('composition').then(function (children) { - $timeout(function () { - // ... then index the children - if (children.constructor === Array) { - indexItems(children); - } else { - indexItems([children]); - } - }, 0); - }); - }, 0); - } + // Don't need to look these up next time + ids.forEach(function (id) { + delete toIndex[id]; }); - } - // Converts the filetree into a list - function getItems() { - // Aquire root objects - objectService.getObjects(ROOTS).then(function (objectsById) { - var objects = [], - id; + if (ids.length < 1) { + return; + } - // Get each of the domain objects in objectsById - for (id in objectsById) { - objects.push(objectsById[id]); - } + objectService.getObjects(ids).then(function (objects) { + ids.map(function (id) { + return objects[id]; + }).filter(function (object) { + return object; + }).forEach(indexItem); - // Index all of the roots' descendents - indexItems(objects); + scheduleFlush(); }); - } + }, FLUSH_INTERVAL); worker.onmessage = handleResponse; // Index the tree's contents once at the beginning - getItems(); + scheduleIdsForIndexing(ROOTS); // Re-index items when they are mutated mutationTopic.listen(function (domainObject) { - indexed[domainObject.getId()] = false; - indexItems([domainObject]); + var id = domainObject.getId(); + indexed[id] = false; + scheduleIdsForIndexing([id]); }); } From c2868a4573d8244fd8e8d0c9a54821dbdff39f65 Mon Sep 17 00:00:00 2001 From: Victor Woeltjen Date: Wed, 16 Sep 2015 10:18:57 -0700 Subject: [PATCH 11/23] [Time Conductor] Allow arguments for throttled functions WTD-1515. Ensures that bounds passed in from the time controller get appropriately captured. --- platform/core/src/services/Throttle.js | 19 ++++++++++++++++--- 1 file changed, 16 insertions(+), 3 deletions(-) diff --git a/platform/core/src/services/Throttle.js b/platform/core/src/services/Throttle.js index 3d68988d6b..eda6713dec 100644 --- a/platform/core/src/services/Throttle.js +++ b/platform/core/src/services/Throttle.js @@ -36,11 +36,16 @@ define( * * Returns a function that, when invoked, will invoke `fn` after * `delay` milliseconds, only if no other invocations are pending. - * The optional argument `apply` determines whether. + * The optional argument `apply` determines whether or not a + * digest cycle should be triggered. * * The returned function will itself return a `Promise` which will * resolve to the returned value of `fn` whenever that is invoked. * + * In cases where arguments are provided, only the most recent + * set of arguments will be passed on to the throttled function + * at the time it is executed. + * * @returns {Function} * @memberof platform/core */ @@ -56,7 +61,8 @@ define( * @memberof platform/core.Throttle# */ return function (fn, delay, apply) { - var activeTimeout; + var activeTimeout, + args = []; // Clear active timeout, so that next invocation starts // a new one. @@ -64,14 +70,21 @@ define( activeTimeout = undefined; } + // Invoke the function with the latest supplied arguments. + function invoke() { + fn.apply(null, args); + } + // Defaults delay = delay || 0; apply = apply || false; return function () { + // Store arguments from this invocation + args = Array.prototype.slice.apply(arguments, [0]); // Start a timeout if needed if (!activeTimeout) { - activeTimeout = $timeout(fn, delay, apply); + activeTimeout = $timeout(invoke, delay, apply); activeTimeout.then(clearActiveTimeout); } // Return whichever timeout is active (to get From ef527df381fff1765b34b217fe2a1b9375d1e875 Mon Sep 17 00:00:00 2001 From: Victor Woeltjen Date: Wed, 16 Sep 2015 11:04:07 -0700 Subject: [PATCH 12/23] [Time Conductor] Fix throttle bug Fix a timing/ordering issue in throttle which allowed some throttled invocations to be ignored. WTD-1515 --- platform/core/src/services/Throttle.js | 21 +++++++-------------- 1 file changed, 7 insertions(+), 14 deletions(-) diff --git a/platform/core/src/services/Throttle.js b/platform/core/src/services/Throttle.js index eda6713dec..60444ad6c4 100644 --- a/platform/core/src/services/Throttle.js +++ b/platform/core/src/services/Throttle.js @@ -61,18 +61,14 @@ define( * @memberof platform/core.Throttle# */ return function (fn, delay, apply) { - var activeTimeout, + var promise, // Promise for the result of throttled function args = []; - // Clear active timeout, so that next invocation starts - // a new one. - function clearActiveTimeout() { - activeTimeout = undefined; - } - - // Invoke the function with the latest supplied arguments. function invoke() { - fn.apply(null, args); + // Clear the active timeout so a new one starts next time. + promise = undefined; + // Invoke the function with the latest supplied arguments. + return fn.apply(null, args); } // Defaults @@ -83,13 +79,10 @@ define( // Store arguments from this invocation args = Array.prototype.slice.apply(arguments, [0]); // Start a timeout if needed - if (!activeTimeout) { - activeTimeout = $timeout(invoke, delay, apply); - activeTimeout.then(clearActiveTimeout); - } + promise = promise || $timeout(invoke, delay, apply); // Return whichever timeout is active (to get // a promise for the results of fn) - return activeTimeout; + return promise; }; }; } From 85ac4a9a320d6ebf963a6fe60541c1110b037d15 Mon Sep 17 00:00:00 2001 From: Victor Woeltjen Date: Tue, 29 Sep 2015 16:35:27 -0700 Subject: [PATCH 13/23] [Search] Log indexing time ...to aid in tuning of generic search parameters. --- platform/search/bundle.json | 1 + platform/search/src/services/GenericSearchProvider.js | 9 ++++++++- 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/platform/search/bundle.json b/platform/search/bundle.json index c0dd7e29a9..67dc058ed9 100644 --- a/platform/search/bundle.json +++ b/platform/search/bundle.json @@ -47,6 +47,7 @@ "implementation": "services/GenericSearchProvider.js", "depends": [ "$q", + "$log", "throttle", "objectService", "workerService", diff --git a/platform/search/src/services/GenericSearchProvider.js b/platform/search/src/services/GenericSearchProvider.js index a2b0fdd407..3eb31f255a 100644 --- a/platform/search/src/services/GenericSearchProvider.js +++ b/platform/search/src/services/GenericSearchProvider.js @@ -41,6 +41,7 @@ define( * * @constructor * @param $q Angular's $q, for promise consolidation. + * @param $log Anglar's $log, for logging. * @param {Function} throttle a function to throttle function invocations * @param {ObjectService} objectService The service from which * domain objects can be gotten. @@ -49,12 +50,13 @@ define( * @param {GENERIC_SEARCH_ROOTS} ROOTS An array of the root * domain objects' IDs. */ - function GenericSearchProvider($q, throttle, objectService, workerService, topic, ROOTS) { + function GenericSearchProvider($q, $log, throttle, objectService, workerService, topic, ROOTS) { var indexed = {}, pendingQueries = {}, toIndex = {}, worker = workerService.run('genericSearchWorker'), mutationTopic = topic("mutation"), + indexingStarted = Date.now(), scheduleFlush; this.worker = worker; @@ -132,6 +134,11 @@ define( }); if (ids.length < 1) { + $log.info([ + 'GenericSearch finished indexing after ', + ((Date.now() - indexingStarted) / 1000).toFixed(2), + ' seconds.' + ].join('')); return; } From 78f3f8367e14a38c97ffee98489b5d84114ce347 Mon Sep 17 00:00:00 2001 From: Victor Woeltjen Date: Tue, 29 Sep 2015 18:35:55 -0700 Subject: [PATCH 14/23] [Search] Vary batch size When indexing for generic search, issue new batches of requests as individual requests finish (instead of waiting for whole batches to finish) varying size to keep the number of outstanding requests below some maximum. nasa/openmctweb#141 --- .../src/services/GenericSearchProvider.js | 49 ++++++++++--------- 1 file changed, 27 insertions(+), 22 deletions(-) diff --git a/platform/search/src/services/GenericSearchProvider.js b/platform/search/src/services/GenericSearchProvider.js index 3eb31f255a..a8387b143f 100644 --- a/platform/search/src/services/GenericSearchProvider.js +++ b/platform/search/src/services/GenericSearchProvider.js @@ -31,8 +31,8 @@ define( var DEFAULT_MAX_RESULTS = 100, DEFAULT_TIMEOUT = 1000, - FLUSH_SIZE = 24, - FLUSH_INTERVAL = 25, + MAX_CONCURRENT_REQUESTS = 100, + FLUSH_INTERVAL = 180, stopTime; /** @@ -53,10 +53,11 @@ define( function GenericSearchProvider($q, $log, throttle, objectService, workerService, topic, ROOTS) { var indexed = {}, pendingQueries = {}, - toIndex = {}, + toRequest = {}, worker = workerService.run('genericSearchWorker'), mutationTopic = topic("mutation"), indexingStarted = Date.now(), + pendingRequests = 0, scheduleFlush; this.worker = worker; @@ -69,7 +70,7 @@ define( ids.forEach(function (id) { if (!indexed[id]) { indexed[id] = true; - toIndex[id] = true; + toRequest[id] = true; } }); scheduleFlush(); @@ -125,32 +126,36 @@ define( } } - scheduleFlush = throttle(function flush() { - var ids = Object.keys(toIndex).slice(0, FLUSH_SIZE); - - // Don't need to look these up next time - ids.forEach(function (id) { - delete toIndex[id]; + function requestAndIndex(id) { + delete toRequest[id]; + pendingRequests += 1; + objectService.getObjects([id]).then(function (objects) { + if (objects[id]) { + indexItem(objects[id]); + } + }, function () { + $log.warn("Failed to index domain object " + id); + }).then(function () { + pendingRequests -= 1; + scheduleFlush(); }); + } - if (ids.length < 1) { + scheduleFlush = throttle(function flush() { + var batchSize = + Math.max(MAX_CONCURRENT_REQUESTS - pendingRequests, 0); + + if (Object.keys(toRequest).length + pendingRequests < 1) { $log.info([ 'GenericSearch finished indexing after ', ((Date.now() - indexingStarted) / 1000).toFixed(2), ' seconds.' ].join('')); - return; + } else { + Object.keys(toRequest) + .slice(0, batchSize) + .forEach(requestAndIndex); } - - objectService.getObjects(ids).then(function (objects) { - ids.map(function (id) { - return objects[id]; - }).filter(function (object) { - return object; - }).forEach(indexItem); - - scheduleFlush(); - }); }, FLUSH_INTERVAL); worker.onmessage = handleResponse; From b632926d8e1912687df5d7693caed6f785e489fe Mon Sep 17 00:00:00 2001 From: Victor Woeltjen Date: Wed, 30 Sep 2015 13:09:55 -0700 Subject: [PATCH 15/23] [Search] Fix mutation.listen Update mutation.listen to match previous variable names changes related to nasa/openmctweb#141. --- platform/core/src/capabilities/MutationCapability.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/platform/core/src/capabilities/MutationCapability.js b/platform/core/src/capabilities/MutationCapability.js index 8746b9af64..1ff2b6828f 100644 --- a/platform/core/src/capabilities/MutationCapability.js +++ b/platform/core/src/capabilities/MutationCapability.js @@ -171,7 +171,7 @@ define( * @memberof platform/core.MutationCapability# */ MutationCapability.prototype.listen = function (listener) { - return this.mutationTopic.listen(listener); + return this.specificMutationTopic.listen(listener); }; /** From 0d1f3bf87a90671f9a1763ff95585d24c3535c32 Mon Sep 17 00:00:00 2001 From: Victor Woeltjen Date: Wed, 16 Sep 2015 15:23:08 -0700 Subject: [PATCH 16/23] [Throttle] Update spec Conflicts: platform/features/layout/test/FixedControllerSpec.js --- platform/core/test/services/ThrottleSpec.js | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/platform/core/test/services/ThrottleSpec.js b/platform/core/test/services/ThrottleSpec.js index bcaf2af363..3b361f70bb 100644 --- a/platform/core/test/services/ThrottleSpec.js +++ b/platform/core/test/services/ThrottleSpec.js @@ -45,7 +45,9 @@ define( // Verify precondition: Not called at throttle-time expect(mockTimeout).not.toHaveBeenCalled(); expect(throttled()).toEqual(mockPromise); - expect(mockTimeout).toHaveBeenCalledWith(mockFn, 0, false); + expect(mockFn).not.toHaveBeenCalled(); + expect(mockTimeout) + .toHaveBeenCalledWith(jasmine.any(Function), 0, false); }); it("schedules only one timeout at a time", function () { @@ -59,10 +61,11 @@ define( it("schedules additional invocations after resolution", function () { var throttled = throttle(mockFn); throttled(); - mockPromise.then.mostRecentCall.args[0](); // Resolve timeout + mockTimeout.mostRecentCall.args[0](); // Resolve timeout throttled(); - mockPromise.then.mostRecentCall.args[0](); + mockTimeout.mostRecentCall.args[0](); throttled(); + mockTimeout.mostRecentCall.args[0](); expect(mockTimeout.calls.length).toEqual(3); }); }); From d04c5e68581f77e225006d25bd6657b866453141 Mon Sep 17 00:00:00 2001 From: Victor Woeltjen Date: Wed, 30 Sep 2015 17:08:47 -0700 Subject: [PATCH 17/23] [Search] Update GenericSearch spec nasa/openmctweb#141. --- .../services/GenericSearchProviderSpec.js | 178 ++++++++++++------ 1 file changed, 122 insertions(+), 56 deletions(-) diff --git a/platform/search/test/services/GenericSearchProviderSpec.js b/platform/search/test/services/GenericSearchProviderSpec.js index 2da7cd343b..aeeef59908 100644 --- a/platform/search/test/services/GenericSearchProviderSpec.js +++ b/platform/search/test/services/GenericSearchProviderSpec.js @@ -31,35 +31,51 @@ define( describe("The generic search provider ", function () { var mockQ, - mockTimeout, + mockLog, + mockThrottle, mockDeferred, mockObjectService, mockObjectPromise, + mockChainedPromise, mockDomainObjects, mockCapability, mockCapabilityPromise, mockWorkerService, mockWorker, + mockTopic, + mockMutationTopic, mockRoots = ['root1', 'root2'], provider, mockProviderResults; - beforeEach(function () { + function resolveObjectPromises() { var i; - + for (i = 0; i < mockObjectPromise.then.calls.length; i += 1) { + mockChainedPromise.then.calls[i].args[0]( + mockObjectPromise.then.calls[i] + .args[0](mockDomainObjects) + ); + } + } + + beforeEach(function () { mockQ = jasmine.createSpyObj( "$q", [ "defer" ] ); + mockLog = jasmine.createSpyObj( + "$log", + [ "error", "warn", "info", "debug" ] + ); mockDeferred = jasmine.createSpyObj( "deferred", [ "resolve", "reject"] ); mockDeferred.promise = "mock promise"; mockQ.defer.andReturn(mockDeferred); - - mockTimeout = jasmine.createSpy("$timeout"); - + + mockThrottle = jasmine.createSpy("throttle"); + mockObjectService = jasmine.createSpyObj( "objectService", [ "getObjects" ] @@ -68,9 +84,14 @@ define( "promise", [ "then", "catch" ] ); + mockChainedPromise = jasmine.createSpyObj( + "chainedPromise", + [ "then" ] + ); mockObjectService.getObjects.andReturn(mockObjectPromise); - - + + mockTopic = jasmine.createSpy('topic'); + mockWorkerService = jasmine.createSpyObj( "workerService", [ "run" ] @@ -80,68 +101,104 @@ define( [ "postMessage" ] ); mockWorkerService.run.andReturn(mockWorker); - + mockCapabilityPromise = jasmine.createSpyObj( "promise", [ "then", "catch" ] ); - + mockDomainObjects = {}; - for (i = 0; i < 4; i += 1) { - mockDomainObjects[i] = ( + ['a', 'root1', 'root2'].forEach(function (id) { + mockDomainObjects[id] = ( jasmine.createSpyObj( "domainObject", [ "getId", "getModel", "hasCapability", "getCapability", "useCapability" ] ) ); - mockDomainObjects[i].getId.andReturn(i); - mockDomainObjects[i].getCapability.andReturn(mockCapability); - mockDomainObjects[i].useCapability.andReturn(mockCapabilityPromise); - } - // Give the first object children - mockDomainObjects[0].hasCapability.andReturn(true); + mockDomainObjects[id].getId.andReturn(id); + mockDomainObjects[id].getCapability.andReturn(mockCapability); + mockDomainObjects[id].useCapability.andReturn(mockCapabilityPromise); + mockDomainObjects[id].getModel.andReturn({}); + }); + mockCapability = jasmine.createSpyObj( "capability", [ "invoke", "listen" ] ); mockCapability.invoke.andReturn(mockCapabilityPromise); - mockDomainObjects[0].getCapability.andReturn(mockCapability); - - provider = new GenericSearchProvider(mockQ, mockTimeout, mockObjectService, mockWorkerService, mockRoots); + mockDomainObjects.a.getCapability.andReturn(mockCapability); + mockMutationTopic = jasmine.createSpyObj( + 'mutationTopic', + [ 'listen' ] + ); + mockTopic.andCallFake(function (key) { + return key === 'mutation' && mockMutationTopic; + }); + mockThrottle.andCallFake(function (fn) { + return fn; + }); + mockObjectPromise.then.andReturn(mockChainedPromise); + + + provider = new GenericSearchProvider( + mockQ, + mockLog, + mockThrottle, + mockObjectService, + mockWorkerService, + mockTopic, + mockRoots + ); }); - + it("indexes tree on initialization", function () { + var i; + expect(mockObjectService.getObjects).toHaveBeenCalled(); expect(mockObjectPromise.then).toHaveBeenCalled(); - - // Call through the root-getting part - mockObjectPromise.then.mostRecentCall.args[0](mockDomainObjects); - - // Call through the children-getting part - mockTimeout.mostRecentCall.args[0](); - // Array argument indicates multiple children - mockCapabilityPromise.then.mostRecentCall.args[0]([]); - mockTimeout.mostRecentCall.args[0](); - // Call again, but for single child - mockCapabilityPromise.then.mostRecentCall.args[0]({}); - mockTimeout.mostRecentCall.args[0](); - - expect(mockWorker.postMessage).toHaveBeenCalled(); + + // Call through the root-getting part + resolveObjectPromises(); + + mockRoots.forEach(function (id) { + expect(mockWorker.postMessage).toHaveBeenCalledWith({ + request: 'index', + model: mockDomainObjects[id].getModel(), + id: id + }); + }); }); - - it("when indexing, listens for composition changes", function () { - var mockListener = {composition: {}}; - - // Call indexItems - mockObjectPromise.then.mostRecentCall.args[0](mockDomainObjects); - - // Call through listening for changes - expect(mockCapability.listen).toHaveBeenCalled(); - mockCapability.listen.mostRecentCall.args[0](mockListener); - expect(mockObjectService.getObjects).toHaveBeenCalled(); - mockObjectPromise.then.mostRecentCall.args[0](mockDomainObjects); + + it("indexes members of composition", function () { + mockDomainObjects.root1.getModel.andReturn({ + composition: ['a'] + }); + + resolveObjectPromises(); + resolveObjectPromises(); + + expect(mockWorker.postMessage).toHaveBeenCalledWith({ + request: 'index', + model: mockDomainObjects.a.getModel(), + id: 'a' + }); }); - + + it("listens for changes to mutation", function () { + expect(mockMutationTopic.listen) + .toHaveBeenCalledWith(jasmine.any(Function)); + mockMutationTopic.listen.mostRecentCall + .args[0](mockDomainObjects.a); + + resolveObjectPromises(); + + expect(mockWorker.postMessage).toHaveBeenCalledWith({ + request: 'index', + model: mockDomainObjects.a.getModel(), + id: mockDomainObjects.a.getId() + }); + }); + it("sends search queries to the worker", function () { var timestamp = Date.now(); provider.query(' test "query" ', timestamp, 1, 2); @@ -153,20 +210,20 @@ define( timeout: 2 }); }); - + it("gives an empty result for an empty query", function () { var timestamp = Date.now(), queryOutput; - + queryOutput = provider.query('', timestamp, 1, 2); expect(queryOutput.hits).toEqual([]); expect(queryOutput.total).toEqual(0); - + queryOutput = provider.query(); expect(queryOutput.hits).toEqual([]); expect(queryOutput.total).toEqual(0); }); - + it("handles responses from the worker", function () { var timestamp = Date.now(), event = { @@ -181,13 +238,22 @@ define( timestamp: timestamp } }; - + provider.query(' test "query" ', timestamp); mockWorker.onmessage(event); mockObjectPromise.then.mostRecentCall.args[0](mockDomainObjects); expect(mockDeferred.resolve).toHaveBeenCalled(); }); - + + it("warns when objects are unavailable", function () { + resolveObjectPromises(); + expect(mockLog.warn).not.toHaveBeenCalled(); + mockChainedPromise.then.mostRecentCall.args[0]( + mockObjectPromise.then.mostRecentCall.args[1]() + ); + expect(mockLog.warn).toHaveBeenCalled(); + }); + }); } -); \ No newline at end of file +); From bea5002752fbf46495605ff41f4f7b4756013a9f Mon Sep 17 00:00:00 2001 From: Victor Woeltjen Date: Wed, 30 Sep 2015 17:23:52 -0700 Subject: [PATCH 18/23] [Search] Add test cases Add test cases related to throttled loading of domain objects to index, nasa/openmctweb#141. --- .../services/GenericSearchProviderSpec.js | 52 +++++++++++++++---- 1 file changed, 43 insertions(+), 9 deletions(-) diff --git a/platform/search/test/services/GenericSearchProviderSpec.js b/platform/search/test/services/GenericSearchProviderSpec.js index aeeef59908..e3ee0a97ba 100644 --- a/platform/search/test/services/GenericSearchProviderSpec.js +++ b/platform/search/test/services/GenericSearchProviderSpec.js @@ -45,6 +45,8 @@ define( mockTopic, mockMutationTopic, mockRoots = ['root1', 'root2'], + mockThrottledFn, + throttledCallCount, provider, mockProviderResults; @@ -58,6 +60,18 @@ define( } } + function resolveThrottledFn() { + if (mockThrottledFn.calls.length > throttledCallCount) { + mockThrottle.mostRecentCall.args[0](); + throttledCallCount = mockThrottledFn.calls.length; + } + } + + function resolveAsyncTasks() { + resolveThrottledFn(); + resolveObjectPromises(); + } + beforeEach(function () { mockQ = jasmine.createSpyObj( "$q", @@ -75,6 +89,8 @@ define( mockQ.defer.andReturn(mockDeferred); mockThrottle = jasmine.createSpy("throttle"); + mockThrottledFn = jasmine.createSpy("throttledFn"); + throttledCallCount = 0; mockObjectService = jasmine.createSpyObj( "objectService", @@ -112,7 +128,13 @@ define( mockDomainObjects[id] = ( jasmine.createSpyObj( "domainObject", - [ "getId", "getModel", "hasCapability", "getCapability", "useCapability" ] + [ + "getId", + "getModel", + "hasCapability", + "getCapability", + "useCapability" + ] ) ); mockDomainObjects[id].getId.andReturn(id); @@ -134,12 +156,9 @@ define( mockTopic.andCallFake(function (key) { return key === 'mutation' && mockMutationTopic; }); - mockThrottle.andCallFake(function (fn) { - return fn; - }); + mockThrottle.andReturn(mockThrottledFn); mockObjectPromise.then.andReturn(mockChainedPromise); - provider = new GenericSearchProvider( mockQ, mockLog, @@ -154,6 +173,8 @@ define( it("indexes tree on initialization", function () { var i; + resolveThrottledFn(); + expect(mockObjectService.getObjects).toHaveBeenCalled(); expect(mockObjectPromise.then).toHaveBeenCalled(); @@ -174,8 +195,8 @@ define( composition: ['a'] }); - resolveObjectPromises(); - resolveObjectPromises(); + resolveAsyncTasks(); + resolveAsyncTasks(); expect(mockWorker.postMessage).toHaveBeenCalledWith({ request: 'index', @@ -190,7 +211,7 @@ define( mockMutationTopic.listen.mostRecentCall .args[0](mockDomainObjects.a); - resolveObjectPromises(); + resolveAsyncTasks(); expect(mockWorker.postMessage).toHaveBeenCalledWith({ request: 'index', @@ -246,7 +267,7 @@ define( }); it("warns when objects are unavailable", function () { - resolveObjectPromises(); + resolveAsyncTasks(); expect(mockLog.warn).not.toHaveBeenCalled(); mockChainedPromise.then.mostRecentCall.args[0]( mockObjectPromise.then.mostRecentCall.args[1]() @@ -254,6 +275,19 @@ define( expect(mockLog.warn).toHaveBeenCalled(); }); + it("throttles the loading of objects to index", function () { + expect(mockObjectService.getObjects).not.toHaveBeenCalled(); + resolveThrottledFn(); + expect(mockObjectService.getObjects).toHaveBeenCalled(); + }); + + it("logs when all objects have been processed", function () { + expect(mockLog.info).not.toHaveBeenCalled(); + resolveAsyncTasks(); + resolveThrottledFn(); + expect(mockLog.info).toHaveBeenCalled(); + }); + }); } ); From 77b0086d18e986736de7d629432531d896356537 Mon Sep 17 00:00:00 2001 From: Victor Woeltjen Date: Mon, 5 Oct 2015 09:54:57 -0700 Subject: [PATCH 19/23] [Generic Search] Use appropriate data structure Per code review, nasa/openmctweb#165 --- platform/search/src/services/GenericSearchProvider.js | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/platform/search/src/services/GenericSearchProvider.js b/platform/search/src/services/GenericSearchProvider.js index a8387b143f..586cc48a79 100644 --- a/platform/search/src/services/GenericSearchProvider.js +++ b/platform/search/src/services/GenericSearchProvider.js @@ -53,7 +53,7 @@ define( function GenericSearchProvider($q, $log, throttle, objectService, workerService, topic, ROOTS) { var indexed = {}, pendingQueries = {}, - toRequest = {}, + toRequest = [], worker = workerService.run('genericSearchWorker'), mutationTopic = topic("mutation"), indexingStarted = Date.now(), @@ -70,7 +70,7 @@ define( ids.forEach(function (id) { if (!indexed[id]) { indexed[id] = true; - toRequest[id] = true; + toRequest.push(id); } }); scheduleFlush(); @@ -127,7 +127,6 @@ define( } function requestAndIndex(id) { - delete toRequest[id]; pendingRequests += 1; objectService.getObjects([id]).then(function (objects) { if (objects[id]) { @@ -145,15 +144,14 @@ define( var batchSize = Math.max(MAX_CONCURRENT_REQUESTS - pendingRequests, 0); - if (Object.keys(toRequest).length + pendingRequests < 1) { + if (toRequest.length + pendingRequests < 1) { $log.info([ 'GenericSearch finished indexing after ', ((Date.now() - indexingStarted) / 1000).toFixed(2), ' seconds.' ].join('')); } else { - Object.keys(toRequest) - .slice(0, batchSize) + toRequest.splice(-batchSize, batchSize) .forEach(requestAndIndex); } }, FLUSH_INTERVAL); From 5520d90984a48acd0e329d7707bf7dbe0adbbb25 Mon Sep 17 00:00:00 2001 From: Victor Woeltjen Date: Mon, 5 Oct 2015 09:57:46 -0700 Subject: [PATCH 20/23] [Generic Search] Remove comments Per code review, nasa/openmctweb#165 --- platform/core/src/capabilities/MutationCapability.js | 2 -- platform/core/src/services/Throttle.js | 2 +- 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/platform/core/src/capabilities/MutationCapability.js b/platform/core/src/capabilities/MutationCapability.js index 1ff2b6828f..1f08abda6b 100644 --- a/platform/core/src/capabilities/MutationCapability.js +++ b/platform/core/src/capabilities/MutationCapability.js @@ -127,9 +127,7 @@ define( useTimestamp = arguments.length > 1; function notifyListeners(model) { - // Broadcast a general event... generalTopic.notify(domainObject); - // ...and also notify listeners watching this specific object. specificTopic.notify(model); } diff --git a/platform/core/src/services/Throttle.js b/platform/core/src/services/Throttle.js index 60444ad6c4..4b1ad32530 100644 --- a/platform/core/src/services/Throttle.js +++ b/platform/core/src/services/Throttle.js @@ -61,7 +61,7 @@ define( * @memberof platform/core.Throttle# */ return function (fn, delay, apply) { - var promise, // Promise for the result of throttled function + var promise, args = []; function invoke() { From 36d06e8b5429672fd9e3cfaf0fb461bdee5ed8b5 Mon Sep 17 00:00:00 2001 From: Victor Woeltjen Date: Mon, 5 Oct 2015 10:06:55 -0700 Subject: [PATCH 21/23] [Generic Search] Reduce flush interval Per discussion from nasa/openmctweb#141, minimize the interval at which new objects get indexed, instead of presuming requirements for CPU utilization. --- platform/search/src/services/GenericSearchProvider.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/platform/search/src/services/GenericSearchProvider.js b/platform/search/src/services/GenericSearchProvider.js index 586cc48a79..80146f17f1 100644 --- a/platform/search/src/services/GenericSearchProvider.js +++ b/platform/search/src/services/GenericSearchProvider.js @@ -32,7 +32,7 @@ define( var DEFAULT_MAX_RESULTS = 100, DEFAULT_TIMEOUT = 1000, MAX_CONCURRENT_REQUESTS = 100, - FLUSH_INTERVAL = 180, + FLUSH_INTERVAL = 0, stopTime; /** From 134b749bbf5efcc1b1d22e29575342d6e6f32a01 Mon Sep 17 00:00:00 2001 From: Victor Woeltjen Date: Mon, 5 Oct 2015 10:11:38 -0700 Subject: [PATCH 22/23] [Generic Search] Track pending indexes Track domain objects which have indexing operations pending, to avoid redundantly indexing in cases where a broader indexed check is insufficient. --- platform/search/src/services/GenericSearchProvider.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/platform/search/src/services/GenericSearchProvider.js b/platform/search/src/services/GenericSearchProvider.js index 80146f17f1..9574d156fb 100644 --- a/platform/search/src/services/GenericSearchProvider.js +++ b/platform/search/src/services/GenericSearchProvider.js @@ -52,6 +52,7 @@ define( */ function GenericSearchProvider($q, $log, throttle, objectService, workerService, topic, ROOTS) { var indexed = {}, + pendingIndex = {}, pendingQueries = {}, toRequest = [], worker = workerService.run('genericSearchWorker'), @@ -68,8 +69,9 @@ define( function scheduleIdsForIndexing(ids) { ids.forEach(function (id) { - if (!indexed[id]) { + if (!indexed[id] && !pendingIndex[id]) { indexed[id] = true; + pendingIndex[id] = true; toRequest.push(id); } }); @@ -129,6 +131,7 @@ define( function requestAndIndex(id) { pendingRequests += 1; objectService.getObjects([id]).then(function (objects) { + delete pendingIndex[id]; if (objects[id]) { indexItem(objects[id]); } From d9029435520c3569c6d80dae3c7ef211061650f8 Mon Sep 17 00:00:00 2001 From: Victor Woeltjen Date: Fri, 9 Oct 2015 09:36:57 -0700 Subject: [PATCH 23/23] [Time Conductor] Satisfy JSLint ...in preparation to merge pull request nasa/openmctweb#162 --- .../general/src/controllers/DateTimePickerController.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/platform/commonUI/general/src/controllers/DateTimePickerController.js b/platform/commonUI/general/src/controllers/DateTimePickerController.js index 6d4734e767..ac07d77553 100644 --- a/platform/commonUI/general/src/controllers/DateTimePickerController.js +++ b/platform/commonUI/general/src/controllers/DateTimePickerController.js @@ -139,8 +139,8 @@ define( } $scope.isInCurrentMonth = function (cell) { - return cell.month === month; - } + return cell.month === month; + }; $scope.isSelected = function (cell) { var date = $scope.date || {};