alihan/openmct
1
0
Fork 0
Code Issues Pull Requests 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
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 { .status.block {
//@include test(); color: $colorStatusDefault;
cursor: help; cursor: default;
display: inline-block; display: inline-block;
margin-right: $interiorMargin; margin-right: $interiorMargin;
.status-indicator, .status-indicator,
.label { .label,
.count {
//@include test(#00ff00);
display: inline-block;
vertical-align: top; vertical-align: top;
} }
.status-indicator { .status-indicator {
display: inline-block;
margin-right: $interiorMarginSm; margin-right: $interiorMarginSm;
color: $colorKey; }
&.ok { &.ok .status-indicator {
color: #009900; color: $colorStatusOk;
} }
&.caution { &.caution .status-indicator {
color: #ffaa00; color: $colorStatusCaution;
}
} }
.label { .label {
// Max-width silliness is necessary for width transition // Max-width silliness is necessary for width transition
@include trans-prop-nice(max-width, .25s); @include trans-prop-nice(max-width, .25s);
display: inline-block;
overflow: hidden; overflow: hidden;
max-width: 0px; max-width: 0px;
} }
.count {
@include trans-prop-nice(opacity, .25s);
font-weight: bold;
opacity: 1;
}
&:hover { &:hover {
.label { .label {
max-width: 150px; max-width: 150px;
width: auto; 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 this source code distribution or the Licensing information page available
at runtime from the About dialog for additional information. 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='status block'
title="{{ngModel.getText() + ': ' + ngModel.getDescription()}}" title="{{ngModel.getDescription()}}"
ng-click='ngModel.configure()' ng-click='ngModel.configure()'
ng-class='ngModel.getClass()' ng-class='ngModel.getGlyphClass()'
ng-show="ngModel.getText().length > 0"> ng-show="ngModel.getText().length > 0">
<span class="ui-symbol status-indicator" <span class="ui-symbol status-indicator">
ng-class='ngModel.getGlyphClass()'> {{ngModel.getGlyph()}}
{{ngModel.getGlyph()}} </span><span class="label"
</span> ng-class='ngModel.getTextClass()'>
<span class="label" {{ngModel.getText()}}
ng-class='ngModel.getTextClass()'> </span><span class="count">
{{ngModel.getText()}} <!-- Add count value here if this type of indicator has one or more messages associated with it -->
</span> </span><a href=''
<a href=''
class="ui-symbol" class="ui-symbol"
ng-if="ngModel.configure"> ng-if="ngModel.configure">
G 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 */ /* line 23, ../../../../general/res/sass/controls/_messages.scss */
.status.block { .status.block {
cursor: help; color: #ccc;
cursor: default;
display: inline-block; display: inline-block;
margin-right: 5px; } 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 .status-indicator,
.status.block .label { .status.block .label,
vertical-align: top; } .status.block .count {
/* line 34, ../../../../general/res/sass/controls/_messages.scss */
.status.block .status-indicator {
display: inline-block; display: inline-block;
margin-right: 3px; vertical-align: top; }
color: #0099cc; } /* line 35, ../../../../general/res/sass/controls/_messages.scss */
/* line 38, ../../../../general/res/sass/controls/_messages.scss */ .status.block .status-indicator {
.status.block .status-indicator.ok { margin-right: 3px; }
color: #009900; } /* line 38, ../../../../general/res/sass/controls/_messages.scss */
/* line 41, ../../../../general/res/sass/controls/_messages.scss */ .status.block.ok .status-indicator {
.status.block .status-indicator.caution { color: #6cb773; }
color: #ffaa00; } /* line 41, ../../../../general/res/sass/controls/_messages.scss */
/* line 45, ../../../../general/res/sass/controls/_messages.scss */ .status.block.caution .status-indicator {
color: #ffa864; }
/* line 44, ../../../../general/res/sass/controls/_messages.scss */
.status.block .label { .status.block .label {
-moz-transition-property: max-width; -moz-transition-property: max-width;
-o-transition-property: max-width; -o-transition-property: max-width;
@@ -2338,13 +2339,31 @@ label.checkbox.custom {
-o-transition-timing-function: ease-in-out; -o-transition-timing-function: ease-in-out;
-webkit-transition-timing-function: ease-in-out; -webkit-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out; transition-timing-function: ease-in-out;
display: inline-block;
overflow: hidden; overflow: hidden;
max-width: 0px; } 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 { .status.block:hover .label {
max-width: 150px; max-width: 150px;
width: auto; } 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 */ /* line 1, ../../../../general/res/sass/controls/_time-controller.scss */
.l-time-controller { .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); $colorFormText: rgba(#fff, 0.5);
$colorInputIcon: pushBack($colorBodyFg, 15%); $colorInputIcon: pushBack($colorBodyFg, 15%);
// Status colors, mainly used for messaging and item ancillary symbols
$colorStatusDefault: #ccc;
$colorStatusOk: #6cb773;
$colorStatusCaution: #ffa864;
$colorStatusAlert: $colorAlert;
// Selects // Selects
$colorSelectBg: $colorBtnBg; $colorSelectBg: $colorBtnBg;
$colorSelectFg: $colorBtnFg; $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 */ /* line 23, ../../../../general/res/sass/controls/_messages.scss */
.status.block { .status.block {
cursor: help; color: #ccc;
cursor: default;
display: inline-block; display: inline-block;
margin-right: 5px; } 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 .status-indicator,
.status.block .label { .status.block .label,
vertical-align: top; } .status.block .count {
/* line 34, ../../../../general/res/sass/controls/_messages.scss */
.status.block .status-indicator {
display: inline-block; display: inline-block;
margin-right: 3px; vertical-align: top; }
color: #0099cc; } /* line 35, ../../../../general/res/sass/controls/_messages.scss */
/* line 38, ../../../../general/res/sass/controls/_messages.scss */ .status.block .status-indicator {
.status.block .status-indicator.ok { margin-right: 3px; }
color: #009900; } /* line 38, ../../../../general/res/sass/controls/_messages.scss */
/* line 41, ../../../../general/res/sass/controls/_messages.scss */ .status.block.ok .status-indicator {
.status.block .status-indicator.caution { color: #090; }
color: #ffaa00; } /* line 41, ../../../../general/res/sass/controls/_messages.scss */
/* line 45, ../../../../general/res/sass/controls/_messages.scss */ .status.block.caution .status-indicator {
color: #fa0; }
/* line 44, ../../../../general/res/sass/controls/_messages.scss */
.status.block .label { .status.block .label {
-moz-transition-property: max-width; -moz-transition-property: max-width;
-o-transition-property: max-width; -o-transition-property: max-width;
@@ -2286,13 +2287,31 @@ label.checkbox.custom {
-o-transition-timing-function: ease-in-out; -o-transition-timing-function: ease-in-out;
-webkit-transition-timing-function: ease-in-out; -webkit-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out; transition-timing-function: ease-in-out;
display: inline-block;
overflow: hidden; overflow: hidden;
max-width: 0px; } 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 { .status.block:hover .label {
max-width: 150px; max-width: 150px;
width: auto; } 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 */ /* line 1, ../../../../general/res/sass/controls/_time-controller.scss */
.l-time-controller { .l-time-controller {

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

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