ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-04-09 04:14:32 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

[Frontend] Style and display changes to status block

Browse Source 
open #159
open #170
Refined structure in status block markup and css;
Added status-related color constants to theme scss files;
This commit is contained in:
Charles Hacskaylo 2015-10-02 17:42:31 -07:00
parent 7014808c13
commit 926aed72c3
6 changed files with 117 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -21,36 +21,44 @@
*****************************************************************************/
.status.block {
//@include test();
cursor: help;
color: $colorStatusDefault;
cursor: default;
display: inline-block;
margin-right: $interiorMargin;
.status-indicator,
.label {
.label,
.count {
//@include test(#00ff00);
display: inline-block;
vertical-align: top;
}
.status-indicator {
display: inline-block;
margin-right: $interiorMarginSm;
color: $colorKey;
&.ok {
color: #009900;
}
&.caution {
color: #ffaa00;
}
}
&.ok .status-indicator {
color: $colorStatusOk;
}
&.caution .status-indicator {
color: $colorStatusCaution;
}
.label {
// Max-width silliness is necessary for width transition
@include trans-prop-nice(max-width, .25s);
display: inline-block;
overflow: hidden;
max-width: 0px;
}
.count {
@include trans-prop-nice(opacity, .25s);
font-weight: bold;
opacity: 1;
}
&:hover {
.label {
max-width: 150px;
width: auto;
}
.count {
opacity: 0;
}
}
}

26
platform/commonUI/general/res/templates/indicator.html
View File

@ -19,20 +19,20 @@
this source code distribution or the Licensing information page available
at runtime from the About dialog for additional information.
-->
<!-- DO NOT ADD SPACES BETWEEN THE SPANS - IT ADDS WHITE SPACE!! -->
<div class='status block'
title="{{ngModel.getText() + ': ' + ngModel.getDescription()}}"
ng-click='ngModel.configure()'
ng-class='ngModel.getClass()'
ng-show="ngModel.getText().length > 0">
<span class="ui-symbol status-indicator"
ng-class='ngModel.getGlyphClass()'>
{{ngModel.getGlyph()}}
</span>
<span class="label"
ng-class='ngModel.getTextClass()'>
{{ngModel.getText()}}
</span>
<a href=''
title="{{ngModel.getDescription()}}"
ng-click='ngModel.configure()'
ng-class='ngModel.getGlyphClass()'
ng-show="ngModel.getText().length > 0">
<span class="ui-symbol status-indicator">
{{ngModel.getGlyph()}}
</span><span class="label"
ng-class='ngModel.getTextClass()'>
{{ngModel.getText()}}
</span><span class="count">
<!-- Add count value here if this type of indicator has one or more messages associated with it -->
</span><a href=''
class="ui-symbol"
ng-if="ngModel.configure">
G

53
platform/commonUI/themes/espresso/res/css/theme-espresso.css
View File

@ -2306,25 +2306,26 @@ label.checkbox.custom {
*****************************************************************************/
/* line 23, ../../../../general/res/sass/controls/_messages.scss */
.status.block {
cursor: help;
color: #ccc;
cursor: default;
display: inline-block;
margin-right: 5px; }
/* line 29, ../../../../general/res/sass/controls/_messages.scss */
/* line 28, ../../../../general/res/sass/controls/_messages.scss */
.status.block .status-indicator,
.status.block .label {
vertical-align: top; }
/* line 34, ../../../../general/res/sass/controls/_messages.scss */
.status.block .status-indicator {
.status.block .label,
.status.block .count {
display: inline-block;
margin-right: 3px;
color: #0099cc; }
/* line 38, ../../../../general/res/sass/controls/_messages.scss */
.status.block .status-indicator.ok {
color: #009900; }
/* line 41, ../../../../general/res/sass/controls/_messages.scss */
.status.block .status-indicator.caution {
color: #ffaa00; }
/* line 45, ../../../../general/res/sass/controls/_messages.scss */
vertical-align: top; }
/* line 35, ../../../../general/res/sass/controls/_messages.scss */
.status.block .status-indicator {
margin-right: 3px; }
/* line 38, ../../../../general/res/sass/controls/_messages.scss */
.status.block.ok .status-indicator {
color: #6cb773; }
/* line 41, ../../../../general/res/sass/controls/_messages.scss */
.status.block.caution .status-indicator {
color: #ffa864; }
/* line 44, ../../../../general/res/sass/controls/_messages.scss */
.status.block .label {
-moz-transition-property: max-width;
-o-transition-property: max-width;
@ -2338,13 +2339,31 @@ label.checkbox.custom {
-o-transition-timing-function: ease-in-out;
-webkit-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
display: inline-block;
overflow: hidden;
max-width: 0px; }
/* line 54, ../../../../general/res/sass/controls/_messages.scss */
/* line 50, ../../../../general/res/sass/controls/_messages.scss */
.status.block .count {
-moz-transition-property: opacity;
-o-transition-property: opacity;
-webkit-transition-property: opacity;
transition-property: opacity;
-moz-transition-duration: 0.25s;
-o-transition-duration: 0.25s;
-webkit-transition-duration: 0.25s;
transition-duration: 0.25s;
-moz-transition-timing-function: ease-in-out;
-o-transition-timing-function: ease-in-out;
-webkit-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
font-weight: bold;
opacity: 1; }
/* line 56, ../../../../general/res/sass/controls/_messages.scss */
.status.block:hover .label {
max-width: 150px;
width: auto; }
/* line 60, ../../../../general/res/sass/controls/_messages.scss */
.status.block:hover .count {
opacity: 0; }
/* line 1, ../../../../general/res/sass/controls/_time-controller.scss */
.l-time-controller {

6
platform/commonUI/themes/espresso/res/sass/_constants.scss
View File

@ -58,6 +58,12 @@ $colorInputFg: pullForward($colorBodyFg, 20%);
$colorFormText: rgba(#fff, 0.5);
$colorInputIcon: pushBack($colorBodyFg, 15%);
// Status colors, mainly used for messaging and item ancillary symbols
$colorStatusDefault: #ccc;
$colorStatusOk: #6cb773;
$colorStatusCaution: #ffa864;
$colorStatusAlert: $colorAlert;
// Selects
$colorSelectBg: $colorBtnBg;
$colorSelectFg: $colorBtnFg;

53
platform/commonUI/themes/snow/res/css/theme-snow.css
View File

@ -2254,25 +2254,26 @@ label.checkbox.custom {
*****************************************************************************/
/* line 23, ../../../../general/res/sass/controls/_messages.scss */
.status.block {
cursor: help;
color: #ccc;
cursor: default;
display: inline-block;
margin-right: 5px; }
/* line 29, ../../../../general/res/sass/controls/_messages.scss */
/* line 28, ../../../../general/res/sass/controls/_messages.scss */
.status.block .status-indicator,
.status.block .label {
vertical-align: top; }
/* line 34, ../../../../general/res/sass/controls/_messages.scss */
.status.block .status-indicator {
.status.block .label,
.status.block .count {
display: inline-block;
margin-right: 3px;
color: #0099cc; }
/* line 38, ../../../../general/res/sass/controls/_messages.scss */
.status.block .status-indicator.ok {
color: #009900; }
/* line 41, ../../../../general/res/sass/controls/_messages.scss */
.status.block .status-indicator.caution {
color: #ffaa00; }
/* line 45, ../../../../general/res/sass/controls/_messages.scss */
vertical-align: top; }
/* line 35, ../../../../general/res/sass/controls/_messages.scss */
.status.block .status-indicator {
margin-right: 3px; }
/* line 38, ../../../../general/res/sass/controls/_messages.scss */
.status.block.ok .status-indicator {
color: #090; }
/* line 41, ../../../../general/res/sass/controls/_messages.scss */
.status.block.caution .status-indicator {
color: #fa0; }
/* line 44, ../../../../general/res/sass/controls/_messages.scss */
.status.block .label {
-moz-transition-property: max-width;
-o-transition-property: max-width;
@ -2286,13 +2287,31 @@ label.checkbox.custom {
-o-transition-timing-function: ease-in-out;
-webkit-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
display: inline-block;
overflow: hidden;
max-width: 0px; }
/* line 54, ../../../../general/res/sass/controls/_messages.scss */
/* line 50, ../../../../general/res/sass/controls/_messages.scss */
.status.block .count {
-moz-transition-property: opacity;
-o-transition-property: opacity;
-webkit-transition-property: opacity;
transition-property: opacity;
-moz-transition-duration: 0.25s;
-o-transition-duration: 0.25s;
-webkit-transition-duration: 0.25s;
transition-duration: 0.25s;
-moz-transition-timing-function: ease-in-out;
-o-transition-timing-function: ease-in-out;
-webkit-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
font-weight: bold;
opacity: 1; }
/* line 56, ../../../../general/res/sass/controls/_messages.scss */
.status.block:hover .label {
max-width: 150px;
width: auto; }
/* line 60, ../../../../general/res/sass/controls/_messages.scss */
.status.block:hover .count {
opacity: 0; }
/* line 1, ../../../../general/res/sass/controls/_time-controller.scss */
.l-time-controller {

6
platform/commonUI/themes/snow/res/sass/_constants.scss
View File

@ -60,6 +60,12 @@ $colorInputIcon: pushBack($colorBodyFg, 25%);
$colorSelectBg: #ddd;
$colorSelectFg: $colorBodyFg;
// Status colors, mainly used for messaging and item ancillary symbols
$colorStatusDefault: #ccc;
$colorStatusOk: #090;
$colorStatusCaution: #fa0;
$colorStatusAlert: $colorAlert;
// Limits and staleness colors//
$colorTelemFresh: pullForward($colorBodyFg, 20%);
$colorTelemStale: pushBack($colorBodyFg, 20%);