mirror of
https://github.com/nasa/openmct.git
synced 2025-06-17 22:58:14 +00:00
[Frontend] Refactoring glyphs to classes
fixes #1047 In progress, really: view icons, timer/clock
This commit is contained in:
Charles Hacskaylo
@ -20,26 +20,22 @@
|
||||
at runtime from the About dialog for additional information.
|
||||
-->
|
||||
<span ng-controller="ViewSwitcherController">
|
||||
<div
|
||||
class="view-switcher menu-element s-menu-btn"
|
||||
<div class="view-switcher menu-element s-menu-btn {{ngModel.selected.cssclass}}"
|
||||
ng-if="view.length > 1"
|
||||
ng-controller="ClickAwayController as toggle"
|
||||
>
|
||||
ng-controller="ClickAwayController as toggle">
|
||||
|
||||
<span
|
||||
class="l-click-area"
|
||||
<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>
|
||||
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()">
|
||||
<ul>
|
||||
<li ng-repeat="option in view"
|
||||
ng-click="ngModel.selected = option; toggle.setState(false)">
|
||||
<span class="ui-symbol type-icon icon">{{option.glyph}}</span>
|
||||
ng-click="ngModel.selected = option; toggle.setState(false)"
|
||||
class="{{option.cssclass}}">
|
||||
<!--span class="type-icon icon">{{option.glyph}}</span-->
|
||||
{{option.name}}
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
@ -137,6 +137,7 @@ define([
|
||||
"category": "contextual",
|
||||
"name": "Start",
|
||||
"glyph": "ï",
|
||||
"cssclass": "icon-play",
|
||||
"priority": "preferred"
|
||||
},
|
||||
{
|
||||
@ -148,6 +149,7 @@ define([
|
||||
"category": "contextual",
|
||||
"name": "Restart at 0",
|
||||
"glyph": "r",
|
||||
"cssclass": "icon-refresh",
|
||||
"priority": "preferred"
|
||||
}
|
||||
],
|
||||
|
||||
@ -21,20 +21,13 @@
|
||||
-->
|
||||
<div class="l-time-display l-digital l-timer s-timer" ng-controller="TimerController as timer">
|
||||
<div class="l-elem-wrapper l-flex-row">
|
||||
<a
|
||||
ng-click="timer.clickButton()"
|
||||
<a ng-click="timer.clickButton()"
|
||||
title="{{timer.buttonText()}}"
|
||||
class="flex-elem s-icon-btn control"
|
||||
>
|
||||
{{timer.buttonGlyph()}}
|
||||
</a>
|
||||
<span class="flex-elem l-value">
|
||||
<span class="ui-symbol direction">{{timer.sign()}}</span>
|
||||
<span
|
||||
class="value"
|
||||
ng-class="{ active:timer.text() }"
|
||||
>{{timer.text() || "--:--:--"}}
|
||||
</span>
|
||||
class="flex-elem control {{timer.buttonCssClass()}}"></a>
|
||||
<span class="flex-elem l-value {{timer.signClass()}}">
|
||||
<span class="value"
|
||||
ng-class="{ active:timer.text() }">{{timer.text() || "--:--:--"}}
|
||||
</span>
|
||||
</span>
|
||||
<span ng-controller="RefreshingController"></span>
|
||||
</div>
|
||||
|
||||
@ -50,10 +50,13 @@ define(
|
||||
if (formatter && !isNaN(timeDelta)) {
|
||||
self.textValue = formatter(timeDelta);
|
||||
self.signValue = timeDelta < 0 ? "-" :
|
||||
timeDelta >= 1000 ? "+" : "";
|
||||
timeDelta >= 1000 ? "+" : "";
|
||||
self.signCssClass = timeDelta < 0 ? "icon-minus" :
|
||||
timeDelta >= 1000 ? "icon-plus" : "";
|
||||
} else {
|
||||
self.textValue = "";
|
||||
self.signValue = "";
|
||||
self.signCssClass = "";
|
||||
}
|
||||
}
|
||||
|
||||
@ -126,12 +129,13 @@ define(
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the glyph to display for the start/restart button.
|
||||
* @returns {string} glyph to display
|
||||
* Get the CSS class to display the right icon
|
||||
* for the start/restart button.
|
||||
* @returns {string} cssclass to display
|
||||
*/
|
||||
TimerController.prototype.buttonGlyph = function () {
|
||||
TimerController.prototype.buttonCssClass = function () {
|
||||
return this.relevantAction ?
|
||||
this.relevantAction.getMetadata().glyph : "";
|
||||
this.relevantAction.getMetadata().cssclass : "";
|
||||
};
|
||||
|
||||
/**
|
||||
@ -164,6 +168,15 @@ define(
|
||||
return this.signValue;
|
||||
};
|
||||
|
||||
/**
|
||||
* Get the sign (+ or -) of the current timer value, as
|
||||
* a CSS class.
|
||||
* @returns {string} sign of the current timer value
|
||||
*/
|
||||
TimerController.prototype.signClass = function () {
|
||||
return this.signCssClass;
|
||||
};
|
||||
|
||||
/**
|
||||
* Get the text to display for the current timer value.
|
||||
* @returns {string} current timer value
|
||||
|
||||
@ -67,6 +67,7 @@ define([
|
||||
"key": "fixed",
|
||||
"name": "Fixed Position",
|
||||
"glyph": "3",
|
||||
"cssclass": "icon-telemetry-panel",
|
||||
"type": "telemetry.panel",
|
||||
"template": fixedTemplate,
|
||||
"uses": [
|
||||
|
||||
@ -46,6 +46,7 @@ define([
|
||||
"name": "Plot",
|
||||
"key": "plot",
|
||||
"glyph": "6",
|
||||
"cssclass": "icon-sine",
|
||||
"template": plotTemplate,
|
||||
"needs": [
|
||||
"telemetry"
|
||||
|
||||
@ -130,6 +130,7 @@ define([
|
||||
"name": "Historical Table",
|
||||
"key": "table",
|
||||
"glyph": "\ue604",
|
||||
"cssclass": "icon-tabular",
|
||||
"templateUrl": "templates/historical-table.html",
|
||||
"needs": [
|
||||
"telemetry"
|
||||
@ -141,6 +142,7 @@ define([
|
||||
"name": "Real-time Table",
|
||||
"key": "rt-table",
|
||||
"glyph": "\ue620",
|
||||
"cssclass": "icon-tabular-realtime",
|
||||
"templateUrl": "templates/rt-table.html",
|
||||
"needs": [
|
||||
"telemetry"
|
||||
|
||||
Reference in New Issue
Block a user