alihan/openmct
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[Frontend] WIP

Browse Source 
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
2017-08-17 16:32:25 -07:00
parent 008f1387ed
commit 747afa6200
8 changed files with 110 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
platform/commonUI/general/res/sass/_main.scss
View File

@@ -27,7 +27,7 @@
@import "about";
@import "text";
@import "icons";
@import "limits";
@import "status";
@import "data-status";
@import "helpers/bubbles";
@import "helpers/splitter";

47
platform/commonUI/general/res/sass/_limits.scss → platform/commonUI/general/res/sass/_status.scss
View File

@@ -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; }

14
platform/commonUI/general/res/sass/controls/_messages.scss
View File

@@ -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: