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%);