From 29b41125d279f57fe6d1f1023fa7505b87156c87 Mon Sep 17 00:00:00 2001
From: Felix Niklas <mrflix@gmail.com>
Date: Fri, 15 Jan 2016 14:51:27 +0100
Subject: [PATCH] customer chat: add status dropdown arrows

---
 .../javascripts/app/views/customer_chat/index.jst.eco  |  6 +++---
 app/assets/stylesheets/zammad.scss                     | 10 ++++++++++
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/app/assets/javascripts/app/views/customer_chat/index.jst.eco b/app/assets/javascripts/app/views/customer_chat/index.jst.eco
index a4bf64fce..9df64237a 100644
--- a/app/assets/javascripts/app/views/customer_chat/index.jst.eco
+++ b/app/assets/javascripts/app/views/customer_chat/index.jst.eco
@@ -6,13 +6,13 @@
       <div class="page-header-center">
         <div class="status-fields">
           <div class="status-field js-acceptChat js-waitingCustomers">
-            <span class="badge js-badgeWaitingCustomers"></span> <%- @T('Waiting Customers') %>
+            <span class="badge js-badgeWaitingCustomers"></span> <%- @T('Waiting Customers') %> <div class="info-arrow"><%- @Icon('arrow-down') %></div>
           </div>
           <div class="status-field js-chattingCustomers">
-            <span class="badge js-badgeChattingCustomers"></span> <%- @T('Chatting Customers') %>
+            <span class="badge js-badgeChattingCustomers"></span> <%- @T('Chatting Customers') %> <div class="info-arrow"><%- @Icon('arrow-down') %></div>
           </div>
           <div class="status-field js-activeAgents">
-            <span class="badge js-badgeActiveAgents"></span> <%- @T('Active Agents') %>
+            <span class="badge js-badgeActiveAgents"></span> <%- @T('Active Agents') %> <div class="info-arrow"><%- @Icon('arrow-down') %></div>
           </div>
         </div>
       </div>
diff --git a/app/assets/stylesheets/zammad.scss b/app/assets/stylesheets/zammad.scss
index 0437bcd67..b7c53cb41 100644
--- a/app/assets/stylesheets/zammad.scss
+++ b/app/assets/stylesheets/zammad.scss
@@ -700,12 +700,22 @@ pre code.hljs {
   .badge {
     background: hsla(210,50%,10%,.24);
   }
+
+  .info-arrow {
+    margin: -8px -10px -6px 0;
+    padding: 8px 10px 7px 3px;
+  }
 }
 
 @keyframes pulsate {
   to { filter: brightness(1.2); }
 }
 
+.info-arrow {
+  display: inline-block;
+  cursor: pointer;
+}
+
 .badge {
   display: inline-block;
   min-width: 18px;