From c5c45f0a0e9f46ccf3c2ae8bf15b62ab3961294c Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Mon, 1 Aug 2016 18:01:28 -0700 Subject: [PATCH] [Frontend] Update TC2 markup and sass Fixes #933 Update markup and sass in TC2 to be in line with updates from master from #1047 glyphs to cssclass approach; --- .../commonUI/general/res/sass/_icons.scss | 2 +- .../res/sass/_time-conductor-base.scss | 28 +++++++++---------- .../res/sass/time-conductor-espresso.scss | 1 + .../res/sass/time-conductor-snow.scss | 1 + .../templates/mode-selector/mode-menu.html | 13 +++------ .../mode-selector/mode-selector.html | 2 +- .../src/timeSystems/LocalClock.js | 2 +- .../src/timeSystems/UTCTimeSystem.js | 4 +-- .../src/ui/TimeConductorController.js | 16 +++++------ 9 files changed, 32 insertions(+), 37 deletions(-) diff --git a/platform/commonUI/general/res/sass/_icons.scss b/platform/commonUI/general/res/sass/_icons.scss index eda6240170f..d15ec1d362b 100644 --- a/platform/commonUI/general/res/sass/_icons.scss +++ b/platform/commonUI/general/res/sass/_icons.scss @@ -73,7 +73,7 @@ &.l-icon-link { &:after { color: $colorIconLink; - content: '\e921'; //$glyph-icon-link; + content: $glyph-icon-link; height: auto; width: auto; position: absolute; left: 0; top: 0; right: 0; bottom: 20%; diff --git a/platform/features/conductor-v2/res/sass/_time-conductor-base.scss b/platform/features/conductor-v2/res/sass/_time-conductor-base.scss index f991b48794d..5d26ed6f154 100644 --- a/platform/features/conductor-v2/res/sass/_time-conductor-base.scss +++ b/platform/features/conductor-v2/res/sass/_time-conductor-base.scss @@ -43,7 +43,7 @@ &:before { @extend .ui-symbol; color: $c; - content: '\e624'; + content: $glyph-icon-brackets; font-size: $d; line-height: normal; display: block; @@ -99,11 +99,6 @@ $r2H: nth($ueTimeConductorH, 2); $r3H: nth($ueTimeConductorH, 3); - // Glyphs Todo: replace with refactored CSS approach when that is merged into master - $glyphIconFixed: '\e604'; - $glyphIconRealtime: '\43'; - $glyphIconLatest: '\44'; - position: relative; > .l-row-elem { @@ -113,7 +108,7 @@ position: relative; } - .mode-selector .s-menu-btn, + .mode-selector .s-menu-button, .time-delta { &:before { @extend .ui-symbol; @@ -285,27 +280,30 @@ background: $colorTimeCondDataVisRtBg !important } - .mode-selector .s-menu-btn { - @include btnSubtle($colorTimeCondKeyBg, pullForward($colorTimeCondKeyBg, $ltGamma), $colorTimeCondKeyFg); + .mode-selector .s-menu-button { + $fg: $colorTimeCondKeyFg; + @include btnSubtle($bg: $colorTimeCondKeyBg, $bgHov: pullForward($colorTimeCondKeyBg, $ltGamma), $fg: $colorTimeCondKeyFg); + &:before { color: $fg !important; }; + color: $fg !important; } } // Fixed mode &.fixed-mode { - $i: $glyphIconFixed; + $i: $glyph-icon-calendar; .time-conductor-icon div[class*="hand"] { &.hand-little { @include transform(rotate(120deg)); } } - .mode-selector .s-menu-btn:before { + .mode-selector .s-menu-button:before { content: $i; } } // Realtime mode &.realtime-mode { - $i: $glyphIconRealtime; + $i: $glyph-icon-clock; .time-conductor-icon div[class*="hand"] { @include animation-name(clock-hands); } @@ -315,14 +313,14 @@ .l-time-conductor-inputs-holder .l-time-range-w.end-w .title:before { content: 'Now'; } - .mode-selector .s-menu-btn:before { + .mode-selector .s-menu-button:before { content: $i; } } // LAD mode &.latest-mode { - $i: $glyphIconLatest; + $i: $glyph-icon-database; .time-conductor-icon div[class*="hand"] { @include animation-name(clock-hands-sticky); &.hand-big { @@ -338,7 +336,7 @@ .l-time-conductor-inputs-holder .l-time-range-w.end-w .title:before { content: 'LAD'; } - .mode-selector .s-menu-btn:before { + .mode-selector .s-menu-button:before { content: $i; } } diff --git a/platform/features/conductor-v2/res/sass/time-conductor-espresso.scss b/platform/features/conductor-v2/res/sass/time-conductor-espresso.scss index d9562e762ea..2cc9eec548c 100644 --- a/platform/features/conductor-v2/res/sass/time-conductor-espresso.scss +++ b/platform/features/conductor-v2/res/sass/time-conductor-espresso.scss @@ -26,6 +26,7 @@ @import "../../../../commonUI/general/res/sass/mobile/mixins"; @import "../../../../commonUI/themes/espresso/res/sass/constants"; @import "../../../../commonUI/themes/espresso/res/sass/mixins"; +@import "../../../../commonUI/general/res/sass/glyphs"; @import "../../../../commonUI/general/res/sass/icons"; @import "constants"; diff --git a/platform/features/conductor-v2/res/sass/time-conductor-snow.scss b/platform/features/conductor-v2/res/sass/time-conductor-snow.scss index 2d55f2b0026..fc525011481 100644 --- a/platform/features/conductor-v2/res/sass/time-conductor-snow.scss +++ b/platform/features/conductor-v2/res/sass/time-conductor-snow.scss @@ -26,6 +26,7 @@ @import "../../../../commonUI/general/res/sass/mobile/mixins"; @import "../../../../commonUI/themes/snow/res/sass/constants"; @import "../../../../commonUI/themes/snow/res/sass/mixins"; +@import "../../../../commonUI/general/res/sass/glyphs"; @import "../../../../commonUI/general/res/sass/icons"; @import "constants"; diff --git a/platform/features/conductor-v2/res/templates/mode-selector/mode-menu.html b/platform/features/conductor-v2/res/templates/mode-selector/mode-menu.html index 2a4d5a83bf8..d2d4c6af900 100644 --- a/platform/features/conductor-v2/res/templates/mode-selector/mode-menu.html +++ b/platform/features/conductor-v2/res/templates/mode-selector/mode-menu.html @@ -24,21 +24,16 @@
-
- {{representation.activeMetadata.glyph}} -
+
{{representation.activeMetadata.name}}
diff --git a/platform/features/conductor-v2/res/templates/mode-selector/mode-selector.html b/platform/features/conductor-v2/res/templates/mode-selector/mode-selector.html index 3f526b729cb..a3e122ca34f 100644 --- a/platform/features/conductor-v2/res/templates/mode-selector/mode-selector.html +++ b/platform/features/conductor-v2/res/templates/mode-selector/mode-selector.html @@ -20,7 +20,7 @@ at runtime from the About dialog for additional information. --> -
{{ngModel.options[ngModel.selectedKey] .label}} diff --git a/platform/features/conductor-v2/src/timeSystems/LocalClock.js b/platform/features/conductor-v2/src/timeSystems/LocalClock.js index db1bef2b838..80e36b4265a 100644 --- a/platform/features/conductor-v2/src/timeSystems/LocalClock.js +++ b/platform/features/conductor-v2/src/timeSystems/LocalClock.js @@ -30,7 +30,7 @@ define(['./TickSource'], function (TickSource) { this.metadata = { key: 'real-time', - glyph: '\u0043', + cssclass: 'icon-clock', label: 'Real-time', name: 'Real-time Mode', description: 'Monitor real-time streaming data as it comes in. The Time Conductor and displays will automatically advance themselves based on a UTC clock.' diff --git a/platform/features/conductor-v2/src/timeSystems/UTCTimeSystem.js b/platform/features/conductor-v2/src/timeSystems/UTCTimeSystem.js index 0d64873c21f..b0b2731c9cf 100644 --- a/platform/features/conductor-v2/src/timeSystems/UTCTimeSystem.js +++ b/platform/features/conductor-v2/src/timeSystems/UTCTimeSystem.js @@ -38,12 +38,12 @@ define([ /** * Some metadata, which will be used to identify the time system in * the UI - * @type {{key: string, name: string, glyph: string}} + * @type {{key: string, name: string, cssclass: string}} */ this.metadata = { 'key': 'utc', 'name': 'UTC', - 'glyph': '\u0043' + 'cssclass': 'icon-clock' }; this._formats = ['utc']; diff --git a/platform/features/conductor-v2/src/ui/TimeConductorController.js b/platform/features/conductor-v2/src/ui/TimeConductorController.js index 955f0118a95..6b7818b5142 100644 --- a/platform/features/conductor-v2/src/ui/TimeConductorController.js +++ b/platform/features/conductor-v2/src/ui/TimeConductorController.js @@ -47,22 +47,22 @@ define( this.modes = { 'fixed': { - glyph: '\ue604', + cssclass: 'icon-calendar', label: 'Fixed', name: 'Fixed Timespan Mode', description: 'Query and explore data that falls between two fixed datetimes.' }, - 'latest': { - glyph: '\u0044', - label: 'LAD', - name: 'LAD Mode', - description: 'Latest Available Data mode monitors real-time streaming data as it comes in. The Time Conductor and displays will only advance when data becomes available.' - }, 'realtime': { - glyph: '\u0043', + cssclass: 'icon-clock', label: 'Real-time', name: 'Real-time Mode', description: 'Monitor real-time streaming data as it comes in. The Time Conductor and displays will automatically advance themselves based on a UTC clock.' + }, + 'latest': { + cssclass: 'icon-database', + label: 'LAD', + name: 'LAD Mode', + description: 'Latest Available Data mode monitors real-time streaming data as it comes in. The Time Conductor and displays will only advance when data becomes available.' } }; this.selectedMode = undefined;