mirror of
https://github.com/nasa/openmct.git
synced 2025-03-22 03:55:31 +00:00
[Frontend] WIP
Fixes #1677 Refactor and re-organize alert and status colors; Rename _limits.scss to _status.scss; Style Guide additions in progress; VERY WIP, NEEDS UNIT TESTING FOR REGRESSION.
This commit is contained in:
Charles Hacskaylo
parent
008f1387ed
commit
747afa6200
@ -21,6 +21,7 @@
|
||||
-->
|
||||
<style>
|
||||
.w-mct-example div[class*="s-limit"],
|
||||
.w-mct-example div[class*="s-status"],
|
||||
.w-mct-example div[class*="s-unsynced"],
|
||||
.w-mct-example span[class*="s-limit"] {
|
||||
border-radius: 4px;
|
||||
@ -73,6 +74,28 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="l-section">
|
||||
<h2>Status</h2>
|
||||
<div class="cols cols1-1">
|
||||
<div class="col">
|
||||
<p>Classes here can be applied to elements as needed.</p>
|
||||
<ul>
|
||||
<li><code>s-status-warning-hi</code>: Nuke the entire site from orbit - it's the only way to be sure.</li>
|
||||
<li><code>s-status-warning-lo</code>: Pay attention to this.</li>
|
||||
<li><code>s-status-diagnostic</code>: Something in the code wants to talk to you.</li>
|
||||
<li><code>s-status-info</code>: What?! What?! Oh, ok.</li>
|
||||
<li><code>s-status-ok</code>: Whew! Hand me a beer would'ya?</li>
|
||||
</ul>
|
||||
</div>
|
||||
<mct-example><div class="s-status-warning-hi-icon">WARNING HI</div>
|
||||
<div class="s-status-warning-lo-icon">WARNING LOW</div>
|
||||
<div class="s-status-diagnostic-icon">DIAGNOSTIC</div>
|
||||
<div class="s-status-info-icon">INFO</div>
|
||||
<div class="s-status-ok-icon">OK</div>
|
||||
</mct-example>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="l-section">
|
||||
<h2>Synchronization</h2>
|
||||
<div class="cols cols1-1">
|
||||
|
||||
@ -27,7 +27,7 @@
|
||||
@import "about";
|
||||
@import "text";
|
||||
@import "icons";
|
||||
@import "limits";
|
||||
@import "status";
|
||||
@import "data-status";
|
||||
@import "helpers/bubbles";
|
||||
@import "helpers/splitter";
|
||||
|
||||
@ -19,6 +19,16 @@
|
||||
* this source code distribution or the Licensing information page available
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
/*************************************************** MIXINS */
|
||||
@mixin formulateStatusColors($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,
|
||||
@ -28,7 +38,14 @@
|
||||
.s-status-diagnostic,
|
||||
.s-status-command,
|
||||
.s-status-info,
|
||||
.s-status-ok {
|
||||
.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);
|
||||
&:before {
|
||||
content:'';
|
||||
font-family: symbolsfont;
|
||||
@ -38,16 +55,14 @@
|
||||
}
|
||||
}
|
||||
|
||||
.s-limit-yellow,
|
||||
.s-limit-yellow-icon {
|
||||
background: $colorLimitYellowBg !important;
|
||||
&:before { color: $colorLimitYellowIc !important; }
|
||||
|
||||
/*************************************************** LIMITS */
|
||||
.s-limit-yellow, .s-limit-yellow-icon {
|
||||
@include formulateStatusColors($colorWarningLo);
|
||||
}
|
||||
|
||||
.s-limit-red,
|
||||
.s-limit-red-icon {
|
||||
background: $colorLimitRedBg !important;
|
||||
&:before { color: $colorLimitRedIc !important; }
|
||||
.s-limit-red, .s-limit-red-icon {
|
||||
@include formulateStatusColors($colorWarningHi);
|
||||
}
|
||||
|
||||
.s-limit-upr:before { content: $glyph-icon-arrow-double-up; }
|
||||
@ -55,3 +70,17 @@
|
||||
.s-limit-yellow-icon:before,
|
||||
.s-limit-red-icon: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); }
|
||||
|
||||
.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; }
|
||||
|
||||
|
||||
@ -39,7 +39,7 @@
|
||||
// Status coloring
|
||||
.ok, .info {
|
||||
.status-indicator {
|
||||
color: $colorStatusInfo;
|
||||
color: $colorInfo;
|
||||
}
|
||||
}
|
||||
|
||||
@ -224,15 +224,15 @@
|
||||
}
|
||||
&.ok,
|
||||
&.info {
|
||||
@include statusBannerColors($colorStatusInfo);
|
||||
@include statusBannerColors($colorInfo);
|
||||
}
|
||||
&.caution,
|
||||
&.warning,
|
||||
&.alert {
|
||||
@include statusBannerColors($colorStatusAlert);
|
||||
@include statusBannerColors($colorWarningLo);
|
||||
}
|
||||
&.error {
|
||||
@include statusBannerColors($colorStatusError);
|
||||
@include statusBannerColors($colorWarningHi);
|
||||
}
|
||||
}
|
||||
|
||||
@ -248,15 +248,15 @@
|
||||
|
||||
.message-severity-info .type-icon.message-type {
|
||||
@extend .icon-info;
|
||||
color: $colorStatusInfo;
|
||||
color: $colorInfo;
|
||||
}
|
||||
.message-severity-alert .type-icon.message-type {
|
||||
@extend .icon-bell;
|
||||
color: $colorStatusAlert;
|
||||
color: $colorWarningLo;
|
||||
}
|
||||
.message-severity-error .type-icon.message-type {
|
||||
@extend .icon-alert-rect;
|
||||
color: $colorStatusError;
|
||||
color: $colorWarningHi;
|
||||
}
|
||||
}
|
||||
/* Paths:
|
||||
|
||||
@ -53,9 +53,15 @@ $timeControllerToiLineColor: #00c2ff;
|
||||
$timeControllerToiLineColorHov: #fff;
|
||||
$colorTransLucBg: #666; // Used as a visual blocking element over variable backgrounds, like imagery
|
||||
|
||||
// General Colors
|
||||
// Foundation Colors
|
||||
$colorAlt1: #ffc700;
|
||||
$colorAlert: #ff3c00;
|
||||
$colorWarningHi: #cc0000;
|
||||
$colorWarningLo: #ff9900;
|
||||
$colorDiagnostic: #a4b442;
|
||||
$colorCommand: #3693bd;
|
||||
$colorInfo: #2294a2;
|
||||
$colorOk: #33cc33;
|
||||
$colorIconLink: #49dedb;
|
||||
$colorPausedBg: #c56f01;
|
||||
$colorPausedFg: #fff;
|
||||
@ -84,8 +90,8 @@ $colorCreateMenuText: $colorMenuFg;
|
||||
// Form colors
|
||||
$colorCheck: $colorKey;
|
||||
$colorFormRequired: $colorAlt1;
|
||||
$colorFormValid: #33cc33;
|
||||
$colorFormError: #990000;
|
||||
$colorFormValid: $colorOk;
|
||||
$colorFormError: $colorWarningHi;
|
||||
$colorFormInvalid: #ff3300;
|
||||
$colorFormFieldErrorBg: $colorFormError;
|
||||
$colorFormFieldErrorFg: rgba(#fff, 0.6);
|
||||
@ -109,8 +115,8 @@ $colorInspectorSectionHeaderFg: pullForward($colorInspectorBg, 40%);
|
||||
// Status colors, mainly used for messaging and item ancillary symbols
|
||||
$colorStatusFg: #ccc;
|
||||
$colorStatusDefault: #ccc;
|
||||
$colorStatusInfo: #62ba72;
|
||||
$colorStatusAlert: #ffa66d;
|
||||
$colorStatusInfo: $colorInfo;
|
||||
$colorStatusAlert: $colorAlert;
|
||||
$colorStatusError: #d4585c;
|
||||
$colorStatusAvailable: $colorKey;
|
||||
$colorStatusBtnBg: $colorBtnBg;
|
||||
@ -125,14 +131,14 @@ $animPausedPulseDur: 500ms;
|
||||
$colorSelectBg: $colorBtnBg;
|
||||
$colorSelectFg: $colorBtnFg;
|
||||
|
||||
// Limits and staleness colors
|
||||
// Limits, status and staleness colors
|
||||
$colorTelemFresh: pullForward($colorBodyFg, 20%);
|
||||
$colorTelemStale: pushBack($colorBodyFg, 20%);
|
||||
$styleTelemStale: italic;
|
||||
$colorLimitYellowBg: rgba(#ffaa00, 0.3);
|
||||
$colorLimitYellowIc: #ffaa00;
|
||||
$colorLimitRedBg: rgba(red, 0.3);
|
||||
$colorLimitRedIc: red;
|
||||
$colorLimitYellowBg: rgba($colorWarningLo, 0.3);
|
||||
$colorLimitYellowIc: $colorWarningLo;
|
||||
$colorLimitRedBg: rgba($colorWarningHi, 0.3);
|
||||
$colorLimitRedIc: $colorWarningHi;
|
||||
|
||||
// Bubble colors
|
||||
$colorInfoBubbleBg: #ddd;
|
||||
|
||||
@ -13,3 +13,10 @@
|
||||
// For dark interfaces, darker things move back - opposite for light interfaces
|
||||
@return darken($c, $p);
|
||||
}
|
||||
|
||||
@function bgFg($c) {
|
||||
// Given a single color, return valid background and foreground versions of that color
|
||||
$bg: darken($c, 20%);
|
||||
$fg: lighten($c, 20%);
|
||||
@return $bg, $fg;
|
||||
}
|
||||
|
||||
@ -53,9 +53,15 @@ $timeControllerToiLineColor: $colorBodyFg;
|
||||
$timeControllerToiLineColorHov: #0052b5;
|
||||
$colorTransLucBg: #666; // Used as a visual blocking element over variable backgrounds, like imagery
|
||||
|
||||
// General Colors
|
||||
// Foundation Colors
|
||||
$colorAlt1: #776ba2;
|
||||
$colorAlert: #ff3c00;
|
||||
$colorWarningHi: #990000;
|
||||
$colorWarningLo: #ff9900;
|
||||
$colorDiagnostic: #a4b442;
|
||||
$colorCommand: #3693bd;
|
||||
$colorInfo: #2294a2;
|
||||
$colorOk: #33cc33;
|
||||
$colorIconLink: #49dedb;
|
||||
$colorPausedBg: #ff9900;
|
||||
$colorPausedFg: #fff;
|
||||
@ -84,8 +90,8 @@ $colorCreateMenuText: $colorBodyFg;
|
||||
// Form colors
|
||||
$colorCheck: $colorKey;
|
||||
$colorFormRequired: $colorKey;
|
||||
$colorFormValid: #33cc33;
|
||||
$colorFormError: #990000;
|
||||
$colorFormValid: $colorOk;
|
||||
$colorFormError: $colorWarningHi;
|
||||
$colorFormInvalid: #ff2200;
|
||||
$colorFormFieldErrorBg: $colorFormError;
|
||||
$colorFormFieldErrorFg: rgba(#fff, 0.6);
|
||||
@ -107,7 +113,7 @@ $colorInspectorSectionHeaderBg: pullForward($colorInspectorBg, 5%);
|
||||
$colorInspectorSectionHeaderFg: pullForward($colorInspectorBg, 40%);
|
||||
|
||||
// Status colors, mainly used for messaging and item ancillary symbols
|
||||
$colorStatusFg: #fff;
|
||||
$colorStatusFg: #999;
|
||||
$colorStatusDefault: #ccc;
|
||||
$colorStatusInfo: #60ba7b;
|
||||
$colorStatusAlert: #ffb66c;
|
||||
|
||||
@ -12,3 +12,11 @@
|
||||
// For dark interfaces, darker things move back - opposite for light interfaces
|
||||
@return lighten($c, $p);
|
||||
}
|
||||
|
||||
@function bgFg($c) {
|
||||
// Given a single color, return valid background and foreground versions of that color
|
||||
$bg: darken($c, 20%);
|
||||
$fg: lighten($c, 20%);
|
||||
@return $bg, $fg;
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user