ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-06-18 07:08:12 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

[Frontend] Refactoring glyphs to classes

Browse Source 
Fixes #1047
In-progress; indicators, notifications, actions,
tests
This commit is contained in:
Charles Hacskaylo
2016-06-28 14:47:52 -07:00
parent 53ed0bfb22
commit 8bb8db69e6
29 changed files with 72 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
example/notifications/res/dialog-launch.html
View File

@ -1,9 +1,9 @@
<span class="status block ok" ng-controller="DialogLaunchController">
<span class="status block" ng-controller="DialogLaunchController">
<!-- DO NOT ADD SPACES BETWEEN THE SPANS - IT ADDS WHITE SPACE!! -->
<span class="ui-symbol status-indicator">&#xe600;</span><span class="label">
<span class="status-indicator icon-box-with-arrow"></span><span class="label">
<a ng-click="launchProgress(true)">Known</a> |
<a ng-click="launchProgress(false)">Unknown</a> |
<a ng-click="launchError()">Error</a> |
<a ng-click="launchInfo()">Info</a>
</span><span class="count">Dialogs</span>
</span><span class="count"></span>
</span>

6
example/notifications/res/notification-launch.html
View File

@ -1,9 +1,9 @@
<span class="status block ok" ng-controller="NotificationLaunchController">
<span class="status block" ng-controller="NotificationLaunchController">
<!-- DO NOT ADD SPACES BETWEEN THE SPANS - IT ADDS WHITE SPACE!! -->
<span class="ui-symbol status-indicator">&#xe600;</span><span class="label">
<span class="status-indicator icon-bell"></span><span class="label">
<a ng-click="newInfo()">Success</a> |
<a ng-click="newError()">Error</a> |
<a ng-click="newAlert()">Alert</a> |
<a ng-click="newProgress()">Progress</a>
</span><span class="count">Notifications</span>
</span><span class="count"></span>
</span>

6
example/notifications/src/DialogLaunchIndicator.js
View File

