mirror of
https://github.com/nasa/openmct.git
synced 2024-12-26 00:01:05 +00:00
3246480f82
* [API] Added Indicators API * [Indicators] Converted Follow Indicator to new Indicators API * [Indicators] Converted URL Indicator to new Indicators API * [Indicators] Changes to some legacy indicators for compatibility with new Indicators API * [Indicators] Addressed code review items from https://github.com/nasa/openmct/pull/1837 * Updated tests for URL Indicator * Adding Indicator API spec * Address linting issues * Switched to direct DOM manipulation rather than template compilation to avoid an unnecessary extra holder element * Updated documentation to reflect changes to API * Indicators api styling (#2076) Updated styling for Indicators * Update API TOC * Fix color of items w-mct-example areas of Style Guide Fixes #1837 * Status class refactoring and cleanups Fixes #1837 - Significant cleanups and name refactoring to allow more concise selector definitions, with changes in js, html and scss files; - Updates in Style Guide > Status page, with some content reorganization and clarification; * Corrected out of date API * de-zeptoed Indicator API test spec * Remove promise from URLIndicator * Separated legacy indicators support * Updated Indicator specs to Jasmine 3 * Fixed checkstyle and lint issues * Moved legacy indicators support to adapter folder * Various fixes for Indicators Fixes #1837 - Added SASS constants for Indicator colors; - Removed commented code; - Removed unused indicator classes from _messages.scss - Fixed missing s-status-on class; * Significant revisions to Style Guide Indicators content Fixes #1837 - Better documentation including recommendations; - Better and more concrete examples; * Style Guide example tweaks Fixes #1837 * Refinement to Style Guide Status and Limits content Fixes #1837 - More detail and clarification on Status and Limits; * Cleanup code Fixes #1837 - Remove commented styles; - Line return refinements;
228 lines
12 KiB
HTML
228 lines
12 KiB
HTML
<!--
|
|
Open MCT, Copyright (c) 2014-2016, United States Government
|
|
as represented by the Administrator of the National Aeronautics and Space
|
|
Administration. All rights reserved.
|
|
|
|
Open MCT is licensed under the Apache License, Version 2.0 (the
|
|
"License"); you may not use this file except in compliance with the License.
|
|
You may obtain a copy of the License at
|
|
http://www.apache.org/licenses/LICENSE-2.0.
|
|
|
|
Unless required by applicable law or agreed to in writing, software
|
|
distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
|
|
WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
|
|
License for the specific language governing permissions and limitations
|
|
under the License.
|
|
|
|
Open MCT includes source code licensed under additional open source
|
|
licenses. See the Open Source Licenses file (LICENSES.md) included with
|
|
this source code distribution or the Licensing information page available
|
|
at runtime from the About dialog for additional information.
|
|
-->
|
|
<style>
|
|
.w-mct-example div[class*="s-status"],
|
|
.w-mct-example span[class*="s-status"],
|
|
.w-mct-example div[class*="s-limit"],
|
|
.w-mct-example span[class*="s-limit"] {
|
|
border-radius: 3px;
|
|
padding: 2px 5px;
|
|
}
|
|
.w-mct-example table {
|
|
width: 100%;
|
|
}
|
|
</style>
|
|
<div class="l-style-guide s-text">
|
|
<p class="doc-title">Open MCT Style Guide</p>
|
|
<h1>Status Indication</h1>
|
|
|
|
<div class="l-section">
|
|
<h2>Status Classes</h2>
|
|
<div class="cols cols1-1">
|
|
<div class="col">
|
|
<p>Status classes allow any block or inline-block element to be decorated in order to articulate a
|
|
status. Provided classes include color-only and color plus icon; custom icons can easily be
|
|
employed by using a color-only status class in combination with an <a class="link" href="#/browse/styleguide:home/glyphs?tc.mode=local&tc.timeSystem=utc&tc.startDelta=1800000&tc.endDelta=0&view=styleguide.glyphs">glyph</a>.</p>
|
|
<ul>
|
|
<li>Color only</li>
|
|
<ul>
|
|
<li><code>s-status-warning-hi</code></li>
|
|
<li><code>s-status-warning-lo</code></li>
|
|
<li><code>s-status-diagnostic</code></li>
|
|
<li><code>s-status-info</code></li>
|
|
<li><code>s-status-ok</code></li>
|
|
</ul>
|
|
<li>Color and icon</li>
|
|
<ul>
|
|
<li><code>s-status-icon-warning-hi</code></li>
|
|
<li><code>s-status-icon-warning-lo</code></li>
|
|
<li><code>s-status-icon-diagnostic</code></li>
|
|
<li><code>s-status-icon-info</code></li>
|
|
<li><code>s-status-icon-ok</code></li>
|
|
</ul>
|
|
</ul>
|
|
</div>
|
|
<mct-example><!-- Color alone examples -->
|
|
<div class="s-status-warning-hi">WARNING HI</div>
|
|
<div class="s-status-warning-lo">WARNING LOW</div>
|
|
<div class="s-status-diagnostic">DIAGNOSTIC</div>
|
|
<div class="s-status-info">INFO</div>
|
|
<div class="s-status-ok">OK</div>
|
|
|
|
<!-- Color and icon examples -->
|
|
<div class="s-status-icon-warning-hi">WARNING HI with icon</div>
|
|
<div class="s-status-icon-warning-lo">WARNING LOW with icon</div>
|
|
<div class="s-status-icon-diagnostic">DIAGNOSTIC with icon</div>
|
|
<div class="s-status-icon-info">INFO with icon</div>
|
|
<div class="s-status-icon-ok">OK with icon</div>
|
|
<div class="s-status-warning-hi icon-alert-triangle">WARNING HI with custom icon</div>
|
|
<div>Some text with an <span class="s-status-icon-diagnostic">inline element</span> showing a Diagnostic status.</div>
|
|
</mct-example>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="l-section">
|
|
<h2>Limit Classes</h2>
|
|
<div class="cols cols1-1">
|
|
<div class="col">
|
|
<p>Limit classes are a specialized form of status, specifically meant to be applied to telemetry
|
|
displays to indicate that a limit threshold has been violated. Open MCT provides both severity
|
|
and direction classes; severity (yellow and red) can be used alone or in combination
|
|
with direction (upper or lower). Direction classes cannot be used on their own.</p>
|
|
<p>Like Status classes, Limits can be used as color-only, or color plus icon. Custom icons can
|
|
be applied in the same fashion as described above.</p>
|
|
<ul>
|
|
<li>Severity color alone</li>
|
|
<ul>
|
|
<li><code>s-limit-yellow</code>: A yellow limit.</li>
|
|
<li><code>s-limit-red</code>: A red limit.</li>
|
|
</ul>
|
|
<li>Severity color and icon</li>
|
|
<ul>
|
|
<li><code>s-limit-icon-yellow</code>: A yellow limit with icon.</li>
|
|
<li><code>s-limit-icon-red</code>: A red limit with icon.</li>
|
|
</ul>
|
|
<li>Direction indicators. MUST be used with a "color alone" limit class. See
|
|
examples for more.</li>
|
|
<ul>
|
|
<li><code>s-limit-upr</code>: Upper limit.</li>
|
|
<li><code>s-limit-lwr</code>: Lower limit.</li>
|
|
</ul>
|
|
</ul>
|
|
</div>
|
|
<mct-example><!-- Color alone examples -->
|
|
<div class="s-limit-yellow">Yellow limit</div>
|
|
<div class="s-limit-red">Red limit</div>
|
|
|
|
<!-- Color and icon examples -->
|
|
<div class="s-limit-icon-yellow">Yellow limit with icon</div>
|
|
<div class="s-limit-icon-red">Red limit with icon</div>
|
|
<div class="s-limit-red icon-alert-rect">Red Limit with a custom icon</div>
|
|
<div>Some text with an <span class="s-limit-icon-yellow">inline element</span> showing a yellow limit.</div>
|
|
|
|
<!-- Severity and direction examples -->
|
|
<div class="s-limit-yellow s-limit-lwr">Lower yellow limit</div>
|
|
<div class="s-limit-red s-limit-upr">Upper red limit</div>
|
|
|
|
<!-- Limits applied in a table -->
|
|
<table>
|
|
<tr class='header'><td>Name</td><td>Value 1</td><td>Value 2</td></tr>
|
|
<tr><td>ENG_PWR 4991</td><td>7.023</td><td class="s-limit-yellow s-limit-upr">70.23</td></tr>
|
|
<tr><td>ENG_PWR 4992</td><td>49.784</td><td class="s-limit-red s-limit-lwr">-121.22</td></tr>
|
|
<tr><td>ENG_PWR 4993</td><td class="s-limit-yellow icon-alert-triangle">0.451</td><td>1.007</td></tr>
|
|
</table>
|
|
</mct-example>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="l-section">
|
|
<h2>Status Bar Indicators</h2>
|
|
<div class="cols cols1-1">
|
|
<div class="col">
|
|
<p>Indicators are small iconic notification elements that appear in the Status Bar area of
|
|
the application at the window's bottom. Indicators should be used to articulate the state of a
|
|
system and optionally provide gestures related to that system. They use a combination of icon and
|
|
color to identify themselves and articulate a state respectively.</p>
|
|
<h3>Recommendations</h3>
|
|
<ul>
|
|
<li><strong>Keep the icon consistent</strong>. The icon is the principal identifier of the system and is a valuable
|
|
recall aid for the user. Don't change the icon as a system's state changes, use color and
|
|
text for that purpose.</li>
|
|
<li><strong>Don't use the same icon more than once</strong>. Select meaningful and distinct icons so the user
|
|
will be able to quickly identify what they're looking for.</li>
|
|
</ul>
|
|
|
|
<h3>States</h3>
|
|
<ul>
|
|
<li><strong>Disabled</strong>: The system is not available to the user.</li>
|
|
<li><strong>Off / Available</strong>: The system is accessible to the user but is not currently
|
|
"On" or has not been configured. If the Indicator directly provides gestures
|
|
related to the system, such as opening a configuration dialog box, then use
|
|
"Available"; if the user must act elsewhere or the system isn't user-controllable,
|
|
use "Off".</li>
|
|
<li><strong>On</strong>: The system is enabled or configured; it is having an effect on the larger application.</li>
|
|
<li><strong>Alert / Error</strong>: There has been a problem with the system. Generally, "Alert"
|
|
should be used to call attention to an issue that isn't critical, while "Error"
|
|
should be used to call attention to a problem that the user should really be aware of or do
|
|
something about.</li>
|
|
</ul>
|
|
|
|
<h3>Structure</h3>
|
|
<p>Indicators consist of a <code>.ls-indicator</code>
|
|
wrapper element with <code>.icon-*</code> classes for the type of thing they represent and
|
|
<code>.s-status-*</code> classes to articulate the current state. Title attributes should be used
|
|
to provide more verbose information about the thing and/or its status.</p>
|
|
<p>The wrapper encloses a <code>.label</code> element that is displayed on hover. This element should
|
|
include a brief statement of the current status, and can also include clickable elements
|
|
as <code><a></code> tags. An optional <code>.count</code> element can be included to display
|
|
information such as a number of messages.</p>
|
|
<p>Icon classes are as defined on the
|
|
<a class="link" href="#/browse/styleguide:home/glyphs?tc.mode=local&tc.timeSystem=utc&tc.startDelta=1800000&tc.endDelta=0&view=styleguide.glyphs">
|
|
Glyphs page</a>. Status classes applicable to Indicators are as follows:</p>
|
|
<ul>
|
|
<li><code>s-status-disabled</code></li>
|
|
<li><code>s-status-off</code></li>
|
|
<li><code>s-status-available</code></li>
|
|
<li><code>s-status-on</code></li>
|
|
<li><code>s-status-alert</code></li>
|
|
<li><code>s-status-error</code></li>
|
|
</ul>
|
|
</div>
|
|
<mct-example><div class="s-ue-bottom-bar status-holder s-status-bar">
|
|
<span class="ls-indicator icon-database s-status-disabled" title="The system is currently disabled.">
|
|
<span class="label">System not enabled.</span>
|
|
</span>
|
|
</div>
|
|
|
|
<div class="s-ue-bottom-bar status-holder s-status-bar">
|
|
<span class="ls-indicator icon-database s-status-available" title="Configure data connection.">
|
|
<span class="label">Data connection available
|
|
<a class="icon-gear">Configure</a>
|
|
</span>
|
|
</span>
|
|
</div>
|
|
|
|
<div class="s-ue-bottom-bar status-holder s-status-bar">
|
|
<span class="ls-indicator icon-database s-status-on" title="Data connected.">
|
|
<span class="label">Connected to Skynet
|
|
<a class="icon-gear">Change</a>
|
|
<a>Disconnect</a>
|
|
</span>
|
|
</span>
|
|
</div>
|
|
|
|
<div class="s-ue-bottom-bar status-holder s-status-bar">
|
|
<span class="ls-indicator icon-database s-status-alert" title="System is self-aware.">
|
|
<span class="label">Skynet at Turing Level 5</span>
|
|
</span>
|
|
<span class="ls-indicator icon-bell s-status-error" title="You have alerts.">
|
|
<span class="label">
|
|
<a class="icon-alert-triangle">View Alerts</a>
|
|
</span>
|
|
<span class="count">495</span>
|
|
</span>
|
|
</div>
|
|
</mct-example>
|
|
</div>
|
|
</div>
|
|
</div>
|