[Frontend] Refactor glyphs to classes

Squashes #1103, fixes #1047.

Squashed commit of the following:

commit 0e060f1
Author: Charles Hacskaylo <[email protected]>
Date:   Fri Jul 29 14:55:34 2016 -0700

    [Frontend] Added button to .s-button

    Fixes #1047

commit 9f74395
Author: Charles Hacskaylo <[email protected]>
Date:   Fri Jul 29 14:43:36 2016 -0700

    [Frontend] Fixing problems from circleci

    Fixes #1047

commit 7278c95
Author: Charles Hacskaylo <[email protected]>
Date:   Fri Jul 29 14:37:21 2016 -0700

    [Frontend] CSS fixes for s-status classes

    Fixes #1047
    Fixed .s-status-editing and s-status-pending;

commit 4606d61
Merge: d5bff55 59436f7
Author: Charles Hacskaylo <[email protected]>
Date:   Fri Jul 29 13:58:51 2016 -0700

    Merge remote-tracking branch 'origin/master' into frontend-1047

commit d5bff55
Author: Charles Hacskaylo <[email protected]>
Date:   Thu Jul 28 19:09:33 2016 -0700

    [Frontend] Updated glyphs used by plot view switcher

    Fixes #1047

commit b72d82b
Author: Charles Hacskaylo <[email protected]>
Date:   Thu Jul 28 19:09:00 2016 -0700

    [Frontend] Tree styles in left pane and selector-list

    Fixes #1047

commit af36b99
Author: Charles Hacskaylo <[email protected]>
Date:   Thu Jul 28 18:32:34 2016 -0700

    [Frontend] Form validation styling

    Fixes #1047
    <mct-form> must now include class
    'validates'  to display validation glyph icons;
    removed 'no-validate' from markup; cleaned
    up validation scss;

commit 69dc893
Author: Charles Hacskaylo <[email protected]>
Date:   Thu Jul 28 17:11:52 2016 -0700

    [Frontend] Glyphs to classes, mobile

    Fixes #1047
    Fixes and enhancements for mobile,
    particularly in tree;  Removed
    `display: inline-block` from containerSubtle
    mixin;

commit 7bca18b
Author: Charles Hacskaylo <[email protected]>
Date:   Thu Jul 28 11:36:19 2016 -0700

    [Frontend] Rename .s-menu-btn, remove unused

    Fixes #1047
    .s-menu-btn > .s-menu-button;
    .create-btn > .create-button;
    removed unused l-btn, t-btn,
    t-btns-zoom from markup

commit 5d22919
Author: Charles Hacskaylo <[email protected]>
Date:   Thu Jul 28 11:25:36 2016 -0700

    [Frontend] Rename .s-clickable-icon to .s-icon-button

    Fixes #1047

commit 36479e2
Author: Charles Hacskaylo <[email protected]>
Date:   Thu Jul 28 11:20:30 2016 -0700

    [Frontend] Rename .s-btn to .s-button

    Fixes #1047

commit 89e4f06
Author: Charles Hacskaylo <[email protected]>
Date:   Thu Jul 28 11:12:07 2016 -0700

    [Frontend] Apply clickable-icon class

    Fixes #1047

commit e65ca1c
Author: Charles Hacskaylo <[email protected]>
Date:   Thu Jul 28 10:52:35 2016 -0700

    [Frontend] Updated icons

    Fixes #1047
    - Clock, timer, plots updated

commit 3e7eb98
Author: Charles Hacskaylo <[email protected]>
Date:   Wed Jul 27 18:05:06 2016 -0700

    [Frontend] Standardizing styles

    Fixes #1047
    - Finessing mini-tab and making able to
    control per theme; s-clickable and s-toggle-icon
    classes cleaned up

commit 18e0807
Author: Charles Hacskaylo <[email protected]>
Date:   Wed Jul 27 16:33:25 2016 -0700

    [Frontend] Tweaks to sass code

    Fixes #1047
    - Splitter and mini-tab-icon elements

commit 44fda8d
Author: Charles Hacskaylo <[email protected]>
Date:   Wed Jul 27 09:24:53 2016 -0700

    [Frontend] Multiple UI fixes and tweaks

    Fixes #1047
    mini-tabs, splitters and bg-splash updated;
    moved position of Inspector collapse mini-tab
    to allow position transition;
    splitter-sm class added for Timelines;

commit 2aee8bc
Author: Charles Hacskaylo <[email protected]>
Date:   Tue Jul 26 15:53:32 2016 -0700

    [Frontend] Updated splash image

    Fixes #1047

commit 624f097
Merge: ce7591f 4d2f159
Author: Charles Hacskaylo <[email protected]>
Date:   Tue Jul 26 15:02:55 2016 -0700

    Merge remote-tracking branch 'origin/master' into frontend-1047

commit ce7591f
Author: Charles Hacskaylo <[email protected]>
Date:   Tue Jul 26 11:22:23 2016 -0700

    [Frontend] Fixed clock indicator

    Fixes #1047
    Restored no-collapse and float-right
    properties;

commit 5324c8e
Author: Charles Hacskaylo <[email protected]>
Date:   Mon Jul 25 18:14:38 2016 -0700

    [Frontend] New font and project file

    Fixes #1047
    New font files that were missed in
    last commit; updated icomoon proj
    file; fixed missing char codes in
    glyphs.scss;

commit a3b2628
Author: Charles Hacskaylo <[email protected]>
Date:   Mon Jul 25 17:54:00 2016 -0700

    [Frontend] Revised and new icon art

    Fixes #1047
    New icons for overlay and stacked plots;
    revised art and new description for
    Fixed Position object;

commit 8a41c6d
Author: Charles Hacskaylo <[email protected]>
Date:   Mon Jul 25 17:52:41 2016 -0700

    [Frontend] Removing glyph definitions

    Fixes #1047
    Updated comment

commit eb293b2
Author: Charles Hacskaylo <[email protected]>
Date:   Mon Jul 25 11:56:18 2016 -0700

    [Frontend] Removing glyph definitions

    Fixes #1047
    Removed commented code

commit d8b1fb7
Author: Charles Hacskaylo <[email protected]>
Date:   Mon Jul 25 11:17:45 2016 -0700

    [Frontend] Removing glyph definitions; updating tests

    Fixes #1047
    Search and removal of "glyph" definitions in bundle
    and other JS files; updating tests accordingly;

commit 650fbcc
Author: Charles Hacskaylo <[email protected]>
Date:   Mon Jul 25 10:20:33 2016 -0700

    [Frontend] Removing glyph definitions; updating tests

    Fixes #1047
    Search and removal of "glyph" definitions in bundle
    and other JS files; updating tests accordingly;

commit 574b8bd
Author: Charles Hacskaylo <[email protected]>
Date:   Fri Jul 22 19:11:56 2016 -0700

    [Frontend] Updated tests for glyph refactoring

    Fixes #1047
    Fixing test cases

commit dd84177
Author: Charles Hacskaylo <[email protected]>
Date:   Fri Jul 22 18:47:45 2016 -0700

    [Frontend] Updated tests and examples for glyph refactoring

    Fixes #1047
    WIP: Fixing test cases: fixed test in Timers that was expecting
    glyph return;

commit 2231f8e
Author: Charles Hacskaylo <[email protected]>
Date:   Thu Jul 21 17:45:20 2016 -0700

    [Frontend] Updated tests for glyph refactoring

    Fixes #1047
    Fixing test cases: fixed test in Timers that was expecting
    glyph return;

commit ae59ecf
Author: Charles Hacskaylo <[email protected]>
Date:   Thu Jul 21 17:38:45 2016 -0700

    [Frontend] Fixed style

    Fixes #1047
    WIP: fixed line-height issue for t-item-icon class

commit d43bff1
Author: Charles Hacskaylo <[email protected]>
Date:   Thu Jul 21 17:07:49 2016 -0700

    [Frontend] Fixed colors

    Fixes #1047
    WIP: fixed colors  and style defs related to clickable
    icons

commit c2db6f8
Author: Charles Hacskaylo <[email protected]>
Date:   Thu Jul 21 16:32:17 2016 -0700

    [Frontend] Fixed colors

    Fixes #1047
    WIP: fixed colors related to changes to
    btnSubtle mixin; new constants for clickable
    icons

