[Frontend] Refactoring glyphs to classes

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

Author: charlesh88

platform/commonUI/browse/bundle.js

@@ -218,15 +218,14 @@ 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"
                 }
             ],

platform/commonUI/browse/src/windowing/FullscreenAction.js

@@ -51,7 +51,8 @@ define(
             // based on whether or not we are currently
             // full screen.
             var metadata = Object.create(FullscreenAction);
-            metadata.glyph = screenfull.isFullscreen ? "_" : "z";
+            //metadata.glyph = screenfull.isFullscreen ? "_" : "z";
+            metadata.cssclass = screenfull.isFullscreen ? "icon-fullscreen-expand" : "icon-fullscreen-collapse";
             metadata.description = screenfull.isFullscreen ?
                 EXIT_FULLSCREEN : ENTER_FULLSCREEN;
             metadata.group = "windowing";

platform/commonUI/edit/bundle.js

@@ -172,7 +172,8 @@ define([
                     ],
                     "description": "Edit",
                     "category": "view-control",
-                    "glyph": "p"
+                    "glyph": "p",
+                    "cssclass": "icon-pencil"
                 },
                 {
                     "key": "properties",
@@ -182,6 +183,7 @@ define([
                     ],
                     "implementation": PropertiesAction,
                     "glyph": "p",
+                    "cssclass": "icon-pencil",
                     "name": "Edit Properties...",
                     "description": "Edit properties of this object.",
                     "depends": [

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

@@ -1,5 +1,11 @@
 @mixin glyph($unicode) {
-    &:before { content: $unicode; }
+    &:before {
+        content: $unicode;
+    }
+}
+
+[class*="icon-"] {
+    @extend .ui-symbol;
 }
 
 .ui-symbol,
@@ -8,6 +14,11 @@
     &.context-available { @include glyph('\e902'); }
 }
 
+.icon-pencil {  @include glyph('\e1024'); }
+.icon-new-window {  @include glyph('\e1021'); }
+.icon-fullscreen-collapse {  @include glyph('\e1012'); }
+.icon-fullscreen-expand {  @include glyph('\e1013'); }
+
 /*************************************** MENUS */
 .icon-menu ul li {
     &.i-layers-move-to-top { @include glyph('\e905'); }

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

@@ -33,24 +33,26 @@
 	&.type-icon {
 		color: $colorObjHdrIc;
 	}
-	&.icon {
-		color: $colorKey;
-        font-size: inherit;
-		&.alert {
-			color: $colorAlert;
-			&:hover {
-				color: lighten($colorAlert, $ltGamma);
-			}
-		}
-		&.major {
-			font-size: 1.65em;
-		}
-	}
 	&.icon-calendar:after {
 		content: "\e605";
 	}
 }
 
+[class^="i-"],
+.ui-symbol.icon {
+    color: $colorKey;
+    font-size: inherit;
+    &.alert {
+        color: $colorAlert;
+        &:hover {
+            color: lighten($colorAlert, $ltGamma);
+        }
+    }
+    &.major {
+        font-size: 1.65em;
+    }
+}
+
 .bar .ui-symbol {
 	display: inline-block;
 }

platform/commonUI/general/res/sass/controls/_buttons.scss

@@ -121,6 +121,7 @@ $pad: $interiorMargin * $baseRatio;
         @extend .ui-symbol;
         content: '\e901';
         color: $colorKey;
+        margin-right: $interiorMargin;
     }
     &:hover:before {
         color: pullForward($c, 10%);

platform/commonUI/general/res/templates/controls/action-button.html

@@ -19,13 +19,13 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-<a class="s-btn key-{{parameters.action.getMetadata().key}}"
+<a class="s-btn key-{{parameters.action.getMetadata().key}} {{parameters.action.getMetadata().cssclass}}"
    ng-class="{ labeled: parameters.labeled }"
    title="{{parameters.action.getMetadata().description}}"
    ng-click="parameters.action.perform()">
-    <span class="ui-symbol icon">
+    <!--span class="ui-symbol icon">
         {{parameters.action.getMetadata().glyph}}
-    </span>
+    </span-->
     <span class="title-label" ng-if="parameters.labeled">
         {{parameters.action.getMetadata().name}}
     </span>

platform/forms/res/templates/controls/button.html

@@ -22,9 +22,9 @@
 <a class="s-btn"
    ng-class="{ labeled: structure.text, structure.cssclass }"
    ng-click="structure.click()">
-    <span class="ui-symbol icon">
+    <!--span class="ui-symbol icon">
         {{structure.glyph}}
-    </span>
+    </span-->
     <span class="title-label" ng-if="structure.text">
         {{structure.text}}
     </span>