From 8a075294c640533f25f51e0a385ea370e2620589 Mon Sep 17 00:00:00 2001
From: Felix Niklas <mrflix@gmail.com>
Date: Tue, 3 Nov 2015 15:20:03 +0100
Subject: [PATCH] add blicking and clickable status-field classes

---
 .../views/layout_ref/customer_chat.jst.eco    |  4 ++--
 app/assets/stylesheets/zammad.scss            | 20 +++++++++++++++++--
 2 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/app/assets/javascripts/app/views/layout_ref/customer_chat.jst.eco b/app/assets/javascripts/app/views/layout_ref/customer_chat.jst.eco
index 4381c7a4d..57dfdbab8 100644
--- a/app/assets/javascripts/app/views/layout_ref/customer_chat.jst.eco
+++ b/app/assets/javascripts/app/views/layout_ref/customer_chat.jst.eco
@@ -5,8 +5,8 @@
       </div>
       <div class="page-header-center">
         <div class="status-fields">
-          <div class="status-field">
-            <span class="badge">0</span> Waiting Customers
+          <div class="status-field is-clickable is-blinking">
+            <span class="badge">1</span> Waiting Customers
           </div>
           <div class="status-field">
             <span class="badge">15</span> Chatting Customers
diff --git a/app/assets/stylesheets/zammad.scss b/app/assets/stylesheets/zammad.scss
index 46ba73b0a..81a8f7ac6 100644
--- a/app/assets/stylesheets/zammad.scss
+++ b/app/assets/stylesheets/zammad.scss
@@ -601,6 +601,19 @@ blockquote {
   padding: 8px 10px 6px;
   border: 1px solid hsl(0,0%,90%);
   
+  &.is-clickable {
+    background: hsl(203,65%,55%);
+    color: white;
+    cursor: pointer;
+    border-color: hsl(203,65%,45%);
+    box-shadow: 1px 0 hsl(203,65%,45%);
+    position: relative;
+  }
+
+  &.is-blinking {
+    animation: pulsate 667ms ease-in-out infinite alternate;
+  }
+  
   &:not(:last-child):not(:only-child) {
     border-right: none;
   }
@@ -618,10 +631,14 @@ blockquote {
   }
 
   .badge {
-    background: hsl(210,5%,77%);
+    background: hsla(210,50%,10%,.24);
   }
 }
 
+@keyframes pulsate {
+  to { filter: brightness(1.2); }
+}
+
 .badge {
   display: inline-block;
   min-width: 18px;
@@ -7099,7 +7116,6 @@ output {
     fill: hsl(0,0%,90%);
     margin-left: -4px;
     vertical-align: middle;
-    animation: fadeInDown 300ms both;
     animation: ease-in-out load-fade 600ms infinite alternate;
   }