[Frontend] Refactoring glyphs to classes

fixes #1047 Context menus and associated actions, custom checkboxes, tree item being edited
nasa · Jun 27, 2016 · 2bd34f7 · 2bd34f7
1 parent b561d4f
commit 2bd34f7
Show file tree

Hide file tree

Showing 9 changed files with 17 additions and 23 deletions.
diff --git a/platform/commonUI/edit/bundle.js b/platform/commonUI/edit/bundle.js
@@ -195,6 +195,7 @@ define([
                     "category": "contextual",
                     "implementation": RemoveAction,
                     "glyph": "Z",
+                    "cssclass": "icon-trash",
                     "name": "Remove",
                     "description": "Remove this object from its containing object.",
                     "depends": [

diff --git a/platform/commonUI/general/res/sass/_icons.scss b/platform/commonUI/general/res/sass/_icons.scss
@@ -47,9 +47,6 @@
             color: lighten($colorAlert, $ltGamma);
         }
     }
-    &.major {
-        font-size: 1.65em;
-    }
 }
 
 .bar .ui-symbol {

diff --git a/platform/commonUI/general/res/sass/controls/_controls.scss b/platform/commonUI/general/res/sass/controls/_controls.scss
@@ -166,8 +166,8 @@ label.radio.custom {
     }
 }
 
-label.checkbox.custom input:checked ~ em:before { content: "\32"; }
-label.radio.custom input:checked ~ em:before { content: "\e619"; }
+label.checkbox.custom input:checked ~ em:before { content: $glyph-icon-check; }
+label.radio.custom input:checked ~ em:before { content: $glyph-icon-bullet; }
 
 .s-menu-btn label.checkbox.custom {
     margin-left: 5px;

diff --git a/platform/commonUI/general/res/sass/controls/_menus.scss b/platform/commonUI/general/res/sass/controls/_menus.scss
@@ -120,11 +120,12 @@
 		a.menu-item-a {
             color: $colorMenuFg;
             display: block;
-            &:before {
-                color: $colorMenuIc;
-                left: $interiorMargin;
-            }
 		}
+        &:before,
+        a.menu-item-a:before {
+            color: $colorMenuIc;
+            left: $interiorMargin;
+        }
 	}
 }
 

diff --git a/platform/commonUI/general/res/sass/forms/_filter.scss b/platform/commonUI/general/res/sass/forms/_filter.scss
@@ -85,6 +85,7 @@
 .l-filter {
     $iconEdgeM: 4px;
     $iconD: $formInputH - ($iconEdgeM * 2);
+    @extend .icon-magnify;
     // Adds a magnifying glass before, holds an input and a clear button
     display: inline-block;
     position: relative;
@@ -106,7 +107,6 @@
 
     &:before {
         // Magnify glass icon
-        content:'\4d';
         left: $interiorMargin;
         @include trans-prop-nice(color, 250ms);
         pointer-events: none;

diff --git a/platform/commonUI/general/res/sass/search/_search.scss b/platform/commonUI/general/res/sass/search/_search.scss
@@ -29,9 +29,7 @@
 
 .clear-icon {
     // 'x' in circle icon
-    &:before {
-        content: '\e607';
-    }
+    @extend .icon-x-in-circle;
 }
 
 .holder-search {
@@ -41,6 +39,7 @@
 		$textInputHeight: 19px; // This is equal to the default value, 19px
 		$iconEdgeM: 4px;
 		$iconD: $treeSearchInputBarH - ($iconEdgeM*2);
+        @extend .icon-magnify;
 		font-size: 0.8em;
 		position: relative;
 
@@ -76,8 +75,6 @@
 
 		&:before {
             // Magnify glass icon
-            content:'\4d';
-            font-family: symbolsfont;
             left: $interiorMarginSm;
             @include trans-prop-nice(color, 250ms);
             pointer-events: none;

diff --git a/platform/commonUI/general/res/sass/tree/_tree.scss b/platform/commonUI/general/res/sass/tree/_tree.scss
@@ -151,7 +151,7 @@ mct-representation {
             @extend .ui-symbol;
             @include pulse($dur: 1s, $opacity0: 0.25);
             color: $colorItemTreeEditingFg;
-            content: '\70';
+            content: $glyph-icon-pencil;
             margin-right: $interiorMarginSm;
         }
         .t-object-label {

diff --git a/platform/commonUI/general/res/templates/menu/context-menu.html b/platform/commonUI/general/res/templates/menu/context-menu.html
@@ -22,17 +22,12 @@
 <div class="menu-element context-menu-wrapper mobile-disable-select" ng-controller="ContextMenuController">
     <div class="menu context-menu">
         <ul>
-
             <li ng-repeat="menuAction in menuActions"
                 ng-click="menuAction.perform()"
                 title="{{menuAction.getMetadata().description}}"
-                >
-                <span class="ui-symbol icon type-icon">
-                    {{menuAction.getMetadata().glyph}}
-                </span>
+                class="{{menuAction.getMetadata().cssclass}}">
                 {{menuAction.getMetadata().name}}
             </li>
-
         </ul>
     </div>
 </div>
diff --git a/platform/entanglement/bundle.js b/platform/entanglement/bundle.js
@@ -67,6 +67,7 @@ define([
                     "name": "Move",
                     "description": "Move object to another location.",
                     "glyph": "f",
+                    "cssclass": "icon-move",
                     "category": "contextual",
                     "implementation": MoveAction,
                     "depends": [
@@ -80,6 +81,7 @@ define([
                     "name": "Duplicate",
                     "description": "Duplicate object to another location.",
                     "glyph": "+",
+                    "cssclass": "icon-duplicate",
                     "category": "contextual",
                     "implementation": CopyAction,
                     "depends": [
@@ -96,6 +98,7 @@ define([
                     "name": "Create Link",
                     "description": "Create Link to object in another location.",
                     "glyph": "è",
+                    "cssclass": "icon-link",
                     "category": "contextual",
                     "implementation": LinkAction,
                     "depends": [
@@ -108,7 +111,7 @@ define([
                     "key": "follow",
                     "name": "Go To Original",
                     "description": "Go to the original, un-linked instance of this object.",
-                    "glyph": "ô",
+                    "glyph": "",
                     "category": "contextual",
                     "implementation": GoToOriginalAction
                 },