[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;
nasa · Aug 2, 2016 · c5c45f0 · c5c45f0
1 parent 753bd97
commit c5c45f0
Show file tree

Hide file tree

Showing 9 changed files with 32 additions and 37 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -24,21 +24,16 @@
         <ul>
             <li ng-repeat="(key, metadata) in ngModel.options"
                 ng-click="ngModel.selectedKey=key">
-                <a
-                   ng-mouseover="representation.activeMetadata = metadata"
-                   ng-mouseleave="representation.activeMetadata = undefined">
-                    <span class="ui-symbol icon type-icon">
-                        {{metadata.glyph}}
-                    </span>
+                <a ng-mouseover="representation.activeMetadata = metadata"
+                   ng-mouseleave="representation.activeMetadata = undefined"
+                   class="menu-item-a {{metadata.cssclass}}">
                     {{metadata.name}}
                 </a>
             </li>
         </ul>
     </div>
     <div class="pane right menu-item-description">
-        <div class="desc-area ui-symbol icon type-icon">
-            {{representation.activeMetadata.glyph}}
-        </div>
+        <div class="desc-area ui-symbol icon type-icon {{representation.activeMetadata.cssclass}}"></div>
         <div class="desc-area title">
             {{representation.activeMetadata.name}}
         </div>

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
@@ -20,7 +20,7 @@
  at runtime from the About dialog for additional information.
 -->
 <span ng-controller="ClickAwayController as modeController">
-    <div class="s-menu-btn"
+    <div class="s-menu-button"
          ng-click="modeController.toggle()">
 		<span class="title-label">{{ngModel.options[ngModel.selectedKey]
             .label}}</span>

diff --git 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
@@ -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
@@ -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;