From 31e7a054ec5759f87a05dac5f185db95f4fc22e7 Mon Sep 17 00:00:00 2001
From: Felix Niklas <mrflix@gmail.com>
Date: Tue, 3 May 2016 12:06:40 +0200
Subject: [PATCH] style caller log

---
 .../javascripts/app/controllers/cti.coffee    | 24 +++++++--------
 .../javascripts/app/views/cti/index.jst.eco   | 30 +++++++++++++------
 app/assets/stylesheets/zammad.scss            | 16 ++++++++++
 3 files changed, 47 insertions(+), 23 deletions(-)

diff --git a/app/assets/javascripts/app/controllers/cti.coffee b/app/assets/javascripts/app/controllers/cti.coffee
index c65900f1f..d312efdfc 100644
--- a/app/assets/javascripts/app/controllers/cti.coffee
+++ b/app/assets/javascripts/app/controllers/cti.coffee
@@ -123,25 +123,21 @@ class App.CTI extends App.Controller
       "#{mins}:#{secs}"
 
     for item in @list
+      item.status_class = ''
+
       if item.state is 'newCall'
         item.state_human = 'ringing'
+        item.status_class = 'neutral'
       else if item.state is 'answer'
         item.state_human = 'connected'
+        item.status_class = 'pulsate-animation ok'
       else if item.state is 'hangup'
-        if item.comment is 'cancel'
-          item.state_human = 'not reached'
-        else if item.comment is 'noAnswer'
-          item.state_human = 'not reached'
-        else if item.comment is 'congestion'
-          item.state_human = 'not reached'
-        else if item.comment is 'busy'
-          item.state_human = 'busy'
-        else if item.comment is 'notFound'
-          item.state_human = 'not exist'
-        else if item.comment is 'normalClearing'
-          item.state_human = ''
-        else
-          item.state_human = item.comment
+        item.state_human = switch item.comment
+          when 'cancel', 'noAnswer', 'congestion' then 'not reached'
+          when 'busy' then 'busy'
+          when 'notFound' then 'not exist'
+          when 'normalClearing' then ''
+          else item.comment
       else
         item.state_human = item.state
         if item.comment
diff --git a/app/assets/javascripts/app/views/cti/index.jst.eco b/app/assets/javascripts/app/views/cti/index.jst.eco
index 7fdfab427..1d4ea11a4 100644
--- a/app/assets/javascripts/app/views/cti/index.jst.eco
+++ b/app/assets/javascripts/app/views/cti/index.jst.eco
@@ -5,18 +5,26 @@
     <table class="table table-striped table-hover">
       <thead>
         <tr>
-          <th style="width: 28px;"></th>
+          <th style="width: 40px;"></th>
           <th><%- @T('From') %></th>
           <th><%- @T('To') %></th>
-          <th style="width: 130px;"></th>
+          <th style="width: 130px;"><%- @T('Status') %></th>
           <th style="width: 100px;"><%- @T('Duration') %></th>
           <th style="width: 170px;"><%- @T('Time') %></th>
         </tr>
       </thead>
       <tbody>
         <% for item in @list: %>
-        <tr <% if item.state is 'hangup' && item.done: %>class="is-inactive"<% end %> data-id="<%- item.id %>">
-          <td><% if item.state is 'hangup': %><input type="checkbox" class="js-check" <% if item.done: %>checked<% end %>><% end %>
+        <tr <% if item.state is 'hangup' && item.done: %>class="is-grayed-out"<% end %> data-id="<%- item.id %>">
+          <td class="table-checkbox" style="vertical-align: middle">
+            <% if item.state is 'hangup': %>
+            <label class="checkbox-replacement">
+              <input type="checkbox" class="js-check" <% if item.done: %>checked<% end %>>
+              <%- @Icon('checkbox', 'icon-unchecked') %>
+              <%- @Icon('checkbox-checked', 'icon-checked') %>
+            </label>
+            <% end %>
+          </td>
           <td>
             <% shown = false %>
             <% if item.preferences.from && !_.isEmpty(item.preferences.from): %>
@@ -36,7 +44,7 @@
               <% if item.from_comment: %><%= item.from_comment %><% end %>
               <br>
             <% end %>
-            <%= item.from %>
+            <small><%= item.from %></small>
           </td>
           <td>
             <% shown = false %>
@@ -57,11 +65,15 @@
               <% if item.to_comment: %><%= item.to_comment %><% end %>
               <br>
             <% end %>
-            <%= item.to %>
+            <small><%= item.to %></small>
           </td>
-          <td><%- @T(item.state_human) %></td>
-          <td><%= item.duration %></td>
-          <td><%- @humanTime(item.created_at) %></td>
+          <td style="vertical-align: middle">
+            <% if item.state_human: %>
+            <%- @Icon('status', "#{item.status_class} inline") %> <%- @T(item.state_human) %>
+            <% end %>
+          </td>
+          <td style="vertical-align: middle"><%= item.duration %></td>
+          <td style="vertical-align: middle"><%- @humanTime(item.created_at) %></td>
         </tr>
         <% end %>
       </tbody>
diff --git a/app/assets/stylesheets/zammad.scss b/app/assets/stylesheets/zammad.scss
index 499b8f3d6..201d61eec 100644
--- a/app/assets/stylesheets/zammad.scss
+++ b/app/assets/stylesheets/zammad.scss
@@ -848,6 +848,10 @@ table {
 
 .table {
   display: table;
+  
+  small {
+    color: inherit;
+  }
 }
 
 .table--light {
@@ -959,6 +963,10 @@ th.align-right {
   }
 }
 
+.table tr.is-grayed-out {
+  opacity: 0.33;
+}
+
 .table .icon-draggable,
 .table .icon-trash {
   vertical-align: middle;
@@ -2556,6 +2564,9 @@ ol.tabs li {
   &.error {
     fill: $superbad-color;
   }
+  &.neutral {
+    fill: $ok-color;
+  }
 }
 
 .icon-status-modified-inner-circle {
@@ -8094,6 +8105,11 @@ output {
   }
 }
 
+
+.pulsate-animation {
+  animation: pulsate 667ms ease-in-out infinite alternate;
+}
+
 /*
 
   ----------------