From e93a90a782138b3382270cd984ea2842486eb0cd Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Thu, 23 Jun 2016 11:28:07 -0700 Subject: [PATCH] [Frontend] Refactoring glyphs to classes fixes #1047 Very much In-progess, classes for all symbols added to glyphs.scss; .menu cleaned up; --- .../commonUI/general/res/sass/_glyphs.scss | 106 ++++++++++++++++-- .../commonUI/general/res/sass/_icons.scss | 1 - .../general/res/sass/controls/_menus.scss | 31 ++--- .../res/templates/controls/action-button.html | 3 - platform/features/layout/bundle.js | 20 ++-- .../res/templates/controls/menu-button.html | 4 +- 6 files changed, 113 insertions(+), 52 deletions(-) diff --git a/platform/commonUI/general/res/sass/_glyphs.scss b/platform/commonUI/general/res/sass/_glyphs.scss index 2a6530eaba..00d48c1b86 100644 --- a/platform/commonUI/general/res/sass/_glyphs.scss +++ b/platform/commonUI/general/res/sass/_glyphs.scss @@ -4,25 +4,107 @@ } } -[class*="icon-"] { - @extend .ui-symbol; +[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'); } } -.icon-pencil { @include glyph('\e1024'); } -.icon-new-window { @include glyph('\e1021'); } +.icon-alert-rect { @include glyph('\e900'); } +.icon-alert-triangle { @include glyph('\e901'); } +.icon-arrow-down { @include glyph('\e902'); } +.icon-arrow-left { @include glyph('\e903'); } +.icon-arrow-right { @include glyph('\e904'); } +.icon-arrow-double-up { @include glyph('\e905'); } +.icon-arrow-tall-up { @include glyph('\e906'); } +.icon-arrow-tall-down { @include glyph('\e907'); } +.icon-arrow-double-down { @include glyph('\e908'); } +.icon-arrow-up { @include glyph('\e909'); } +.icon-asterisk { @include glyph('\e910'); } +.icon-bell { @include glyph('\e911'); } +.icon-box { @include glyph('\e912'); } +.icon-box-with-arrow { @include glyph('\e913'); } +.icon-check { @include glyph('\e914'); } +.icon-connectivity { @include glyph('\e915'); } +.icon-database-in-brackets { @include glyph('\e916'); } +.icon-eye-open { @include glyph('\e917'); } +.icon-gear { @include glyph('\e918'); } +.icon-hourglass { @include glyph('\e919'); } +.icon-info { @include glyph('\e920'); } +.icon-link { @include glyph('\e921'); } +.icon-lock { @include glyph('\e922'); } +.icon-minus { @include glyph('\e923'); } +.icon-people { @include glyph('\e924'); } +.icon-person { @include glyph('\e925'); } +.icon-plus { @include glyph('\e926'); } +.icon-trash { @include glyph('\e927'); } +.icon-x { @include glyph('\e928'); } +.icon-arrows-out { @include glyph('\e1000'); } +.icon-arrows-right-left { @include glyph('\e1001'); } +.icon-arrows-up-down { @include glyph('\e1002'); } +.icon-box-with-dashed-lines { @include glyph('\e1003'); } +.icon-bullet { @include glyph('\e1004'); } +.icon-calendar { @include glyph('\e1005'); } +.icon-chain-links { @include glyph('\e1006'); } +.icon-collapse-pane-left { @include glyph('\e1007'); } +.icon-collapse-pane-right { @include glyph('\e1008'); } +.icon-download { @include glyph('\e1009'); } +.icon-duplicate { @include glyph('\e1010'); } +.icon-folder-new { @include glyph('\e1011'); } .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'); } - &.i-layers-move-up { @include glyph('\e909'); } - &.i-layers-move-down { @include glyph('\e902'); } - &.i-layers-move-to-bottom { @include glyph('\e908'); } -} \ No newline at end of file +.icon-layers { @include glyph('\e1014'); } +.icon-line-horz { @include glyph('\e1015'); } +.icon-magnify { @include glyph('\e1016'); } +.icon-magnify-in { @include glyph('\e1017'); } +.icon-magnify-out { @include glyph('\e1018'); } +.icon-menu-hamburger { @include glyph('\e1019'); } +.icon-move { @include glyph('\e1020'); } +.icon-new-window { @include glyph('\e1021'); } +.icon-paint-bucket { @include glyph('\e1022'); } +.icon-pause { @include glyph('\e1023'); } +.icon-pencil { @include glyph('\e1024'); } +.icon-play { @include glyph('\e1025'); } +.icon-plot-resource { @include glyph('\e1026'); } +.icon-pointer-left { @include glyph('\e1027'); } +.icon-pointer-right { @include glyph('\e1028'); } +.icon-refresh { @include glyph('\e1029'); } +.icon-save { @include glyph('\e1030'); } +.icon-sine { @include glyph('\e1031'); } +.icon-T { @include glyph('\e1032'); } +.icon-thumbs-strip { @include glyph('\e1033'); } +.icon-two-parts-both { @include glyph('\e1034'); } +.icon-two-parts-one-only { @include glyph('\e1035'); } +.icon-x-in-circle { @include glyph('\e1036'); } +.icon-activity { @include glyph('\e1100'); } +.icon-activity-mode { @include glyph('\e1101'); } +.icon-autoflow-tabular { @include glyph('\e1102'); } +.icon-clock { @include glyph('\e1103'); } +.icon-database { @include glyph('\e1104'); } +.icon-database-query { @include glyph('\e1105'); } +.icon-dataset { @include glyph('\e1106'); } +.icon-datatable { @include glyph('\e1107'); } +.icon-dictionary { @include glyph('\e1108'); } +.icon-folder { @include glyph('\e1109'); } +.icon-image { @include glyph('\e1110'); } +.icon-layout { @include glyph('\e1111'); } +.icon-object { @include glyph('\e1112'); } +.icon-object-unknown { @include glyph('\e1113'); } +.icon-packet { @include glyph('\e1114'); } +.icon-page { @include glyph('\e1115'); } +.icon-session { @include glyph('\e1116'); } +.icon-tabular { @include glyph('\e1117'); } +.icon-tabular-lad { @include glyph('\e1118'); } +.icon-tabular-lad-set { @include glyph('\e1119'); } +.icon-tabular-realtime { @include glyph('\e1120'); } +.icon-tabular-scrolling { @include glyph('\e1121'); } +.icon-telemetry { @include glyph('\e1122'); } +.icon-telemetry-panel { @include glyph('\e1123'); } +.icon-timeline { @include glyph('\e1124'); } +.icon-timer { @include glyph('\e1125'); } +.icon-topic { @include glyph('\e1126'); } \ No newline at end of file diff --git a/platform/commonUI/general/res/sass/_icons.scss b/platform/commonUI/general/res/sass/_icons.scss index 3a2622327c..baf3892290 100644 --- a/platform/commonUI/general/res/sass/_icons.scss +++ b/platform/commonUI/general/res/sass/_icons.scss @@ -38,7 +38,6 @@ } } -[class^="i-"], .ui-symbol.icon { color: $colorKey; font-size: inherit; diff --git a/platform/commonUI/general/res/sass/controls/_menus.scss b/platform/commonUI/general/res/sass/controls/_menus.scss index 459f87cb04..057306f9d0 100644 --- a/platform/commonUI/general/res/sass/controls/_menus.scss +++ b/platform/commonUI/general/res/sass/controls/_menus.scss @@ -98,32 +98,21 @@ &:hover { background: $colorMenuHovBg; color: $colorMenuHovFg; + &:before { + color: $colorMenuHovIc; + } } + &:before { + @extend .ui-symbol; + @extend .type-icon; + @extend .icon; + display: inline-block; + 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, diff --git a/platform/commonUI/general/res/templates/controls/action-button.html b/platform/commonUI/general/res/templates/controls/action-button.html index be279549f2..fac7fa63f2 100644 --- a/platform/commonUI/general/res/templates/controls/action-button.html +++ b/platform/commonUI/general/res/templates/controls/action-button.html @@ -23,9 +23,6 @@ ng-class="{ labeled: parameters.labeled }" title="{{parameters.action.getMetadata().description}}" ng-click="parameters.action.perform()"> - {{parameters.action.getMetadata().name}} diff --git a/platform/features/layout/bundle.js b/platform/features/layout/bundle.js index 9a575cdd99..26689e207a 100644 --- a/platform/features/layout/bundle.js +++ b/platform/features/layout/bundle.js @@ -83,22 +83,22 @@ define([ "options": [ { "name": "Box", - "glyph": "\u00e0", + "cssclass": "icon-box", "key": "fixed.box" }, { "name": "Line", - "glyph": "\u00e2", + "cssclass": "icon-line-horz", "key": "fixed.line" }, { "name": "Text", - "glyph": "\u00e4", + "cssclass": "icon-T", "key": "fixed.text" }, { "name": "Image", - "glyph": "\u00e3", + "cssclass": "icon-image", "key": "fixed.image" } ] @@ -115,26 +115,22 @@ define([ "options": [ { "name": "Move to Top", - "glyph": "\u00eb", - "cssclass": "i-layers-move-to-top", + "cssclass": "icon-arrow-double-up", "key": "top" }, { "name": "Move Up", - "glyph": "\u005e", - "cssclass": "i-layers-move-up", + "cssclass": "icon-arrow-up", "key": "up" }, { "name": "Move Down", - "glyph": "\u0076", - "cssclass": "i-layers-move-down", + "cssclass": "icon-arrow-down", "key": "down" }, { "name": "Move to Bottom", - "glyph": "\u00ee", - "cssclass": "i-layers-move-to-bottom", + "cssclass": "icon-arrow-double-down", "key": "bottom" } ] diff --git a/platform/forms/res/templates/controls/menu-button.html b/platform/forms/res/templates/controls/menu-button.html index 1edb477e6f..eab3e728af 100644 --- a/platform/forms/res/templates/controls/menu-button.html +++ b/platform/forms/res/templates/controls/menu-button.html @@ -23,13 +23,11 @@ ng-controller="ClickAwayController as toggle"> - - {{structure.text}} -
+