openmct/example/styleguide/res/templates/status.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 &quot;color alone&quot; 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
                        &quot;On&quot; or has not been configured. If the Indicator directly provides gestures
                        related to the system, such as opening a configuration dialog box, then use
                        &quot;Available&quot;; if the user must act elsewhere or the system isn't user-controllable,
                        use &quot;Off&quot;.</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, &quot;Alert&quot;
                        should be used to call attention to an issue that isn't critical, while  &quot;Error&quot;
                        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>&lt;a&gt;</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>