commit a4753c4
Author: Charles Hacskaylo <[email protected]>
Date:   Thu Jul 21 15:23:58 2016 -0700

    [Frontend] Added new icon-brackets to symbols font

    Fixes #1047
    WIP

commit 2704640
Author: Charles Hacskaylo <[email protected]>
Date:   Thu Jul 21 15:11:28 2016 -0700

    [Frontend] Normalize color constants

    Fixes #1047
    Normalize color constant values for themes; consolidated
    and cleaned up btn-related mixins; fixed hover color issues

commit 421286c
Author: Charles Hacskaylo <[email protected]>
Date:   Thu Jul 21 14:10:13 2016 -0700

    [Frontend] Convert new Fixed Position Display from glyphs

    Fixes #1047
    WIP

commit a4111f3
Author: Charles Hacskaylo <[email protected]>
Date:   Thu Jul 21 14:07:38 2016 -0700

    [Frontend] Refactoring Timeline glyphs, s-btn fixes

    Fixes #1047
    WIP: Timeline-related glyph refactoring; s-btn
    styles and hover color fixes

commit 883f999
Merge: 9d9cabb 14f1a1f
Author: Charles Hacskaylo <[email protected]>
Date:   Thu Jul 21 08:53:23 2016 -0700

    Merge remote-tracking branch 'origin/master' into frontend-1047

commit 9d9cabb
Author: Charles Hacskaylo <[email protected]>
Date:   Tue Jul 19 16:20:20 2016 -0700

    [Frontend] Glyph refactoring

    Fixes #1047
    WIP: search, toolbar buttons; mods
    to flex archetypes

commit 28b663c
Author: Charles Hacskaylo <[email protected]>
Date:   Mon Jul 18 14:58:40 2016 -0700

    [Frontend] Glyph-related style changes to toolbars and buttons

    Fixes #1047
    Glyph refactoring  WIP for toolbar buttons;
    Timeline glyph refactoring continued

commit a9326f5
Author: Charles Hacskaylo <[email protected]>
Date:   Mon Jul 18 13:36:45 2016 -0700

    [Frontend] Glyph-related style changes to Timelines

    Fixes #1047
    Timeline glyph refactoring; Resource Graph icons
    in swimlanes now display grayed-out version when not
    added to the Resource Graph; minor color tweaks

commit d6e1737
Merge: 88054e5 6176ca2
Author: Charles Hacskaylo <[email protected]>
Date:   Mon Jul 18 10:29:32 2016 -0700

    [Frontend] Merge master into frontend-1047

    Fixes #1047
    Resolved conflict in icomoon.json file

commit 88054e5
Author: Charles Hacskaylo <[email protected]>
Date:   Thu Jun 30 16:55:40 2016 -0700

    [Frontend] Refactoring glyphs to classes

    fixes #1047
    In progress: significant mods to pane collapse/expand
    buttons and symbols, minor tweaks to splitter look,
    limits glyph definitions

commit 7c47343
Author: Charles Hacskaylo <[email protected]>
Date:   Thu Jun 30 16:52:21 2016 -0700

    [Frontend] Refactoring glyphs to classes

    fixes #1047
    In progress: updated font files glyphs, mostly
    for pane collapse icons

commit fd00bdc
Author: Charles Hacskaylo <[email protected]>
Date:   Thu Jun 30 12:20:55 2016 -0700

    [Frontend] Refactoring glyphs to classes

    fixes #1047
    In progress: search menu

commit 272b4b6
Author: Charles Hacskaylo <[email protected]>
Date:   Thu Jun 30 12:11:25 2016 -0700

    [Frontend] Refactoring glyphs to classes

    fixes #1047
    In progress: moved limits classes out
    of _contants and into _glyphs;
    timers, entanglement context menu items,
    form validation, date picker.

commit 95d26e6
Author: Charles Hacskaylo <[email protected]>
Date:   Wed Jun 29 14:18:12 2016 -0700

    [Frontend] Refactoring glyphs to classes

    Fixes #1047
    In-progress; limits

