From fa223d560f0a1a40d57c91988199b72f77103467 Mon Sep 17 00:00:00 2001
From: Felix Niklas <mrflix@gmail.com>
Date: Wed, 23 Mar 2016 14:26:53 +0100
Subject: [PATCH] use info icon in customer chat

---
 .../javascripts/app/controllers/chat.coffee   | 12 ++++----
 .../app/views/customer_chat/index.jst.eco     | 15 ++++++++--
 app/assets/stylesheets/zammad.scss            | 28 +++++++++++++------
 3 files changed, 37 insertions(+), 18 deletions(-)

diff --git a/app/assets/javascripts/app/controllers/chat.coffee b/app/assets/javascripts/app/controllers/chat.coffee
index 53efc6218..33000e2d3 100644
--- a/app/assets/javascripts/app/controllers/chat.coffee
+++ b/app/assets/javascripts/app/controllers/chat.coffee
@@ -116,11 +116,11 @@ class App.CustomerChat extends App.Controller
         chat_sessions: list
       )
 
-    @el.find('.js-waitingCustomers .js-arrow').popover(
+    @el.find('.js-waitingCustomers .js-info').popover(
       trigger:    'hover'
       html:       true
       animation:  false
-      delay:      100
+      delay:      0
       placement:  'bottom'
       title: ->
         App.i18n.translateContent('Waiting Customers')
@@ -128,11 +128,11 @@ class App.CustomerChat extends App.Controller
         chatSessionList(@meta.waiting_chat_session_list)
     )
 
-    @el.find('.js-chattingCustomers .js-arrow').popover(
+    @el.find('.js-chattingCustomers .js-info').popover(
       trigger:    'hover'
       html:       true
       animation:  false
-      delay:      100
+      delay:      0
       placement:  'bottom'
       title: ->
         App.i18n.translateContent('Chatting Customers')
@@ -140,11 +140,11 @@ class App.CustomerChat extends App.Controller
         chatSessionList(@meta.running_chat_session_list)
     )
 
-    @el.find('.js-activeAgents .js-arrow').popover(
+    @el.find('.js-activeAgents .js-info').popover(
       trigger:    'hover'
       html:       true
       animation:  false
-      delay:      100
+      delay:      0
       placement:  'bottom'
       title: ->
         App.i18n.translateContent('Active Agents')
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 d734cc69e..637416302 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,22 @@
       <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') %> <div class="info-arrow js-arrow"><%- @Icon('arrow-down') %></div>
+            <span class="badge js-badgeWaitingCustomers"></span> <%- @T('Waiting Customers') %> 
+            <div class="status-badge js-info">
+              <div class="info-badge"><%- @Icon('info') %></div>
+            </div>
           </div>
           <div class="status-field js-chattingCustomers">
-            <span class="badge js-badgeChattingCustomers"></span> <%- @T('Chatting Customers') %> <div class="info-arrow js-arrow"><%- @Icon('arrow-down') %></div>
+            <span class="badge js-badgeChattingCustomers"></span> <%- @T('Chatting Customers') %> 
+            <div class="status-badge js-info">
+              <div class="info-badge"><%- @Icon('info') %></div>
+            </div>
           </div>
           <div class="status-field js-activeAgents">
-            <span class="badge js-badgeActiveAgents"></span> <%- @T('Active Agents') %> <div class="info-arrow js-arrow"><%- @Icon('arrow-down') %></div>
+            <span class="badge js-badgeActiveAgents"></span> <%- @T('Active Agents') %> 
+            <div class="status-badge js-info">
+              <div class="info-badge"><%- @Icon('info') %></div>
+            </div>
           </div>
         </div>
       </div>
diff --git a/app/assets/stylesheets/zammad.scss b/app/assets/stylesheets/zammad.scss
index a22c26b1c..e8c08d990 100644
--- a/app/assets/stylesheets/zammad.scss
+++ b/app/assets/stylesheets/zammad.scss
@@ -707,8 +707,11 @@ pre code.hljs {
 
 .status-field {
   color: hsl(0,0%,60%);
-  padding: 8px 10px 6px;
   border: 1px solid hsl(0,0%,90%);
+  display: flex;
+  height: 34px;
+  align-items: center;
+  line-height: 35px;
   
   &.is-clickable {
     background: hsl(203,65%,55%);
@@ -740,24 +743,31 @@ pre code.hljs {
   }
 
   .badge {
+    margin: 0 5px 0 10px;
     background: hsla(210,50%,10%,.24);
   }
 
-  .info-arrow {
-    margin: -8px -10px -6px 0;
-    padding: 8px 10px 7px 3px;
+  .status-badge {
+    width: 32px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    align-self: stretch;
   }
 }
 
+.info-badge {
+  border-radius: 100%;
+  fill: rgba(0,0,0,.24);
+  border: 1px solid rgba(0,0,0,.13);
+  padding: 2px 5px 0px;
+  line-height: 12px;
+}
+
 @keyframes pulsate {
   to { filter: brightness(1.2); }
 }
 
-.info-arrow {
-  display: inline-block;
-  cursor: pointer;
-}
-
 .badge {
   display: inline-block;
   min-width: 18px;