diff --git a/app/assets/javascripts/app/controllers/cti.coffee b/app/assets/javascripts/app/controllers/cti.coffee index c65900f1f..ffc5579c7 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 = '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..50ff63788 100644 --- a/app/assets/javascripts/app/views/cti/index.jst.eco +++ b/app/assets/javascripts/app/views/cti/index.jst.eco @@ -5,18 +5,24 @@ - + - + <% for item in @list: %> - class="is-inactive"<% end %> data-id="<%- item.id %>"> - class="is-grayed-out"<% end %> data-id="<%- item.id %>"> + - - - + + + <% end %> diff --git a/app/assets/stylesheets/zammad.scss b/app/assets/stylesheets/zammad.scss index 499b8f3d6..28fac0adc 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 { @@ -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; +} + /* ----------------
<%- @T('From') %> <%- @T('To') %><%- @T('Status') %> <%- @T('Duration') %> <%- @T('Time') %>
<% if item.state is 'hangup': %>checked<% end %>><% end %> +
+ + <% shown = false %> <% if item.preferences.from && !_.isEmpty(item.preferences.from): %> @@ -36,7 +42,7 @@ <% if item.from_comment: %><%= item.from_comment %><% end %>
<% end %> - <%= item.from %> + <%= item.from %>
<% shown = false %> @@ -57,11 +63,15 @@ <% if item.to_comment: %><%= item.to_comment %><% end %>
<% end %> - <%= item.to %> + <%= item.to %>
<%- @T(item.state_human) %><%= item.duration %><%- @humanTime(item.created_at) %> + <% if item.state_human: %> + <%- @Icon('status', "#{item.status_class} inline") %> <%- @T(item.state_human) %> + <% end %> + <%= item.duration %><%- @humanTime(item.created_at) %>