[Frontend] Refactoring glyphs to classes

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

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/profiling/src/DigestIndicator.js

@@ -59,8 +59,14 @@ define(
             update();
 
             return {
-                getGlyph: function () {
+                /**
-                    return ".";
+                 * Get the glyph CSS class (single character used as an icon)
+                 * to display in this indicator. This will return ".",
+                 * which should appear as a dataflow icon.
+                 * @returns {string} the character of the dataflow icon
+                 */
+                getCssClass: function () {
+                    return "icon-connectivity";
                 },
                 getGlyphClass: function () {
                     return undefined;

example/profiling/src/WatchIndicator.js

@@ -55,13 +55,13 @@ define(
 
             return {
                 /**
-                 * Get the glyph (single character used as an icon)
+                 * Get the glyph 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 () {
+                getCssClass: function () {
-                    return "E";
+                    return "icon-database";
                 },
                 /**
                  * Get the name of the CSS class to apply to the glyph.

example/worker/src/FibonacciIndicator.js

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

platform/commonUI/edit/src/creation/AddAction.js

@@ -52,6 +52,7 @@ define(
             this.metadata = {
                 key: 'add',
                 glyph: type.getGlyph(),
+                cssclass: type.getCssClass(),
                 name: type.getName(),
                 type: type.getKey(),
                 description: type.getDescription(),

platform/commonUI/edit/test/creation/AddActionProviderSpec.js

@@ -45,6 +45,7 @@ define(
                     [
                         "getKey",
                         "getGlyph",
+                        "getCssClass",
                         "getName",
                         "getDescription",
                         "getProperties",

platform/commonUI/edit/test/creation/CreateActionProviderSpec.js

@@ -41,6 +41,7 @@ define(
                     [
                         "getKey",
                         "getGlyph",
+                        "getCssClass",
                         "getName",
                         "getDescription",
                         "getProperties",

platform/commonUI/edit/test/creation/CreateActionSpec.js

@@ -51,6 +51,7 @@ define(
                     [
                         "getKey",
                         "getGlyph",
+                        "getCssClass",
                         "getName",
                         "getDescription",
                         "getProperties",
@@ -120,6 +121,7 @@ define(
 
                 mockType.getKey.andReturn("test");
                 mockType.getGlyph.andReturn("T");
+                mockType.getCssClass.andReturn("icon-telemetry");
                 mockType.getDescription.andReturn("a test type");
                 mockType.getName.andReturn("Test");
                 mockType.getProperties.andReturn([]);
@@ -138,6 +140,7 @@ define(
                 expect(metadata.name).toEqual("Test");
                 expect(metadata.description).toEqual("a test type");
                 expect(metadata.glyph).toEqual("T");
+                expect(metadata.cssclass).toEqual("icon-telemetry");
             });
 
             describe("the perform function", function () {

platform/commonUI/edit/test/creation/CreateWizardSpec.js

@@ -54,6 +54,7 @@ define(
                     [
                         "getKey",
                         "getGlyph",
+                        "getCssClass",
                         "getName",
                         "getDescription",
                         "getProperties",
@@ -75,6 +76,7 @@ define(
 
                 mockType.getKey.andReturn("test");
                 mockType.getGlyph.andReturn("T");
+                mockType.getCssClass.andReturn("icon-telemetry");
                 mockType.getDescription.andReturn("a test type");
                 mockType.getName.andReturn("Test");
                 mockType.getInitialModel.andReturn(testModel);

platform/commonUI/general/res/templates/indicator.html

@@ -24,12 +24,10 @@
 	 title="{{ngModel.getDescription()}}"
 	 ng-click='ngModel.configure()'
 	 ng-show="ngModel.getText().length > 0">
-	<span class="ui-symbol status-indicator">
+	<span class="status-indicator {{ngModel.getCssClass()}}"></span><span class="label"
-		{{ngModel.getGlyph()}}
-	</span><span class="label"
 		  ng-class='ngModel.getTextClass()'>
 		{{ngModel.getText()}}
-        <a class="s-btn ui-symbol" ng-if="ngModel.configure">G</a>
+        <a class="s-btn icon-gear" ng-if="ngModel.configure"></a>
 	</span><span class="count">
 	</span>
 </div>

platform/commonUI/general/test/controllers/BottomBarControllerSpec.js

@@ -35,7 +35,7 @@ define(
             beforeEach(function () {
                 mockIndicator = jasmine.createSpyObj(
                     "indicator",
-                    ["getGlyph", "getText"]
+                    ["getGlyph", "getCssClass", "getText"]
                 );
 
                 testIndicatorA = {};

platform/commonUI/general/test/ui/TreeViewSpec.js

@@ -107,6 +107,7 @@ define([
                 return {
                     context: jasmine.createSpyObj('context', ['getPath']),
                     type: jasmine.createSpyObj('type', ['getGlyph']),
+                    cssclass: jasmine.createSpyObj('cssclass', ['getCssClass']),
                     location: jasmine.createSpyObj('location', ['isLink']),
                     mutation: jasmine.createSpyObj('mutation', ['listen']),
                     status: mockStatus

platform/commonUI/notification/res/notification-indicator.html

@@ -2,7 +2,7 @@
 <span ng-show="notifications.length > 0" class="status block"
       ng-class="highest.severity"
       ng-controller="NotificationIndicatorController">
-    <span class="ui-symbol status-indicator">&#xe610;</span><span class="label">
+    <span class="status-indicator icon-bell"></span><span class="label">
         <a ng-click="showNotificationsList()">{{notifications.length}}
             Notifications</a>
     </span><span class="count">{{notifications.length}}</span>

platform/core/src/types/TypeImpl.js

@@ -145,6 +145,7 @@ define(
         };
 
         TypeImpl.prototype.getGlyph = function () {
+            // TO-DO: remove this function
             return this.typeDef.glyph;
         };
 

platform/core/test/types/TypeImplSpec.js

@@ -34,6 +34,7 @@ define(
                     name: 'Test Type',
                     description: 'A type, for testing',
                     glyph: 't',
+                    cssclass: 'icon-telemetry-panel',
                     inherits: ['test-parent-1', 'test-parent-2'],
                     features: ['test-feature-1'],
                     properties: [{}],
@@ -58,6 +59,10 @@ define(
                 expect(type.getGlyph()).toEqual('t');
             });
 
+            it("exposes glyph CSS class from definition", function() {
+                expect(type.getCssClass()).toEqual('icon-telemetry-panel');
+            });
+
             it("exposes its underlying type definition", function () {
                 expect(type.getDefinition()).toEqual(testTypeDef);
             });

platform/core/test/types/TypeProviderSpec.js

@@ -31,17 +31,20 @@ define(
                     {
                         key: 'basic',
                         glyph: "X",
+                        cssclass: "icon-magnify-in",
                         name: "Basic Type"
                     },
                     {
                         key: 'multi1',
                         glyph: "Z",
+                        cssclass: "icon-trash",
                         description: "Multi1 Description",
                         capabilities: ['a1', 'b1']
                     },
                     {
                         key: 'multi2',
                         glyph: "Y",
+                        cssclass: "icon-magnify-out",
                         capabilities: ['a2', 'b2', 'c2']
                     },
                     {
@@ -71,6 +74,7 @@ define(
                 captured.type = provider.getType('basic');
 
                 expect(captured.type.getGlyph()).toEqual("X");
+                expect(captured.type.getCssClass()).toEqual("icon-magnify-in");
                 expect(captured.type.getName()).toEqual("Basic Type");
                 expect(captured.type.getDescription()).toBeUndefined();
             });
@@ -79,6 +83,7 @@ define(
                 captured.type = provider.getType('single-subtype');
 
                 expect(captured.type.getGlyph()).toEqual("X");
+                expect(captured.type.getCssClass()).toEqual("icon-magnify-in");
                 expect(captured.type.getName()).toEqual("Basic Subtype");
                 expect(captured.type.getDescription()).toEqual("A test subtype");
             });
@@ -87,6 +92,7 @@ define(
                 captured.type = provider.getType('multi-subtype');
 
                 expect(captured.type.getGlyph()).toEqual("Y");
+                expect(captured.type.getCssClass()).toEqual("icon-magnify-out");
                 expect(captured.type.getName()).toEqual("Multi-parent Subtype");
                 expect(captured.type.getDescription()).toEqual("Multi1 Description");
             });

platform/features/clock/src/indicators/ClockIndicator.js

@@ -44,8 +44,8 @@ define(
             });
         }
 
-        ClockIndicator.prototype.getGlyph = function () {
+        ClockIndicator.prototype.getCssClass = function () {
-            return "C";
+            return "icon-clock";
         };
 
         ClockIndicator.prototype.getGlyphClass = function () {

platform/features/clock/test/indicators/ClockIndicatorSpec.js

@@ -48,7 +48,7 @@ define(
             });
 
             it("implements the Indicator interface", function () {
-                expect(indicator.getGlyph()).toEqual(jasmine.any(String));
+                expect(indicator.getCssClass()).toEqual(jasmine.any(String));
                 expect(indicator.getGlyphClass()).toEqual(jasmine.any(String));
                 expect(indicator.getText()).toEqual(jasmine.any(String));
                 expect(indicator.getDescription()).toEqual(jasmine.any(String));

platform/identity/src/IdentityIndicator.js

@@ -43,8 +43,8 @@ define(
             });
         }
 
-        IdentityIndicator.prototype.getGlyph = function () {
+        IdentityIndicator.prototype.getCssClass = function () {
-            return this.text && "P";
+            return "icon-person";
         };
         IdentityIndicator.prototype.getGlyphClass = function () {
             return undefined;

platform/identity/test/IdentityIndicatorSpec.js

@@ -46,8 +46,7 @@ define(
                     key: "testuserid",
                     name: "A User"
                 });
-                // Should have a single character glyph
+                expect(indicator.getCssClass()).toEqual("icon-person");
-                expect(indicator.getGlyph().length).toEqual(1);
                 expect(indicator.getGlyphClass()).toBeUndefined();
                 expect(indicator.getText()).toEqual("A User");
                 expect(indicator.getDescription().indexOf("testuserid"))
@@ -55,7 +54,7 @@ define(
             });
 
             it("shows nothing while no user information is available", function () {
-                expect(indicator.getGlyph()).toBeUndefined();
+                expect(indicator.getCssClass()).toBeUndefined();
                 expect(indicator.getGlyphClass()).toBeUndefined();
                 expect(indicator.getText()).toBeUndefined();
                 expect(indicator.getDescription()).toBeUndefined();
@@ -63,7 +62,7 @@ define(
 
             it("shows nothing when there is no identity information", function () {
                 mockPromise.then.mostRecentCall.args[0](undefined);
-                expect(indicator.getGlyph()).toBeUndefined();
+                expect(indicator.getCssClass()).toBeUndefined();
                 expect(indicator.getGlyphClass()).toBeUndefined();
                 expect(indicator.getText()).toBeUndefined();
                 expect(indicator.getDescription()).toBeUndefined();

platform/persistence/couch/src/CouchIndicator.js

@@ -95,8 +95,8 @@ define(
             $interval(updateIndicator, interval);
         }
 
-        CouchIndicator.prototype.getGlyph = function () {
+        CouchIndicator.prototype.getCssClass = function () {
-            return "D";
+            return "icon-database";
         };
 
         CouchIndicator.prototype.getGlyphClass = function () {

platform/persistence/couch/test/CouchIndicatorSpec.js

@@ -57,7 +57,7 @@ define(
             });
 
             it("has a database icon", function () {
-                expect(indicator.getGlyph()).toEqual("D");
+                expect(indicator.getCssClass()).toEqual("icon-database");
             });
 
             it("consults the database at the configured path", function () {

platform/persistence/elastic/src/ElasticIndicator.js

@@ -81,8 +81,8 @@ define(
             $interval(updateIndicator, interval, 0, false);
         }
 
-        ElasticIndicator.prototype.getGlyph = function () {
+        ElasticIndicator.prototype.getCssClass = function () {
-            return "D";
+            return "icon-database";
         };
         ElasticIndicator.prototype.getGlyphClass = function () {
             return this.state.glyphClass;

platform/persistence/elastic/test/ElasticIndicatorSpec.js

@@ -59,7 +59,7 @@ define(
             });
 
             it("has a database icon", function () {
-                expect(indicator.getGlyph()).toEqual("D");
+                expect(indicator.getCssClass()).toEqual("icon-database");
             });
 
             it("consults the database at the configured path", function () {

platform/persistence/local/src/LocalStorageIndicator.js

@@ -40,8 +40,8 @@ define(
         function LocalStorageIndicator() {
         }
 
-        LocalStorageIndicator.prototype.getGlyph = function () {
+        LocalStorageIndicator.prototype.getCssClass = function () {
-            return "D";
+            return "icon-database";
         };
         LocalStorageIndicator.prototype.getGlyphClass = function () {
             return 'caution';

platform/persistence/local/test/LocalStorageIndicatorSpec.js

@@ -38,7 +38,7 @@ define(
             });
 
             it("has a database icon", function () {
-                expect(indicator.getGlyph()).toEqual("D");
+                expect(indicator.getCssClass()).toEqual("icon-database");
             });
 
             it("has a 'caution' class to draw attention", function () {