[Frontend] Refactoring glyphs to classes

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

example/eventGenerator/bundle.js

@@ -50,6 +50,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/generator/bundle.js

@@ -87,6 +87,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

@@ -50,6 +50,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,

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

@@ -28,7 +28,7 @@
         </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>

platform/commonUI/edit/res/templates/create/create-menu.html

@@ -22,24 +22,17 @@
 <div class="contents" ng-controller="CreateMenuController">
     <div class="pane left menu-items">
         <ul>
-
             <li ng-repeat="createAction in createActions" ng-click="createAction.perform()">
-                <a
+                <a ng-mouseover="representation.activeMetadata = createAction.getMetadata()"
-                   ng-mouseover="representation.activeMetadata = createAction.getMetadata()"
+                   ng-mouseleave="representation.activeMetadata = undefined"
-                   ng-mouseleave="representation.activeMetadata = undefined">
+                   class="{{ createAction.getMetadata().cssclass }}">
-                    <span class="ui-symbol icon type-icon">
-                        {{createAction.getMetadata().glyph}}
-                    </span>
                     {{createAction.getMetadata().name}}
                 </a>
             </li>
-
         </ul>
     </div>
     <div class="pane right menu-item-description">
-        <div class="desc-area ui-symbol icon type-icon">
+        <div class="desc-area ui-symbol icon type-icon {{ representation.activeMetadata.cssclass }}"></div>
-            {{representation.activeMetadata.glyph}}
-        </div>
         <div class="desc-area title">
             {{representation.activeMetadata.name}}
         </div>

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

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

platform/commonUI/general/res/sass/_glyphs.scss

@@ -5,17 +5,6 @@
     }
 }
 
-//[class*="icon-"]:before {
-//    font-family: 'symbolsfont';
-//}
-
-.ui-symbol,
-.icon {
-    // TO-DO: refactor markup to use "icon-" approach
-    &.mobile-info { @include glyph('\e920'); }
-    //&.context-available { @include glyph('\e902'); }
-}
-
 .icon-alert-rect {  @include glyph('\e900'); }
 .icon-alert-triangle {  @include glyph('\e901'); }
 .icon-arrow-down {  @include glyph('\e902'); }

platform/commonUI/inspect/res/templates/info-button.html

@@ -21,4 +21,4 @@
 -->
 
 <!--The icon for the info button appearing in a grid item (list in folder)-->
-<a class='ui-symbol icon mobile-info'></a>
+<a class='ui-symbol icon icon-info'></a>

platform/core/bundle.js