@ -32,17 +32,15 @@ define(
* launched for demonstration and testing purposes.
* @constructor
*/
function DialogLaunchIndicator() {
}
DialogLaunchIndicator.template = 'dialogLaunchTemplate';
DialogLaunchIndicator.prototype.getGlyph = function () {
return "i";
};
DialogLaunchIndicator.prototype.getGlyphClass = function () {
return 'caution';
return 'ok';
};
DialogLaunchIndicator.prototype.getText = function () {
return "Launch test dialog";

12
example/notifications/src/NotificationLaunchIndicator.js
View File

@ -26,17 +26,21 @@ define(
function () {
"use strict";
/**
* A tool for manually invoking notifications. When included this
* indicator will allow for notifications of different types to be
* launched for demonstration and testing purposes.
* @constructor
*/
function NotificationLaunchIndicator() {
}
NotificationLaunchIndicator.template = 'notificationLaunchTemplate';
NotificationLaunchIndicator.prototype.getGlyph = function () {
return "i";
};
NotificationLaunchIndicator.prototype.getGlyphClass = function () {
return 'caution';
return 'ok';
};
NotificationLaunchIndicator.prototype.getText = function () {
return "Launch notification";

10
example/profiling/src/DigestIndicator.js
View File

@ -59,8 +59,14 @@ define(
update();
return {
getGlyph: function () {
return ".";
/**
* Get the glyph CSS class (single character used as an icon)
* to display in this indicator. This will return ".",
* which should appear as a dataflow icon.
* @returns {string} the character of the dataflow icon
*/
getCssClass: function () {
return "icon-connectivity";
},
getGlyphClass: function () {
return undefined;

8
example/profiling/src/WatchIndicator.js
View File

@ -55,13 +55,13 @@ define(
return {
/**
* Get the glyph (single character used as an icon)
* Get the glyph CSS class (single character used as an icon)
* to display in this indicator. This will return ".",
* which should appear as a dataflow icon.
* which should appear as a database icon.
* @returns {string} the character of the database icon
*/
getGlyph: function () {
return "E";
getCssClass: function () {
return "icon-database";
},
/**
* Get the name of the CSS class to apply to the glyph.

4
example/worker/src/FibonacciIndicator.js
View File

@ -50,8 +50,8 @@ define(
requestNext();
return {
getGlyph: function () {
return "?";
getCssClass: function () {
return "icon-object-unknown";
},
getText: function () {
return latest;

1
platform/commonUI/edit/src/creation/AddAction.js
View File

@ -52,6 +52,7 @@ define(
this.metadata = {
key: 'add',
glyph: type.getGlyph(),
cssclass: type.getCssClass(),
name: type.getName(),
type: type.getKey(),
description: type.getDescription(),

1
platform/commonUI/edit/test/creation/AddActionProviderSpec.js
View File

@ -45,6 +45,7 @@ define(
[
"getKey",
"getGlyph",
"getCssClass",
"getName",
"getDescription",
"getProperties",

1
platform/commonUI/edit/test/creation/CreateActionProviderSpec.js
View File

@ -41,6 +41,7 @@ define(
[
"getKey",
"getGlyph",
"getCssClass",
"getName",
"getDescription",
"getProperties",

3
platform/commonUI/edit/test/creation/CreateActionSpec.js
View File

@ -51,6 +51,7 @@ define(
[
"getKey",
"getGlyph",
"getCssClass",
"getName",
"getDescription",
"getProperties",
@ -120,6 +121,7 @@ define(
mockType.getKey.andReturn("test");
mockType.getGlyph.andReturn("T");
mockType.getCssClass.andReturn("icon-telemetry");
mockType.getDescription.andReturn("a test type");
mockType.getName.andReturn("Test");
mockType.getProperties.andReturn([]);
@ -138,6 +140,7 @@ define(
expect(metadata.name).toEqual("Test");
expect(metadata.description).toEqual("a test type");
expect(metadata.glyph).toEqual("T");
expect(metadata.cssclass).toEqual("icon-telemetry");
});
describe("the perform function", function () {

2
platform/commonUI/edit/test/creation/CreateWizardSpec.js
View File

@ -54,6 +54,7 @@ define(
[
"getKey",
"getGlyph",
"getCssClass",
"getName",
"getDescription",
"getProperties",
@ -75,6 +76,7 @@ define(
mockType.getKey.andReturn("test");
mockType.getGlyph.andReturn("T");
mockType.getCssClass.andReturn("icon-telemetry");
mockType.getDescription.andReturn("a test type");
mockType.getName.andReturn("Test");
mockType.getInitialModel.andReturn(testModel);

6
platform/commonUI/general/res/templates/indicator.html
View File

@ -24,12 +24,10 @@
title="{{ngModel.getDescription()}}"
ng-click='ngModel.configure()'
ng-show="ngModel.getText().length > 0">
<span class="ui-symbol status-indicator">
{{ngModel.getGlyph()}}
</span><span class="label"
<span class="status-indicator {{ngModel.getCssClass()}}"></span><span class="label"
ng-class='ngModel.getTextClass()'>
{{ngModel.getText()}}
<a class="s-btn ui-symbol" ng-if="ngModel.configure">G</a>
<a class="s-btn icon-gear" ng-if="ngModel.configure"></a>
</span><span class="count">
</span>
</div>

2
platform/commonUI/general/test/controllers/BottomBarControllerSpec.js
View File

@ -35,7 +35,7 @@ define(
beforeEach(function () {
mockIndicator = jasmine.createSpyObj(
"indicator",
["getGlyph", "getText"]
["getGlyph", "getCssClass", "getText"]
);
testIndicatorA = {};

1
platform/commonUI/general/test/ui/TreeViewSpec.js
View File

@ -107,6 +107,7 @@ define([
return {
context: jasmine.createSpyObj('context', ['getPath']),
type: jasmine.createSpyObj('type', ['getGlyph']),
cssclass: jasmine.createSpyObj('cssclass', ['getCssClass']),
location: jasmine.createSpyObj('location', ['isLink']),
mutation: jasmine.createSpyObj('mutation', ['listen']),
status: mockStatus

2
platform/commonUI/notification/res/notification-indicator.html
View File

@ -2,7 +2,7 @@
<span ng-show="notifications.length > 0" class="status block"
ng-class="highest.severity"
ng-controller="NotificationIndicatorController">
<span class="ui-symbol status-indicator">&#xe610;</span><span class="label">
<span class="status-indicator icon-bell"></span><span class="label">
<a ng-click="showNotificationsList()">{{notifications.length}}
Notifications</a>
</span><span class="count">{{notifications.length}}</span>

1
platform/core/src/types/TypeImpl.js
View File

@ -145,6 +145,7 @@ define(
};
TypeImpl.prototype.getGlyph = function () {
// TO-DO: remove this function
return this.typeDef.glyph;
};

5
platform/core/test/types/TypeImplSpec.js
View File

@ -34,6 +34,7 @@ define(
name: 'Test Type',
description: 'A type, for testing',
glyph: 't',
cssclass: 'icon-telemetry-panel',
inherits: ['test-parent-1', 'test-parent-2'],
features: ['test-feature-1'],
properties: [{}],
@ -58,6 +59,10 @@ define(
expect(type.getGlyph()).toEqual('t');
});
it("exposes glyph CSS class from definition", function() {
expect(type.getCssClass()).toEqual('icon-telemetry-panel');
});
it("exposes its underlying type definition", function () {
expect(type.getDefinition()).toEqual(testTypeDef);
});

6
platform/core/test/types/TypeProviderSpec.js
View File

@ -31,17 +31,20 @@ define(
{
key: 'basic',
glyph: "X",
cssclass: "icon-magnify-in",
name: "Basic Type"
},
{
key: 'multi1',
glyph: "Z",
cssclass: "icon-trash",
description: "Multi1 Description",
capabilities: ['a1', 'b1']
},
{
key: 'multi2',
glyph: "Y",
cssclass: "icon-magnify-out",
capabilities: ['a2', 'b2', 'c2']
},
{
@ -71,6 +74,7 @@ define(
captured.type = provider.getType('basic');
expect(captured.type.getGlyph()).toEqual("X");
expect(captured.type.getCssClass()).toEqual("icon-magnify-in");
expect(captured.type.getName()).toEqual("Basic Type");
expect(captured.type.getDescription()).toBeUndefined();
});
@ -79,6 +83,7 @@ define(
captured.type = provider.getType('single-subtype');
expect(captured.type.getGlyph()).toEqual("X");
expect(captured.type.getCssClass()).toEqual("icon-magnify-in");
expect(captured.type.getName()).toEqual("Basic Subtype");
expect(captured.type.getDescription()).toEqual("A test subtype");
});
@ -87,6 +92,7 @@ define(
captured.type = provider.getType('multi-subtype');
expect(captured.type.getGlyph()).toEqual("Y");
expect(captured.type.getCssClass()).toEqual("icon-magnify-out");
expect(captured.type.getName()).toEqual("Multi-parent Subtype");
expect(captured.type.getDescription()).toEqual("Multi1 Description");
});

4
platform/features/clock/src/indicators/ClockIndicator.js
View File

@ -44,8 +44,8 @@ define(
});
}
ClockIndicator.prototype.getGlyph = function () {
return "C";
ClockIndicator.prototype.getCssClass = function () {
return "icon-clock";
};
ClockIndicator.prototype.getGlyphClass = function () {

2
platform/features/clock/test/indicators/ClockIndicatorSpec.js
View File

@ -48,7 +48,7 @@ define(
});
it("implements the Indicator interface", function () {
expect(indicator.getGlyph()).toEqual(jasmine.any(String));
expect(indicator.getCssClass()).toEqual(jasmine.any(String));
expect(indicator.getGlyphClass()).toEqual(jasmine.any(String));
expect(indicator.getText()).toEqual(jasmine.any(String));
expect(indicator.getDescription()).toEqual(jasmine.any(String));

4
platform/identity/src/IdentityIndicator.js
View File

@ -43,8 +43,8 @@ define(
});
}
IdentityIndicator.prototype.getGlyph = function () {
return this.text && "P";
IdentityIndicator.prototype.getCssClass = function () {
return "icon-person";
};
IdentityIndicator.prototype.getGlyphClass = function () {
return undefined;

7
platform/identity/test/IdentityIndicatorSpec.js
View File

@ -46,8 +46,7 @@ define(
key: "testuserid",
name: "A User"
});
// Should have a single character glyph
expect(indicator.getGlyph().length).toEqual(1);
expect(indicator.getCssClass()).toEqual("icon-person");
expect(indicator.getGlyphClass()).toBeUndefined();
expect(indicator.getText()).toEqual("A User");
expect(indicator.getDescription().indexOf("testuserid"))
@ -55,7 +54,7 @@ define(
});
it("shows nothing while no user information is available", function () {
expect(indicator.getGlyph()).toBeUndefined();
expect(indicator.getCssClass()).toBeUndefined();
expect(indicator.getGlyphClass()).toBeUndefined();
expect(indicator.getText()).toBeUndefined();
expect(indicator.getDescription()).toBeUndefined();
@ -63,7 +62,7 @@ define(
it("shows nothing when there is no identity information", function () {
mockPromise.then.mostRecentCall.args[0](undefined);
expect(indicator.getGlyph()).toBeUndefined();
expect(indicator.getCssClass()).toBeUndefined();
expect(indicator.getGlyphClass()).toBeUndefined();
expect(indicator.getText()).toBeUndefined();
expect(indicator.getDescription()).toBeUndefined();

4
platform/persistence/couch/src/CouchIndicator.js
View File

@ -95,8 +95,8 @@ define(
$interval(updateIndicator, interval);
}
CouchIndicator.prototype.getGlyph = function () {
return "D";
CouchIndicator.prototype.getCssClass = function () {
return "icon-database";
};
CouchIndicator.prototype.getGlyphClass = function () {

2
platform/persistence/couch/test/CouchIndicatorSpec.js
View File

@ -57,7 +57,7 @@ define(
});
it("has a database icon", function () {
expect(indicator.getGlyph()).toEqual("D");
expect(indicator.getCssClass()).toEqual("icon-database");
});
it("consults the database at the configured path", function () {

4
platform/persistence/elastic/src/ElasticIndicator.js
View File

@ -81,8 +81,8 @@ define(
$interval(updateIndicator, interval, 0, false);
}
ElasticIndicator.prototype.getGlyph = function () {
return "D";
ElasticIndicator.prototype.getCssClass = function () {
return "icon-database";
};
ElasticIndicator.prototype.getGlyphClass = function () {
return this.state.glyphClass;

2
platform/persistence/elastic/test/ElasticIndicatorSpec.js
View File

@ -59,7 +59,7 @@ define(
});
it("has a database icon", function () {
expect(indicator.getGlyph()).toEqual("D");
expect(indicator.getCssClass()).toEqual("icon-database");
});
it("consults the database at the configured path", function () {

4
platform/persistence/local/src/LocalStorageIndicator.js
View File

@ -40,8 +40,8 @@ define(
function LocalStorageIndicator() {
}
LocalStorageIndicator.prototype.getGlyph = function () {
return "D";
LocalStorageIndicator.prototype.getCssClass = function () {
return "icon-database";
};
LocalStorageIndicator.prototype.getGlyphClass = function () {
return 'caution';

2
platform/persistence/local/test/LocalStorageIndicatorSpec.js
View File

@ -38,7 +38,7 @@ define(
});
it("has a database icon", function () {
expect(indicator.getGlyph()).toEqual("D");
expect(indicator.getCssClass()).toEqual("icon-database");
});
it("has a 'caution' class to draw attention", function () {