[Frontend] Refactoring glyphs to classes

charlesh88 · charlesh88 · commit 8b29ccf3afe7 · 2016-06-22T23:15:24.000-07:00
fixes #1047 Very much In-progess, s-btn and s-btn-menu refactoring
diff --git a/platform/commonUI/general/res/sass/_glyphs.scss b/platform/commonUI/general/res/sass/_glyphs.scss
@@ -6,4 +6,12 @@
 .icon {
     &.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'); }
 }
diff --git a/platform/commonUI/general/res/sass/controls/_buttons.scss b/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;
-    // Color and styling additionally in _controls.scss
+    $c: $colorKey;
+    @extend .s-btn;
+    &:before {
+        @extend .ui-symbol;
+        content: '\e901';
+        color: $colorKey;
+    }
+    &:hover:before {
+        color: pullForward($c, 10%);
+    }
 }
 
 body.desktop .mini-tab {
diff --git a/platform/commonUI/general/res/sass/controls/_controls.scss b/platform/commonUI/general/res/sass/controls/_controls.scss
@@ -539,8 +539,7 @@ textarea {
 }
 
 /******************************************************** MISC */
-.context-available,
-.s-icon-btn {
+.context-available {
     $c: $colorKey;
     color: $c;
     &:hover {
diff --git a/platform/commonUI/general/res/sass/controls/_menus.scss b/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 {
-			color: $colorMenuIc;
-		}
-		.type-icon {
+        &:before {
+            color: $colorMenuIc;
 			left: $interiorMargin;
 		}
 	}
diff --git a/platform/commonUI/general/res/sass/lists/_tabular.scss b/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 {
             }
         }
     }
-
 }
diff --git a/platform/features/layout/bundle.js b/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"
                                             }
                                         ]
diff --git a/platform/forms/res/templates/controls/button.html b/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}}
diff --git a/platform/forms/res/templates/controls/menu-button.html b/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">
-                <a href="">
-                    <span class="ui-symbol type-icon icon">
-                        {{option.glyph}}
-                    </span>
+            <li ng-click="structure.click(option.key); toggle.setState(false)"
+                ng-repeat="option in structure.options"
+                class="{{ option.cssclass }}">
                     {{option.name}}
-                </a>
             </li>
         </ul>
     </div>

Original file line number	Diff line number	Diff line change
`@@ -539,8 +539,7 @@ textarea {`
`539`	`539`	`}`
`540`	`540`
`541`	`541`	`/******************************************************** MISC */`
`542`		`-.context-available,`
`543`		`-.s-icon-btn {`
	`542`	`+.context-available {`
`544`	`543`	`$c: $colorKey;`
`545`	`544`	`color: $c;`
`546`	`545`	`&:hover {`
Original file line number	Diff line number	Diff line change
`@@ -86,12 +86,12 @@ table {`
`86`	`86`	`color: $colorIconLink;`
`87`	`87`	`font-family: symbolsfont;`
`88`	`88`	`font-size: 8px;`
`89`		`- content: "\ed";`
	`89`	`+ content: "\e906";`
`90`	`90`	`display: inline-block;`
`91`	`91`	`margin-left: $interiorMarginSm;`
`92`	`92`	`}`
`93`	`93`	`&.sort.desc:after {`
`94`		`- content: "\ec";`
	`94`	`+ content: "\e907";`
`95`	`95`	`}`
`96`	`96`	`}`
`97`	`97`	`&.sortable {`
`@@ -119,19 +119,12 @@ table {`
`119`	`119`	`}`
`120`	`120`	`}`
`121`	`121`	`&.filterable {`
`122`		`- thead, .thead {`
`123`		`- tr.s-filters, .tr.s-filters {`
`124`		`- th, .th {`
`125`		`- //border-left: none;`
`126`		`- }`
`127`		`- }`
`128`		`- }`
`129`	`122`	`tbody, .tbody {`
`130`	`123`	`top: $tabularHeaderH * 2;`
`131`	`124`	`}`
`132`	`125`	`input[type="text"] {`
`133`	`126`	`box-sizing: border-box;`
`134`		`- width: 100%; //50px;`
	`127`	`+ width: 100%;`
`135`	`128`	`}`
`136`	`129`	`}`
`137`	`130`
`@@ -202,5 +195,4 @@ table {`
`202`	`195`	`}`
`203`	`196`	`}`
`204`	`197`	`}`
`205`		`-`
`206`	`198`	`}`
Original file line number	Diff line number	Diff line change
`@@ -110,26 +110,31 @@ define([`
`110`	`110`	`{`
`111`	`111`	`"method": "order",`
`112`	`112`	`"glyph": "á",`
	`113`	`+ "cssclass": "i-layers",`
`113`	`114`	`"control": "menu-button",`
`114`	`115`	`"options": [`
`115`	`116`	`{`
`116`	`117`	`"name": "Move to Top",`
`117`	`118`	`"glyph": "\u00eb",`
	`119`	`+ "cssclass": "i-layers-move-to-top",`
`118`	`120`	`"key": "top"`
`119`	`121`	`},`
`120`	`122`	`{`
`121`	`123`	`"name": "Move Up",`
`122`	`124`	`"glyph": "\u005e",`
	`125`	`+ "cssclass": "i-layers-move-up",`
`123`	`126`	`"key": "up"`
`124`	`127`	`},`
`125`	`128`	`{`
`126`	`129`	`"name": "Move Down",`
`127`	`130`	`"glyph": "\u0076",`
	`131`	`+ "cssclass": "i-layers-move-down",`
`128`	`132`	`"key": "down"`
`129`	`133`	`},`
`130`	`134`	`{`
`131`	`135`	`"name": "Move to Bottom",`
`132`	`136`	`"glyph": "\u00ee",`
	`137`	`+ "cssclass": "i-layers-move-to-bottom",`
`133`	`138`	`"key": "bottom"`
`134`	`139`	`}`
`135`	`140`	`]`