From 762f43fa61e641f268ac733e24cb3f103b22ded8 Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charlesh88@gmail.com>
Date: Mon, 1 Aug 2016 16:26:47 -0700
Subject: [PATCH] [Frontend] Styling TC unsynced elements

Fixes #933
WIP: Styling for unsynced elements
---
 .../browse/res/templates/browse/object-header.html     |  1 +
 platform/commonUI/general/res/sass/_data-status.scss   | 10 ++++++++++
 platform/commonUI/general/res/sass/_effects.scss       | 10 +++++-----
 .../commonUI/general/res/sass/features/_imagery.scss   |  3 ++-
 .../commonUI/themes/espresso/res/sass/_constants.scss  |  1 +
 platform/commonUI/themes/snow/res/sass/_constants.scss |  1 +
 platform/features/layout/res/templates/layout.html     |  9 ++++-----
 platform/features/plot/res/templates/plot.html         |  2 +-
 8 files changed, 25 insertions(+), 12 deletions(-)

diff --git a/platform/commonUI/browse/res/templates/browse/object-header.html b/platform/commonUI/browse/res/templates/browse/object-header.html
index d46cbd91cb..7fbb70c892 100644
--- a/platform/commonUI/browse/res/templates/browse/object-header.html
+++ b/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'
diff --git a/platform/commonUI/general/res/sass/_data-status.scss b/platform/commonUI/general/res/sass/_data-status.scss
index 24a15db794..bd5210c930 100644
--- a/platform/commonUI/general/res/sass/_data-status.scss
+++ b/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);
+    }
+}
+
diff --git a/platform/commonUI/general/res/sass/_effects.scss b/platform/commonUI/general/res/sass/_effects.scss
index 1a13b07d06..5264db9aa2 100644
--- a/platform/commonUI/general/res/sass/_effects.scss
+++ b/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);
 }
\ No newline at end of file
diff --git a/platform/commonUI/general/res/sass/features/_imagery.scss b/platform/commonUI/general/res/sass/features/_imagery.scss
index cd04568e02..fcd4b59eb2 100644
--- a/platform/commonUI/general/res/sass/features/_imagery.scss
+++ b/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);
 	}
 }
 
diff --git a/platform/commonUI/themes/espresso/res/sass/_constants.scss b/platform/commonUI/themes/espresso/res/sass/_constants.scss
index d32db1d6d7..d841802ded 100644
--- a/platform/commonUI/themes/espresso/res/sass/_constants.scss
+++ b/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;
diff --git a/platform/commonUI/themes/snow/res/sass/_constants.scss b/platform/commonUI/themes/snow/res/sass/_constants.scss
index 87a729d775..b963deaffb 100644
--- a/platform/commonUI/themes/snow/res/sass/_constants.scss
+++ b/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;
diff --git a/platform/features/layout/res/templates/layout.html b/platform/features/layout/res/templates/layout.html
index 86f24959f9..8d422199ed 100644
--- a/platform/features/layout/res/templates/layout.html
+++ b/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')">
 
diff --git a/platform/features/plot/res/templates/plot.html b/platform/features/plot/res/templates/plot.html
index 008f410f4d..12680c2b27 100644
--- a/platform/features/plot/res/templates/plot.html
+++ b/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"