[Frontend] Refactoring glyphs to classes

fixes #1047 In-progess: tree-labels, unknown objects, object header
nasa · Jun 27, 2016 · 0cf4089 · 0cf4089
1 parent 46cae10
commit 0cf4089
Show file tree

Hide file tree

Showing 8 changed files with 18 additions and 19 deletions.
diff --git a/platform/commonUI/browse/res/templates/browse/object-header.html b/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 ui-symbol 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>

diff --git a/platform/commonUI/general/res/sass/_icons.scss b/platform/commonUI/general/res/sass/_icons.scss
@@ -88,9 +88,9 @@
     position: relative;
     &.l-icon-link {
         .t-item-icon-glyph {
-            &:before {
+            &:after {
                 color: $colorIconLink;
-                content: "\f4";
+                content: "\e921";
                 height: auto; width: auto;
                 position: absolute;
                 left: 0; top: 0; right: 0; bottom: 10%;

diff --git a/platform/commonUI/general/res/sass/_object-label.scss b/platform/commonUI/general/res/sass/_object-label.scss
@@ -40,7 +40,7 @@ mct-representation,
     &.s-status-pending {
         .t-object-label {
             .t-item-icon {
-                &:before {
+                &:after {
                     @include spinner($waitSpinnerTreeBorderW,  $colorLoadingFg);
                     content: "";
                     height: $waitSpinnerTreeD; width: $waitSpinnerTreeD;
@@ -59,7 +59,7 @@ mct-representation,
 
 .selected mct-representation,
 .selected .rep-object-label {
-    .s-status-pending .t-object-label .t-item-icon:before {
+    .s-status-pending .t-object-label .t-item-icon:after {
         border-color: rgba($colorItemTreeSelectedFg, 0.25) !important;
         border-top-color: rgba($colorItemTreeSelectedFg, 1.0) !important;
     }

diff --git a/platform/commonUI/general/res/sass/items/_item.scss b/platform/commonUI/general/res/sass/items/_item.scss
@@ -91,7 +91,7 @@
                     font-size: $iconD * 0.95;
                     &.l-icon-link {
                         .t-item-icon-glyph {
-                            &:before {
+                            &:after {
                                 @include transform(scale(0.25));
                             }
                         }

diff --git a/platform/commonUI/general/res/sass/mobile/_tree.scss b/platform/commonUI/general/res/sass/mobile/_tree.scss
@@ -51,7 +51,7 @@ body.touch {
 		}
 		.t-object-label {
 			line-height: inherit;
-            .t-item-icon.l-icon-link .t-item-icon-glyph:before {
+            .t-item-icon.l-icon-link .t-item-icon-glyph:after {
                 bottom: 20%; // Shift up due to height of mobile menu items
             }
 		}

diff --git a/platform/commonUI/general/res/templates/label.html b/platform/commonUI/general/res/templates/label.html
@@ -20,8 +20,6 @@
  at runtime from the About dialog for additional information.
 -->
 <div class="t-object-label l-flex-row flex-elem grows">
-    <div class="t-item-icon flex-elem" ng-class="{ 'l-icon-link':location.isLink() }">
-        <div class="t-item-icon-glyph">{{type.getGlyph()}}</div>
-    </div>
+    <div class="t-item-icon flex-elem {{type.getCssClass()}}" ng-class="{ 'l-icon-link':location.isLink() }"></div>
     <div class='t-title-label flex-elem grows'>{{model.name}}</div>
 </div>
diff --git a/platform/commonUI/general/src/ui/TreeLabelView.js b/platform/commonUI/general/src/ui/TreeLabelView.js
@@ -30,23 +30,22 @@ define([
         this.gestureService = gestureService;
     }
 
-    function getGlyph(domainObject) {
-        var type = domainObject.getCapability('type');
-        return type.getGlyph();
-    }
-
     function isLink(domainObject) {
         var location = domainObject.getCapability('location');
         return location.isLink();
     }
 
+    function getClass(domainObject) {
+        var type = domainObject.getCapability('type');
+        return type.getCssClass();
+    }
+
     TreeLabelView.prototype.updateView = function (domainObject) {
         var titleEl = this.el.find('.t-title-label'),
-            glyphEl = this.el.find('.t-item-icon-glyph'),
             iconEl = this.el.find('.t-item-icon');
 
         titleEl.text(domainObject ? domainObject.getModel().name : "");
-        glyphEl.text(domainObject ? getGlyph(domainObject) : "");
+        iconEl.addClass(domainObject ? getClass(domainObject) : "");
 
         if (domainObject && isLink(domainObject)) {
             iconEl.addClass('l-icon-link');

diff --git a/platform/core/bundle.js b/platform/core/bundle.js
@@ -275,11 +275,13 @@ define([
                 {
                     "key": "unknown",
                     "name": "Unknown Type",
-                    "glyph": "\u003f"
+                    "glyph": "\u003f",
+                    "cssclass": "icon-object-unknown"
                 },
                 {
                     "name": "Unknown Type",
-                    "glyph": "\u003f"
+                    "glyph": "\u003f",
+                    "cssclass": "icon-object-unknown"
                 }
             ],
             "capabilities": [