Indicators api (#1837)
* [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;
This commit is contained in:
Andrew Henry
committed by
Pete Richards
Pete Richards
parent
8055e050b6
commit
3246480f82
@@ -42,6 +42,7 @@
|
||||
@import "controls/lists";
|
||||
@import "controls/menus";
|
||||
@import "controls/messages";
|
||||
@import "controls/indicators";
|
||||
@import "mobile/controls/menus";
|
||||
|
||||
/********************************* FORMS */
|
||||
|
||||
@@ -20,66 +20,120 @@
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
/*************************************************** MIXINS */
|
||||
@mixin formulateStatusColors($c) {
|
||||
@mixin elementStatusColors($c) {
|
||||
// Sets bg and icon colors for elements
|
||||
background: rgba($c, 0.4) !important;
|
||||
&:before { color: $c !important; }
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*************************************************** GENERAL */
|
||||
.s-limit-yellow,
|
||||
.s-limit-red,
|
||||
.s-limit-yellow-icon,
|
||||
.s-limit-red-icon,
|
||||
.s-status-warning-lo,
|
||||
.s-status-warning-hi,
|
||||
.s-status-diagnostic,
|
||||
.s-status-command,
|
||||
.s-status-info,
|
||||
.s-status-ok,
|
||||
.s-status-warning-lo-icon,
|
||||
.s-status-warning-hi-icon,
|
||||
.s-status-diagnostic-icon,
|
||||
.s-status-command-icon,
|
||||
.s-status-info-icon,
|
||||
.s-status-ok-icon {
|
||||
@include trans-prop-nice($props: background, $dur: 500ms);
|
||||
background: rgba($c, 0.5) !important;
|
||||
&:before {
|
||||
content:'';
|
||||
font-family: symbolsfont;
|
||||
font-size: 0.8em;
|
||||
margin-right: $interiorMarginSm;
|
||||
color: $c !important;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin indicatorStatusColors($c) {
|
||||
&:before, .count {
|
||||
color: $c;
|
||||
}
|
||||
}
|
||||
|
||||
/*************************************************** GENERAL */
|
||||
.s-limit-upr,
|
||||
.s-limit-lwr,
|
||||
[class*='s-limit-icon'],
|
||||
[class*='s-status-icon'] {
|
||||
&:before {
|
||||
content:'';
|
||||
display: inline-block;
|
||||
font-family: symbolsfont;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
}
|
||||
|
||||
/*************************************************** LIMITS */
|
||||
.s-limit-yellow, .s-limit-yellow-icon {
|
||||
@include formulateStatusColors($colorWarningLo);
|
||||
[class*='s-limit'] {
|
||||
&[class*='icon-'] {
|
||||
&:before {
|
||||
margin-right: $interiorMargin;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.s-limit-red, .s-limit-red-icon {
|
||||
@include formulateStatusColors($colorWarningHi);
|
||||
.s-limit-yellow, .s-limit-icon-yellow {
|
||||
@include elementStatusColors($colorWarningLo);
|
||||
}
|
||||
|
||||
.s-limit-upr:before { content: $glyph-icon-arrow-double-up; }
|
||||
.s-limit-lwr:before { content: $glyph-icon-arrow-double-down; }
|
||||
.s-limit-yellow-icon:before,
|
||||
.s-limit-red-icon:before { content: $glyph-icon-alert-triangle; }
|
||||
.s-limit-red, .s-limit-icon-red {
|
||||
@include elementStatusColors($colorWarningHi);
|
||||
}
|
||||
|
||||
.s-limit {
|
||||
&-upr,
|
||||
&-lwr {
|
||||
&:before {
|
||||
margin-right: $interiorMargin;
|
||||
}
|
||||
}
|
||||
|
||||
&-upr:before { content: $glyph-icon-arrow-double-up; }
|
||||
&-lwr:before { content: $glyph-icon-arrow-double-down; }
|
||||
|
||||
&-icon-yellow,
|
||||
&-icon-red {
|
||||
&:before {
|
||||
content: $glyph-icon-alert-triangle;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*************************************************** STATUS */
|
||||
.s-status-warning-hi, .s-status-warning-hi-icon { @include formulateStatusColors($colorWarningHi); }
|
||||
.s-status-warning-lo, .s-status-warning-lo-icon { @include formulateStatusColors($colorWarningLo); }
|
||||
.s-status-diagnostic, .s-status-diagnostic-icon { @include formulateStatusColors($colorDiagnostic); }
|
||||
.s-status-info, .s-status-info-icon { @include formulateStatusColors($colorInfo); }
|
||||
.s-status-ok, .s-status-ok-icon { @include formulateStatusColors($colorOk); }
|
||||
[class*='s-status'] {
|
||||
&[class*='icon-'] {
|
||||
&:before {
|
||||
margin-right: $interiorMargin;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.s-status-warning-hi-icon:before { content: $glyph-icon-alert-triangle; }
|
||||
.s-status-warning-lo-icon:before { content: $glyph-icon-alert-rect; }
|
||||
.s-status-diagnostic-icon:before { content: $glyph-icon-eye-open; }
|
||||
.s-status-info-icon:before { content: $glyph-icon-info; }
|
||||
.s-status-ok-icon:before { content: $glyph-icon-check; }
|
||||
.s-status-warning-hi, .s-status-icon-warning-hi { @include elementStatusColors($colorWarningHi); }
|
||||
.s-status-warning-lo, .s-status-icon-warning-lo { @include elementStatusColors($colorWarningLo); }
|
||||
.s-status-diagnostic, .s-status-icon-diagnostic { @include elementStatusColors($colorDiagnostic); }
|
||||
.s-status-info, .s-status-icon-info { @include elementStatusColors($colorInfo); }
|
||||
.s-status-ok, .s-status-icon-ok { @include elementStatusColors($colorOk); }
|
||||
|
||||
.s-status-icon-warning-hi:before { content: $glyph-icon-alert-triangle; }
|
||||
.s-status-icon-warning-lo:before { content: $glyph-icon-alert-rect; }
|
||||
.s-status-icon-diagnostic:before { content: $glyph-icon-eye-open; }
|
||||
.s-status-icon-info:before { content: $glyph-icon-info; }
|
||||
.s-status-icon-ok:before { content: $glyph-icon-check; }
|
||||
|
||||
/*************************************************** INDICATOR COLORING */
|
||||
.ls-indicator {
|
||||
&.s-status-info {
|
||||
@include indicatorStatusColors($colorInfo);
|
||||
}
|
||||
|
||||
&.s-status-disabled {
|
||||
@include indicatorStatusColors($colorIndicatorDisabled);
|
||||
}
|
||||
|
||||
&.s-status-available {
|
||||
@include indicatorStatusColors($colorIndicatorAvailable);
|
||||
}
|
||||
|
||||
&.s-status-on,
|
||||
&.s-status-enabled {
|
||||
@include indicatorStatusColors($colorIndicatorOn);
|
||||
}
|
||||
|
||||
&.s-status-off {
|
||||
@include indicatorStatusColors($colorIndicatorOff);
|
||||
}
|
||||
|
||||
&.s-status-caution,
|
||||
&.s-status-warning,
|
||||
&.s-status-alert {
|
||||
@include indicatorStatusColors($colorStatusAlert);
|
||||
}
|
||||
|
||||
&.s-status-error {
|
||||
@include indicatorStatusColors($colorStatusError);
|
||||
}
|
||||
}
|
||||
|
||||
146
platform/commonUI/general/res/sass/controls/_indicators.scss
Normal file
146
platform/commonUI/general/res/sass/controls/_indicators.scss
Normal file
@@ -0,0 +1,146 @@
|
||||
/*****************************************************************************
|
||||
* Open MCT, Copyright (c) 2014-2017, 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.
|
||||
*****************************************************************************/
|
||||
|
||||
/* Indicators are generally only displayed in the ue-bottom-bar element of the main interface */
|
||||
|
||||
.h-indicator,
|
||||
mct-indicators mct-include {
|
||||
display: inline; // Fallback for display: contents
|
||||
display: contents;
|
||||
}
|
||||
|
||||
.ls-indicator {
|
||||
$bg: rgba(white, 0.2) !important;
|
||||
$hbg: $colorStatusBarBg;
|
||||
$hshdw: rgba(white, 0.4) 0 0 3px;
|
||||
$br: $controlCr;
|
||||
$hoverYOffset: -35px;
|
||||
background: transparent !important;
|
||||
border-radius: $br;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
padding: 1px $interiorMarginSm; // Use padding instead of margin to keep hover chatter to a minimum
|
||||
|
||||
&:before {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.label {
|
||||
display: inline-block;
|
||||
a,
|
||||
button,
|
||||
.s-button {
|
||||
// Make <a> in label look like buttons
|
||||
@include trans-prop-nice($props: all, $dur: 100ms);
|
||||
background: transparent;
|
||||
border: 1px solid rgba($colorStatusBarFg, 0.5);
|
||||
border-radius: $br;
|
||||
box-sizing: border-box;
|
||||
color: inherit;
|
||||
font-size: inherit;
|
||||
height: auto;
|
||||
line-height: normal;
|
||||
padding: 0 2px;
|
||||
&:hover {
|
||||
background: $bg;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
> [class*='icon-'] {
|
||||
&:before {
|
||||
font-size: 0.8em;
|
||||
margin-right: $interiorMarginSm;
|
||||
}
|
||||
}
|
||||
|
||||
button { text-transform: uppercase !important; }
|
||||
}
|
||||
|
||||
&.no-collapse {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
align-items: center;
|
||||
|
||||
> *,
|
||||
&:before {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
&:before {
|
||||
margin-right: $interiorMarginSm;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.no-collapse) {
|
||||
z-index: 0;
|
||||
|
||||
&:before {
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
|
||||
.label {
|
||||
transition: all 250ms ease-in 100ms;
|
||||
background: $hbg;
|
||||
border-radius: $br;
|
||||
font-size: .6rem;
|
||||
left: 0;
|
||||
bottom: 140%;
|
||||
opacity: 0;
|
||||
padding: $interiorMarginSm $interiorMargin;
|
||||
position: absolute;
|
||||
transform-origin: 10px 100%;
|
||||
transform: scale(0.0);
|
||||
white-space: nowrap;
|
||||
&:before {
|
||||
// Infobubble-style arrow element
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
@include triangle('down', $size: 4px, $ratio: 1, $color: $hbg);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $bg;
|
||||
z-index: 1;
|
||||
.label {
|
||||
opacity: 1;
|
||||
transform: scale(1.0);
|
||||
transition: all 100ms ease-out 0s;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.float-right {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
/* Mobile */
|
||||
// Hide the clock indicator when we're phone portrait
|
||||
body.phone.portrait {
|
||||
.ls-indicator.t-indicator-clock {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -19,9 +19,9 @@
|
||||
* this source code distribution or the Licensing information page available
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
/******************************************************************* STATUS BLOCK ELEMS */
|
||||
|
||||
@mixin statusBannerColors($bg, $fg: $colorStatusFg) {
|
||||
$bgPb: 30%;
|
||||
$bgPb: 10%;
|
||||
$bgPbD: 10%;
|
||||
background-color: darken($bg, $bgPb);
|
||||
color: $fg;
|
||||
@@ -36,110 +36,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Status coloring
|
||||
.ok, .info {
|
||||
.status-indicator {
|
||||
color: $colorInfo;
|
||||
}
|
||||
}
|
||||
|
||||
.alert, .caution, .warning {
|
||||
.status-indicator, .count {
|
||||
color: $colorStatusAlert;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.error, .err {
|
||||
.status-indicator, .count {
|
||||
color: $colorStatusError;
|
||||
}
|
||||
}
|
||||
|
||||
.available {
|
||||
.status-indicator, .count {
|
||||
color: $colorStatusAvailable;
|
||||
}
|
||||
}
|
||||
|
||||
.subdued {
|
||||
.status-indicator {
|
||||
color: pullForward($colorStatusBarBg, 40%);
|
||||
}
|
||||
}
|
||||
|
||||
.status-block-holder {
|
||||
// Applied to mct-include element
|
||||
// Contains status.block elements
|
||||
$transDelay: 1.5s;
|
||||
$transSpeed: .25s;
|
||||
display: inline-block;
|
||||
&.clickable { cursor: pointer; }
|
||||
&:not(.clickable) { cursor: default; }
|
||||
&.no-icon .status.block {
|
||||
.status-indicator {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
&.float-right {
|
||||
float: right;
|
||||
}
|
||||
&:not(.no-collapse) .status.block {
|
||||
.label {
|
||||
// Max-width silliness is necessary for width transition
|
||||
@include trans-prop-nice(max-width, $transSpeed, $transDelay);
|
||||
overflow: hidden;
|
||||
max-width: 0px;
|
||||
}
|
||||
&:hover {
|
||||
.label {
|
||||
@include trans-prop-nice(max-width, $transSpeed, 0s);
|
||||
max-width: 600px;
|
||||
width: auto;
|
||||
}
|
||||
.count {
|
||||
@include trans-prop-nice(max-width, $transSpeed, 0s);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.status.block {
|
||||
$transDelay: 1.5s;
|
||||
$transSpeed: .25s;
|
||||
color: $colorStatusDefault;
|
||||
display: inline-block;
|
||||
margin-right: $interiorMargin;
|
||||
.status-indicator,
|
||||
.label,
|
||||
.count {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.status-indicator {
|
||||
background: none !important;
|
||||
margin-right: $interiorMarginSm;
|
||||
&[class*='s-status']:before {
|
||||
font-size: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.count {
|
||||
@include trans-prop-nice(opacity, $transSpeed, $transDelay);
|
||||
font-weight: bold;
|
||||
opacity: 1;
|
||||
}
|
||||
.s-button {
|
||||
background: $colorStatusBtnBg;
|
||||
padding: 0 $interiorMargin;
|
||||
height: auto;
|
||||
line-height: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
/******************************************************************* MESSAGE BANNERS */
|
||||
.message {
|
||||
&.block {
|
||||
@@ -289,7 +185,6 @@
|
||||
|
||||
> div,
|
||||
> span {
|
||||
//@include test(red);
|
||||
margin-bottom: $interiorMargin;
|
||||
}
|
||||
|
||||
|
||||
@@ -47,6 +47,18 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.status-holder {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.s-ue-bottom-bar {
|
||||
background: $colorStatusBarBg;
|
||||
color: $colorStatusBarFg;
|
||||
cursor: default;
|
||||
font-size: .7rem;
|
||||
}
|
||||
|
||||
.user-environ {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
@@ -81,21 +93,17 @@
|
||||
}
|
||||
}
|
||||
|
||||
.ue-bottom-bar {
|
||||
@include absPosDefault(0);// New status bar design
|
||||
.l-ue-bottom-bar {
|
||||
$m: $interiorMarginSm;
|
||||
@include absPosDefault(0, $overflow: visible);// New status bar design
|
||||
top: auto;
|
||||
height: $ueFooterH;
|
||||
line-height: $ueFooterH - ($interiorMargin * 2);
|
||||
background: $colorStatusBarBg;
|
||||
color: lighten($colorBodyBg, 30%);
|
||||
font-size: .7rem;
|
||||
line-height: $ueFooterH - ($m * 2);
|
||||
.status-holder {
|
||||
box-sizing: border-box;
|
||||
@include absPosDefault($interiorMargin);
|
||||
@include ellipsize();
|
||||
@include absPosDefault($m, $overflow: visible);
|
||||
right: 120px;
|
||||
text-transform: uppercase;
|
||||
z-index: 1;
|
||||
z-index: 10;
|
||||
}
|
||||
.app-logo {
|
||||
background-position: right center;
|
||||
|
||||
@@ -20,14 +20,8 @@
|
||||
at runtime from the About dialog for additional information.
|
||||
-->
|
||||
<!-- DO NOT ADD SPACES BETWEEN THE SPANS - IT ADDS WHITE SPACE!! -->
|
||||
<div class='status block'
|
||||
<div class="ls-indicator {{ngModel.getCssClass()}}"
|
||||
title="{{ngModel.getDescription()}}"
|
||||
ng-click='ngModel.configure()'
|
||||
ng-show="ngModel.getText().length > 0">
|
||||
<span class="status-indicator {{ngModel.getCssClass()}}"></span><span class="label"
|
||||
ng-class='ngModel.getTextClass()'>
|
||||
{{ngModel.getText()}}
|
||||
<a class="s-button icon-gear" ng-if="ngModel.configure"></a>
|
||||
</span><span class="count">
|
||||
</span>
|
||||
<span class="label">{{ngModel.getText()}}</span>
|
||||
</div>
|
||||
@@ -19,14 +19,9 @@
|
||||
this source code distribution or the Licensing information page available
|
||||
at runtime from the About dialog for additional information.
|
||||
-->
|
||||
<div class='abs bottom-bar ue-bottom-bar mobile-disable-select' ng-controller="BottomBarController as bar">
|
||||
<div class='abs bottom-bar l-ue-bottom-bar s-ue-bottom-bar mobile-disable-select'>
|
||||
<div id='status' class='status-holder'>
|
||||
<mct-include ng-repeat="indicator in bar.getIndicators()"
|
||||
ng-model="indicator.ngModel"
|
||||
key="indicator.template"
|
||||
class="status-block-holder"
|
||||
ng-class='indicator.ngModel.getGlyphClass()'>
|
||||
</mct-include>
|
||||
<mct-indicators></mct-indicators>
|
||||
</div>
|
||||
<mct-include key="'message-banner'"></mct-include>
|
||||
<mct-include key="'about-logo'"></mct-include>
|
||||
|
||||
Reference in New Issue
Block a user