From cb1a1c2616b93b15fd64e5dd0504a2f8fadbfc1f Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Mon, 24 Dec 2018 14:02:37 -0800 Subject: [PATCH] R&I Clock timer fixes (#2254) * Clocks and timers styling WIP - Markup, new styles; - Renamed _legacy-plots.scss > _legacy; - New $colorBodyFgEm constants - theme files all updated; * Clocks and timers styling complete * Styles clean up - Moved legacy styles out of _global into _legacy.scss; --- .../features/clock/res/templates/clock.html | 20 ++-- .../features/clock/res/templates/timer.html | 30 +++-- src/styles-new/_constants-espresso.scss | 1 + src/styles-new/_constants-maelstrom.scss | 1 + src/styles-new/_constants-snow.scss | 1 + src/styles-new/_global.scss | 39 ------- .../{_legacy-plots.scss => _legacy.scss} | 110 ++++++++++++++++++ src/styles-new/core.scss | 2 +- src/styles-new/legacy-styles.scss | 2 +- 9 files changed, 138 insertions(+), 68 deletions(-) rename src/styles-new/{_legacy-plots.scss => _legacy.scss} (86%) diff --git a/platform/features/clock/res/templates/clock.html b/platform/features/clock/res/templates/clock.html index e97c678eaf..0c0309ca3b 100644 --- a/platform/features/clock/res/templates/clock.html +++ b/platform/features/clock/res/templates/clock.html @@ -19,16 +19,14 @@ this source code distribution or the Licensing information page available at runtime from the About dialog for additional information. --> -
-
- - {{clock.zone()}} - - - {{clock.text()}} - - - {{clock.ampm()}} - +
+
+ {{clock.zone()}} +
+
+ {{clock.text()}} +
+
+ {{clock.ampm()}}
diff --git a/platform/features/clock/res/templates/timer.html b/platform/features/clock/res/templates/timer.html index d48a9691b3..30f3baa25d 100644 --- a/platform/features/clock/res/templates/timer.html +++ b/platform/features/clock/res/templates/timer.html @@ -19,21 +19,19 @@ this source code distribution or the Licensing information page available at runtime from the About dialog for additional information. --> -
-
-
- - -
- - {{timer.text() || "--:--:--"}} - - - +
+
+ + +
+
+
{{timer.text() || "--:--:--"}}
+
diff --git a/src/styles-new/_constants-espresso.scss b/src/styles-new/_constants-espresso.scss index 7e3742d6b2..774449a93c 100644 --- a/src/styles-new/_constants-espresso.scss +++ b/src/styles-new/_constants-espresso.scss @@ -56,6 +56,7 @@ $basicCr: 4px; // Base colors $colorBodyBg: #393939; $colorBodyFg: #aaa; +$colorBodyFgEm: #fff; $colorGenBg: #222; $colorHeadBg: #262626; $colorHeadFg: $colorBodyFg; diff --git a/src/styles-new/_constants-maelstrom.scss b/src/styles-new/_constants-maelstrom.scss index 36a9a692a7..36fe5f577b 100644 --- a/src/styles-new/_constants-maelstrom.scss +++ b/src/styles-new/_constants-maelstrom.scss @@ -60,6 +60,7 @@ $basicCr: 4px; // Base colors $colorBodyBg: #393939; $colorBodyFg: #ccc; +$colorBodyFgEm: #fff; $colorGenBg: #222; $colorHeadBg: #262626; $colorHeadFg: $colorBodyFg; diff --git a/src/styles-new/_constants-snow.scss b/src/styles-new/_constants-snow.scss index 12536ed177..1de319fc18 100644 --- a/src/styles-new/_constants-snow.scss +++ b/src/styles-new/_constants-snow.scss @@ -56,6 +56,7 @@ $basicCr: 4px; // Base colors $colorBodyBg: #fcfcfc; $colorBodyFg: #666; +$colorBodyFgEm: #333; $colorGenBg: #fff; $colorHeadBg: #eee; $colorHeadFg: $colorBodyFg; diff --git a/src/styles-new/_global.scss b/src/styles-new/_global.scss index 486efd2705..544d07cf0a 100644 --- a/src/styles-new/_global.scss +++ b/src/styles-new/_global.scss @@ -508,42 +508,3 @@ a.disabled { } } } - -/************************** TEMP LEGACY FIXES */ -.overlay { - .outer-holder { - background: $colorMenuBg; - color: $colorMenuFg !important; - } -} - -.form .form-row { - .label { - color: $colorMenuFg !important; - } - .selector-list { - @include reactive-input(); - background: $colorInputBg !important; - color: $colorInputFg !important; - } -} - -.ui-symbol.view-control { - display: block; - transform-origin: center center; - - &:before { content: $glyph-icon-arrow-right-equilateral; } - - &.expanded { - transform: rotate(90deg); - } -} - -.t-imagery { - display: contents; -} - -.t-frame-outer { - min-width: 200px; - min-height: 200px; -} diff --git a/src/styles-new/_legacy-plots.scss b/src/styles-new/_legacy.scss similarity index 86% rename from src/styles-new/_legacy-plots.scss rename to src/styles-new/_legacy.scss index f4b90b92af..31916224c6 100644 --- a/src/styles-new/_legacy-plots.scss +++ b/src/styles-new/_legacy.scss @@ -20,6 +20,7 @@ * at runtime from the About dialog for additional information. *****************************************************************************/ +/********************************************************************* PLOTS */ mct-plot { display: contents; } @@ -502,3 +503,112 @@ mct-plot { } } } +/********************************************************* CLOCKS AND TIMERS */ +.c-clock, +.c-timer { + display: flex; + align-items: center; + font-size: 1.25em; + + > * { + flex: 0 0 auto; + display: flex; + align-items: center; + } + + &__value { + color: $colorBodyFgEm; + } +} + +.c-clock { + > * + * { margin-left: $interiorMargin; } +} + +.c-timer { + $ctrlW: 22px; + + &__controls { + margin-right: 0; + min-width: 0; + overflow: hidden; + transition: $transOut; + width: 0; + + .c-click-icon:before { font-size: 1em; } + } + + &__direction { + font-size: 0.9em; + margin-right: $interiorMargin; + } + + &__ng-controller { + font-size: 0; + width: 0; + } + + &:hover { + .c-timer__controls { + transition: $transOut; // On purpose: want this to take a bit longer + margin-right: $interiorMargin; + width: $ctrlW * 2; + } + + &.is-stopped .c-timer__controls { width: $ctrlW; } + } + + &__direction, + &__value { + opacity: 0.5; + } + + &.is-started { + .c-timer { + &__direction, + &__value { + opacity: 1; + } + } + } +} + +/******************************************************************* VARIOUS */ +.overlay { + .outer-holder { + background: $colorMenuBg; + color: $colorMenuFg !important; + } +} + +.form .form-row { + .label { + color: $colorMenuFg !important; + } + .selector-list { + @include reactive-input(); + background: $colorInputBg !important; + color: $colorInputFg !important; + } +} + +.ui-symbol.view-control { + display: block; + transform-origin: center center; + + &:before { content: $glyph-icon-arrow-right-equilateral; } + + &.expanded { + transform: rotate(90deg); + } +} + +.t-imagery { + display: contents; +} + +.t-frame-outer { + min-width: 200px; + min-height: 200px; +} + diff --git a/src/styles-new/core.scss b/src/styles-new/core.scss index ab5fb8820a..fd77b40a0a 100644 --- a/src/styles-new/core.scss +++ b/src/styles-new/core.scss @@ -29,7 +29,7 @@ @import "status"; @import "controls"; @import "table"; -@import "legacy-plots"; +@import "legacy"; /******************** LEGACY CSS */ $output-bourbon-deprecation-warnings: false; diff --git a/src/styles-new/legacy-styles.scss b/src/styles-new/legacy-styles.scss index 717ccbd454..f59bb1e598 100644 --- a/src/styles-new/legacy-styles.scss +++ b/src/styles-new/legacy-styles.scss @@ -69,7 +69,7 @@ //!********************************* TO BE MOVED *! @import "../styles/autoflow"; @import "../styles/features/imagery"; -@import "../styles/features/time-display"; +//@import "../styles/features/time-display"; @import "../styles/widgets"; // //!********************************* APP STARTUP *!