style caller log

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 = switch item.comment
-          item.state_human = 'not reached'
+          when 'cancel', 'noAnswer', 'congestion' then 'not reached'
-        else if item.comment is 'noAnswer'
+          when 'busy' then 'busy'
-          item.state_human = 'not reached'
+          when 'notFound' then 'not exist'
-        else if item.comment is 'congestion'
+          when 'normalClearing' then ''
-          item.state_human = 'not reached'
+          else item.comment
-        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
       else
         item.state_human = item.state
         if item.comment

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 %>">
+        <tr <% if item.state is 'hangup' && item.done: %>class="is-grayed-out"<% end %> data-id="<%- item.id %>">
-          <td><% if item.state is 'hangup': %><input type="checkbox" class="js-check" <% if item.done: %>checked<% end %>><% end %>
+          <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 style="vertical-align: middle">
-          <td><%= item.duration %></td>
+            <% if item.state_human: %>
-          <td><%- @humanTime(item.created_at) %></td>
+            <%- @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>

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;
+}
+
 /*
 
   ----------------