From 28b663ce4119a5d7fd175b1846c5b704c4ea03ad Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Mon, 18 Jul 2016 14:58:40 -0700 Subject: [PATCH] [Frontend] Glyph-related style changes to toolbars and buttons Fixes #1047 Glyph refactoring WIP for toolbar buttons; Timeline glyph refactoring continued --- .../res/sass/controls/_color-palette.scss | 8 ++-- .../general/res/sass/controls/_menus.scss | 14 ++++-- .../res/templates/controls/switcher.html | 2 - platform/core/src/actions/ActionAggregator.js | 1 + platform/features/layout/bundle.js | 4 ++ platform/features/timeline/bundle.js | 11 ++++- .../forms/res/templates/controls/button.html | 7 +-- .../forms/res/templates/controls/color.html | 45 ++++++------------- .../src/controllers/DialogButtonController.js | 1 + 9 files changed, 47 insertions(+), 46 deletions(-) diff --git a/platform/commonUI/general/res/sass/controls/_color-palette.scss b/platform/commonUI/general/res/sass/controls/_color-palette.scss index bd3ea9eb0b..1f98c3afc1 100644 --- a/platform/commonUI/general/res/sass/controls/_color-palette.scss +++ b/platform/commonUI/general/res/sass/controls/_color-palette.scss @@ -40,13 +40,15 @@ border: 1px solid transparent; color: $colorSelectedColor; display: block; - font-family: 'symbolsfont'; float: left; height: $d; width: $d; - line-height: $d; + line-height: $d * 0.9; margin: 0 ($m * 1px) ($m * 1px) 0; text-align: center; - vertical-align: middle; + &:before { + // Check mark for selected items + font-size: 0.8em; + } } .s-palette-item { diff --git a/platform/commonUI/general/res/sass/controls/_menus.scss b/platform/commonUI/general/res/sass/controls/_menus.scss index d945321136..aa3a0e70fb 100644 --- a/platform/commonUI/general/res/sass/controls/_menus.scss +++ b/platform/commonUI/general/res/sass/controls/_menus.scss @@ -36,6 +36,17 @@ margin-left: $interiorMarginSm; } + .color-swatch { + // Used in color menu buttons in toolbar + $d: 10px; + display: inline-block; + border: 1px solid rgba($colorBtnFg, 0.2); + height: $d; width: $d; + vertical-align: middle; + margin-left: $interiorMarginSm; + margin-top: -2px; + } + &:after { // Adds the downward facing 'context available / invoke menu' arrow element @include contextArrow(); @@ -52,9 +63,6 @@ .menu { left: 0; text-align: left; - //.ui-symbol.icon { - // width: 12px; - //} } } diff --git a/platform/commonUI/general/res/templates/controls/switcher.html b/platform/commonUI/general/res/templates/controls/switcher.html index e797a3121c..fb12d431ee 100644 --- a/platform/commonUI/general/res/templates/controls/switcher.html +++ b/platform/commonUI/general/res/templates/controls/switcher.html @@ -27,7 +27,6 @@ - {{ngModel.selected.name}}
@@ -35,7 +34,6 @@
  • - {{option.name}}
    • diff --git a/platform/core/src/actions/ActionAggregator.js b/platform/core/src/actions/ActionAggregator.js index 009975dadd..267c697413 100644 --- a/platform/core/src/actions/ActionAggregator.js +++ b/platform/core/src/actions/ActionAggregator.js @@ -59,6 +59,7 @@ define( * @property {string} name human-readable name for this action * @property {string} description human-readable description * @property {string} glyph character to display as icon + * @property {string} cssclass CSS class for icon, supercedes glyph * @property {ActionContext} context the context in which the action * will be performed. */ diff --git a/platform/features/layout/bundle.js b/platform/features/layout/bundle.js index 9ccce6a242..22b9ff9c10 100644 --- a/platform/features/layout/bundle.js +++ b/platform/features/layout/bundle.js @@ -139,22 +139,26 @@ define([ { "property": "fill", "glyph": "", + "cssclass": "icon-paint-bucket", "control": "color" }, { "property": "stroke", "glyph": "â", + "cssclass": "icon-line-horz", "control": "color" }, { "property": "color", "glyph": "ä", + "cssclass": "icon-T", "mandatory": true, "control": "color" }, { "property": "url", "glyph": "ã", + "cssclass": "icon-image", "control": "dialog-button", "title": "Image Properties", "dialog": { diff --git a/platform/features/timeline/bundle.js b/platform/features/timeline/bundle.js index 3b0b3e2e28..87bd1088d6 100644 --- a/platform/features/timeline/bundle.js +++ b/platform/features/timeline/bundle.js @@ -284,6 +284,7 @@ define([ "key": "values", "name": "Values", "glyph": "\u0041", + "cssclass": "icon-activity-mode", "template": valuesTemplate, "type": "mode", "uses": [ @@ -295,6 +296,7 @@ define([ "key": "timeline", "name": "Timeline", "glyph": "\u0053", + "cssclass": "icon-timeline", "type": "timeline", "description": "A time-oriented container that lets you enclose and organize other Timelines and Activities. The Timeline view provides both tabular and Gantt views as well as resource utilization graphing of Activities.", "template": timelineTemplate, @@ -329,12 +331,14 @@ define([ "items": [ { "glyph": "\u00e9", + "cssclass": "icon-plot-resource", "description": "Graph Resource Utilization", "control": "button", "method": "toggleGraph" }, { - "glyph": "\u0041", + "glyph": "icon-activity-mode", + "cssclass": "icon-activity-mode", "control": "dialog-button", "description": "Apply Activity Modes...", "title": "Apply Activity Modes", @@ -348,6 +352,7 @@ define([ }, { "glyph": "\u00e8", + "cssclass": "icon-chain-links", "description": "Edit Activity Link", "title": "Activity Link", "control": "dialog-button", @@ -361,6 +366,7 @@ define([ }, { "glyph": "\u0047", + "cssclass": "icon-gear", "description": "Edit Properties...", "control": "button", "method": "properties" @@ -373,7 +379,8 @@ define([ "method": "remove", "description": "Remove Item", "control": "button", - "glyph": "\u005a" + "glyph": "\u005a", + "cssclass": "icon-trash" } ] } diff --git a/platform/forms/res/templates/controls/button.html b/platform/forms/res/templates/controls/button.html index 8b7e3c88cc..f2aadf26b4 100644 --- a/platform/forms/res/templates/controls/button.html +++ b/platform/forms/res/templates/controls/button.html @@ -19,12 +19,9 @@ this source code distribution or the Licensing information page available at runtime from the About dialog for additional information. --> - - {{structure.text}} diff --git a/platform/forms/res/templates/controls/color.html b/platform/forms/res/templates/controls/color.html index 548cad3a3a..410392862e 100644 --- a/platform/forms/res/templates/controls/color.html +++ b/platform/forms/res/templates/controls/color.html @@ -19,54 +19,37 @@ this source code distribution or the Licensing information page available at runtime from the About dialog for additional information. --> -
    +
    - - {{structure.glyph}} - + {{structure.text}} -
    + ng-show="toggle.isActive()">
    -
    - {{ngModel[field] === 'transparent' ? '2' : '' }} + ng-if="!structure.mandatory"> +
    None
    -
    +
    - {{ngModel[field] === color ? '2' : '' }} + ng-click="ngModel[field] = color">
    diff --git a/platform/forms/src/controllers/DialogButtonController.js b/platform/forms/src/controllers/DialogButtonController.js index 4cdd5ffbbd..2782a9cfb6 100644 --- a/platform/forms/src/controllers/DialogButtonController.js +++ b/platform/forms/src/controllers/DialogButtonController.js @@ -64,6 +64,7 @@ define( // Prepare the structure for the button itself self.buttonStructure = {}; self.buttonStructure.glyph = structure.glyph; + self.buttonStructure.cssclass = structure.cssclass; self.buttonStructure.name = structure.name; self.buttonStructure.description = structure.description; self.buttonStructure.click = showDialog;