[Frontend] Styling for unsynced elements

Fixes #933

Author: charlesh88

platform/commonUI/browse/res/templates/browse/object-header.html

@@ -22,7 +22,8 @@
 <span class='type-icon flex-elem {{type.getCssClass()}}'></span>
 <span class="l-elem-wrapper l-flex-row flex-elem grows">
     <span ng-if="parameters.mode" class='action flex-elem'>{{parameters.mode}}</span>
-    <span class='title-label flex-elem flex-can-shrink'>{{model.name}}</span>
+    <span class='title-label flex-elem holder flex-can-shrink'>{{model.name}}</span>
+    <span class='t-object-alert t-alert-unsynced flex-elem holder' title='This object is not currently displaying real-time data'></span>
     <mct-representation
         key="'menu-arrow'"
         mct-object='domainObject'

platform/commonUI/general/res/sass/_data-status.scss

@@ -1,23 +1,6 @@
-.s-unsynced {
-    $c: $colorPausedBg;
-    border: 1px solid $c;
-    @include animTo($animName: pulsePaused, $propName: border-color, $propValStart: rgba($c, 0.8), $propValEnd: rgba($c, 0.5), $dur: $animPausedPulseDur, $dir: alternate, $count: infinite);
-}
-
-
 .s-stale {
 	@include s-stale();
 	.td {
 		@include s-stale();
 	}
 }
-
-.s-status-timeconductor-unsynced {
-    // Layout frames
-
-    // Plot areas
-    .gl-plot .gl-plot-display-area {
-        @extend .s-unsynced;
-    }
-}
-

platform/commonUI/general/res/sass/controls/_controls.scss

@@ -295,8 +295,6 @@ input[type="search"] {
     .title-label {
         color: $colorObjHdrTxt;
         @include ellipsize();
-        @include webkitProp(flex, '0 1 auto');
-        padding-right: 0.35em; // For context arrow. Done with em's so pad is relative to the scale of the text.
     }
 
     .context-available-w {
@@ -307,6 +305,10 @@ input[type="search"] {
         font-size: 0.7em;
         @include flex(0 0 1);
     }
+
+    .t-object-alert {
+        display: none;
+    }
 }
 
 /******************************************************** PROGRESS BAR */

platform/commonUI/general/res/sass/controls/_messages.scss

@@ -345,3 +345,29 @@ body.desktop .t-message-single {
 body.desktop .t-message-list {
     .message-contents .l-message { margin-right: $interiorMarginLg; }
 }
+
+// Alert elements in views
+.s-unsynced {
+    $c: $colorPausedBg;
+    border: 1px solid $c;
+    @include animTo($animName: pulsePaused, $propName: border-color, $propValStart: rgba($c, 0.8), $propValEnd: rgba($c, 0.5), $dur: $animPausedPulseDur, $dir: alternate, $count: infinite);
+}
+
+.s-status-timeconductor-unsynced {
+    // Plot areas
+    .gl-plot .gl-plot-display-area {
+        @extend .s-unsynced;
+    }
+
+    // Object headers
+    .object-header {
+        .t-object-alert {
+            display: inline;
+            &.t-alert-unsynced {
+                @extend .icon-alert-triangle;
+                color: $colorPausedBg;
+            }
+        }
+    }
+}
+