[Frontend] Refactoring glyphs to classes

fixes #1047
In progress, really: view icons, timer/clock

Author: charlesh88

platform/commonUI/general/res/templates/controls/switcher.html

@@ -20,26 +20,22 @@
  at runtime from the About dialog for additional information.
 -->
 <span ng-controller="ViewSwitcherController">
-    <div
-	    class="view-switcher menu-element s-menu-btn"
+    <div class="view-switcher menu-element s-menu-btn {{ngModel.selected.cssclass}}"
 	    ng-if="view.length > 1"
-	    ng-controller="ClickAwayController as toggle"
-	    >
+	    ng-controller="ClickAwayController as toggle">
 
-        <span
-	        class="l-click-area"
+        <span class="l-click-area"
 	        ng-click="toggle.toggle()"
-	        title="{{ngModel.selected.name}}"
-	        ></span>
-
-        <span class="ui-symbol icon type-icon">{{ngModel.selected.glyph}}</span>
+	        title="{{ngModel.selected.name}}"></span>
+        <!--span class="ui-symbol icon type-icon">{{ngModel.selected.glyph}}</span-->
         <span class="title-label">{{ngModel.selected.name}}</span>
 
         <div class="menu" ng-show="toggle.isActive()">
             <ul>
                 <li ng-repeat="option in view"
-                    ng-click="ngModel.selected = option; toggle.setState(false)">
-                    <span class="ui-symbol type-icon icon">{{option.glyph}}</span>
+                    ng-click="ngModel.selected = option; toggle.setState(false)"
+                    class="{{option.cssclass}}">
+                    <!--span class="type-icon icon">{{option.glyph}}</span-->
                     {{option.name}}
                 </li>
             </ul>

platform/features/clock/bundle.js

@@ -137,6 +137,7 @@ define([
                     "category": "contextual",
                     "name": "Start",
                     "glyph": "ï",
+                    "cssclass": "icon-play",
                     "priority": "preferred"
                 },
                 {
@@ -148,6 +149,7 @@ define([
                     "category": "contextual",
                     "name": "Restart at 0",
                     "glyph": "r",
+                    "cssclass": "icon-refresh",
                     "priority": "preferred"
                 }
             ],

platform/features/clock/res/templates/timer.html

@@ -21,20 +21,13 @@
 -->
 <div class="l-time-display l-digital l-timer s-timer" ng-controller="TimerController as timer">
 	<div class="l-elem-wrapper l-flex-row">
-		<a
-			ng-click="timer.clickButton()"
+		<a ng-click="timer.clickButton()"
 			title="{{timer.buttonText()}}"
-			class="flex-elem s-icon-btn control"
-			>
-			{{timer.buttonGlyph()}}
-		</a>
-	    <span class="flex-elem l-value">
-		    <span class="ui-symbol direction">{{timer.sign()}}</span>
-	        <span
-		        class="value"
-		        ng-class="{ active:timer.text() }"
-		        >{{timer.text() || "--:--:--"}}
-		        </span>
+			class="flex-elem control {{timer.buttonCssClass()}}"></a>
+	    <span class="flex-elem l-value {{timer.signClass()}}">
+	        <span class="value"
+		        ng-class="{ active:timer.text() }">{{timer.text() || "--:--:--"}}
+            </span>
 	    </span>
 	    <span ng-controller="RefreshingController"></span>
 	</div>

platform/features/clock/src/controllers/TimerController.js

@@ -50,10 +50,13 @@ define(
                 if (formatter && !isNaN(timeDelta)) {
                     self.textValue = formatter(timeDelta);
                     self.signValue = timeDelta < 0 ? "-" :
-                            timeDelta >= 1000 ? "+" : "";
+                        timeDelta >= 1000 ? "+" : "";
+                    self.signCssClass = timeDelta < 0 ? "icon-minus" :
+                        timeDelta >= 1000 ? "icon-plus" : "";
                 } else {
                     self.textValue = "";
                     self.signValue = "";
+                    self.signCssClass = "";
                 }
             }
 
@@ -126,12 +129,13 @@ define(
         }
 
         /**
-         * Get the glyph to display for the start/restart button.
-         * @returns {string} glyph to display
+         * Get the CSS class to display the right icon
+         * for the start/restart button.
+         * @returns {string} cssclass to display
          */
-        TimerController.prototype.buttonGlyph = function () {
+        TimerController.prototype.buttonCssClass = function () {
             return this.relevantAction ?
-                    this.relevantAction.getMetadata().glyph : "";
+                    this.relevantAction.getMetadata().cssclass : "";
         };
 
         /**
@@ -164,6 +168,15 @@ define(
             return this.signValue;
         };
 
+        /**
+         * Get the sign (+ or -) of the current timer value, as
+         * a CSS class.
+         * @returns {string} sign of the current timer value
+         */
+        TimerController.prototype.signClass = function () {
+            return this.signCssClass;
+        };
+
         /**
          * Get the text to display for the current timer value.
          * @returns {string} current timer value

platform/features/layout/bundle.js

@@ -67,6 +67,7 @@ define([
                     "key": "fixed",
                     "name": "Fixed Position",
                     "glyph": "3",
+                    "cssclass": "icon-telemetry-panel",
                     "type": "telemetry.panel",
                     "template": fixedTemplate,
                     "uses": [

platform/features/plot/bundle.js

@@ -46,6 +46,7 @@ define([
                     "name": "Plot",
                     "key": "plot",
                     "glyph": "6",
+                    "cssclass": "icon-sine",
                     "template": plotTemplate,
                     "needs": [
                         "telemetry"

platform/features/table/bundle.js

@@ -130,6 +130,7 @@ define([
                     "name": "Historical Table",
                     "key": "table",
                     "glyph": "\ue604",
+                    "cssclass": "icon-tabular",
                     "templateUrl": "templates/historical-table.html",
                     "needs": [
                         "telemetry"
@@ -141,6 +142,7 @@ define([
                     "name": "Real-time Table",
                     "key": "rt-table",
                     "glyph": "\ue620",
+                    "cssclass": "icon-tabular-realtime",
                     "templateUrl": "templates/rt-table.html",
                     "needs": [
                         "telemetry"