mirror of
https://github.com/nasa/openmct.git
synced 2025-01-27 14:49:28 +00:00
[Frontend] Glyph-related style changes to toolbars and buttons
Fixes #1047 Glyph refactoring WIP for toolbar buttons; Timeline glyph refactoring continued
This commit is contained in:
Charles Hacskaylo
parent
a9326f572f
commit
28b663ce41
@ -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 {
|
||||
|
||||
@ -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;
|
||||
//}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -27,7 +27,6 @@
|
||||
<span class="l-click-area"
|
||||
ng-click="toggle.toggle()"
|
||||
title="{{ngModel.selected.name}}"></span>
|
||||
<!--span class="ui-symbol icon type-icon">{{ngModel.selected.glyph}}</span-->
|
||||
<span class="title-label">{{ngModel.selected.name}}</span>
|
||||
|
||||
<div class="menu" ng-show="toggle.isActive()">
|
||||
@ -35,7 +34,6 @@
|
||||
<li ng-repeat="option in view"
|
||||
ng-click="ngModel.selected = option; toggle.setState(false)"
|
||||
class="{{option.cssclass}}">
|
||||
<!--span class="type-icon icon">{{option.glyph}}</span-->
|
||||
{{option.name}}
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
@ -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.
|
||||
*/
|
||||
|
||||
@ -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": {
|
||||
|
||||
@ -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"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@ -19,12 +19,9 @@
|
||||
this source code distribution or the Licensing information page available
|
||||
at runtime from the About dialog for additional information.
|
||||
-->
|
||||
<a class="s-btn"
|
||||
ng-class="{ labeled: structure.text, structure.cssclass }"
|
||||
<a class="s-btn {{structure.cssclass}}"
|
||||
ng-class="{ labeled: structure.text }"
|
||||
ng-click="structure.click()">
|
||||
<!--span class="ui-symbol icon">
|
||||
{{structure.glyph}}
|
||||
</span-->
|
||||
<span class="title-label" ng-if="structure.text">
|
||||
{{structure.text}}
|
||||
</span>
|
||||
|
||||
@ -19,54 +19,37 @@
|
||||
this source code distribution or the Licensing information page available
|
||||
at runtime from the About dialog for additional information.
|
||||
-->
|
||||
<div
|
||||
class="t-btn l-btn s-btn s-menu-btn menu-element t-color-palette"
|
||||
ng-controller="ClickAwayController as toggle"
|
||||
>
|
||||
<div class="t-btn l-btn s-btn s-menu-btn menu-element t-color-palette {{structure.cssclass}}"
|
||||
ng-controller="ClickAwayController as toggle">
|
||||
|
||||
<span class="l-click-area" ng-click="toggle.toggle()"></span>
|
||||
|
||||
<span class="ui-symbol icon">{{structure.glyph}}</span>
|
||||
<span ng-style="{
|
||||
background: ngModel[field],
|
||||
display: 'inline-block',
|
||||
height: '11px',
|
||||
width: '11px',
|
||||
}"
|
||||
ng-show="ngModel[field]">
|
||||
<span class="color-swatch"
|
||||
ng-style="{
|
||||
background: ngModel[field]
|
||||
}">
|
||||
</span>
|
||||
<span class="title-label" ng-if="structure.text">
|
||||
{{structure.text}}
|
||||
</span>
|
||||
|
||||
<div
|
||||
class="menu l-color-palette"
|
||||
<div class="menu l-color-palette"
|
||||
ng-controller="ColorController as colors"
|
||||
ng-show="toggle.isActive()"
|
||||
>
|
||||
ng-show="toggle.isActive()">
|
||||
<div
|
||||
class="l-palette-row l-option-row"
|
||||
ng-if="!structure.mandatory"
|
||||
>
|
||||
<div
|
||||
class="l-palette-item s-palette-item"
|
||||
ng-click="ngModel[field] = 'transparent'"
|
||||
>
|
||||
{{ngModel[field] === 'transparent' ? '2' : '' }}
|
||||
ng-if="!structure.mandatory">
|
||||
<div class="l-palette-item s-palette-item {{ngModel[field] === 'transparent' ? 'icon-check' : '' }}"
|
||||
ng-click="ngModel[field] = 'transparent'">
|
||||
</div>
|
||||
<span class="l-palette-item-label">None</span>
|
||||
</div>
|
||||
<div
|
||||
class="l-palette-row"
|
||||
ng-repeat="group in colors.groups()"
|
||||
>
|
||||
<div
|
||||
class="l-palette-item s-palette-item"
|
||||
ng-repeat="group in colors.groups()">
|
||||
<div class="l-palette-item s-palette-item {{ngModel[field] === color ? 'icon-check' : '' }}"
|
||||
ng-repeat="color in group"
|
||||
ng-style="{ background: color }"
|
||||
ng-click="ngModel[field] = color"
|
||||
>
|
||||
{{ngModel[field] === color ? '2' : '' }}
|
||||
ng-click="ngModel[field] = color">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -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;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user