From 8b29ccf3afe70e73efe90b7558758e4cf9124d9a Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Wed, 22 Jun 2016 23:15:24 -0700 Subject: [PATCH] [Frontend] Refactoring glyphs to classes fixes #1047 Very much In-progess, s-btn and s-btn-menu refactoring --- .../commonUI/general/res/sass/_glyphs.scss | 8 ++++ .../general/res/sass/controls/_buttons.scss | 14 +++++-- .../general/res/sass/controls/_controls.scss | 3 +- .../general/res/sass/controls/_menus.scss | 42 +++++++++++++------ .../general/res/sass/lists/_tabular.scss | 14 ++----- platform/features/layout/bundle.js | 5 +++ .../forms/res/templates/controls/button.html | 2 +- .../res/templates/controls/menu-button.html | 15 +++---- 8 files changed, 64 insertions(+), 39 deletions(-) diff --git a/platform/commonUI/general/res/sass/_glyphs.scss b/platform/commonUI/general/res/sass/_glyphs.scss index 4a3bbb8913..b28cce5ed4 100644 --- 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'); } } \ No newline at end of file diff --git a/platform/commonUI/general/res/sass/controls/_buttons.scss b/platform/commonUI/general/res/sass/controls/_buttons.scss index ec53c88dc8..24507eea98 100644 --- 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 index f1fe17be8c..d22000d9dc 100644 --- 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 index a1f21916b2..459f87cb04 100644 --- 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 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 index b80a855d3d..26401f9954 100644 --- 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 { } } } - } \ No newline at end of file diff --git a/platform/features/layout/bundle.js b/platform/features/layout/bundle.js index 21a0f8f263..9a575cdd99 100644 --- 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 index 149fc0df67..cf97f42021 100644 --- 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. --> {{structure.glyph}} diff --git a/platform/forms/res/templates/controls/menu-button.html b/platform/forms/res/templates/controls/menu-button.html index dc7ab9e14c..1edb477e6f 100644 --- 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. --> -
- {{structure.glyph}} + {{structure.text}} -
+