ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-01-27 14:49:28 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

[Frontend] Glyph-related style changes to toolbars and buttons

Browse Source 
Fixes #1047
Glyph refactoring  WIP for toolbar buttons;
Timeline glyph refactoring continued
This commit is contained in:
Charles Hacskaylo 2016-07-18 14:58:40 -07:00
parent a9326f572f
commit 28b663ce41
9 changed files with 47 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
platform/commonUI/general/res/sass/controls/_color-palette.scss
View File

@ -40,13 +40,15 @@
border: 1px solid transparent; border: 1px solid transparent;
color: $colorSelectedColor; color: $colorSelectedColor;
display: block; display: block;
font-family: 'symbolsfont';
float: left; float: left;
height: $d; width: $d; height: $d; width: $d;
line-height: $d; line-height: $d * 0.9;
margin: 0 ($m * 1px) ($m * 1px) 0; margin: 0 ($m * 1px) ($m * 1px) 0;
text-align: center; text-align: center;
vertical-align: middle; &:before {
// Check mark for selected items
font-size: 0.8em;
}
} }
.s-palette-item { .s-palette-item {

14
platform/commonUI/general/res/sass/controls/_menus.scss
View File

@ -36,6 +36,17 @@
margin-left: $interiorMarginSm; 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 { &:after {
// Adds the downward facing 'context available / invoke menu' arrow element // Adds the downward facing 'context available / invoke menu' arrow element
@include contextArrow(); @include contextArrow();
@ -52,9 +63,6 @@
.menu { .menu {
left: 0; left: 0;
text-align: left; text-align: left;
//.ui-symbol.icon {
// width: 12px;
//}
} }
} }

2
platform/commonUI/general/res/templates/controls/switcher.html
View File

@ -27,7 +27,6 @@
<span class="l-click-area" <span class="l-click-area"
ng-click="toggle.toggle()" ng-click="toggle.toggle()"
title="{{ngModel.selected.name}}"></span> title="{{ngModel.selected.name}}"></span>
<!--span class="ui-symbol icon type-icon">{{ngModel.selected.glyph}}</span-->
<span class="title-label">{{ngModel.selected.name}}</span> <span class="title-label">{{ngModel.selected.name}}</span>
<div class="menu" ng-show="toggle.isActive()"> <div class="menu" ng-show="toggle.isActive()">
@ -35,7 +34,6 @@
<li ng-repeat="option in view" <li ng-repeat="option in view"
ng-click="ngModel.selected = option; toggle.setState(false)" ng-click="ngModel.selected = option; toggle.setState(false)"
class="{{option.cssclass}}"> class="{{option.cssclass}}">
<!--span class="type-icon icon">{{option.glyph}}</span-->
{{option.name}} {{option.name}}
</li> </li>
</ul> </ul>

1
platform/core/src/actions/ActionAggregator.js
View File

@ -59,6 +59,7 @@ define(
* @property {string} name human-readable name for this action * @property {string} name human-readable name for this action
* @property {string} description human-readable description * @property {string} description human-readable description
* @property {string} glyph character to display as icon * @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 * @property {ActionContext} context the context in which the action
* will be performed. * will be performed.
*/ */

4
platform/features/layout/bundle.js
View File

@ -139,22 +139,26 @@ define([
{ {
"property": "fill", "property": "fill",
"glyph": "", "glyph": "",
"cssclass": "icon-paint-bucket",
"control": "color" "control": "color"
}, },
{ {
"property": "stroke", "property": "stroke",
"glyph": "â", "glyph": "â",
"cssclass": "icon-line-horz",
"control": "color" "control": "color"
}, },
{ {
"property": "color", "property": "color",
"glyph": "ä", "glyph": "ä",
"cssclass": "icon-T",
"mandatory": true, "mandatory": true,
"control": "color" "control": "color"
}, },
{ {
"property": "url", "property": "url",
"glyph": "ã", "glyph": "ã",
"cssclass": "icon-image",
"control": "dialog-button", "control": "dialog-button",
"title": "Image Properties", "title": "Image Properties",
"dialog": { "dialog": {

11
platform/features/timeline/bundle.js
View File

@ -284,6 +284,7 @@ define([
"key": "values", "key": "values",
"name": "Values", "name": "Values",
"glyph": "\u0041", "glyph": "\u0041",
"cssclass": "icon-activity-mode",
"template": valuesTemplate, "template": valuesTemplate,
"type": "mode", "type": "mode",
"uses": [ "uses": [
@ -295,6 +296,7 @@ define([
"key": "timeline", "key": "timeline",
"name": "Timeline", "name": "Timeline",
"glyph": "\u0053", "glyph": "\u0053",
"cssclass": "icon-timeline",
"type": "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.", "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, "template": timelineTemplate,
@ -329,12 +331,14 @@ define([
"items": [ "items": [
{ {
"glyph": "\u00e9", "glyph": "\u00e9",
"cssclass": "icon-plot-resource",
"description": "Graph Resource Utilization", "description": "Graph Resource Utilization",
"control": "button", "control": "button",
"method": "toggleGraph" "method": "toggleGraph"
}, },
{ {
"glyph": "\u0041", "glyph": "icon-activity-mode",
"cssclass": "icon-activity-mode",
"control": "dialog-button", "control": "dialog-button",
"description": "Apply Activity Modes...", "description": "Apply Activity Modes...",
"title": "Apply Activity Modes", "title": "Apply Activity Modes",
@ -348,6 +352,7 @@ define([
}, },
{ {
"glyph": "\u00e8", "glyph": "\u00e8",
"cssclass": "icon-chain-links",
"description": "Edit Activity Link", "description": "Edit Activity Link",
"title": "Activity Link", "title": "Activity Link",
"control": "dialog-button", "control": "dialog-button",
@ -361,6 +366,7 @@ define([
}, },
{ {
"glyph": "\u0047", "glyph": "\u0047",
"cssclass": "icon-gear",
"description": "Edit Properties...", "description": "Edit Properties...",
"control": "button", "control": "button",
"method": "properties" "method": "properties"
@ -373,7 +379,8 @@ define([
"method": "remove", "method": "remove",
"description": "Remove Item", "description": "Remove Item",
"control": "button", "control": "button",
"glyph": "\u005a" "glyph": "\u005a",
"cssclass": "icon-trash"
} }
] ]
} }

7
platform/forms/res/templates/controls/button.html
View File

@ -19,12 +19,9 @@
this source code distribution or the Licensing information page available this source code distribution or the Licensing information page available
at runtime from the About dialog for additional information. at runtime from the About dialog for additional information.
--> -->
<a class="s-btn" <a class="s-btn {{structure.cssclass}}"
ng-class="{ labeled: structure.text, structure.cssclass }" ng-class="{ labeled: structure.text }"
ng-click="structure.click()"> ng-click="structure.click()">
<!--span class="ui-symbol icon">
{{structure.glyph}}
</span-->
<span class="title-label" ng-if="structure.text"> <span class="title-label" ng-if="structure.text">
{{structure.text}} {{structure.text}}
</span> </span>

45
platform/forms/res/templates/controls/color.html
View File

@ -19,54 +19,37 @@
this source code distribution or the Licensing information page available this source code distribution or the Licensing information page available
at runtime from the About dialog for additional information. at runtime from the About dialog for additional information.
--> -->
<div <div class="t-btn l-btn s-btn s-menu-btn menu-element t-color-palette {{structure.cssclass}}"
class="t-btn l-btn s-btn s-menu-btn menu-element t-color-palette" ng-controller="ClickAwayController as toggle">
ng-controller="ClickAwayController as toggle"
>
<span class="l-click-area" ng-click="toggle.toggle()"></span> <span class="l-click-area" ng-click="toggle.toggle()"></span>
<span class="color-swatch"
<span class="ui-symbol icon">{{structure.glyph}}</span> ng-style="{
<span ng-style="{ background: ngModel[field]
background: ngModel[field], }">
display: 'inline-block',
height: '11px',
width: '11px',
}"
ng-show="ngModel[field]">
</span> </span>
<span class="title-label" ng-if="structure.text"> <span class="title-label" ng-if="structure.text">
{{structure.text}} {{structure.text}}
</span> </span>
<div <div class="menu l-color-palette"
class="menu l-color-palette"
ng-controller="ColorController as colors" ng-controller="ColorController as colors"
ng-show="toggle.isActive()" ng-show="toggle.isActive()">
>
<div <div
class="l-palette-row l-option-row" class="l-palette-row l-option-row"
ng-if="!structure.mandatory" ng-if="!structure.mandatory">
> <div class="l-palette-item s-palette-item {{ngModel[field] === 'transparent' ? 'icon-check' : '' }}"
<div ng-click="ngModel[field] = 'transparent'">
class="l-palette-item s-palette-item"
ng-click="ngModel[field] = 'transparent'"
>
{{ngModel[field] === 'transparent' ? '2' : '' }}
</div> </div>
<span class="l-palette-item-label">None</span> <span class="l-palette-item-label">None</span>
</div> </div>
<div <div
class="l-palette-row" class="l-palette-row"
ng-repeat="group in colors.groups()" ng-repeat="group in colors.groups()">
> <div class="l-palette-item s-palette-item {{ngModel[field] === color ? 'icon-check' : '' }}"
<div
class="l-palette-item s-palette-item"
ng-repeat="color in group" ng-repeat="color in group"
ng-style="{ background: color }" ng-style="{ background: color }"
ng-click="ngModel[field] = color" ng-click="ngModel[field] = color">
>
{{ngModel[field] === color ? '2' : '' }}
</div> </div>
</div> </div>
</div> </div>

1
platform/forms/src/controllers/DialogButtonController.js
View File

@ -64,6 +64,7 @@ define(
// Prepare the structure for the button itself // Prepare the structure for the button itself
self.buttonStructure = {}; self.buttonStructure = {};
self.buttonStructure.glyph = structure.glyph; self.buttonStructure.glyph = structure.glyph;
self.buttonStructure.cssclass = structure.cssclass;
self.buttonStructure.name = structure.name; self.buttonStructure.name = structure.name;
self.buttonStructure.description = structure.description; self.buttonStructure.description = structure.description;
self.buttonStructure.click = showDialog; self.buttonStructure.click = showDialog;