From 5238aa2731193859a676c168e78d7cb1f50503e6 Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Wed, 13 Jul 2016 08:07:59 -0700 Subject: [PATCH 01/12] [Frontend] Styling for Time Conductor v2 Fixes #933 In-progress; fixed SVG text color --- .../commonUI/general/res/sass/controls/_time-conductor.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/platform/commonUI/general/res/sass/controls/_time-conductor.scss b/platform/commonUI/general/res/sass/controls/_time-conductor.scss index 0d03de2fc0..8ee9b0494d 100644 --- a/platform/commonUI/general/res/sass/controls/_time-conductor.scss +++ b/platform/commonUI/general/res/sass/controls/_time-conductor.scss @@ -85,14 +85,13 @@ width: 100%; svg { text-rendering: geometricPrecision; - color: transparent; - fill: $c !important; // Todo: figure out why this isn't working width: 100%; height: 100%; > g { font-size: 0.9em; } path {display: none;} line {stroke: $c;} + text { fill: $c; } } } } From 06af84c161e9cb311aba072717891cd166722b9a Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Wed, 13 Jul 2016 13:14:32 -0700 Subject: [PATCH 02/12] [Frontend] Styling for Time Conductor v2 Fixes #933 In-progress: fixed SVG text color, field styling for fixed vs. real-time, markup cleanup --- .../commonUI/general/res/sass/_constants.scss | 3 +- .../commonUI/general/res/sass/_global.scss | 2 +- .../res/sass/controls/_time-conductor.scss | 159 ++++++++++++------ .../themes/espresso/res/sass/_constants.scss | 3 +- .../themes/snow/res/sass/_constants.scss | 3 +- .../res/templates/time-conductor.html | 136 +++++++-------- 6 files changed, 183 insertions(+), 123 deletions(-) diff --git a/platform/commonUI/general/res/sass/_constants.scss b/platform/commonUI/general/res/sass/_constants.scss index b0d746bbb6..8e13b8d2be 100644 --- a/platform/commonUI/general/res/sass/_constants.scss +++ b/platform/commonUI/general/res/sass/_constants.scss @@ -48,7 +48,7 @@ $uePaneMiniTabW: 10px; $uePaneMiniTabCollapsedW: 11px; $ueEditLeftPaneW: 75%; $treeSearchInputBarH: 25px; -$ueTimeControlH: (21px, 18px, 20px); +$ueTimeControlH: (25px, 18px, 20px); /*************** Panes */ $ueBrowseLeftPaneTreeMinW: 150px; $ueBrowseLeftPaneTreeMaxW: 35%; @@ -108,6 +108,7 @@ $bubbleMaxW: 300px; $reqSymbolW: 15px; $reqSymbolM: $interiorMargin * 2; $reqSymbolFontSize: 0.7em; +$inputTextP: 3px 5px; /*************** Wait Spinner Defaults */ $waitSpinnerD: 32px; $waitSpinnerTreeD: 20px; diff --git a/platform/commonUI/general/res/sass/_global.scss b/platform/commonUI/general/res/sass/_global.scss index f03aad1eb9..573db14b4b 100644 --- a/platform/commonUI/general/res/sass/_global.scss +++ b/platform/commonUI/general/res/sass/_global.scss @@ -66,7 +66,7 @@ input, textarea { input[type="text"], input[type="search"] { vertical-align: baseline; - padding: 3px 5px; + padding: $inputTextP; } h1, h2, h3 { diff --git a/platform/commonUI/general/res/sass/controls/_time-conductor.scss b/platform/commonUI/general/res/sass/controls/_time-conductor.scss index 8ee9b0494d..5f25d1ba3a 100644 --- a/platform/commonUI/general/res/sass/controls/_time-conductor.scss +++ b/platform/commonUI/general/res/sass/controls/_time-conductor.scss @@ -1,18 +1,18 @@ @mixin toiLineHovEffects() { - &:before, - &:after { - background-color: $timeControllerToiLineColorHov; - } + &:before, + &:after { + background-color: $timeControllerToiLineColorHov; + } } .l-time-conductor { - $minW: 500px; - $knobHOffset: 0px; - $rangeValPad: $interiorMargin; - $rangeValOffset: $sliderKnobW + $interiorMargin; - $r1H: nth($ueTimeControlH,1); - $r2H: nth($ueTimeControlH,2); - $r3H: nth($ueTimeControlH,3); + $minW: 500px; + $knobHOffset: 0px; + $rangeValPad: $interiorMargin; + $rangeValOffset: $sliderKnobW + $interiorMargin; + $r1H: nth($ueTimeControlH, 1); + $r2H: nth($ueTimeControlH, 2); + $r3H: nth($ueTimeControlH, 3); // Glyphs Todo: replace with refactored CSS approach when that is merged into master $glyphIconFixed: '\e604'; @@ -24,57 +24,75 @@ min-width: $minW; position: relative; - >.l-row-elem { + > .l-row-elem { // First order row elements - box-sizing: border-box; + box-sizing: border-box; width: 100%; position: relative; - &:not(:first-child) { - margin-top: $interiorMargin; + } + + .mode-selector .s-menu-btn, + .time-delta { + &:before { + @extend .ui-symbol; + margin-right: $interiorMarginSm; } - } + } + + .time-delta { + &:before { + color: $colorTimeCondKeyBg; + } + } .l-time-conductor-inputs-holder, .l-time-conductor-ticks { font-size: 0.8rem; } - .l-time-conductor-inputs-holder { - $inputW: 180px; - $ticksBlockerFadeW: 25px; + .l-time-conductor-inputs-holder { + $trInputW: 180px; + $hmInputW: 80px; + $ticksBlockerFadeW: 50px; $iconCalendarW: 16px; $wBgColor: $colorBodyBg; - //$wBgColor: green; - $wBgW: $inputW + $interiorMargin + $iconCalendarW; height: $r1H; z-index: 1; - .l-time-range-input-w { + .l-time-range-w { // Wraps a datetime text input field + height: 100%; position: absolute; - width: $wBgW + $ticksBlockerFadeW; - &.start-date { - @include background-image(linear-gradient(90deg, $wBgColor $wBgW, transparent 100%)); + &.start-w { + @include background-image(linear-gradient(270deg, transparent, $wBgColor $ticksBlockerFadeW)); + padding-right: $ticksBlockerFadeW; } - &.end-date { - @include background-image(linear-gradient(270deg, $wBgColor $wBgW, transparent 100%)); + &.end-w { + @include background-image(linear-gradient(90deg, transparent, $wBgColor $ticksBlockerFadeW)); + padding-left: $ticksBlockerFadeW; right: 0; text-align: right; } input[type="text"] { - width: $inputW; + @include trans-prop-nice(padding, 250ms); + } + .time-range-input input { + width: $trInputW; + } + .hrs-min-input input { + width: $hmInputW; } .icon-calendar { margin-top: 4px; } } - } + } - .l-time-conductor-ticks { + .l-time-conductor-ticks { $c: $colorTick; - height: $r1H; + height: $r1H; mct-conductor-axis { - @include transform(translateY(3px)); + //@include transform(translateY(1px)); display: block; position: relative; width: 100%; @@ -85,27 +103,30 @@ width: 100%; svg { text-rendering: geometricPrecision; - width: 100%; height: 100%; + width: 100%; + height: 100%; > g { font-size: 0.9em; } - path {display: none;} - line {stroke: $c;} - text { fill: $c; } + path { + display: none; + } + line { + stroke: $c; + } + text { + fill: $c; + } } } - } + } .l-data-visualization { background: rgba($colorTick, 0.3); height: $r2H; } - .mode-selector .s-menu-btn { - &:before { - @extend .ui-symbol; - margin-right: $interiorMarginSm; - content: $glyphIconFixed; - } + .l-time-conductor-controls { + margin-top: $interiorMargin; } // Realtime, latest modes @@ -113,10 +134,19 @@ &.latest-mode { .l-time-conductor-inputs-holder { .l-time-range-input-w { - input:not(:hover) { + input[type="text"]:not(.error) { background: transparent; box-shadow: none; border-radius: 0; + padding-left: 0; + padding-right: 0; + &:hover { + @include nice-input(); + padding: $inputTextP; + } + } + &.start-date { + pointer-events: none; } .icon-calendar { display: none; @@ -128,21 +158,42 @@ } .l-data-visualization { - background: rgba($colorTimeCondKey, 0.5) !important + background: rgba($colorTimeCondKeyBg, 0.5) !important } .mode-selector .s-menu-btn { - @include btnSubtle($colorTimeCondKey, pullForward($colorTimeCondKey, $ltGamma)); + @include btnSubtle($colorTimeCondKeyBg, pullForward($colorTimeCondKeyBg, $ltGamma), $colorTimeCondKeyFg); + } + } + &.fixed-mode { + $i: $glyphIconFixed; + .mode-selector .s-menu-btn:before { + content: $i; + } + } + &.realtime-mode { + $i: $glyphIconRealtime; + .time-delta:before { + content: $i; + } + .mode-selector .s-menu-btn:before { + content: $i; + } + } + &.latest-mode { + $i: $glyphIconLatest; + .time-delta:before { + content: $i; + } + .mode-selector .s-menu-btn:before { + content: $i; } } - - &.realtime-mode .mode-selector .s-menu-btn:before { content: $glyphIconRealtime; } - &.latest-mode .mode-selector .s-menu-btn:before { content: $glyphIconLatest; } } .s-time-range-val { - border-radius: $controlCr; - background-color: $colorInputBg; - padding: 1px 1px 0 $interiorMargin; + border-radius: $controlCr; + background-color: $colorInputBg; + padding: 1px 1px 0 $interiorMargin; } /******************************************************************** MOBILE */ @@ -178,7 +229,9 @@ margin-right: 0; } .l-time-range-inputs-elem { - &.lbl { display: none; } + &.lbl { + display: none; + } } } } diff --git a/platform/commonUI/themes/espresso/res/sass/_constants.scss b/platform/commonUI/themes/espresso/res/sass/_constants.scss index 82eb282bea..5332282301 100644 --- a/platform/commonUI/themes/espresso/res/sass/_constants.scss +++ b/platform/commonUI/themes/espresso/res/sass/_constants.scss @@ -210,4 +210,5 @@ $colorLoadingFg: $colorAlt1; $colorLoadingBg: rgba($colorBodyFg, 0.2); // Time Conductor -$colorTimeCondKey: #1d7a96; \ No newline at end of file +$colorTimeCondKeyBg: #1d7a96; +$colorTimeCondKeyFg: #fff; \ No newline at end of file diff --git a/platform/commonUI/themes/snow/res/sass/_constants.scss b/platform/commonUI/themes/snow/res/sass/_constants.scss index 8d08a897da..5416e91e58 100644 --- a/platform/commonUI/themes/snow/res/sass/_constants.scss +++ b/platform/commonUI/themes/snow/res/sass/_constants.scss @@ -210,4 +210,5 @@ $colorLoadingFg: $colorAlt1; $colorLoadingBg: rgba($colorLoadingFg, 0.1); // Time Conductor -$colorTimeCondKey: #0092b3; +$colorTimeCondKeyBg: #0092b3; +$colorTimeCondKeyFg: #fff; diff --git a/platform/features/conductor-v2/res/templates/time-conductor.html b/platform/features/conductor-v2/res/templates/time-conductor.html index b140c0fda1..081b981220 100644 --- a/platform/features/conductor-v2/res/templates/time-conductor.html +++ b/platform/features/conductor-v2/res/templates/time-conductor.html @@ -1,71 +1,75 @@ -
- - - - - - - - - - - - - - - - - + + + + + + + - + + + + + + + + + + + + + + + + + + + +
@@ -74,7 +78,7 @@
-
+
+ class="abs holder flex-elem flex-fixed l-flex-row l-time-conductor-holder">
diff --git a/platform/commonUI/general/res/sass/controls/_time-conductor.scss b/platform/commonUI/general/res/sass/controls/_time-conductor.scss index 05a7f1fe11..3e62fa159e 100644 --- a/platform/commonUI/general/res/sass/controls/_time-conductor.scss +++ b/platform/commonUI/general/res/sass/controls/_time-conductor.scss @@ -5,8 +5,94 @@ } } -.l-time-conductor { +@include keyframes(clock-hands) { + 0% { + @include transform(translate(-50%, -50%) rotate(0deg)); + } + 100% { + @include transform(translate(-50%, -50%) rotate(360deg)); + } +} + +.l-time-conductor-holder { $minW: 500px; + border-top: 1px solid $colorInteriorBorder; + min-width: $minW; + padding-top: $interiorMargin; +} + +.time-conductor-icon { + $c: $colorBtnBg; //$colorTimeCondKeyBg; + $d: 20px; + background: $c; + border-radius: 4px; + height: $d !important; + width: $d; + position: relative; + // Icon shape: brackets + &:before, + &:after { + content: ''; + background: $colorBodyBg; + position: absolute; + } + &:before { + $in: 7px; + left: $in; + top: 0; + right: $in; + bottom: 0; + + } + &:after { + $in: 4px; + left: $in; + top: $in; + right: $in; + bottom: $in; + } + + // Clock hands + div[class*="hand"] { + $handW: 2px; + $handH: 8px; + @include transform(translate(-50%, -50%)); + @include animation-iteration-count(infinite); + @include animation-timing-function(linear); + position: absolute; + height: $handW; + width: $handW; + left: 50%; + top: 50%; + z-index: 2; + &:before { + background-color: $c; + content: ''; + display: block; + position: absolute; + width: 100%; + bottom: -1px; + } + &.hand-little { + z-index: 2; + @include animation-duration(12s); + &:before { + //background: red; + height: ceil($handH * 0.7); + } + } + &.hand-big { + z-index: 1; + @include animation-duration(1s); + &:before { + //background: green; + height: $handH; + } + } + } +} + +.l-time-conductor { $knobHOffset: 0px; $rangeValPad: $interiorMargin; $rangeValOffset: $sliderKnobW + $interiorMargin; @@ -19,9 +105,6 @@ $glyphIconRealtime: '\43'; $glyphIconLatest: '\44'; - border-top: 1px solid $colorInteriorBorder; - padding-top: $interiorMargin; - min-width: $minW; position: relative; > .l-row-elem { @@ -126,10 +209,28 @@ .l-time-conductor-controls { margin-top: $interiorMargin; } + // Fixed + &.fixed-mode { + .time-conductor-icon div[class*="hand"] { + &.hand-little { + @include transform(rotate(120deg)); + } + } + } // Realtime, latest modes &.realtime-mode, &.latest-mode { + .time-conductor-icon { + background: $colorTimeCondKeyBg; + div[class*="hand"] { + @include animation-name(clock-hands); + &:before { + background: $colorTimeCondKeyBg; + } + } + } + .l-time-conductor-inputs-holder { .l-time-range-input-w { input[type="text"]:not(.error) { diff --git a/platform/features/conductor-v2/res/templates/time-conductor.html b/platform/features/conductor-v2/res/templates/time-conductor.html index 081b981220..d0cff37f09 100644 --- a/platform/features/conductor-v2/res/templates/time-conductor.html +++ b/platform/features/conductor-v2/res/templates/time-conductor.html @@ -1,101 +1,110 @@ +
- -
-
- - - - - - - - - - - - + class="holder grows flex-elem l-flex-row l-time-conductor {{modeModel.selected}}-mode"> - - - - + - - - - - - - - - - -
- +
+
+
- -
+
+ +
+
+ + + + + + + - + + + + - -
- - - - + + + + + + + + + + + + + + + + + +
+ + +
+ + +
+ + + + +
\ No newline at end of file From e193e3dfba7e29ce34ac64a2d041451ec6385346 Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Wed, 13 Jul 2016 19:16:27 -0700 Subject: [PATCH 05/12] Merge open933 latest, resolve conflicts Fixes #933 Fair amount of manual fixing in time-conductor.html --- .../res/templates/time-conductor.html | 135 ++++++++++-------- 1 file changed, 72 insertions(+), 63 deletions(-) diff --git a/platform/features/conductor-v2/res/templates/time-conductor.html b/platform/features/conductor-v2/res/templates/time-conductor.html index 32e9bb0448..81ff59abfc 100644 --- a/platform/features/conductor-v2/res/templates/time-conductor.html +++ b/platform/features/conductor-v2/res/templates/time-conductor.html @@ -8,69 +8,78 @@
- -
-
- - - - - - - - - - - - - - - - - -
- -
+ +
+
+ + + + + + + - + + + + + + + + + + + + + + + + + + + + +
+ +
From 8b694ef33748d9b93b44488950fc471a6d8acd41 Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Wed, 13 Jul 2016 19:42:51 -0700 Subject: [PATCH 06/12] [Frontend] Styling for Time Conductor v2 Fixes #933 In-progress: color/size tweaks, fixes for espresso theme --- platform/commonUI/general/res/sass/_constants.scss | 2 +- .../general/res/sass/controls/_time-conductor.scss | 13 +++++++++++-- .../themes/espresso/res/sass/_constants.scss | 6 +++--- .../commonUI/themes/snow/res/sass/_constants.scss | 4 ++-- 4 files changed, 17 insertions(+), 8 deletions(-) diff --git a/platform/commonUI/general/res/sass/_constants.scss b/platform/commonUI/general/res/sass/_constants.scss index 2764da0efb..3946d4f706 100644 --- a/platform/commonUI/general/res/sass/_constants.scss +++ b/platform/commonUI/general/res/sass/_constants.scss @@ -48,7 +48,7 @@ $uePaneMiniTabW: 10px; $uePaneMiniTabCollapsedW: 11px; $ueEditLeftPaneW: 75%; $treeSearchInputBarH: 25px; -$ueTimeControlH: (25px, 4px, 20px); +$ueTimeControlH: (25px, 6px, 20px); /*************** Panes */ $ueBrowseLeftPaneTreeMinW: 150px; $ueBrowseLeftPaneTreeMaxW: 35%; diff --git a/platform/commonUI/general/res/sass/controls/_time-conductor.scss b/platform/commonUI/general/res/sass/controls/_time-conductor.scss index 3e62fa159e..5732d3669f 100644 --- a/platform/commonUI/general/res/sass/controls/_time-conductor.scss +++ b/platform/commonUI/general/res/sass/controls/_time-conductor.scss @@ -22,7 +22,7 @@ } .time-conductor-icon { - $c: $colorBtnBg; //$colorTimeCondKeyBg; + $c: $colorObjHdrIc; $d: 20px; background: $c; border-radius: 4px; @@ -193,6 +193,7 @@ display: none; } line { + // Tick marks stroke: $c; } text { @@ -239,7 +240,8 @@ border-radius: 0; padding-left: 0; padding-right: 0; - &:hover { + &:hover, + &:focus { @include nice-input(); padding: $inputTextP; } @@ -256,6 +258,13 @@ } } +/* .l-time-conductor-ticks .l-axis-holder { + svg { + line { color: $colorTimeCondKeyBg; }; + text { fill: $colorTimeCondKeyBg; } + } + }*/ + .l-data-visualization { background: $colorTimeCondDataVisRtBg !important } diff --git a/platform/commonUI/themes/espresso/res/sass/_constants.scss b/platform/commonUI/themes/espresso/res/sass/_constants.scss index 7e12c65cbc..a0d7adac11 100644 --- a/platform/commonUI/themes/espresso/res/sass/_constants.scss +++ b/platform/commonUI/themes/espresso/res/sass/_constants.scss @@ -210,7 +210,7 @@ $colorLoadingFg: $colorAlt1; $colorLoadingBg: rgba($colorBodyFg, 0.2); // Time Conductor -$colorTimeCondKeyBg: #1d7a96; +$colorTimeCondKeyBg: #4e70dc; $colorTimeCondKeyFg: #fff; -$colorTimeCondDataVisBg: pushBack($colorTick, 20%); -$colorTimeCondDataVisRtBg: pushBack($colorTimeCondKeyBg, 30%); \ No newline at end of file +$colorTimeCondDataVisBg: pullForward($colorBodyBg, 10%); +$colorTimeCondDataVisRtBg: pushBack($colorTimeCondKeyBg, 10%); \ No newline at end of file diff --git a/platform/commonUI/themes/snow/res/sass/_constants.scss b/platform/commonUI/themes/snow/res/sass/_constants.scss index 7d44d0bc19..70bd3ce299 100644 --- a/platform/commonUI/themes/snow/res/sass/_constants.scss +++ b/platform/commonUI/themes/snow/res/sass/_constants.scss @@ -210,7 +210,7 @@ $colorLoadingFg: $colorAlt1; $colorLoadingBg: rgba($colorLoadingFg, 0.1); // Time Conductor -$colorTimeCondKeyBg: #0092b3; +$colorTimeCondKeyBg: #6178dc; $colorTimeCondKeyFg: #fff; -$colorTimeCondDataVisBg: pushBack($colorTick, 20%); +$colorTimeCondDataVisBg: pullForward($colorBodyBg, 10%); $colorTimeCondDataVisRtBg: pushBack($colorTimeCondKeyBg, 30%); From 8c5538ec4d9226c0de08653ab7e856692cbbaacc Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Thu, 14 Jul 2016 14:58:18 -0700 Subject: [PATCH 07/12] [Frontend] Styling for Time Conductor v2 Fixes #933 "Sticky" clock anim for LAD mode --- .../res/sass/controls/_time-conductor.scss | 86 +++++++++++++++++-- 1 file changed, 80 insertions(+), 6 deletions(-) diff --git a/platform/commonUI/general/res/sass/controls/_time-conductor.scss b/platform/commonUI/general/res/sass/controls/_time-conductor.scss index 5732d3669f..a017262935 100644 --- a/platform/commonUI/general/res/sass/controls/_time-conductor.scss +++ b/platform/commonUI/general/res/sass/controls/_time-conductor.scss @@ -6,9 +6,83 @@ } @include keyframes(clock-hands) { + 0% { @include transform(translate(-50%, -50%) rotate(0deg)); } + 100% { @include transform(translate(-50%, -50%) rotate(360deg)); } +} + +@include keyframes(clock-hands-sticky) { 0% { @include transform(translate(-50%, -50%) rotate(0deg)); } + 7% { + @include transform(translate(-50%, -50%) rotate(0deg)); + } + 8% { + @include transform(translate(-50%, -50%) rotate(30deg)); + } + 15% { + @include transform(translate(-50%, -50%) rotate(30deg)); + } + 16% { + @include transform(translate(-50%, -50%) rotate(60deg)); + } + 24% { + @include transform(translate(-50%, -50%) rotate(60deg)); + } + 25% { + @include transform(translate(-50%, -50%) rotate(90deg)); + } + 32% { + @include transform(translate(-50%, -50%) rotate(90deg)); + } + 33% { + @include transform(translate(-50%, -50%) rotate(120deg)); + } + 40% { + @include transform(translate(-50%, -50%) rotate(120deg)); + } + 41% { + @include transform(translate(-50%, -50%) rotate(150deg)); + } + 49% { + @include transform(translate(-50%, -50%) rotate(150deg)); + } + 50% { + @include transform(translate(-50%, -50%) rotate(180deg)); + } + 57% { + @include transform(translate(-50%, -50%) rotate(180deg)); + } + 58% { + @include transform(translate(-50%, -50%) rotate(210deg)); + } + 65% { + @include transform(translate(-50%, -50%) rotate(210deg)); + } + 66% { + @include transform(translate(-50%, -50%) rotate(240deg)); + } + 74% { + @include transform(translate(-50%, -50%) rotate(240deg)); + } + 75% { + @include transform(translate(-50%, -50%) rotate(270deg)); + } + 82% { + @include transform(translate(-50%, -50%) rotate(270deg)); + } + 83% { + @include transform(translate(-50%, -50%) rotate(300deg)); + } + 90% { + @include transform(translate(-50%, -50%) rotate(300deg)); + } + 91% { + @include transform(translate(-50%, -50%) rotate(330deg)); + } + 99% { + @include transform(translate(-50%, -50%) rotate(330deg)); + } 100% { @include transform(translate(-50%, -50%) rotate(360deg)); } @@ -258,12 +332,12 @@ } } -/* .l-time-conductor-ticks .l-axis-holder { - svg { - line { color: $colorTimeCondKeyBg; }; - text { fill: $colorTimeCondKeyBg; } - } - }*/ + &.realtime-mode .time-conductor-icon div[class*="hand"] { @include animation-name(clock-hands); } + &.latest-mode .time-conductor-icon div[class*="hand"] { + @include animation-name(clock-hands-sticky); + &.hand-big { @include animation-duration(5s); } + &.hand-little { @include animation-duration(60s); } + } .l-data-visualization { background: $colorTimeCondDataVisRtBg !important From 379828315f2f71f3f277c0b710b730d3b0f3bc39 Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Thu, 14 Jul 2016 16:39:27 -0700 Subject: [PATCH 08/12] [Frontend] Styling for Time Conductor v2 Fixes #933 New _animations scss include, moved scss around. --- .../general/res/sass/_animations.scss | 91 +++++++++++++++++++ .../res/sass/controls/_time-conductor.scss | 83 ----------------- .../res/sass/helpers/_wait-spinner.scss | 9 -- 3 files changed, 91 insertions(+), 92 deletions(-) create mode 100644 platform/commonUI/general/res/sass/_animations.scss diff --git a/platform/commonUI/general/res/sass/_animations.scss b/platform/commonUI/general/res/sass/_animations.scss new file mode 100644 index 0000000000..fb1c0f1bfb --- /dev/null +++ b/platform/commonUI/general/res/sass/_animations.scss @@ -0,0 +1,91 @@ +@include keyframes(rotation) { + 100% { @include transform(rotate(360deg)); } +} + +@include keyframes(rotation-centered) { + 0% { @include transform(translate(-50%, -50%) rotate(0deg)); } + 100% { @include transform(translate(-50%, -50%) rotate(360deg)); } +} + +@include keyframes(clock-hands) { + 0% { @include transform(translate(-50%, -50%) rotate(0deg)); } + 100% { @include transform(translate(-50%, -50%) rotate(360deg)); } +} + +@include keyframes(clock-hands-sticky) { + 0% { + @include transform(translate(-50%, -50%) rotate(0deg)); + } + 7% { + @include transform(translate(-50%, -50%) rotate(0deg)); + } + 8% { + @include transform(translate(-50%, -50%) rotate(30deg)); + } + 15% { + @include transform(translate(-50%, -50%) rotate(30deg)); + } + 16% { + @include transform(translate(-50%, -50%) rotate(60deg)); + } + 24% { + @include transform(translate(-50%, -50%) rotate(60deg)); + } + 25% { + @include transform(translate(-50%, -50%) rotate(90deg)); + } + 32% { + @include transform(translate(-50%, -50%) rotate(90deg)); + } + 33% { + @include transform(translate(-50%, -50%) rotate(120deg)); + } + 40% { + @include transform(translate(-50%, -50%) rotate(120deg)); + } + 41% { + @include transform(translate(-50%, -50%) rotate(150deg)); + } + 49% { + @include transform(translate(-50%, -50%) rotate(150deg)); + } + 50% { + @include transform(translate(-50%, -50%) rotate(180deg)); + } + 57% { + @include transform(translate(-50%, -50%) rotate(180deg)); + } + 58% { + @include transform(translate(-50%, -50%) rotate(210deg)); + } + 65% { + @include transform(translate(-50%, -50%) rotate(210deg)); + } + 66% { + @include transform(translate(-50%, -50%) rotate(240deg)); + } + 74% { + @include transform(translate(-50%, -50%) rotate(240deg)); + } + 75% { + @include transform(translate(-50%, -50%) rotate(270deg)); + } + 82% { + @include transform(translate(-50%, -50%) rotate(270deg)); + } + 83% { + @include transform(translate(-50%, -50%) rotate(300deg)); + } + 90% { + @include transform(translate(-50%, -50%) rotate(300deg)); + } + 91% { + @include transform(translate(-50%, -50%) rotate(330deg)); + } + 99% { + @include transform(translate(-50%, -50%) rotate(330deg)); + } + 100% { + @include transform(translate(-50%, -50%) rotate(360deg)); + } +} \ No newline at end of file diff --git a/platform/commonUI/general/res/sass/controls/_time-conductor.scss b/platform/commonUI/general/res/sass/controls/_time-conductor.scss index a017262935..138a97043f 100644 --- a/platform/commonUI/general/res/sass/controls/_time-conductor.scss +++ b/platform/commonUI/general/res/sass/controls/_time-conductor.scss @@ -5,89 +5,6 @@ } } -@include keyframes(clock-hands) { - 0% { @include transform(translate(-50%, -50%) rotate(0deg)); } - 100% { @include transform(translate(-50%, -50%) rotate(360deg)); } -} - -@include keyframes(clock-hands-sticky) { - 0% { - @include transform(translate(-50%, -50%) rotate(0deg)); - } - 7% { - @include transform(translate(-50%, -50%) rotate(0deg)); - } - 8% { - @include transform(translate(-50%, -50%) rotate(30deg)); - } - 15% { - @include transform(translate(-50%, -50%) rotate(30deg)); - } - 16% { - @include transform(translate(-50%, -50%) rotate(60deg)); - } - 24% { - @include transform(translate(-50%, -50%) rotate(60deg)); - } - 25% { - @include transform(translate(-50%, -50%) rotate(90deg)); - } - 32% { - @include transform(translate(-50%, -50%) rotate(90deg)); - } - 33% { - @include transform(translate(-50%, -50%) rotate(120deg)); - } - 40% { - @include transform(translate(-50%, -50%) rotate(120deg)); - } - 41% { - @include transform(translate(-50%, -50%) rotate(150deg)); - } - 49% { - @include transform(translate(-50%, -50%) rotate(150deg)); - } - 50% { - @include transform(translate(-50%, -50%) rotate(180deg)); - } - 57% { - @include transform(translate(-50%, -50%) rotate(180deg)); - } - 58% { - @include transform(translate(-50%, -50%) rotate(210deg)); - } - 65% { - @include transform(translate(-50%, -50%) rotate(210deg)); - } - 66% { - @include transform(translate(-50%, -50%) rotate(240deg)); - } - 74% { - @include transform(translate(-50%, -50%) rotate(240deg)); - } - 75% { - @include transform(translate(-50%, -50%) rotate(270deg)); - } - 82% { - @include transform(translate(-50%, -50%) rotate(270deg)); - } - 83% { - @include transform(translate(-50%, -50%) rotate(300deg)); - } - 90% { - @include transform(translate(-50%, -50%) rotate(300deg)); - } - 91% { - @include transform(translate(-50%, -50%) rotate(330deg)); - } - 99% { - @include transform(translate(-50%, -50%) rotate(330deg)); - } - 100% { - @include transform(translate(-50%, -50%) rotate(360deg)); - } -} - .l-time-conductor-holder { $minW: 500px; border-top: 1px solid $colorInteriorBorder; diff --git a/platform/commonUI/general/res/sass/helpers/_wait-spinner.scss b/platform/commonUI/general/res/sass/helpers/_wait-spinner.scss index 46f94ebc53..d50b2615cc 100644 --- a/platform/commonUI/general/res/sass/helpers/_wait-spinner.scss +++ b/platform/commonUI/general/res/sass/helpers/_wait-spinner.scss @@ -19,15 +19,6 @@ * this source code distribution or the Licensing information page available * at runtime from the About dialog for additional information. *****************************************************************************/ -@include keyframes(rotation) { - 100% { @include transform(rotate(360deg)); } -} - -@include keyframes(rotation-centered) { - 0% { @include transform(translate(-50%, -50%) rotate(0deg)); } - 100% { @include transform(translate(-50%, -50%) rotate(360deg)); } -} - @mixin spinner($b: 5px, $c: $colorKey) { @include transform-origin(center); @include animation-name(rotation-centered); From 671e3016d4c2430653ac5aa398332c00637f4df0 Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Thu, 14 Jul 2016 16:40:05 -0700 Subject: [PATCH 09/12] [Frontend] Styling for Time Conductor v2 Fixes #933 New _animations scss include, moved scss around. --- platform/commonUI/general/res/sass/_main.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/platform/commonUI/general/res/sass/_main.scss b/platform/commonUI/general/res/sass/_main.scss index 99595535f2..e000578868 100644 --- a/platform/commonUI/general/res/sass/_main.scss +++ b/platform/commonUI/general/res/sass/_main.scss @@ -21,6 +21,7 @@ *****************************************************************************/ @import "effects"; @import "global"; +@import "animations"; @import "archetypes"; @import "about"; @import "text"; From b3a4f52fe20f6670364284b235d05d23b71329c4 Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Thu, 14 Jul 2016 18:30:49 -0700 Subject: [PATCH 10/12] [Frontend] Styling for Time Conductor v2 Fixes #933 WIP: Adding zoom control with HTML5 input range type; Refactored sass slightly to move display: inline-block out of mixin containerBase and into .s-btn. --- .../general/res/sass/_archetypes.scss | 3 ++ .../commonUI/general/res/sass/_mixins.scss | 7 ---- .../general/res/sass/controls/_buttons.scss | 1 + .../general/res/sass/controls/_controls.scss | 39 +++++++++++++++++++ .../res/sass/controls/_time-conductor.scss | 12 +++++- .../res/sass/user-environ/_layout.scss | 2 + .../res/templates/time-conductor.html | 5 +++ 7 files changed, 61 insertions(+), 8 deletions(-) diff --git a/platform/commonUI/general/res/sass/_archetypes.scss b/platform/commonUI/general/res/sass/_archetypes.scss index d34973bf66..0722331a1c 100644 --- a/platform/commonUI/general/res/sass/_archetypes.scss +++ b/platform/commonUI/general/res/sass/_archetypes.scss @@ -108,6 +108,9 @@ &.grows { @include flex(1 1 auto); } + &.contents-align-right { + text-align: right; + } } .flex-container { // Apply to wrapping elements, mct-includes, etc. diff --git a/platform/commonUI/general/res/sass/_mixins.scss b/platform/commonUI/general/res/sass/_mixins.scss index 1c04dc18d9..19d8ff5600 100644 --- a/platform/commonUI/general/res/sass/_mixins.scss +++ b/platform/commonUI/general/res/sass/_mixins.scss @@ -185,21 +185,15 @@ } @mixin sliderTrack($bg: $scrollbarTrackColorBg) { - //$b: 1px solid lighten($bg, 30%); border-radius: 2px; box-sizing: border-box; @include boxIncised(0.7); background-color: $bg; - //border-bottom: $b; - //border-right: $b; } @mixin controlGrippy($b, $direction: horizontal, $w: 1px, $style: dotted) { - //&:before { - //@include trans-prop-nice("border-color", 25ms); content: ''; display: block; - //height: auto; pointer-events: none; position: absolute; z-index: 2; @@ -305,7 +299,6 @@ border-radius: $controlCr; box-sizing: border-box; color: $fg; - display: inline-block; } @mixin btnBase($bg: $colorBodyBg, $bgHovColor: none, $fg: $colorBodyFg, $ic: $colorBtnIcon) { diff --git a/platform/commonUI/general/res/sass/controls/_buttons.scss b/platform/commonUI/general/res/sass/controls/_buttons.scss index 09c4598db7..da2e24d444 100644 --- a/platform/commonUI/general/res/sass/controls/_buttons.scss +++ b/platform/commonUI/general/res/sass/controls/_buttons.scss @@ -33,6 +33,7 @@ $pad: $interiorMargin * $baseRatio; .s-btn { box-sizing: border-box; + display: inline-block; padding: 0 $pad; font-size: 0.7rem; vertical-align: top; diff --git a/platform/commonUI/general/res/sass/controls/_controls.scss b/platform/commonUI/general/res/sass/controls/_controls.scss index 9cc835348b..379a05a2e0 100644 --- a/platform/commonUI/general/res/sass/controls/_controls.scss +++ b/platform/commonUI/general/res/sass/controls/_controls.scss @@ -420,6 +420,45 @@ input[type="search"] { } } +@mixin sliderKnob() { + $h: 16px; + cursor: pointer; + width: floor($h/1.75); + height: $h; + margin-top: 1 + floor($h/2) * -1; + @include btnSubtle(pullForward($colorBtnBg, 10%)); + //border-radius: 50% !important; +} + +input[type="range"] { + // HTML5 range inputs + + -webkit-appearance: none; /* Hides the slider so that custom slider can be made */ + background: transparent; /* Otherwise white in Chrome */ + &:focus { + outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */ + } + + // Thumb + &::-webkit-slider-thumb { + -webkit-appearance: none; + @include sliderKnob(); + } + &::-moz-range-thumb { + @include sliderKnob(); + } + &::-ms-thumb { + @include sliderKnob(); + } + + // Track + &::-webkit-slider-runnable-track { + width: 100%; + height: 3px; + @include sliderTrack(); + } +} + /******************************************************** DATETIME PICKER */ .l-datetime-picker { $r1H: 15px; diff --git a/platform/commonUI/general/res/sass/controls/_time-conductor.scss b/platform/commonUI/general/res/sass/controls/_time-conductor.scss index 138a97043f..47dc3b340b 100644 --- a/platform/commonUI/general/res/sass/controls/_time-conductor.scss +++ b/platform/commonUI/general/res/sass/controls/_time-conductor.scss @@ -20,6 +20,7 @@ height: $d !important; width: $d; position: relative; + // Icon shape: brackets &:before, &:after { @@ -76,7 +77,6 @@ z-index: 1; @include animation-duration(1s); &:before { - //background: green; height: $handH; } } @@ -181,6 +181,7 @@ font-size: 0.9em; } path { + // Line beneath ticks display: none; } line { @@ -188,6 +189,7 @@ stroke: $c; } text { + // Tick labels fill: $c; } } @@ -199,7 +201,15 @@ } .l-time-conductor-controls { + align-items: center; margin-top: $interiorMargin; + .time-conductor-zoom { + //@include test(); + min-width: 100px; + height: $r3H; + width: 25%; + } + } // Fixed &.fixed-mode { diff --git a/platform/commonUI/general/res/sass/user-environ/_layout.scss b/platform/commonUI/general/res/sass/user-environ/_layout.scss index 670945a3ab..1d824b2a1a 100644 --- a/platform/commonUI/general/res/sass/user-environ/_layout.scss +++ b/platform/commonUI/general/res/sass/user-environ/_layout.scss @@ -129,6 +129,8 @@ } .primary-pane { + // Clip element that have min-widths + overflow: hidden; // Need to lift up this pane to ensure that 'collapsed' panes don't block user interactions z-index: 4; } diff --git a/platform/features/conductor-v2/res/templates/time-conductor.html b/platform/features/conductor-v2/res/templates/time-conductor.html index 81ff59abfc..b05e057f9d 100644 --- a/platform/features/conductor-v2/res/templates/time-conductor.html +++ b/platform/features/conductor-v2/res/templates/time-conductor.html @@ -104,6 +104,11 @@ {name: 'SCLK', key:'sclk', glyph:'\u0043'} ]}"> + +
+ +
+
\ No newline at end of file From 43a804eef493a3ffd070ba5c1dba190d08fc7a42 Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Fri, 15 Jul 2016 07:54:32 -0700 Subject: [PATCH 11/12] [Frontend] Styling for Time Conductor v2 Fixes #933 WIP: Added zoom current range indicator; tweaks to style --- .../general/res/sass/controls/_controls.scss | 18 ++++++++++++++---- .../res/sass/controls/_time-conductor.scss | 18 ++++++++++++------ .../res/templates/time-conductor.html | 5 +++-- 3 files changed, 29 insertions(+), 12 deletions(-) diff --git a/platform/commonUI/general/res/sass/controls/_controls.scss b/platform/commonUI/general/res/sass/controls/_controls.scss index 379a05a2e0..b47ee8dc78 100644 --- a/platform/commonUI/general/res/sass/controls/_controls.scss +++ b/platform/commonUI/general/res/sass/controls/_controls.scss @@ -430,25 +430,35 @@ input[type="search"] { //border-radius: 50% !important; } +@mixin sliderKnobRound() { + $h: 12px; + cursor: pointer; + width: $h; + height: $h; + margin-top: 1 + floor($h/2) * -1; + @include btnSubtle(pullForward($colorBtnBg, 10%)); + border-radius: 50% !important; +} + input[type="range"] { // HTML5 range inputs -webkit-appearance: none; /* Hides the slider so that custom slider can be made */ background: transparent; /* Otherwise white in Chrome */ &:focus { - outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */ + outline: none; /* Removes the blue border. */ } // Thumb &::-webkit-slider-thumb { -webkit-appearance: none; - @include sliderKnob(); + @include sliderKnobRound(); } &::-moz-range-thumb { - @include sliderKnob(); + @include sliderKnobRound(); } &::-ms-thumb { - @include sliderKnob(); + @include sliderKnobRound(); } // Track diff --git a/platform/commonUI/general/res/sass/controls/_time-conductor.scss b/platform/commonUI/general/res/sass/controls/_time-conductor.scss index 47dc3b340b..f112feb993 100644 --- a/platform/commonUI/general/res/sass/controls/_time-conductor.scss +++ b/platform/commonUI/general/res/sass/controls/_time-conductor.scss @@ -119,7 +119,8 @@ } .l-time-conductor-inputs-holder, - .l-time-conductor-ticks { + .l-time-conductor-ticks, + .l-time-conductor-zoom-w { font-size: 0.8rem; } @@ -203,11 +204,16 @@ .l-time-conductor-controls { align-items: center; margin-top: $interiorMargin; - .time-conductor-zoom { - //@include test(); - min-width: 100px; - height: $r3H; - width: 25%; + .l-time-conductor-zoom-w { + @include justify-content(flex-end); + .time-conductor-zoom { + height: $r3H; + min-width: 100px; + width: 20%; + } + .time-conductor-zoom-current-range { + color: $colorTick; + } } } diff --git a/platform/features/conductor-v2/res/templates/time-conductor.html b/platform/features/conductor-v2/res/templates/time-conductor.html index b05e057f9d..4eaaa28f0b 100644 --- a/platform/features/conductor-v2/res/templates/time-conductor.html +++ b/platform/features/conductor-v2/res/templates/time-conductor.html @@ -105,8 +105,9 @@ ]}"> -
- +
+ Mars Minutes +
From 4087b9cdde96a9b115ed8b3889c62c5fa513dbef Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Fri, 15 Jul 2016 14:39:29 -0700 Subject: [PATCH 12/12] [Frontend] Styling for Time Conductor v2 Fixes #933 WIP: Fixed look for Firefox --- .../commonUI/general/res/sass/controls/_controls.scss | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/platform/commonUI/general/res/sass/controls/_controls.scss b/platform/commonUI/general/res/sass/controls/_controls.scss index b47ee8dc78..b9b6a5c13f 100644 --- a/platform/commonUI/general/res/sass/controls/_controls.scss +++ b/platform/commonUI/general/res/sass/controls/_controls.scss @@ -455,9 +455,11 @@ input[type="range"] { @include sliderKnobRound(); } &::-moz-range-thumb { + border: none; @include sliderKnobRound(); } &::-ms-thumb { + border: none; @include sliderKnobRound(); } @@ -467,6 +469,12 @@ input[type="range"] { height: 3px; @include sliderTrack(); } + + &::-moz-range-track { + width: 100%; + height: 3px; + @include sliderTrack(); + } } /******************************************************** DATETIME PICKER */