commit 26b30d9
Author: Charles Hacskaylo <[email protected]>
Date:   Tue Jun 28 17:16:18 2016 -0700

    [Frontend] Refactoring glyphs to classes

    Fixes #1047
    In-progress; overlay close, search inputs,
    messages and message banners,
    ui-symbol removal in-progress.

commit 4e2a01a
Author: Charles Hacskaylo <[email protected]>
Date:   Tue Jun 28 16:21:05 2016 -0700

    [Frontend] Refactoring glyphs to classes

    Fixes #1047
    In-progress; .labeled added  to .s-btn,
    removed .s-icon-btn

commit 521db3c
Author: Charles Hacskaylo <[email protected]>
Date:   Tue Jun 28 16:10:54 2016 -0700

    [Frontend] Refactoring glyphs to classes

    Fixes #1047
    In-progress; plot options, imagery buttons,
    cleanups in buttons.scss, edit-action buttons,
    .s-btn .no-label class added.

commit 8bb8db6
Author: Charles Hacskaylo <[email protected]>
Date:   Tue Jun 28 14:47:52 2016 -0700

    [Frontend] Refactoring glyphs to classes

    Fixes #1047
    In-progress; indicators, notifications, actions,
    tests

commit 53ed0bf
Author: Charles Hacskaylo <[email protected]>
Date:   Mon Jun 27 17:01:45 2016 -0700

    [Frontend] Refactoring glyphs to classes

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

commit 47dc7f2
Author: Charles Hacskaylo <[email protected]>
Date:   Mon Jun 27 16:13:31 2016 -0700

    [Frontend] Refactoring glyphs to classes

    fixes #1047
    In progress: grid items

commit 2bd34f7
Author: Charles Hacskaylo <[email protected]>
Date:   Mon Jun 27 15:00:46 2016 -0700

    [Frontend] Refactoring glyphs to classes

    fixes #1047
    Context menus and associated actions,
    custom checkboxes, tree item being edited

commit b561d4f
Author: Charles Hacskaylo <[email protected]>
Date:   Mon Jun 27 14:27:56 2016 -0700

    [Frontend] Refactoring glyphs to classes

    fixes #1047
    In-progess: glyphs.scss now uses $vars to
    allow other scss to use a var instead of string
    literals;

commit 0cf4089
Author: Charles Hacskaylo <[email protected]>
Date:   Mon Jun 27 14:13:59 2016 -0700

    [Frontend] Refactoring glyphs to classes

    fixes #1047
    In-progess: tree-labels, unknown objects, object
    header

commit 46cae10
Author: Charles Hacskaylo <[email protected]>
Date:   Mon Jun 27 11:41:06 2016 -0700

    [Frontend] Refactoring glyphs to classes

    fixes #1047
    In-progess, menus and Create menu fixes

commit fe30977
Merge: 7d69ae4 652a50c
Author: Charles Hacskaylo <[email protected]>
Date:   Mon Jun 27 11:20:55 2016 -0700

    Merge remote-tracking branch 'origin/master' into frontend-1047

commit 7d69ae4
Author: Charles Hacskaylo <[email protected]>
Date:   Thu Jun 23 15:59:56 2016 -0700

    [Frontend] Refactoring glyphs to classes

    fixes #1047
    In-progress, converting types, mods to
    Create Menu template

commit 18d9f3d
Author: Charles Hacskaylo <[email protected]>
Date:   Thu Jun 23 15:14:22 2016 -0700

    [Frontend] Refactoring glyphs to classes

    fixes #1047
    Very much In-progess: convert some controls;

commit e93a90a
Author: Charles Hacskaylo <[email protected]>
Date:   Thu Jun 23 11:28:07 2016 -0700

    [Frontend] Refactoring glyphs to classes

    fixes #1047
    Very much In-progess, classes for all symbols
    added to glyphs.scss; .menu cleaned up;

commit dc670b2
Author: Charles Hacskaylo <[email protected]>
Date:   Thu Jun 23 08:55:27 2016 -0700

    [Frontend] Refactoring glyphs to classes

    fixes #1047
    Very much In-progess, "icon-" selector,
    browse bar buttons

