From 33b1c1689c01f3111fe87983395f2fe96d90b940 Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charlesh88@gmail.com>
Date: Fri, 11 Dec 2015 15:49:50 -0800
Subject: [PATCH] [Frontend] Added classes for no-collapse indicator

open #304
Added classes string and related classes to ClockIndicator;
---
 .../general/res/sass/controls/_messages.scss  |  56 +++--
 .../general/res/templates/indicator.html      |   1 -
 .../espresso/res/css/theme-espresso.css       | 193 ++++++++++--------
 .../themes/snow/res/css/theme-snow.css        | 193 ++++++++++--------
 .../clock/src/indicators/ClockIndicator.js    |   2 +-
 5 files changed, 257 insertions(+), 188 deletions(-)

diff --git a/platform/commonUI/general/res/sass/controls/_messages.scss b/platform/commonUI/general/res/sass/controls/_messages.scss
index 4d2c5ca155..8bb8337d9c 100644
--- a/platform/commonUI/general/res/sass/controls/_messages.scss
+++ b/platform/commonUI/general/res/sass/controls/_messages.scss
@@ -37,6 +37,8 @@
 }
 
 .status.block {
+    $transDelay: 1.5s;
+    $transSpeed: .25s;
 	color: $colorStatusDefault;
 	cursor: default;
 	display: inline-block;
@@ -44,13 +46,47 @@
 	.status-indicator,
 	.label,
 	.count {
-		//@include test(#00ff00);
 		display: inline-block;
 		vertical-align: top;
 	}
+
+    &.no-icon {
+        .status-indicator {
+            display: none;
+        }
+    }
+
+    &.float-right {
+        float: right;
+    }
+
+    &.subtle {
+        opacity: 0.5;
+    }
 	.status-indicator {
 		margin-right: $interiorMarginSm;
 	}
+
+    &:not(.no-collapse) {
+        .label {
+            // Max-width silliness is necessary for width transition
+            @include trans-prop-nice(max-width, $transSpeed, $transDelay);
+            overflow: hidden;
+            max-width: 0px;
+        }
+        &:hover {
+            .label {
+                @include trans-prop-nice(max-width, $transSpeed, 0s);
+                max-width: 450px;
+                width: auto;
+            }
+            .count {
+                @include trans-prop-nice(max-width, $transSpeed, 0s);
+                opacity: 0;
+            }
+        }
+    }
+
 	&.ok .status-indicator,
     &.info .status-indicator {
 		color: $colorStatusInfo;
@@ -63,27 +99,11 @@
 	&.error .status-indicator {
 		color: $colorStatusError;
 	}
-	.label {
-		// Max-width silliness is necessary for width transition
-		@include trans-prop-nice(max-width, .25s, 1.5s);
-		overflow: hidden;
-		max-width: 0px;
-	}
 	.count {
-		@include trans-prop-nice(opacity, .25s);
+		@include trans-prop-nice(opacity, $transSpeed, $transDelay);
 		font-weight: bold;
 		opacity: 1;
 	}
-	&:hover {
-		.label {
-            @include trans-prop-nice(max-width, .25s, 0s);
-			max-width: 450px;
-			width: auto;
-		}
-		.count {
-			opacity: 0;
-		}
-	}
 }
 
 /* Styles for messages and message banners */
diff --git a/platform/commonUI/general/res/templates/indicator.html b/platform/commonUI/general/res/templates/indicator.html
index e9be598b18..fb4a2f89c9 100644
--- a/platform/commonUI/general/res/templates/indicator.html
+++ b/platform/commonUI/general/res/templates/indicator.html
@@ -20,7 +20,6 @@
  at runtime from the About dialog for additional information.
 -->
 <!-- DO NOT ADD SPACES BETWEEN THE SPANS - IT ADDS WHITE SPACE!! -->
-<!--<div ng-init="reps = [1,2,3]"></div>-->
 <div class='status block'
 	 title="{{ngModel.getDescription()}}"
 	 ng-click='ngModel.configure()'
diff --git a/platform/commonUI/themes/espresso/res/css/theme-espresso.css b/platform/commonUI/themes/espresso/res/css/theme-espresso.css
index 8db04cc119..1b7b4869b7 100644
--- a/platform/commonUI/themes/espresso/res/css/theme-espresso.css
+++ b/platform/commonUI/themes/espresso/res/css/theme-espresso.css
@@ -3037,26 +3037,26 @@ label.checkbox.custom {
   cursor: default;
   display: inline-block;
   margin-right: 5px; }
-  /* line 44, ../../../../general/res/sass/controls/_messages.scss */
+  /* line 46, ../../../../general/res/sass/controls/_messages.scss */
   .status.block .status-indicator,
   .status.block .label,
   .status.block .count {
     display: inline-block;
     vertical-align: top; }
-  /* line 51, ../../../../general/res/sass/controls/_messages.scss */
+  /* line 54, ../../../../general/res/sass/controls/_messages.scss */
+  .status.block.no-icon .status-indicator {
+    display: none; }
+  /* line 59, ../../../../general/res/sass/controls/_messages.scss */
+  .status.block.float-right {
+    float: right; }
+  /* line 63, ../../../../general/res/sass/controls/_messages.scss */
+  .status.block.subtle {
+    opacity: 0.5; }
+  /* line 66, ../../../../general/res/sass/controls/_messages.scss */
   .status.block .status-indicator {
     margin-right: 3px; }
-  /* line 54, ../../../../general/res/sass/controls/_messages.scss */
-  .status.block.ok .status-indicator, .status.block.info .status-indicator {
-    color: #62ba72; }
-  /* line 58, ../../../../general/res/sass/controls/_messages.scss */
-  .status.block.alert .status-indicator, .status.block.warning .status-indicator, .status.block.caution .status-indicator {
-    color: #ffa66d; }
-  /* line 63, ../../../../general/res/sass/controls/_messages.scss */
-  .status.block.error .status-indicator {
-    color: #d4585c; }
-  /* line 66, ../../../../general/res/sass/controls/_messages.scss */
-  .status.block .label {
+  /* line 71, ../../../../general/res/sass/controls/_messages.scss */
+  .status.block:not(.no-collapse) .label {
     -moz-transition-property: max-width;
     -o-transition-property: max-width;
     -webkit-transition-property: max-width;
@@ -3075,28 +3075,8 @@ label.checkbox.custom {
     transition-delay: 1.5s;
     overflow: hidden;
     max-width: 0px; }
-  /* line 72, ../../../../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;
-    -moz-transition-delay: 0;
-    -o-transition-delay: 0;
-    -webkit-transition-delay: 0;
-    transition-delay: 0;
-    font-weight: bold;
-    opacity: 1; }
   /* line 78, ../../../../general/res/sass/controls/_messages.scss */
-  .status.block:hover .label {
+  .status.block:not(.no-collapse):hover .label {
     -moz-transition-property: max-width;
     -o-transition-property: max-width;
     -webkit-transition-property: max-width;
@@ -3116,22 +3096,67 @@ label.checkbox.custom {
     max-width: 450px;
     width: auto; }
   /* line 83, ../../../../general/res/sass/controls/_messages.scss */
-  .status.block:hover .count {
+  .status.block:not(.no-collapse):hover .count {
+    -moz-transition-property: max-width;
+    -o-transition-property: max-width;
+    -webkit-transition-property: max-width;
+    transition-property: max-width;
+    -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;
+    -moz-transition-delay: 0s;
+    -o-transition-delay: 0s;
+    -webkit-transition-delay: 0s;
+    transition-delay: 0s;
     opacity: 0; }
+  /* line 90, ../../../../general/res/sass/controls/_messages.scss */
+  .status.block.ok .status-indicator, .status.block.info .status-indicator {
+    color: #62ba72; }
+  /* line 94, ../../../../general/res/sass/controls/_messages.scss */
+  .status.block.alert .status-indicator, .status.block.warning .status-indicator, .status.block.caution .status-indicator {
+    color: #ffa66d; }
+  /* line 99, ../../../../general/res/sass/controls/_messages.scss */
+  .status.block.error .status-indicator {
+    color: #d4585c; }
+  /* line 102, ../../../../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;
+    -moz-transition-delay: 1.5s;
+    -o-transition-delay: 1.5s;
+    -webkit-transition-delay: 1.5s;
+    transition-delay: 1.5s;
+    font-weight: bold;
+    opacity: 1; }
 
 /* Styles for messages and message banners */
-/* line 91, ../../../../general/res/sass/controls/_messages.scss */
+/* line 111, ../../../../general/res/sass/controls/_messages.scss */
 .message.block {
   -moz-border-radius: 3px;
   -webkit-border-radius: 3px;
   border-radius: 3px;
   padding: 10px; }
-/* line 95, ../../../../general/res/sass/controls/_messages.scss */
+/* line 115, ../../../../general/res/sass/controls/_messages.scss */
 .message.error {
   background-color: rgba(255, 60, 0, 0.3);
   color: #ff8a66; }
 
-/* line 101, ../../../../general/res/sass/controls/_messages.scss */
+/* line 121, ../../../../general/res/sass/controls/_messages.scss */
 .l-message-banner {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
@@ -3160,7 +3185,7 @@ label.checkbox.custom {
   -webkit-transform: translateX(-50%);
   transform: translateX(-50%);
   z-index: 10; }
-  /* line 117, ../../../../general/res/sass/controls/_messages.scss */
+  /* line 137, ../../../../general/res/sass/controls/_messages.scss */
   .l-message-banner.minimized {
     -moz-transition-property: left, opacity;
     -o-transition-property: left, opacity;
@@ -3176,11 +3201,11 @@ label.checkbox.custom {
     transition-timing-function: ease-in-out;
     left: 0;
     opacity: 0; }
-  /* line 125, ../../../../general/res/sass/controls/_messages.scss */
+  /* line 145, ../../../../general/res/sass/controls/_messages.scss */
   .l-message-banner.new {
     left: 50%;
     opacity: 1; }
-    /* line 128, ../../../../general/res/sass/controls/_messages.scss */
+    /* line 148, ../../../../general/res/sass/controls/_messages.scss */
     .l-message-banner.new:not(.info) {
       -moz-animation-name: pulse;
       -webkit-animation-name: pulse;
@@ -3197,33 +3222,33 @@ label.checkbox.custom {
       -moz-animation-timing-function: ease-in-out;
       -webkit-animation-timing-function: ease-in-out;
       animation-timing-function: ease-in-out; }
-  /* line 133, ../../../../general/res/sass/controls/_messages.scss */
+  /* line 153, ../../../../general/res/sass/controls/_messages.scss */
   .l-message-banner .banner-elem {
     -webkit-flex: 0 1 auto;
     flex: 0 1 auto;
     margin-left: 5px; }
-  /* line 137, ../../../../general/res/sass/controls/_messages.scss */
+  /* line 157, ../../../../general/res/sass/controls/_messages.scss */
   .l-message-banner a {
     display: inline-block; }
-  /* line 140, ../../../../general/res/sass/controls/_messages.scss */
+  /* line 160, ../../../../general/res/sass/controls/_messages.scss */
   .l-message-banner .l-action {
     line-height: 15px;
     padding: 0 5px; }
-  /* line 144, ../../../../general/res/sass/controls/_messages.scss */
+  /* line 164, ../../../../general/res/sass/controls/_messages.scss */
   .l-message-banner .close {
     cursor: pointer;
     font-size: 7px;
     width: 8px; }
-  /* line 150, ../../../../general/res/sass/controls/_messages.scss */
+  /* line 170, ../../../../general/res/sass/controls/_messages.scss */
   .l-message-banner .l-progress-bar {
     height: 8px;
     line-height: 8px;
     width: 100px; }
-  /* line 156, ../../../../general/res/sass/controls/_messages.scss */
+  /* line 176, ../../../../general/res/sass/controls/_messages.scss */
   .l-message-banner .progress-info {
     display: none; }
 
-/* line 166, ../../../../general/res/sass/controls/_messages.scss */
+/* line 186, ../../../../general/res/sass/controls/_messages.scss */
 .s-message-banner {
   -moz-border-radius: 3px;
   -webkit-border-radius: 3px;
@@ -3240,10 +3265,10 @@ label.checkbox.custom {
     /* line 33, ../../../../general/res/sass/controls/_messages.scss */
     .s-message-banner .s-action:hover {
       background-color: gray; }
-  /* line 170, ../../../../general/res/sass/controls/_messages.scss */
+  /* line 190, ../../../../general/res/sass/controls/_messages.scss */
   .s-message-banner a {
     color: inherit; }
-  /* line 171, ../../../../general/res/sass/controls/_messages.scss */
+  /* line 191, ../../../../general/res/sass/controls/_messages.scss */
   .s-message-banner .s-action {
     -moz-border-radius: 3px;
     -webkit-border-radius: 3px;
@@ -3264,13 +3289,13 @@ label.checkbox.custom {
     -o-transition-delay: 0;
     -webkit-transition-delay: 0;
     transition-delay: 0; }
-  /* line 175, ../../../../general/res/sass/controls/_messages.scss */
+  /* line 195, ../../../../general/res/sass/controls/_messages.scss */
   .s-message-banner .close {
     opacity: 0.5; }
-    /* line 177, ../../../../general/res/sass/controls/_messages.scss */
+    /* line 197, ../../../../general/res/sass/controls/_messages.scss */
     .s-message-banner .close:hover {
       opacity: 1; }
-  /* line 181, ../../../../general/res/sass/controls/_messages.scss */
+  /* line 201, ../../../../general/res/sass/controls/_messages.scss */
   .s-message-banner.ok, .s-message-banner.info {
     background-color: #285b31;
     color: #ccc; }
@@ -3283,7 +3308,7 @@ label.checkbox.custom {
       /* line 33, ../../../../general/res/sass/controls/_messages.scss */
       .s-message-banner.ok .s-action:hover, .s-message-banner.info .s-action:hover {
         background-color: #285b31; }
-  /* line 185, ../../../../general/res/sass/controls/_messages.scss */
+  /* line 205, ../../../../general/res/sass/controls/_messages.scss */
   .s-message-banner.caution, .s-message-banner.warning, .s-message-banner.alert {
     background-color: #d35200;
     color: #ccc; }
@@ -3296,7 +3321,7 @@ label.checkbox.custom {
       /* line 33, ../../../../general/res/sass/controls/_messages.scss */
       .s-message-banner.caution .s-action:hover, .s-message-banner.warning .s-action:hover, .s-message-banner.alert .s-action:hover {
         background-color: #d35200; }
-  /* line 190, ../../../../general/res/sass/controls/_messages.scss */
+  /* line 210, ../../../../general/res/sass/controls/_messages.scss */
   .s-message-banner.error {
     background-color: #751e21;
     color: #ccc; }
@@ -3323,7 +3348,7 @@ label.checkbox.custom {
                 ... same as above
         bottom-bar
 */
-/* line 232, ../../../../general/res/sass/controls/_messages.scss */
+/* line 252, ../../../../general/res/sass/controls/_messages.scss */
 .l-message {
   display: -webkit-flex;
   display: flex;
@@ -3331,52 +3356,52 @@ label.checkbox.custom {
   flex-direction: row;
   -webkit-align-items: stretch;
   align-items: stretch; }
-  /* line 236, ../../../../general/res/sass/controls/_messages.scss */
+  /* line 256, ../../../../general/res/sass/controls/_messages.scss */
   .l-message .type-icon.message-type {
     -webkit-flex: 0 1 auto;
     flex: 0 1 auto;
     position: relative; }
-  /* line 241, ../../../../general/res/sass/controls/_messages.scss */
+  /* line 261, ../../../../general/res/sass/controls/_messages.scss */
   .l-message .message-contents {
     -webkit-flex: 1 1 auto;
     flex: 1 1 auto;
     margin-left: 25px;
     position: relative; }
-    /* line 247, ../../../../general/res/sass/controls/_messages.scss */
+    /* line 267, ../../../../general/res/sass/controls/_messages.scss */
     .l-message .message-contents .top-bar,
     .l-message .message-contents .message-body {
       margin-bottom: 20px; }
 
-/* line 196, ../../../../general/res/sass/controls/_messages.scss */
+/* line 216, ../../../../general/res/sass/controls/_messages.scss */
 .t-message-single .type-icon.message-type {
   text-shadow: rgba(0, 0, 0, 0.4) 0 1px 2px;
   color: #ccc;
   font-size: 80px;
   padding: 1px;
   width: 82px; }
-  /* line 198, ../../../../general/res/sass/controls/_messages.scss */
+  /* line 218, ../../../../general/res/sass/controls/_messages.scss */
   .t-message-single .type-icon.message-type:before {
     content: "\e608"; }
-/* line 205, ../../../../general/res/sass/controls/_messages.scss */
+/* line 225, ../../../../general/res/sass/controls/_messages.scss */
 .t-message-single .message-severity-info .type-icon.message-type {
   color: #62ba72; }
-  /* line 206, ../../../../general/res/sass/controls/_messages.scss */
+  /* line 226, ../../../../general/res/sass/controls/_messages.scss */
   .t-message-single .message-severity-info .type-icon.message-type:before {
     content: "\e608"; }
-/* line 209, ../../../../general/res/sass/controls/_messages.scss */
+/* line 229, ../../../../general/res/sass/controls/_messages.scss */
 .t-message-single .message-severity-alert .type-icon.message-type {
   color: #ffa66d; }
-  /* line 210, ../../../../general/res/sass/controls/_messages.scss */
+  /* line 230, ../../../../general/res/sass/controls/_messages.scss */
   .t-message-single .message-severity-alert .type-icon.message-type:before {
     content: "\e610"; }
-/* line 213, ../../../../general/res/sass/controls/_messages.scss */
+/* line 233, ../../../../general/res/sass/controls/_messages.scss */
 .t-message-single .message-severity-error .type-icon.message-type {
   color: #d4585c; }
-  /* line 214, ../../../../general/res/sass/controls/_messages.scss */
+  /* line 234, ../../../../general/res/sass/controls/_messages.scss */
   .t-message-single .message-severity-error .type-icon.message-type:before {
     content: "\21"; }
 @media only screen and (min-device-width: 1025px) and (-webkit-min-device-pixel-ratio: 1) {
-  /* line 260, ../../../../general/res/sass/controls/_messages.scss */
+  /* line 280, ../../../../general/res/sass/controls/_messages.scss */
   .t-message-single .l-message,
   .t-message-single .bottom-bar {
     overflow: hidden;
@@ -3387,40 +3412,40 @@ label.checkbox.custom {
     left: 0px;
     width: auto;
     height: auto; }
-  /* line 265, ../../../../general/res/sass/controls/_messages.scss */
+  /* line 285, ../../../../general/res/sass/controls/_messages.scss */
   .t-message-single .bottom-bar {
     top: auto;
     height: 24px; } }
 
-/* line 196, ../../../../general/res/sass/controls/_messages.scss */
+/* line 216, ../../../../general/res/sass/controls/_messages.scss */
 .t-message-list .type-icon.message-type {
   text-shadow: rgba(0, 0, 0, 0.4) 0 1px 2px;
   color: #ccc;
   font-size: 32px;
   padding: 1px;
   width: 34px; }
-  /* line 198, ../../../../general/res/sass/controls/_messages.scss */
+  /* line 218, ../../../../general/res/sass/controls/_messages.scss */
   .t-message-list .type-icon.message-type:before {
     content: "\e608"; }
-/* line 205, ../../../../general/res/sass/controls/_messages.scss */
+/* line 225, ../../../../general/res/sass/controls/_messages.scss */
 .t-message-list .message-severity-info .type-icon.message-type {
   color: #62ba72; }
-  /* line 206, ../../../../general/res/sass/controls/_messages.scss */
+  /* line 226, ../../../../general/res/sass/controls/_messages.scss */
   .t-message-list .message-severity-info .type-icon.message-type:before {
     content: "\e608"; }
-/* line 209, ../../../../general/res/sass/controls/_messages.scss */
+/* line 229, ../../../../general/res/sass/controls/_messages.scss */
 .t-message-list .message-severity-alert .type-icon.message-type {
   color: #ffa66d; }
-  /* line 210, ../../../../general/res/sass/controls/_messages.scss */
+  /* line 230, ../../../../general/res/sass/controls/_messages.scss */
   .t-message-list .message-severity-alert .type-icon.message-type:before {
     content: "\e610"; }
-/* line 213, ../../../../general/res/sass/controls/_messages.scss */
+/* line 233, ../../../../general/res/sass/controls/_messages.scss */
 .t-message-list .message-severity-error .type-icon.message-type {
   color: #d4585c; }
-  /* line 214, ../../../../general/res/sass/controls/_messages.scss */
+  /* line 234, ../../../../general/res/sass/controls/_messages.scss */
   .t-message-list .message-severity-error .type-icon.message-type:before {
     content: "\21"; }
-/* line 277, ../../../../general/res/sass/controls/_messages.scss */
+/* line 297, ../../../../general/res/sass/controls/_messages.scss */
 .t-message-list .message-contents .l-message {
   -moz-border-radius: 3px;
   -webkit-border-radius: 3px;
@@ -3428,26 +3453,26 @@ label.checkbox.custom {
   background: rgba(230, 230, 230, 0.1);
   margin-bottom: 5px;
   padding: 10px; }
-  /* line 284, ../../../../general/res/sass/controls/_messages.scss */
+  /* line 304, ../../../../general/res/sass/controls/_messages.scss */
   .t-message-list .message-contents .l-message .message-contents,
   .t-message-list .message-contents .l-message .bottom-bar {
     position: relative; }
-  /* line 290, ../../../../general/res/sass/controls/_messages.scss */
+  /* line 310, ../../../../general/res/sass/controls/_messages.scss */
   .t-message-list .message-contents .l-message .message-contents {
     font-size: 0.9em;
     margin-left: 10px; }
-    /* line 293, ../../../../general/res/sass/controls/_messages.scss */
+    /* line 313, ../../../../general/res/sass/controls/_messages.scss */
     .t-message-list .message-contents .l-message .message-contents .message-action {
       color: #b3b3b3; }
-    /* line 294, ../../../../general/res/sass/controls/_messages.scss */
+    /* line 314, ../../../../general/res/sass/controls/_messages.scss */
     .t-message-list .message-contents .l-message .message-contents .bottom-bar {
       text-align: left; }
-  /* line 297, ../../../../general/res/sass/controls/_messages.scss */
+  /* line 317, ../../../../general/res/sass/controls/_messages.scss */
   .t-message-list .message-contents .l-message .top-bar,
   .t-message-list .message-contents .l-message .message-body {
     margin-bottom: 10px; }
 @media only screen and (min-device-width: 1025px) and (-webkit-min-device-pixel-ratio: 1) {
-  /* line 305, ../../../../general/res/sass/controls/_messages.scss */
+  /* line 325, ../../../../general/res/sass/controls/_messages.scss */
   .t-message-list .message-contents .l-message {
     margin-right: 10px; } }
 
diff --git a/platform/commonUI/themes/snow/res/css/theme-snow.css b/platform/commonUI/themes/snow/res/css/theme-snow.css
index 8096adf533..7c7b16f6ea 100644
--- a/platform/commonUI/themes/snow/res/css/theme-snow.css
+++ b/platform/commonUI/themes/snow/res/css/theme-snow.css
@@ -2976,26 +2976,26 @@ label.checkbox.custom {
   cursor: default;
   display: inline-block;
   margin-right: 5px; }
-  /* line 44, ../../../../general/res/sass/controls/_messages.scss */
+  /* line 46, ../../../../general/res/sass/controls/_messages.scss */
   .status.block .status-indicator,
   .status.block .label,
   .status.block .count {
     display: inline-block;
     vertical-align: top; }
-  /* line 51, ../../../../general/res/sass/controls/_messages.scss */
+  /* line 54, ../../../../general/res/sass/controls/_messages.scss */
+  .status.block.no-icon .status-indicator {
+    display: none; }
+  /* line 59, ../../../../general/res/sass/controls/_messages.scss */
+  .status.block.float-right {
+    float: right; }
+  /* line 63, ../../../../general/res/sass/controls/_messages.scss */
+  .status.block.subtle {
+    opacity: 0.5; }
+  /* line 66, ../../../../general/res/sass/controls/_messages.scss */
   .status.block .status-indicator {
     margin-right: 3px; }
-  /* line 54, ../../../../general/res/sass/controls/_messages.scss */
-  .status.block.ok .status-indicator, .status.block.info .status-indicator {
-    color: #60ba7b; }
-  /* line 58, ../../../../general/res/sass/controls/_messages.scss */
-  .status.block.alert .status-indicator, .status.block.warning .status-indicator, .status.block.caution .status-indicator {
-    color: #ffb66c; }
-  /* line 63, ../../../../general/res/sass/controls/_messages.scss */
-  .status.block.error .status-indicator {
-    color: #c96b68; }
-  /* line 66, ../../../../general/res/sass/controls/_messages.scss */
-  .status.block .label {
+  /* line 71, ../../../../general/res/sass/controls/_messages.scss */
+  .status.block:not(.no-collapse) .label {
     -moz-transition-property: max-width;
     -o-transition-property: max-width;
     -webkit-transition-property: max-width;
@@ -3014,28 +3014,8 @@ label.checkbox.custom {
     transition-delay: 1.5s;
     overflow: hidden;
     max-width: 0px; }
-  /* line 72, ../../../../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;
-    -moz-transition-delay: 0;
-    -o-transition-delay: 0;
-    -webkit-transition-delay: 0;
-    transition-delay: 0;
-    font-weight: bold;
-    opacity: 1; }
   /* line 78, ../../../../general/res/sass/controls/_messages.scss */
-  .status.block:hover .label {
+  .status.block:not(.no-collapse):hover .label {
     -moz-transition-property: max-width;
     -o-transition-property: max-width;
     -webkit-transition-property: max-width;
@@ -3055,22 +3035,67 @@ label.checkbox.custom {
     max-width: 450px;
     width: auto; }
   /* line 83, ../../../../general/res/sass/controls/_messages.scss */
-  .status.block:hover .count {
+  .status.block:not(.no-collapse):hover .count {
+    -moz-transition-property: max-width;
+    -o-transition-property: max-width;
+    -webkit-transition-property: max-width;
+    transition-property: max-width;
+    -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;
+    -moz-transition-delay: 0s;
+    -o-transition-delay: 0s;
+    -webkit-transition-delay: 0s;
+    transition-delay: 0s;
     opacity: 0; }
+  /* line 90, ../../../../general/res/sass/controls/_messages.scss */
+  .status.block.ok .status-indicator, .status.block.info .status-indicator {
+    color: #60ba7b; }
+  /* line 94, ../../../../general/res/sass/controls/_messages.scss */
+  .status.block.alert .status-indicator, .status.block.warning .status-indicator, .status.block.caution .status-indicator {
+    color: #ffb66c; }
+  /* line 99, ../../../../general/res/sass/controls/_messages.scss */
+  .status.block.error .status-indicator {
+    color: #c96b68; }
+  /* line 102, ../../../../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;
+    -moz-transition-delay: 1.5s;
+    -o-transition-delay: 1.5s;
+    -webkit-transition-delay: 1.5s;
+    transition-delay: 1.5s;
+    font-weight: bold;
+    opacity: 1; }
 
 /* Styles for messages and message banners */
-/* line 91, ../../../../general/res/sass/controls/_messages.scss */
+/* line 111, ../../../../general/res/sass/controls/_messages.scss */
 .message.block {
   -moz-border-radius: 4px;
   -webkit-border-radius: 4px;
   border-radius: 4px;
   padding: 10px; }
-/* line 95, ../../../../general/res/sass/controls/_messages.scss */
+/* line 115, ../../../../general/res/sass/controls/_messages.scss */
 .message.error {
   background-color: rgba(255, 60, 0, 0.3);
   color: #ff8a66; }
 
-/* line 101, ../../../../general/res/sass/controls/_messages.scss */
+/* line 121, ../../../../general/res/sass/controls/_messages.scss */
 .l-message-banner {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
@@ -3099,7 +3124,7 @@ label.checkbox.custom {
   -webkit-transform: translateX(-50%);
   transform: translateX(-50%);
   z-index: 10; }
-  /* line 117, ../../../../general/res/sass/controls/_messages.scss */
+  /* line 137, ../../../../general/res/sass/controls/_messages.scss */
   .l-message-banner.minimized {
     -moz-transition-property: left, opacity;
     -o-transition-property: left, opacity;
@@ -3115,11 +3140,11 @@ label.checkbox.custom {
     transition-timing-function: ease-in-out;
     left: 0;
     opacity: 0; }
-  /* line 125, ../../../../general/res/sass/controls/_messages.scss */
+  /* line 145, ../../../../general/res/sass/controls/_messages.scss */
   .l-message-banner.new {
     left: 50%;
     opacity: 1; }
-    /* line 128, ../../../../general/res/sass/controls/_messages.scss */
+    /* line 148, ../../../../general/res/sass/controls/_messages.scss */
     .l-message-banner.new:not(.info) {
       -moz-animation-name: pulse;
       -webkit-animation-name: pulse;
@@ -3136,33 +3161,33 @@ label.checkbox.custom {
       -moz-animation-timing-function: ease-in-out;
       -webkit-animation-timing-function: ease-in-out;
       animation-timing-function: ease-in-out; }
-  /* line 133, ../../../../general/res/sass/controls/_messages.scss */
+  /* line 153, ../../../../general/res/sass/controls/_messages.scss */
   .l-message-banner .banner-elem {
     -webkit-flex: 0 1 auto;
     flex: 0 1 auto;
     margin-left: 5px; }
-  /* line 137, ../../../../general/res/sass/controls/_messages.scss */
+  /* line 157, ../../../../general/res/sass/controls/_messages.scss */
   .l-message-banner a {
     display: inline-block; }
-  /* line 140, ../../../../general/res/sass/controls/_messages.scss */
+  /* line 160, ../../../../general/res/sass/controls/_messages.scss */
   .l-message-banner .l-action {
     line-height: 15px;
     padding: 0 5px; }
-  /* line 144, ../../../../general/res/sass/controls/_messages.scss */
+  /* line 164, ../../../../general/res/sass/controls/_messages.scss */
   .l-message-banner .close {
     cursor: pointer;
     font-size: 7px;
     width: 8px; }
-  /* line 150, ../../../../general/res/sass/controls/_messages.scss */
+  /* line 170, ../../../../general/res/sass/controls/_messages.scss */
   .l-message-banner .l-progress-bar {
     height: 8px;
     line-height: 8px;
     width: 100px; }
-  /* line 156, ../../../../general/res/sass/controls/_messages.scss */
+  /* line 176, ../../../../general/res/sass/controls/_messages.scss */
   .l-message-banner .progress-info {
     display: none; }
 
-/* line 166, ../../../../general/res/sass/controls/_messages.scss */
+/* line 186, ../../../../general/res/sass/controls/_messages.scss */
 .s-message-banner {
   -moz-border-radius: 4px;
   -webkit-border-radius: 4px;
@@ -3179,10 +3204,10 @@ label.checkbox.custom {
     /* line 33, ../../../../general/res/sass/controls/_messages.scss */
     .s-message-banner .s-action:hover {
       background-color: gray; }
-  /* line 170, ../../../../general/res/sass/controls/_messages.scss */
+  /* line 190, ../../../../general/res/sass/controls/_messages.scss */
   .s-message-banner a {
     color: inherit; }
-  /* line 171, ../../../../general/res/sass/controls/_messages.scss */
+  /* line 191, ../../../../general/res/sass/controls/_messages.scss */
   .s-message-banner .s-action {
     -moz-border-radius: 4px;
     -webkit-border-radius: 4px;
@@ -3203,13 +3228,13 @@ label.checkbox.custom {
     -o-transition-delay: 0;
     -webkit-transition-delay: 0;
     transition-delay: 0; }
-  /* line 175, ../../../../general/res/sass/controls/_messages.scss */
+  /* line 195, ../../../../general/res/sass/controls/_messages.scss */
   .s-message-banner .close {
     opacity: 0.5; }
-    /* line 177, ../../../../general/res/sass/controls/_messages.scss */
+    /* line 197, ../../../../general/res/sass/controls/_messages.scss */
     .s-message-banner .close:hover {
       opacity: 1; }
-  /* line 181, ../../../../general/res/sass/controls/_messages.scss */
+  /* line 201, ../../../../general/res/sass/controls/_messages.scss */
   .s-message-banner.ok, .s-message-banner.info {
     background-color: #275a36;
     color: #fff; }
@@ -3222,7 +3247,7 @@ label.checkbox.custom {
       /* line 33, ../../../../general/res/sass/controls/_messages.scss */
       .s-message-banner.ok .s-action:hover, .s-message-banner.info .s-action:hover {
         background-color: #275a36; }
-  /* line 185, ../../../../general/res/sass/controls/_messages.scss */
+  /* line 205, ../../../../general/res/sass/controls/_messages.scss */
   .s-message-banner.caution, .s-message-banner.warning, .s-message-banner.alert {
     background-color: #d26a00;
     color: #fff; }
@@ -3235,7 +3260,7 @@ label.checkbox.custom {
       /* line 33, ../../../../general/res/sass/controls/_messages.scss */
       .s-message-banner.caution .s-action:hover, .s-message-banner.warning .s-action:hover, .s-message-banner.alert .s-action:hover {
         background-color: #d26a00; }
-  /* line 190, ../../../../general/res/sass/controls/_messages.scss */
+  /* line 210, ../../../../general/res/sass/controls/_messages.scss */
   .s-message-banner.error {
     background-color: #702a28;
     color: #fff; }
@@ -3262,7 +3287,7 @@ label.checkbox.custom {
                 ... same as above
         bottom-bar
 */
-/* line 232, ../../../../general/res/sass/controls/_messages.scss */
+/* line 252, ../../../../general/res/sass/controls/_messages.scss */
 .l-message {
   display: -webkit-flex;
   display: flex;
@@ -3270,52 +3295,52 @@ label.checkbox.custom {
   flex-direction: row;
   -webkit-align-items: stretch;
   align-items: stretch; }
-  /* line 236, ../../../../general/res/sass/controls/_messages.scss */
+  /* line 256, ../../../../general/res/sass/controls/_messages.scss */
   .l-message .type-icon.message-type {
     -webkit-flex: 0 1 auto;
     flex: 0 1 auto;
     position: relative; }
-  /* line 241, ../../../../general/res/sass/controls/_messages.scss */
+  /* line 261, ../../../../general/res/sass/controls/_messages.scss */
   .l-message .message-contents {
     -webkit-flex: 1 1 auto;
     flex: 1 1 auto;
     margin-left: 25px;
     position: relative; }
-    /* line 247, ../../../../general/res/sass/controls/_messages.scss */
+    /* line 267, ../../../../general/res/sass/controls/_messages.scss */
     .l-message .message-contents .top-bar,
     .l-message .message-contents .message-body {
       margin-bottom: 20px; }
 
-/* line 196, ../../../../general/res/sass/controls/_messages.scss */
+/* line 216, ../../../../general/res/sass/controls/_messages.scss */
 .t-message-single .type-icon.message-type {
   text-shadow: rgba(255, 255, 255, 0.8) 0 0px 5px;
   color: #ccc;
   font-size: 80px;
   padding: 1px;
   width: 82px; }
-  /* line 198, ../../../../general/res/sass/controls/_messages.scss */
+  /* line 218, ../../../../general/res/sass/controls/_messages.scss */
   .t-message-single .type-icon.message-type:before {
     content: "\e608"; }
-/* line 205, ../../../../general/res/sass/controls/_messages.scss */
+/* line 225, ../../../../general/res/sass/controls/_messages.scss */
 .t-message-single .message-severity-info .type-icon.message-type {
   color: #60ba7b; }
-  /* line 206, ../../../../general/res/sass/controls/_messages.scss */
+  /* line 226, ../../../../general/res/sass/controls/_messages.scss */
   .t-message-single .message-severity-info .type-icon.message-type:before {
     content: "\e608"; }
-/* line 209, ../../../../general/res/sass/controls/_messages.scss */
+/* line 229, ../../../../general/res/sass/controls/_messages.scss */
 .t-message-single .message-severity-alert .type-icon.message-type {
   color: #ffb66c; }
-  /* line 210, ../../../../general/res/sass/controls/_messages.scss */
+  /* line 230, ../../../../general/res/sass/controls/_messages.scss */
   .t-message-single .message-severity-alert .type-icon.message-type:before {
     content: "\e610"; }
-/* line 213, ../../../../general/res/sass/controls/_messages.scss */
+/* line 233, ../../../../general/res/sass/controls/_messages.scss */
 .t-message-single .message-severity-error .type-icon.message-type {
   color: #c96b68; }
-  /* line 214, ../../../../general/res/sass/controls/_messages.scss */
+  /* line 234, ../../../../general/res/sass/controls/_messages.scss */
   .t-message-single .message-severity-error .type-icon.message-type:before {
     content: "\21"; }
 @media only screen and (min-device-width: 1025px) and (-webkit-min-device-pixel-ratio: 1) {
-  /* line 260, ../../../../general/res/sass/controls/_messages.scss */
+  /* line 280, ../../../../general/res/sass/controls/_messages.scss */
   .t-message-single .l-message,
   .t-message-single .bottom-bar {
     overflow: hidden;
@@ -3326,40 +3351,40 @@ label.checkbox.custom {
     left: 0px;
     width: auto;
     height: auto; }
-  /* line 265, ../../../../general/res/sass/controls/_messages.scss */
+  /* line 285, ../../../../general/res/sass/controls/_messages.scss */
   .t-message-single .bottom-bar {
     top: auto;
     height: 24px; } }
 
-/* line 196, ../../../../general/res/sass/controls/_messages.scss */
+/* line 216, ../../../../general/res/sass/controls/_messages.scss */
 .t-message-list .type-icon.message-type {
   text-shadow: rgba(255, 255, 255, 0.8) 0 0px 5px;
   color: #ccc;
   font-size: 32px;
   padding: 1px;
   width: 34px; }
-  /* line 198, ../../../../general/res/sass/controls/_messages.scss */
+  /* line 218, ../../../../general/res/sass/controls/_messages.scss */
   .t-message-list .type-icon.message-type:before {
     content: "\e608"; }
-/* line 205, ../../../../general/res/sass/controls/_messages.scss */
+/* line 225, ../../../../general/res/sass/controls/_messages.scss */
 .t-message-list .message-severity-info .type-icon.message-type {
   color: #60ba7b; }
-  /* line 206, ../../../../general/res/sass/controls/_messages.scss */
+  /* line 226, ../../../../general/res/sass/controls/_messages.scss */
   .t-message-list .message-severity-info .type-icon.message-type:before {
     content: "\e608"; }
-/* line 209, ../../../../general/res/sass/controls/_messages.scss */
+/* line 229, ../../../../general/res/sass/controls/_messages.scss */
 .t-message-list .message-severity-alert .type-icon.message-type {
   color: #ffb66c; }
-  /* line 210, ../../../../general/res/sass/controls/_messages.scss */
+  /* line 230, ../../../../general/res/sass/controls/_messages.scss */
   .t-message-list .message-severity-alert .type-icon.message-type:before {
     content: "\e610"; }
-/* line 213, ../../../../general/res/sass/controls/_messages.scss */
+/* line 233, ../../../../general/res/sass/controls/_messages.scss */
 .t-message-list .message-severity-error .type-icon.message-type {
   color: #c96b68; }
-  /* line 214, ../../../../general/res/sass/controls/_messages.scss */
+  /* line 234, ../../../../general/res/sass/controls/_messages.scss */
   .t-message-list .message-severity-error .type-icon.message-type:before {
     content: "\21"; }
-/* line 277, ../../../../general/res/sass/controls/_messages.scss */
+/* line 297, ../../../../general/res/sass/controls/_messages.scss */
 .t-message-list .message-contents .l-message {
   -moz-border-radius: 4px;
   -webkit-border-radius: 4px;
@@ -3367,26 +3392,26 @@ label.checkbox.custom {
   background: rgba(102, 102, 102, 0.1);
   margin-bottom: 5px;
   padding: 10px; }
-  /* line 284, ../../../../general/res/sass/controls/_messages.scss */
+  /* line 304, ../../../../general/res/sass/controls/_messages.scss */
   .t-message-list .message-contents .l-message .message-contents,
   .t-message-list .message-contents .l-message .bottom-bar {
     position: relative; }
-  /* line 290, ../../../../general/res/sass/controls/_messages.scss */
+  /* line 310, ../../../../general/res/sass/controls/_messages.scss */
   .t-message-list .message-contents .l-message .message-contents {
     font-size: 0.9em;
     margin-left: 10px; }
-    /* line 293, ../../../../general/res/sass/controls/_messages.scss */
+    /* line 313, ../../../../general/res/sass/controls/_messages.scss */
     .t-message-list .message-contents .l-message .message-contents .message-action {
       color: #999999; }
-    /* line 294, ../../../../general/res/sass/controls/_messages.scss */
+    /* line 314, ../../../../general/res/sass/controls/_messages.scss */
     .t-message-list .message-contents .l-message .message-contents .bottom-bar {
       text-align: left; }
-  /* line 297, ../../../../general/res/sass/controls/_messages.scss */
+  /* line 317, ../../../../general/res/sass/controls/_messages.scss */
   .t-message-list .message-contents .l-message .top-bar,
   .t-message-list .message-contents .l-message .message-body {
     margin-bottom: 10px; }
 @media only screen and (min-device-width: 1025px) and (-webkit-min-device-pixel-ratio: 1) {
-  /* line 305, ../../../../general/res/sass/controls/_messages.scss */
+  /* line 325, ../../../../general/res/sass/controls/_messages.scss */
   .t-message-list .message-contents .l-message {
     margin-right: 10px; } }
 
diff --git a/platform/features/clock/src/indicators/ClockIndicator.js b/platform/features/clock/src/indicators/ClockIndicator.js
index 194e22067c..5d291cfeba 100644
--- a/platform/features/clock/src/indicators/ClockIndicator.js
+++ b/platform/features/clock/src/indicators/ClockIndicator.js
@@ -42,7 +42,7 @@ define(
                     return "C";
                 },
                 getGlyphClass: function () {
-                    return "";
+                    return "no-icon no-collapse float-right subtle";
                 },
                 getText: function () {
                     return text;