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

From d4d73ed59838d75d67e43ca675607f21bd88dbe7 Mon Sep 17 00:00:00 2001
From: Felix Niklas <mrflix@gmail.com>
Date: Tue, 3 May 2016 12:30:25 +0200
Subject: [PATCH 2/3] fix border in caller log, remove pulsing

---
 app/assets/javascripts/app/controllers/cti.coffee  |  2 +-
 app/assets/javascripts/app/views/cti/index.jst.eco |  6 ++----
 app/assets/stylesheets/zammad.scss                 | 12 ++++++------
 3 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/app/assets/javascripts/app/controllers/cti.coffee b/app/assets/javascripts/app/controllers/cti.coffee
index d312efdfc..ffc5579c7 100644
--- a/app/assets/javascripts/app/controllers/cti.coffee
+++ b/app/assets/javascripts/app/controllers/cti.coffee
@@ -130,7 +130,7 @@ class App.CTI extends App.Controller
         item.status_class = 'neutral'
       else if item.state is 'answer'
         item.state_human = 'connected'
-        item.status_class = 'pulsate-animation ok'
+        item.status_class = 'ok'
       else if item.state is 'hangup'
         item.state_human = switch item.comment
           when 'cancel', 'noAnswer', 'congestion' then 'not reached'
diff --git a/app/assets/javascripts/app/views/cti/index.jst.eco b/app/assets/javascripts/app/views/cti/index.jst.eco
index 1d4ea11a4..50ff63788 100644
--- a/app/assets/javascripts/app/views/cti/index.jst.eco
+++ b/app/assets/javascripts/app/views/cti/index.jst.eco
@@ -17,13 +17,11 @@
         <% for item in @list: %>
         <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 %>>
+            <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>
-            <% end %>
           </td>
           <td>
             <% shown = false %>
diff --git a/app/assets/stylesheets/zammad.scss b/app/assets/stylesheets/zammad.scss
index 201d61eec..22750d1a3 100644
--- a/app/assets/stylesheets/zammad.scss
+++ b/app/assets/stylesheets/zammad.scss
@@ -914,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 {
@@ -964,7 +960,11 @@ th.align-right {
 }
 
 .table tr.is-grayed-out {
-  opacity: 0.33;
+  color: hsl(120,1%,77%);
+  
+  .icon {
+    opacity: 0.33;
+  }
 }
 
 .table .icon-draggable,

From 227c3e8d8012083e69c5d2d211a44827475f4d24 Mon Sep 17 00:00:00 2001
From: Felix Niklas <mrflix@gmail.com>
Date: Tue, 3 May 2016 12:31:06 +0200
Subject: [PATCH 3/3] checkbox and radio replacement: add disabled state

usage:
 - is-disabled class on label
 - disabled attribute on the input
---
 app/assets/stylesheets/zammad.scss | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/app/assets/stylesheets/zammad.scss b/app/assets/stylesheets/zammad.scss
index 22750d1a3..28fac0adc 100644
--- a/app/assets/stylesheets/zammad.scss
+++ b/app/assets/stylesheets/zammad.scss
@@ -1041,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,