[Frontend] Refactoring glyphs to classes

fixes #1047
Very much In-progess, s-btn and
s-btn-menu refactoring

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

@@ -7,3 +7,11 @@
     &.mobile-info { @include glyph('\e920'); }
     &.context-available { @include glyph('\e902'); }
 }
+
+/*************************************** MENUS */
+.icon-menu ul li {
+    &.i-layers-move-to-top { @include glyph('\e905'); }
+    &.i-layers-move-up { @include glyph('\e909'); }
+    &.i-layers-move-down { @include glyph('\e902'); }
+    &.i-layers-move-to-bottom { @include glyph('\e908'); }
+}

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

@@ -54,7 +54,7 @@ $pad: $interiorMargin * $baseRatio;
     &.key-edit,
     &.key-properties {
         $bg: $colorBtnMajorBg;
-        $hc: lighten($bg, 10%);
+        $hc: pullForward($bg, 10%);
         @include btnSubtle($bg, $hc, $colorBtnMajorFg, $colorBtnMajorFg);
     }
 
@@ -115,8 +115,16 @@ $pad: $interiorMargin * $baseRatio;
 }
 
 .s-icon-btn {
-    @extend .ui-symbol;
+    $c: $colorKey;
-    // Color and styling additionally in _controls.scss
+    @extend .s-btn;
+    &:before {
+        @extend .ui-symbol;
+        content: '\e901';
+        color: $colorKey;
+    }
+    &:hover:before {
+        color: pullForward($c, 10%);
+    }
 }
 
 body.desktop .mini-tab {

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

@@ -539,8 +539,7 @@ textarea {
 }
 
 /******************************************************** MISC */
-.context-available,
+.context-available {
-.s-icon-btn {
     $c: $colorKey;
     color: $c;
     &:hover {

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

@@ -29,7 +29,7 @@
 	}
 
 	.icon {
-		font-size: 120%;
+		font-size: 16px; //120%;
 	}
 
 	.title-label {
@@ -86,7 +86,8 @@
 		li {
 			box-sizing: border-box;
 			border-top: 1px solid pullForward($colorMenuBg, 10%);
-			color: pullForward($colorMenuBg, 60%);
+            color: $colorMenuFg;
+			//color: pullForward($colorMenuBg, 60%);
 			line-height: $menuLineH;
 			padding: $interiorMarginSm $interiorMargin * 2 $interiorMarginSm ($interiorMargin * 2) + $treeTypeIconW;
 			position: relative;
@@ -97,31 +98,46 @@
 			&:hover {
 				background: $colorMenuHovBg;
 				color: $colorMenuHovFg;
-				.icon {
-					color: $colorMenuHovIc;
-				}
-			}
-			.type-icon {
-				left: $interiorMargin * 2;
 			}
 		}
 	}
 }
 
+.icon-menu {
+    @extend .menu;
+    ul li {
+        &:hover {
+            &:before {
+                color: $colorMenuHovIc;
+            }
+        }
+        &:before {
+            @extend .ui-symbol;
+            @extend .type-icon;
+            @extend .icon;
+            content: '';
+            display: inline-block;
+            left: $interiorMargin * 2;
+        }
+
+    }
+
+}
+
 .menu,
+.icon-menu,
 .context-menu,
 .super-menu,
 .s-menu-btn .menu {
 	pointer-events: auto;
 	ul li {
 		a {
-			color: $colorMenuFg;
+			// TO-DO: factor this <a> out
+            color: $colorMenuFg;
             display: block;
 		}
-		.icon {
+        &:before {
-			color: $colorMenuIc;
+            color: $colorMenuIc;
-		}
-		.type-icon {
 			left: $interiorMargin;
 		}
 	}

platform/commonUI/general/res/sass/lists/_tabular.scss

@@ -86,12 +86,12 @@ table {
 					color: $colorIconLink;
 					font-family: symbolsfont;
 					font-size: 8px;
-					content: "\ed";
+					content: "\e906";
 					display: inline-block;
 					margin-left: $interiorMarginSm;
 				}
 				&.sort.desc:after {
-					content: "\ec";
+					content: "\e907";
 				}
 			}
 			&.sortable {
@@ -119,19 +119,12 @@ table {
 		}
 	}
 	&.filterable {
-		thead, .thead {
-			tr.s-filters, .tr.s-filters {
-				th, .th {
-					//border-left: none;
-				}
-			}
-		}
 		tbody, .tbody {
 			top: $tabularHeaderH * 2;
 		}
 		input[type="text"] {
 			box-sizing: border-box;
-			width: 100%; //50px;
+			width: 100%;
 		}
 	}
 
@@ -202,5 +195,4 @@ table {
             }
         }
     }
-
 }

platform/features/layout/bundle.js

@@ -110,26 +110,31 @@ define([
                                     {
                                         "method": "order",
                                         "glyph": "á",
+                                        "cssclass": "i-layers",
                                         "control": "menu-button",
                                         "options": [
                                             {
                                                 "name": "Move to Top",
                                                 "glyph": "\u00eb",
+                                                "cssclass": "i-layers-move-to-top",
                                                 "key": "top"
                                             },
                                             {
                                                 "name": "Move Up",
                                                 "glyph": "\u005e",
+                                                "cssclass": "i-layers-move-up",
                                                 "key": "up"
                                             },
                                             {
                                                 "name": "Move Down",
                                                 "glyph": "\u0076",
+                                                "cssclass": "i-layers-move-down",
                                                 "key": "down"
                                             },
                                             {
                                                 "name": "Move to Bottom",
                                                 "glyph": "\u00ee",
+                                                "cssclass": "i-layers-move-to-bottom",
                                                 "key": "bottom"
                                             }
                                         ]

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

@@ -20,7 +20,7 @@
  at runtime from the About dialog for additional information.
 -->
 <a class="s-btn"
-   ng-class="{ labeled: structure.text }"
+   ng-class="{ labeled: structure.text, structure.cssclass }"
    ng-click="structure.click()">
     <span class="ui-symbol icon">
         {{structure.glyph}}

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

@@ -19,25 +19,22 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-<div class="s-menu-btn menu-element"
+<div class="s-menu-btn menu-element {{ structure.cssclass }}"
      ng-controller="ClickAwayController as toggle">
 
     <span class="l-click-area" ng-click="toggle.toggle()"></span>
 
-    <span class="ui-symbol icon">{{structure.glyph}}</span>
+    <!--<span class="ui-symbol icon">{{structure.glyph}}</span>-->
     <span class="title-label" ng-if="structure.text">
         {{structure.text}}
     </span>
 
-    <div class="menu" ng-show="toggle.isActive()">
+    <div class="menu icon-menu" ng-show="toggle.isActive()">
         <ul>
-            <li ng-click="structure.click(option.key); toggle.setState(false)" ng-repeat="option in structure.options">
+            <li ng-click="structure.click(option.key); toggle.setState(false)"
-                <a href="">
+                ng-repeat="option in structure.options"
-                    <span class="ui-symbol type-icon icon">
+                class="{{ option.cssclass }}">
-                        {{option.glyph}}
-                    </span>
                     {{option.name}}
-                </a>
             </li>
         </ul>
     </div>