mirror of
https://github.com/nasa/openmct.git
synced 2024-12-21 06:03:08 +00:00
[Frontend] Refactoring glyphs to classes
fixes #1047 In-progress, converting types, mods to Create Menu template
This commit is contained in:
Charles Hacskaylo
parent
18d9f3d6b2
commit
7d69ae401b
@ -50,6 +50,7 @@ define([
|
||||
"key": "eventGenerator",
|
||||
"name": "Event Message Generator",
|
||||
"glyph": "\u0066",
|
||||
"cssclass": "icon-folder-new",
|
||||
"description": "For development use. Creates sample event message data that mimics a live data stream.",
|
||||
"priority": 10,
|
||||
"features": "creation",
|
||||
|
||||
@ -87,6 +87,7 @@ define([
|
||||
"key": "generator",
|
||||
"name": "Sine Wave Generator",
|
||||
"glyph": "\u0054",
|
||||
"cssclass": "icon-telemetry",
|
||||
"description": "For development use. Generates example streaming telemetry data using a simple sine wave algorithm.",
|
||||
"priority": 10,
|
||||
"features": "creation",
|
||||
|
||||
@ -50,6 +50,7 @@ define([
|
||||
"key": "imagery",
|
||||
"name": "Example Imagery",
|
||||
"glyph": "\u00e3",
|
||||
"cssclass": "icon-image",
|
||||
"features": "creation",
|
||||
"description": "For development use. Creates example imagery data that mimics a live imagery stream.",
|
||||
"priority": 10,
|
||||
|
||||
@ -28,7 +28,7 @@
|
||||
</div>
|
||||
<div class='item-main abs lg'>
|
||||
<span class="t-item-icon" ng-class="{ 'l-icon-link':location.isLink() }">
|
||||
<span class="t-item-icon-glyph ng-binding">{{type.getGlyph()}}</span>
|
||||
<span class="t-item-icon-glyph ng-binding {{type.getCssClass()}}"></span>
|
||||
</span>
|
||||
<div class='ui-symbol abs item-open'>}</div>
|
||||
</div>
|
||||
|
||||
@ -22,24 +22,17 @@
|
||||
<div class="contents" ng-controller="CreateMenuController">
|
||||
<div class="pane left menu-items">
|
||||
<ul>
|
||||
|
||||
<li ng-repeat="createAction in createActions" ng-click="createAction.perform()">
|
||||
<a
|
||||
ng-mouseover="representation.activeMetadata = createAction.getMetadata()"
|
||||
ng-mouseleave="representation.activeMetadata = undefined">
|
||||
<span class="ui-symbol icon type-icon">
|
||||
{{createAction.getMetadata().glyph}}
|
||||
</span>
|
||||
<a ng-mouseover="representation.activeMetadata = createAction.getMetadata()"
|
||||
ng-mouseleave="representation.activeMetadata = undefined"
|
||||
class="{{ createAction.getMetadata().cssclass }}">
|
||||
{{createAction.getMetadata().name}}
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
<div class="pane right menu-item-description">
|
||||
<div class="desc-area ui-symbol icon type-icon">
|
||||
{{representation.activeMetadata.glyph}}
|
||||
</div>
|
||||
<div class="desc-area ui-symbol icon type-icon {{ representation.activeMetadata.cssclass }}"></div>
|
||||
<div class="desc-area title">
|
||||
{{representation.activeMetadata.name}}
|
||||
</div>
|
||||
|
||||
@ -48,6 +48,7 @@ define(
|
||||
this.metadata = {
|
||||
key: 'create',
|
||||
glyph: type.getGlyph(),
|
||||
cssclass: type.getCssClass(),
|
||||
name: type.getName(),
|
||||
type: type.getKey(),
|
||||
description: type.getDescription(),
|
||||
|
||||
@ -5,17 +5,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
//[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'); }
|
||||
}
|
||||
|
||||
.icon-alert-rect { @include glyph('\e900'); }
|
||||
.icon-alert-triangle { @include glyph('\e901'); }
|
||||
.icon-arrow-down { @include glyph('\e902'); }
|
||||
|
||||
@ -21,4 +21,4 @@
|
||||
-->
|
||||
|
||||
<!--The icon for the info button appearing in a grid item (list in folder)-->
|
||||
<a class='ui-symbol icon mobile-info'></a>
|
||||
<a class='ui-symbol icon icon-info'></a>
|
||||
|
||||
@ -264,6 +264,7 @@ define([
|
||||
"key": "folder",
|
||||
"name": "Folder",
|
||||
"glyph": "\u0046",
|
||||
"cssclass": "icon-folder",
|
||||
"features": "creation",
|
||||
"description": "Create folders to organize other objects or links to objects.",
|
||||
"priority": 1000,
|
||||
|
||||
@ -148,6 +148,10 @@ define(
|
||||
return this.typeDef.glyph;
|
||||
};
|
||||
|
||||
TypeImpl.prototype.getCssClass = function () {
|
||||
return this.typeDef.cssclass;
|
||||
};
|
||||
|
||||
TypeImpl.prototype.getProperties = function () {
|
||||
return (this.typeDef.properties || []).map(function (propertyDef) {
|
||||
return new TypeProperty(propertyDef);
|
||||
|
||||
@ -156,6 +156,7 @@ define([
|
||||
"key": "clock",
|
||||
"name": "Clock",
|
||||
"glyph": "\u0043",
|
||||
"cssclass": "icon-clock",
|
||||
"description": "A UTC-based clock that supports a variety of display formats. Clocks can be added to Display Layouts.",
|
||||
"priority": 101,
|
||||
"features": [
|
||||
@ -213,6 +214,7 @@ define([
|
||||
"key": "timer",
|
||||
"name": "Timer",
|
||||
"glyph": "\u00f5",
|
||||
"cssclass": "icon-timer",
|
||||
"description": "A timer that counts up or down to a datetime. Timers can be started, stopped and reset whenever needed, and support a variety of display formats. Each Timer displays the same value to all users. Timers can be added to Display Layouts.",
|
||||
"priority": 100,
|
||||
"features": [
|
||||
|
||||
@ -57,6 +57,7 @@ define([
|
||||
"key": "layout",
|
||||
"name": "Display Layout",
|
||||
"glyph": "\u004c",
|
||||
"cssclass": "icon-layout",
|
||||
"type": "layout",
|
||||
"template": layoutTemplate,
|
||||
"editable": true,
|
||||
@ -77,7 +78,7 @@ define([
|
||||
"items": [
|
||||
{
|
||||
"method": "add",
|
||||
"glyph": "\u002b",
|
||||
"cssclass": "icon-plus",
|
||||
"control": "menu-button",
|
||||
"text": "Add",
|
||||
"options": [
|
||||
@ -109,8 +110,7 @@ define([
|
||||
"items": [
|
||||
{
|
||||
"method": "order",
|
||||
"glyph": "á",
|
||||
"cssclass": "i-layers",
|
||||
"cssclass": "icon-layers",
|
||||
"control": "menu-button",
|
||||
"options": [
|
||||
{
|
||||
@ -260,6 +260,7 @@ define([
|
||||
"key": "layout",
|
||||
"name": "Display Layout",
|
||||
"glyph": "\u004c",
|
||||
"cssclass": "icon-layout",
|
||||
"description": "Assemble other objects and components together into a reusable screen layout. Working in a simple canvas workspace, simply drag in the objects you want, position and size them. Save your design and view or edit it at any time.",
|
||||
"priority": 900,
|
||||
"features": "creation",
|
||||
@ -292,6 +293,7 @@ define([
|
||||
"key": "telemetry.panel",
|
||||
"name": "Telemetry Panel",
|
||||
"glyph": "t",
|
||||
"cssclass": "icon-telemetry-panel",
|
||||
"description": "A panel for collecting telemetry elements.",
|
||||
"priority": 899,
|
||||
"delegates": [
|
||||
|
||||
@ -37,6 +37,7 @@ define([
|
||||
"key": "example.page",
|
||||
"name": "Web Page",
|
||||
"glyph": "\u00ea",
|
||||
"cssclass": "icon-page",
|
||||
"description": "Embed a web page or web-based image in a resizeable window component. Can be added to Display Layouts. Note that the URL being embedded must allow iframing.",
|
||||
"priority": 50,
|
||||
"features": [
|
||||
|
||||
@ -61,6 +61,7 @@ define([
|
||||
"key": "table",
|
||||
"name": "Historical Telemetry Table",
|
||||
"glyph": "\ue604",
|
||||
"cssclass": "icon-tabular",
|
||||
"description": "A static table of all values over time for all included telemetry elements. Rows are timestamped data values for each telemetry element; columns are data fields. The number of rows is based on the range of your query. New incoming data must be manually re-queried for.",
|
||||
"priority": 861,
|
||||
"features": "creation",
|
||||
@ -84,6 +85,7 @@ define([
|
||||
"key": "rttable",
|
||||
"name": "Real-time Telemetry Table",
|
||||
"glyph": "\ue620",
|
||||
"cssclass": "icon-tabular-realtime",
|
||||
"description": "A scrolling table of latest values for all included telemetry elements. Rows are timestamped data values for each telemetry element; columns are data fields. New incoming data is automatically added to the view.",
|
||||
"priority": 860,
|
||||
"features": "creation",
|
||||
|
||||
@ -152,6 +152,7 @@ define([
|
||||
"key": "timeline",
|
||||
"name": "Timeline",
|
||||
"glyph": "\u0053",
|
||||
"cssclass": "icon-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.",
|
||||
"priority": 502,
|
||||
"features": [
|
||||
@ -195,6 +196,7 @@ define([
|
||||
"key": "activity",
|
||||
"name": "Activity",
|
||||
"glyph": "\u0061",
|
||||
"cssclass": "icon-activity",
|
||||
"features": [
|
||||
"creation"
|
||||
],
|
||||
@ -241,6 +243,7 @@ define([
|
||||
"key": "mode",
|
||||
"name": "Activity Mode",
|
||||
"glyph": "\u0041",
|
||||
"cssclass": "icon-activity-mode",
|
||||
"features": [
|
||||
"creation"
|
||||
],
|
||||
@ -309,11 +312,13 @@ define([
|
||||
{
|
||||
"name": "Timeline",
|
||||
"glyph": "\u0053",
|
||||
"cssclass": "icon-timeline",
|
||||
"key": "timeline"
|
||||
},
|
||||
{
|
||||
"name": "Activity",
|
||||
"glyph": "\u0061",
|
||||
"cssclass": "icon-activity",
|
||||
"key": "activity"
|
||||
}
|
||||
]
|
||||
|
||||
Loading…
Reference in New Issue
Block a user