[Frontend] Refactoring glyphs to classes

fixes #1047
Very much In-progess: convert some controls;

platform/commonUI/browse/res/templates/back-arrow.html

@@ -20,11 +20,8 @@
  at runtime from the About dialog for additional information.
 -->
 
-<!-- Back Arrow Icon used on mobile-->
-<a
-   class='type-icon icon ui-symbol s-back'
+<a class='type-icon icon ui-symbol s-back'
    ng-show="context.getPath().length > 2"
    ng-click="context.getParent().getCapability('action').perform('navigate')">
-    {
 </a>
 

platform/commonUI/browse/res/templates/menu-arrow.html

@@ -21,6 +21,6 @@
 -->
 
 <span ng-controller="MenuArrowController as menuArrow">
-    <a class='ui-symbol context-available'
+    <a class='context-available'
        ng-click='menuArrow.showMenu($event)'></a>
 </span>

platform/commonUI/edit/bundle.js

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

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

@@ -1,18 +1,19 @@
 @mixin glyph($unicode) {
     &:before {
         content: $unicode;
+        font-family: 'symbolsfont';
     }
 }
 
-[class*="icon-"]:before {
-    font-family: 'symbolsfont';
-}
+//[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'); }
+    //&.context-available { @include glyph('\e902'); }
 }
 
 .icon-alert-rect {  @include glyph('\e900'); }

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

@@ -50,18 +50,14 @@ $pad: $interiorMargin * $baseRatio;
         padding: 0 ($pad / $baseRatio) / 2;
     }
 
-    &.major,
-    &.key-edit,
-    &.key-properties {
+    &.major {
         $bg: $colorBtnMajorBg;
         $hc: pullForward($bg, 10%);
         @include btnSubtle($bg, $hc, $colorBtnMajorFg, $colorBtnMajorFg);
     }
 
-    &.t-save:before {
-        content:'\e612';
-        font-family: symbolsfont;
-        margin-right: $interiorMarginSm;
+    &.t-save {
+        @extend .icon-save;
     }
     &.t-save-as:before {
         content:'\e612';
@@ -69,14 +65,12 @@ $pad: $interiorMargin * $baseRatio;
         margin-right: $interiorMarginSm;
     }
     &.t-cancel {
+        @extend .icon-x;
         .title-label { display: none; }
-        &:before {
-            content:'\78';
-            font-family: symbolsfont;
-        }
     }
 
     &.pause-play {
+        // TO-DO: glyph refactoring
         .icon:before {
             content: "\0000F1";
         }
@@ -98,11 +92,7 @@ $pad: $interiorMargin * $baseRatio;
     }
 
     &.t-export {
-        &:before {
-            @extend .ui-symbol;
-            @extend .icon;
-            content: '\e623';
-        }
+        @extend .icon-download;
     }
 
     .icon {
@@ -115,6 +105,7 @@ $pad: $interiorMargin * $baseRatio;
 }
 
 .s-icon-btn {
+    // TO-DO: glyph refactoring
     $c: $colorKey;
     @extend .s-btn;
     &:before {
@@ -189,7 +180,8 @@ body.desktop .mini-tab {
         // |<
         text-align: right;
         &:before {
-            content:'\e903'; // Collapse left icon e613
+            //content:'\e903'; // Collapse left icon e613
+            content: '\e903';
             right: $iconInnerLR;
         }
         &.collapsed {
@@ -246,9 +238,9 @@ body.desktop .mini-tab-icon {
         display: inherit;
     }
 
-    &:before {
-        content: '\78'; // X icon
-    }
+    //&:before {
+    //    content: '\78'; // X icon
+    //}
 
     &:hover {
         color: $colorKey;

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

@@ -289,6 +289,11 @@ input[type="search"] {
     }
 }
 
+.s-back {
+    // Nav to parent arrow
+    @extend .icon-pointer-left;
+}
+
 /******************************************************** PROGRESS BAR */
 @include keyframes(progress) {
     100% { background-position: $progressBarStripeW center; }
@@ -540,6 +545,7 @@ textarea {
 
 /******************************************************** MISC */
 .context-available {
+    @extend .icon-arrow-down;
     $c: $colorKey;
     color: $c;
     &:hover {

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

@@ -43,11 +43,7 @@
 	}
 
 	&.create-btn {
-		&:before {
-			content:'\2b';
-			display: inline;
-			font-family: symbolsfont;
-		}
+        @extend .icon-plus;
 		.title-label {
 			font-size: 1rem;
 		}
@@ -56,9 +52,9 @@
 	.menu {
 		left: 0;
 		text-align: left;
-		.ui-symbol.icon {
-			width: 12px;
-		}
+		//.ui-symbol.icon {
+		//	width: 12px;
+		//}
 	}
 }
 
@@ -77,6 +73,7 @@
 }
 
 .menu {
+    // TO-DO: reduce size of icons
 	@extend .s-menu;
 	display: block;
 	position: absolute;