From 18d9f3d6b2060cf837311187b0355ca45ee934a9 Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Thu, 23 Jun 2016 15:14:22 -0700 Subject: [PATCH] [Frontend] Refactoring glyphs to classes fixes #1047 Very much In-progess: convert some controls; --- .../browse/res/templates/back-arrow.html | 5 +-- .../browse/res/templates/menu-arrow.html | 2 +- platform/commonUI/edit/bundle.js | 4 +-- .../commonUI/general/res/sass/_glyphs.scss | 9 +++--- .../general/res/sass/controls/_buttons.scss | 32 +++++++------------ .../general/res/sass/controls/_controls.scss | 6 ++++ .../general/res/sass/controls/_menus.scss | 13 +++----- 7 files changed, 32 insertions(+), 39 deletions(-) diff --git a/platform/commonUI/browse/res/templates/back-arrow.html b/platform/commonUI/browse/res/templates/back-arrow.html index f2dde4ebe8..276a716089 100644 --- a/platform/commonUI/browse/res/templates/back-arrow.html +++ b/platform/commonUI/browse/res/templates/back-arrow.html @@ -20,11 +20,8 @@ at runtime from the About dialog for additional information. --> - - - { diff --git a/platform/commonUI/browse/res/templates/menu-arrow.html b/platform/commonUI/browse/res/templates/menu-arrow.html index 21d8aba06d..ea005d6a7e 100644 --- a/platform/commonUI/browse/res/templates/menu-arrow.html +++ b/platform/commonUI/browse/res/templates/menu-arrow.html @@ -21,6 +21,6 @@ --> - \ No newline at end of file diff --git a/platform/commonUI/edit/bundle.js b/platform/commonUI/edit/bundle.js index e14f66e7c3..7b0bf0384c 100644 --- a/platform/commonUI/edit/bundle.js +++ b/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": [ diff --git a/platform/commonUI/general/res/sass/_glyphs.scss b/platform/commonUI/general/res/sass/_glyphs.scss index 00d48c1b86..bd3ef45e78 100644 --- a/platform/commonUI/general/res/sass/_glyphs.scss +++ b/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'); } diff --git a/platform/commonUI/general/res/sass/controls/_buttons.scss b/platform/commonUI/general/res/sass/controls/_buttons.scss index 21262a1a6a..afa09aada6 100644 --- a/platform/commonUI/general/res/sass/controls/_buttons.scss +++ b/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; diff --git a/platform/commonUI/general/res/sass/controls/_controls.scss b/platform/commonUI/general/res/sass/controls/_controls.scss index d22000d9dc..6e2faff937 100644 --- a/platform/commonUI/general/res/sass/controls/_controls.scss +++ b/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 { diff --git a/platform/commonUI/general/res/sass/controls/_menus.scss b/platform/commonUI/general/res/sass/controls/_menus.scss index 057306f9d0..b7863f10fd 100644 --- a/platform/commonUI/general/res/sass/controls/_menus.scss +++ b/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;