Merge branch 'develop' of github.com:martini/zammad into develop

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 = '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

app/assets/javascripts/app/views/cti/index.jst.eco

@@ -5,18 +5,24 @@
     <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">
+            <label class="checkbox-replacement<% if item.state isnt 'hangup': %> is-disabled<% end %>">
+              <input type="checkbox" class="js-check"<% if item.done: %> checked<% end %><% if item.state isnt 'hangup': %> disabled<% end %>>
+              <%- @Icon('checkbox', 'icon-unchecked') %>
+              <%- @Icon('checkbox-checked', 'icon-checked') %>
+            </label>
+          </td>
           <td>
             <% shown = false %>
             <% if item.preferences.from && !_.isEmpty(item.preferences.from): %>
@@ -36,7 +42,7 @@
               <% if item.from_comment: %><%= item.from_comment %><% end %>
               <br>
             <% end %>
-            <%= item.from %>
+            <small><%= item.from %></small>
           </td>
           <td>
             <% shown = false %>
@@ -57,11 +63,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>

app/assets/stylesheets/zammad.scss

@@ -848,6 +848,10 @@ table {
 
 .table {
   display: table;
+  
+  small {
+    color: inherit;
+  }
 }
 
 .table--light {
@@ -910,15 +914,11 @@ th.align-right {
 
 .table > tbody > tr > td {
   padding: 10px 10px 8px;
-  border: none;
-  box-shadow: 0 1px rgba(0,0,0,.03);
+  border-color: hsl(0,0%,95%);
 }
 
 .table-hover > tbody > tr:hover > td {
   background: white;
-  box-shadow: 
-    0 1px rgba(0,0,0,.03),
-    0 -1px rgba(0,0,0,.03);
 }
  
 .table-hover > tbody > tr:hover > th {
@@ -959,6 +959,14 @@ th.align-right {
   }
 }
 
+.table tr.is-grayed-out {
+  color: hsl(120,1%,77%);
+  
+  .icon {
+    opacity: 0.33;
+  }
+}
+
 .table .icon-draggable,
 .table .icon-trash {
   vertical-align: middle;
@@ -1033,7 +1041,19 @@ th.align-right {
 
 .checkbox-replacement .icon-unchecked,
 .radio-replacement .icon-unchecked {
-  color: #9C9C9B;
+  color: hsl(60,1%,61%);
+}
+
+.checkbox-replacement.is-disabled,
+.radio-replacement.is-disabled {
+  cursor: default;
+}
+
+.checkbox-replacement input:disabled ~.icon,
+.radio-replacement input:disabled ~.icon {
+  opacity: 0.33;
+  fill: none;
+  cursor: default;
 }
 
 .checkbox-replacement input:not(:checked) ~ .icon-checked,
@@ -2556,6 +2576,9 @@ ol.tabs li {
   &.error {
     fill: $superbad-color;
   }
+  &.neutral {
+    fill: $ok-color;
+  }
 }
 
 .icon-status-modified-inner-circle {
@@ -8094,6 +8117,11 @@ output {
   }
 }
 
+
+.pulsate-animation {
+  animation: pulsate 667ms ease-in-out infinite alternate;
+}
+
 /*
 
   ----------------