commit 8b29ccf
Author: Charles Hacskaylo <[email protected]>
Date:   Wed Jun 22 23:15:24 2016 -0700

    [Frontend] Refactoring glyphs to classes

    fixes #1047
    Very much In-progess, s-btn and
    s-btn-menu refactoring

commit f574ffe
Author: Charles Hacskaylo <[email protected]>
Date:   Wed Jun 22 14:37:34 2016 -0700

    [Frontend] Refactoring glyphs to classes

    fixes #1047
    In-progess, e900 > e904

commit bc62ee4
Author: Charles Hacskaylo <[email protected]>
Date:   Wed Jun 22 13:28:15 2016 -0700

    [Frontend] Complete revamp of unicodes

    fixes #1047
    New font files; no re-mapping yet in the app.

commit 614f0c6
Author: Charles Hacskaylo <[email protected]>
Date:   Wed Jun 22 13:23:18 2016 -0700

    [Frontend] Complete revamp of unicodes

    fixes #1047
    Moved all glyphs into PUA area of font, and
    re-organized by category.

commit 47bd403
Author: Charles Hacskaylo <[email protected]>
Date:   Tue Jun 21 18:39:48 2016 -0700

    [Frontend] Renaming symbols font files

    Fixes #1047
    - Modified sass to point to renamed font files;
    - Added new 12px symbols font files to sass;

commit 22a51d6
Author: Charles Hacskaylo <[email protected]>
Date:   Tue Jun 21 18:22:33 2016 -0700

    [Frontend] Updating Icomoon project files

    Fixes #1047
    - Renamed main project file;
    - Added new 12px symbols project file;

commit 13ded2f
Author: Charles Hacskaylo <[email protected]>
Date:   Tue Jun 21 18:19:27 2016 -0700

    [Frontend] Added new 12px symbols font files

    Fixes #1047

commit aef5660
Author: Charles Hacskaylo <[email protected]>
Date:   Tue Jun 21 18:16:56 2016 -0700

    [Frontend] Renaming symbols font files

    Fixes #1047

example/eventGenerator/bundle.js

