[Frontend] Styling TC unsynced elements

Fixes #933
WIP: Styling for unsynced elements

Author: charlesh88

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

@@ -23,6 +23,7 @@
 <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="icon-alert t-icon-alert flex-elem">Icon here</span>
     <mct-representation
         key="'menu-arrow'"
         mct-object='domainObject'

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

@@ -5,3 +5,13 @@
 	}
 }
 
+.s-status-timeconductor-unsynced {
+    // Layout frames
+
+    // Plot areas
+    .gl-plot .gl-plot-display-area {
+        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);
+    }
+}
+

platform/commonUI/general/res/sass/_effects.scss

@@ -39,20 +39,20 @@
     @include pulse($animName: pulse-subtle, $dur: 500ms, $opacity0: 0.7);
 }
 
-@mixin animTo($animName, $propName, $propValStart, $propValEnd, $dur: 500ms, $delay: 0) {
+@mixin animTo($animName, $propName, $propValStart, $propValEnd, $dur: 500ms, $delay: 0, $dir: normal, $count: 1) {
     @include keyframes($animName) {
         from { #{propName}: $propValStart; }
         to { #{$propName}: $propValEnd; }
     }
-    @include animToParams($animName, $dur: 500ms, $delay: 0)
+    @include animToParams($animName, $dur: $dur, $delay: $delay, $dir: $dir, $count: $count)
 }
 
-@mixin animToParams($animName, $dur: 500ms, $delay: 0) {
+@mixin animToParams($animName, $dur: 500ms, $delay: 0, $dir: normal, $count: 1) {
     @include animation-name($animName);
     @include animation-duration($dur);
     @include animation-delay($delay);
     @include animation-fill-mode(both);
-    @include animation-direction(normal);
-    @include animation-iteration-count(1);
+    @include animation-direction($dir);
+    @include animation-iteration-count($count);
     @include animation-timing-function(ease-in-out);
 }

platform/commonUI/general/res/sass/features/_imagery.scss

@@ -74,7 +74,8 @@
 .s-image-main {
 	border: 1px solid transparent;
 	&.paused {
-		border-color: $colorPausedBg;
+		//border-color: $colorPausedBg;
+        @include s-status-for-block-elem($c: $colorPausedBg);
 	}
 }
 

platform/commonUI/themes/espresso/res/sass/_constants.scss

@@ -103,6 +103,7 @@ $colorProgressBarAmt: $colorKey;
 $progressBarHOverlay: 15px;
 $progressBarStripeW: 20px;
 $shdwStatusIc: rgba(black, 0.4) 0 1px 2px;
+$animPausedPulseDur: 500ms;
 
 // Selects
 $colorSelectBg: $colorBtnBg;

platform/commonUI/themes/snow/res/sass/_constants.scss

@@ -103,6 +103,7 @@ $colorProgressBarAmt: #0a0;
 $progressBarHOverlay: 15px;
 $progressBarStripeW: 20px;
 $shdwStatusIc: rgba(white, 0.8) 0 0px 5px;
+$animPausedPulseDur: 1s;
 
 // Selects
 $colorSelectBg: #ddd;

platform/features/layout/res/templates/layout.html

@@ -26,11 +26,10 @@
          ng-repeat="childObject in composition"
          ng-style="controller.getFrameStyle(childObject.getId())">
 
-        <div class="frame child-frame holder contents abs">
-            <mct-representation key="'frame'"
-                                mct-object="childObject">
-            </mct-representation>
-        </div>
+        <mct-representation key="'frame'"
+                            class="frame child-frame holder contents abs"
+                            mct-object="childObject">
+        </mct-representation>
         <!-- Drag handles -->
         <span ng-show="domainObject.hasCapability('editor')">
 

platform/features/plot/res/templates/plot.html

@@ -82,7 +82,7 @@
                        ng-mousemove="subplot.hover($event)"
                        mct-drag="subplot.continueDrag($event)"
                        mct-drag-down="subplot.startDrag($event)"
-                       mct-drag-up="subplot.endDrag($event); plot.update();">
+                       mct-drag-up="subplot.endDrag($event); plot.update()">
             </mct-chart>
             <!-- TODO: Move into correct position; make part of group; infer from set of actions -->
             <div class="l-local-controls gl-plot-local-controls t-plot-display-controls"