diff --git a/platform/commonUI/general/res/sass/controls/_messages.scss b/platform/commonUI/general/res/sass/controls/_messages.scss
index ec83528fba..a6aa243535 100644
--- a/platform/commonUI/general/res/sass/controls/_messages.scss
+++ b/platform/commonUI/general/res/sass/controls/_messages.scss
@@ -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;
+ }
}
}
\ No newline at end of file
diff --git a/platform/commonUI/general/res/templates/indicator.html b/platform/commonUI/general/res/templates/indicator.html
index 963d35ec14..40733d875a 100644
--- a/platform/commonUI/general/res/templates/indicator.html
+++ b/platform/commonUI/general/res/templates/indicator.html
@@ -19,20 +19,20 @@
this source code distribution or the Licensing information page available
at runtime from the About dialog for additional information.
-->
+
-
- {{ngModel.getGlyph()}}
-
-
- {{ngModel.getText()}}
-
-
+
+ {{ngModel.getGlyph()}}
+
+ {{ngModel.getText()}}
+
+
+
G
diff --git a/platform/commonUI/themes/espresso/res/css/theme-espresso.css b/platform/commonUI/themes/espresso/res/css/theme-espresso.css
index 16cf89a2ea..316c6a5877 100644
--- a/platform/commonUI/themes/espresso/res/css/theme-espresso.css
+++ b/platform/commonUI/themes/espresso/res/css/theme-espresso.css
@@ -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 {
diff --git a/platform/commonUI/themes/espresso/res/sass/_constants.scss b/platform/commonUI/themes/espresso/res/sass/_constants.scss
index cbc9a67e0a..b80dbb21dd 100644
--- a/platform/commonUI/themes/espresso/res/sass/_constants.scss
+++ b/platform/commonUI/themes/espresso/res/sass/_constants.scss
@@ -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;
diff --git a/platform/commonUI/themes/snow/res/css/theme-snow.css b/platform/commonUI/themes/snow/res/css/theme-snow.css
index d9463b49ca..0107eef7e9 100644
--- a/platform/commonUI/themes/snow/res/css/theme-snow.css
+++ b/platform/commonUI/themes/snow/res/css/theme-snow.css
@@ -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 {
diff --git a/platform/commonUI/themes/snow/res/sass/_constants.scss b/platform/commonUI/themes/snow/res/sass/_constants.scss
index 61d76cebb8..94113c25a8 100644
--- a/platform/commonUI/themes/snow/res/sass/_constants.scss
+++ b/platform/commonUI/themes/snow/res/sass/_constants.scss
@@ -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%);