Sutty/trabajo-afectivo
5
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

use info icon in customer chat

Browse source
This commit is contained in:
Felix Niklas 2016-03-23 14:26:53 +01:00
parent d0b820fcad
commit fa223d560f
3 changed files with 37 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
app/assets/javascripts/app/controllers/chat.coffee
View file

@ -116,11 +116,11 @@ class App.CustomerChat extends App.Controller
chat_sessions: list
)
@el.find('.js-waitingCustomers .js-arrow').popover(
@el.find('.js-waitingCustomers .js-info').popover(
trigger: 'hover'
html: true
animation: false
delay: 100
delay: 0
placement: 'bottom'
title: ->
App.i18n.translateContent('Waiting Customers')
@ -128,11 +128,11 @@ class App.CustomerChat extends App.Controller
chatSessionList(@meta.waiting_chat_session_list)
)
@el.find('.js-chattingCustomers .js-arrow').popover(
@el.find('.js-chattingCustomers .js-info').popover(
trigger: 'hover'
html: true
animation: false
delay: 100
delay: 0
placement: 'bottom'
title: ->
App.i18n.translateContent('Chatting Customers')
@ -140,11 +140,11 @@ class App.CustomerChat extends App.Controller
chatSessionList(@meta.running_chat_session_list)
)
@el.find('.js-activeAgents .js-arrow').popover(
@el.find('.js-activeAgents .js-info').popover(
trigger: 'hover'
html: true
animation: false
delay: 100
delay: 0
placement: 'bottom'
title: ->
App.i18n.translateContent('Active Agents')

15
app/assets/javascripts/app/views/customer_chat/index.jst.eco
View file

@ -6,13 +6,22 @@
<div class="page-header-center">
<div class="status-fields">
<div class="status-field js-acceptChat js-waitingCustomers">
<span class="badge js-badgeWaitingCustomers"></span> <%- @T('Waiting Customers') %> <div class="info-arrow js-arrow"><%- @Icon('arrow-down') %></div>
<span class="badge js-badgeWaitingCustomers"></span> <%- @T('Waiting Customers') %>
<div class="status-badge js-info">
<div class="info-badge"><%- @Icon('info') %></div>
</div>
</div>
<div class="status-field js-chattingCustomers">
<span class="badge js-badgeChattingCustomers"></span> <%- @T('Chatting Customers') %> <div class="info-arrow js-arrow"><%- @Icon('arrow-down') %></div>
<span class="badge js-badgeChattingCustomers"></span> <%- @T('Chatting Customers') %>
<div class="status-badge js-info">
<div class="info-badge"><%- @Icon('info') %></div>
</div>
</div>
<div class="status-field js-activeAgents">
<span class="badge js-badgeActiveAgents"></span> <%- @T('Active Agents') %> <div class="info-arrow js-arrow"><%- @Icon('arrow-down') %></div>
<span class="badge js-badgeActiveAgents"></span> <%- @T('Active Agents') %>
<div class="status-badge js-info">
<div class="info-badge"><%- @Icon('info') %></div>
</div>
</div>
</div>
</div>

28
app/assets/stylesheets/zammad.scss
View file

@ -707,8 +707,11 @@ pre code.hljs {
.status-field {
color: hsl(0,0%,60%);
padding: 8px 10px 6px;
border: 1px solid hsl(0,0%,90%);
display: flex;
height: 34px;
align-items: center;
line-height: 35px;
&.is-clickable {
background: hsl(203,65%,55%);
@ -740,24 +743,31 @@ pre code.hljs {
}
.badge {
margin: 0 5px 0 10px;
background: hsla(210,50%,10%,.24);
}
.info-arrow {
margin: -8px -10px -6px 0;
padding: 8px 10px 7px 3px;
.status-badge {
width: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
align-self: stretch;
}
}
.info-badge {
border-radius: 100%;
fill: rgba(0,0,0,.24);
border: 1px solid rgba(0,0,0,.13);
padding: 2px 5px 0px;
line-height: 12px;
}
@keyframes pulsate {
to { filter: brightness(1.2); }
}
.info-arrow {
display: inline-block;
cursor: pointer;
}
.badge {
display: inline-block;
min-width: 18px;