@@ -49,7 +49,7 @@ define([
                 {
                     "key": "eventGenerator",
                     "name": "Event Message Generator",
-                    "glyph": "\u0066",
+                    "cssclass": "icon-folder-new",
                     "description": "For development use. Creates sample event message data that mimics a live data stream.",
                     "priority": 10,
                     "features": "creation",

example/export/bundle.js

@@ -36,7 +36,7 @@ define([
                     "name": "Export Telemetry as CSV",
                     "implementation": ExportTelemetryAsCSVAction,
                     "category": "contextual",
-                    "glyph": "\u0033",
+                    "cssclass": "icon-download",
                     "depends": [ "exportService" ]
                 }
             ]

example/forms/res/templates/exampleForm.html

@@ -20,24 +20,23 @@
  at runtime from the About dialog for additional information.
 -->
 <div ng-controller="ExampleFormController">
-    <mct-toolbar structure="toolbar" ng-model="state" name="aToolbar">
-    </mct-toolbar>
-
-    <mct-form structure="form" ng-model="state" name="aForm">
-    </mct-form>
+    <mct-toolbar structure="toolbar"
+                 ng-model="state"
+                 name="aToolbar"></mct-toolbar>
 
+    <mct-form structure="form"
+              ng-model="state"
+              class="validates"
+              name="aForm"></mct-form>
 
     <ul>
         <li>Dirty: {{aForm.$dirty}}</li>
         <li>Valid: {{aForm.$valid}}</li>
     </ul>
 
     <pre>
-
-
-    <textarea>
-    {{state | json}}
-    </textarea>
-
+        <textarea>
+            {{state | json}}
+        </textarea>
     </pre>
 </div>

example/forms/src/ExampleFormController.js

@@ -78,27 +78,26 @@ define(
                         items: [
                             {
                                 control: "button",
-                                glyph: "1",
-                                description: "Button A",
+                                csslass: "icon-save",
                                 click: function () {
-                                    window.alert("A");
+                                    window.alert("Save");
                                 }
                             },
                             {
                                 control: "button",
-                                glyph: "2",
+                                csslass: "icon-x",
                                 description: "Button B",
                                 click: function () {
-                                    window.alert("B");
+                                    window.alert("Cancel");
                                 }
                             },
                             {
                                 control: "button",
-                                glyph: "3",
+                                csslass: "icon-trash",
                                 description: "Button C",
                                 disabled: true,
                                 click: function () {
-                                    window.alert("C");
+                                    window.alert("Delete");
                                 }
                             }
                         ]

example/generator/bundle.js

@@ -86,7 +86,7 @@ define([
                 {
                     "key": "generator",
                     "name": "Sine Wave Generator",
-                    "glyph": "\u0054",
+                    "cssclass": "icon-telemetry",
                     "description": "For development use. Generates example streaming telemetry data using a simple sine wave algorithm.",
                     "priority": 10,
                     "features": "creation",

example/imagery/bundle.js

@@ -49,7 +49,7 @@ define([
                 {
                     "key": "imagery",
                     "name": "Example Imagery",
-                    "glyph": "\u00e3",
+                    "cssclass": "icon-image",
                     "features": "creation",
                     "description": "For development use. Creates example imagery data that mimics a live imagery stream.",
                     "priority": 10,

example/mobile/res/sass/mobile-example.scss

@@ -25,7 +25,7 @@
 
 @include phoneandtablet {
     // Show the Create button
-    .create-btn-holder {
+    .create-button-holder {
         display: block !important;
     }
 }

example/msl/bundle.js

@@ -43,18 +43,18 @@ define([
             {
                 "name":"Mars Science Laboratory",
                 "key": "msl.curiosity",
-                "glyph": "o"
+                "cssclass": "icon-object"
             },
             {
                 "name": "Instrument",
                 "key": "msl.instrument",
-                "glyph": "o",
+                "cssclass": "icon-object",
                 "model": {"composition": []}
             },
             {
                 "name": "Measurement",
                 "key": "msl.measurement",
-                "glyph": "\u0054",
+                "cssclass": "icon-telemetry",
                 "model": {"telemetry": {}},
                 "telemetry": {
                     "source": "rems.source",

example/notifications/res/dialog-launch.html

@@ -1,9 +1,9 @@
-<span class="status block ok" ng-controller="DialogLaunchController">
+<span class="status block" ng-controller="DialogLaunchController">
     <!-- DO NOT ADD SPACES BETWEEN THE SPANS - IT ADDS WHITE SPACE!! -->
-    <span class="ui-symbol status-indicator">&#xe600;</span><span class="label">
+    <span class="status-indicator icon-box-with-arrow"></span><span class="label">
         <a ng-click="launchProgress(true)">Known</a> |
         <a ng-click="launchProgress(false)">Unknown</a> |
         <a ng-click="launchError()">Error</a> |
         <a ng-click="launchInfo()">Info</a>
-    </span><span class="count">Dialogs</span>
+    </span><span class="count"></span>
 </span>

example/notifications/res/notification-launch.html

@@ -1,9 +1,9 @@
-<span class="status block ok" ng-controller="NotificationLaunchController">
+<span class="status block" ng-controller="NotificationLaunchController">
     <!-- DO NOT ADD SPACES BETWEEN THE SPANS - IT ADDS WHITE SPACE!! -->
-    <span class="ui-symbol status-indicator">&#xe600;</span><span class="label">
+    <span class="status-indicator icon-bell"></span><span class="label">
         <a ng-click="newInfo()">Success</a> |
         <a ng-click="newError()">Error</a> |
         <a ng-click="newAlert()">Alert</a> |
         <a ng-click="newProgress()">Progress</a>
-    </span><span class="count">Notifications</span>
+    </span><span class="count"></span>
 </span>

example/notifications/src/DialogLaunchIndicator.js

@@ -32,17 +32,15 @@ define(
          * launched for demonstration and testing purposes.
          * @constructor
          */
+
         function DialogLaunchIndicator() {
 
         }
 
         DialogLaunchIndicator.template = 'dialogLaunchTemplate';
 
-        DialogLaunchIndicator.prototype.getGlyph = function () {
-            return "i";
-        };
         DialogLaunchIndicator.prototype.getGlyphClass = function () {
-            return 'caution';
+            return 'ok';
         };
         DialogLaunchIndicator.prototype.getText = function () {
             return "Launch test dialog";

example/notifications/src/NotificationLaunchIndicator.js

@@ -26,17 +26,21 @@ define(
     function () {
         "use strict";
 
+        /**
+         * A tool for manually invoking notifications. When included this
+         * indicator will allow for notifications of different types to be
+         * launched for demonstration and testing purposes.
+         * @constructor
+         */
+
         function NotificationLaunchIndicator() {
 
         }
 
         NotificationLaunchIndicator.template = 'notificationLaunchTemplate';
 
-        NotificationLaunchIndicator.prototype.getGlyph = function () {
-            return "i";
-        };
         NotificationLaunchIndicator.prototype.getGlyphClass = function () {
-            return 'caution';
+            return 'ok';
         };
         NotificationLaunchIndicator.prototype.getText = function () {
             return "Launch notification";

example/plotOptions/bundle.js

@@ -81,7 +81,7 @@ define([
                 {
                     "key": "plot",
                     "name": "Example Telemetry Plot",
-                    "glyph": "\u0074",
+                    "cssclass": "icon-telemetry-panel",
                     "description": "For development use. A plot for displaying telemetry.",
                     "priority": 10,
                     "delegates": [

example/profiling/src/DigestIndicator.js

@@ -59,11 +59,14 @@ define(
             update();
 
             return {
-                getGlyph: function () {
-                    return ".";
-                },
-                getGlyphClass: function () {
-                    return undefined;
+                /**
+                 * Get the CSS class that defines the icon
+                 * to display in this indicator. This will appear
+                 * as a dataflow icon.
+                 * @returns {string} the cssclass of the dataflow icon
+                 */
+                getCssClass: function () {
+                    return "icon-connectivity";
                 },
                 getText: function () {
                     return displayed + " digests/sec";

example/profiling/src/WatchIndicator.js

@@ -55,24 +55,13 @@ define(
 
             return {
                 /**
-                 * Get the glyph (single character used as an icon)
+                 * Get the CSS class (single character used as an icon)
                  * to display in this indicator. This will return ".",
-                 * which should appear as a dataflow icon.
+                 * which should appear as a database icon.
                  * @returns {string} the character of the database icon
                  */
-                getGlyph: function () {
-                    return "E";
-                },
-                /**
-                 * Get the name of the CSS class to apply to the glyph.
-                 * This is used to color the glyph to match its
-                 * state (one of ok, caution or err)
-                 * @returns {string} the CSS class to apply to this glyph
-                 */
-                getGlyphClass: function () {
-                    return (watches > 2000) ? "caution" :
-                            (watches < 1000) ? "ok" :
-                                    undefined;
+                getCssClass: function () {
+                    return "icon-database";
                 },
                 /**
                  * Get the text that should appear in the indicator.

example/worker/src/FibonacciIndicator.js

@@ -50,15 +50,12 @@ define(
             requestNext();
 
             return {
-                getGlyph: function () {
-                    return "?";
+                getCssClass: function () {
+                    return "icon-object-unknown";
                 },
                 getText: function () {
                     return latest;
                 },
-                getGlyphClass: function () {
-                    return "";
-                },
                 getDescription: function () {
                     return "";
                 }

platform/commonUI/browse/bundle.js

@@ -231,23 +231,22 @@ define([
                         "$window"
                     ],
                     "group": "windowing",
-                    "glyph": "y",
+                    "cssclass": "icon-new-window",
                     "priority": "preferred"
                 },
                 {
                     "key": "fullscreen",
                     "implementation": FullscreenAction,
                     "category": "view-control",
                     "group": "windowing",
-                    "glyph": "z",
                     "priority": "default"
                 }
             ],
             "views": [
                 {
                     "key": "items",
                     "name": "Items",
-                    "glyph": "9",
+                    "cssclass": "icon-thumbs-strip",
                     "description": "Grid of available items",
                     "template": itemsTemplate,
                     "uses": [

platform/commonUI/browse/res/templates/back-arrow.html

@@ -20,11 +20,8 @@
  at runtime from the About dialog for additional information.
 -->
 
-<!-- Back Arrow Icon used on mobile-->
-<a
-   class='type-icon icon ui-symbol s-back'
+<a class='s-icon-button icon-pointer-left'
    ng-show="context.getPath().length > 2"
    ng-click="context.getParent().getCapability('action').perform('navigate')">
-    {
 </a>
 

platform/commonUI/browse/res/templates/browse.html

@@ -31,7 +31,7 @@
                 <div class="abs holder l-flex-col holder-treeview-elements">
                     <mct-representation key="'create-button'"
                                         mct-object="navigatedObject"
-                                        class="holder flex-elem create-btn-holder">
+                                        class="holder flex-elem create-button-holder">
                     </mct-representation>
                     <mct-include key="'search'"
                                  ng-model="treeModel"
@@ -66,6 +66,10 @@
                                                 key="'view-object'"
                                                 class="abs holder holder-object">
                             </mct-representation>
+                            <a class="mini-tab-icon anchor-right mobile-hide toggle-pane toggle-inspect flush-right"
+                               title="{{ modelPaneInspect.visible()? 'Hide' : 'Show' }} the Inspection pane"
+                               ng-click="modelPaneInspect.toggle()"
+                               ng-class="{ collapsed : !modelPaneInspect.visible() }"></a>
                         </div>
 
                         <mct-splitter class="splitter-inspect mobile-hide flush-right edge-shdw"></mct-splitter>
@@ -75,10 +79,6 @@
                                                 mct-object="navigatedObject"
                                                 ng-model="treeModel">
                             </mct-representation>
-                            <a class="mini-tab-icon anchor-right mobile-hide toggle-pane toggle-inspect"
-                               title="{{ modelPaneInspect.visible()? 'Hide' : 'Show' }} the Inspection pane"
-                               ng-click="modelPaneInspect.toggle()"
-                               ng-class="{ collapsed : !modelPaneInspect.visible() }"></a>
                         </div>
                     </mct-split-pane>
                 </div>

platform/commonUI/browse/res/templates/browse/object-header.html

@@ -19,7 +19,7 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-<span class='type-icon ui-symbol flex-elem'>{{type.getGlyph()}}</span>
+<span class='type-icon flex-elem {{type.getCssClass()}}'></span>
 <span class="l-elem-wrapper l-flex-row flex-elem grows">
     <span ng-if="parameters.mode" class='action flex-elem'>{{parameters.mode}}</span>
     <span class='title-label flex-elem flex-can-shrink'>{{model.name}}</span>

platform/commonUI/browse/res/templates/items/grid-item.html

@@ -23,14 +23,14 @@
 <div class='item grid-item' ng-click='action.perform("navigate")'>
     <div class='contents abs'>
         <div class='top-bar bar abs'>
-            <div class='ui-symbol profile' title='Shared'>&#x4f;</div>
+            <span class='icon-people' title='Shared'></span>
             <mct-representation class="desktop-hide" key="'info-button'" mct-object="domainObject"></mct-representation>
         </div>
         <div class='item-main abs lg'>
             <span class="t-item-icon" ng-class="{ 'l-icon-link':location.isLink() }">
-                <span class="t-item-icon-glyph ng-binding">{{type.getGlyph()}}</span>
+                <span class="t-item-icon-glyph ng-binding {{type.getCssClass()}}"></span>
             </span>
-            <div class='ui-symbol abs item-open'>}</div>
+            <div class='abs item-open icon-pointer-right'></div>
         </div>
         <div class='bottom-bar bar abs'>
             <div class='title'>{{model.name}}</div>

platform/commonUI/browse/res/templates/menu-arrow.html

@@ -21,6 +21,6 @@
 -->
 
 <span ng-controller="MenuArrowController as menuArrow">
-    <a class='ui-symbol context-available'
-       ng-click='menuArrow.showMenu($event)'>v</a>
+    <a class='context-available'
+       ng-click='menuArrow.showMenu($event)'></a>
 </span>