@@ -264,6 +264,7 @@ define([
                     "key": "folder",
                     "name": "Folder",
                     "glyph": "\u0046",
+                    "cssclass": "icon-folder",
                     "features": "creation",
                     "description": "Create folders to organize other objects or links to objects.",
                     "priority": 1000,

platform/core/src/types/TypeImpl.js

@@ -148,6 +148,10 @@ define(
             return this.typeDef.glyph;
         };
 
+        TypeImpl.prototype.getCssClass = function () {
+            return this.typeDef.cssclass;
+        };
+
         TypeImpl.prototype.getProperties = function () {
             return (this.typeDef.properties || []).map(function (propertyDef) {
                 return new TypeProperty(propertyDef);

platform/features/clock/bundle.js

@@ -156,6 +156,7 @@ define([
                     "key": "clock",
                     "name": "Clock",
                     "glyph": "\u0043",
+                    "cssclass": "icon-clock",
                     "description": "A UTC-based clock that supports a variety of display formats. Clocks can be added to Display Layouts.",
                     "priority": 101,
                     "features": [
@@ -213,6 +214,7 @@ define([
                     "key": "timer",
                     "name": "Timer",
                     "glyph": "\u00f5",
+                    "cssclass": "icon-timer",
                     "description": "A timer that counts up or down to a datetime. Timers can be started, stopped and reset whenever needed, and support a variety of display formats. Each Timer displays the same value to all users. Timers can be added to Display Layouts.",
                     "priority": 100,
                     "features": [

platform/features/layout/bundle.js

@@ -57,6 +57,7 @@ define([
                     "key": "layout",
                     "name": "Display Layout",
                     "glyph": "\u004c",
+                    "cssclass": "icon-layout",
                     "type": "layout",
                     "template": layoutTemplate,
                     "editable": true,
@@ -77,7 +78,7 @@ define([
                                 "items": [
                                     {
                                         "method": "add",
-                                        "glyph": "\u002b",
+                                        "cssclass": "icon-plus",
                                         "control": "menu-button",
                                         "text": "Add",
                                         "options": [
@@ -109,8 +110,7 @@ define([
                                 "items": [
                                     {
                                         "method": "order",
-                                        "glyph": "á",
+                                        "cssclass": "icon-layers",
-                                        "cssclass": "i-layers",
                                         "control": "menu-button",
                                         "options": [
                                             {
@@ -260,6 +260,7 @@ define([
                     "key": "layout",
                     "name": "Display Layout",
                     "glyph": "\u004c",
+                    "cssclass": "icon-layout",
                     "description": "Assemble other objects and components together into a reusable screen layout. Working in a simple canvas workspace, simply drag in the objects you want, position and size them. Save your design and view or edit it at any time.",
                     "priority": 900,
                     "features": "creation",
@@ -292,6 +293,7 @@ define([
                     "key": "telemetry.panel",
                     "name": "Telemetry Panel",
                     "glyph": "t",
+                    "cssclass": "icon-telemetry-panel",
                     "description": "A panel for collecting telemetry elements.",
                     "priority": 899,
                     "delegates": [

platform/features/pages/bundle.js

@@ -37,6 +37,7 @@ define([
                     "key": "example.page",
                     "name": "Web Page",
                     "glyph": "\u00ea",
+                    "cssclass": "icon-page",
                     "description": "Embed a web page or web-based image in a resizeable window component. Can be added to Display Layouts. Note that the URL being embedded must allow iframing.",
                     "priority": 50,
                     "features": [

platform/features/table/bundle.js

@@ -61,6 +61,7 @@ define([
                     "key": "table",
                     "name": "Historical Telemetry Table",
                     "glyph": "\ue604",
+                    "cssclass": "icon-tabular",
                     "description": "A static table of all values over time for all included telemetry elements. Rows are timestamped data values for each telemetry element; columns are data fields. The number of rows is based on the range of your query. New incoming data must be manually re-queried for.",
                     "priority": 861,
                     "features": "creation",
@@ -84,6 +85,7 @@ define([
                     "key": "rttable",
                     "name": "Real-time Telemetry Table",
                     "glyph": "\ue620",
+                    "cssclass": "icon-tabular-realtime",
                     "description": "A scrolling table of latest values for all included telemetry elements. Rows are timestamped data values for each telemetry element; columns are data fields. New incoming data is automatically added to the view.",
                     "priority": 860,
                     "features": "creation",

platform/features/timeline/bundle.js

@@ -152,6 +152,7 @@ define([
                     "key": "timeline",
                     "name": "Timeline",
                     "glyph": "\u0053",
+                    "cssclass": "icon-timeline",
                     "description": "A time-oriented container that lets you enclose and organize other Timelines and Activities. The Timeline view provides both tabular and Gantt views as well as resource utilization graphing of Activities.",
                     "priority": 502,
                     "features": [
@@ -195,6 +196,7 @@ define([
                     "key": "activity",
                     "name": "Activity",
                     "glyph": "\u0061",
+                    "cssclass": "icon-activity",
                     "features": [
                         "creation"
                     ],
@@ -241,6 +243,7 @@ define([
                     "key": "mode",
                     "name": "Activity Mode",
                     "glyph": "\u0041",
+                    "cssclass": "icon-activity-mode",
                     "features": [
                         "creation"
                     ],
@@ -309,11 +312,13 @@ define([
                                             {
                                                 "name": "Timeline",
                                                 "glyph": "\u0053",
+                                                "cssclass": "icon-timeline",
                                                 "key": "timeline"
                                             },
                                             {
                                                 "name": "Activity",
                                                 "glyph": "\u0061",
+                                                "cssclass": "icon-activity",
                                                 "key": "activity"
                                             }
                                         ]