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 chat_sessions: list
) )
@el.find('.js-waitingCustomers .js-arrow').popover( @el.find('.js-waitingCustomers .js-info').popover(
trigger: 'hover' trigger: 'hover'
html: true html: true
animation: false animation: false
delay: 100 delay: 0
placement: 'bottom' placement: 'bottom'
title: -> title: ->
App.i18n.translateContent('Waiting Customers') App.i18n.translateContent('Waiting Customers')
@ -128,11 +128,11 @@ class App.CustomerChat extends App.Controller
chatSessionList(@meta.waiting_chat_session_list) chatSessionList(@meta.waiting_chat_session_list)
) )
@el.find('.js-chattingCustomers .js-arrow').popover( @el.find('.js-chattingCustomers .js-info').popover(
trigger: 'hover' trigger: 'hover'
html: true html: true
animation: false animation: false
delay: 100 delay: 0
placement: 'bottom' placement: 'bottom'
title: -> title: ->
App.i18n.translateContent('Chatting Customers') App.i18n.translateContent('Chatting Customers')
@ -140,11 +140,11 @@ class App.CustomerChat extends App.Controller
chatSessionList(@meta.running_chat_session_list) chatSessionList(@meta.running_chat_session_list)
) )
@el.find('.js-activeAgents .js-arrow').popover( @el.find('.js-activeAgents .js-info').popover(
trigger: 'hover' trigger: 'hover'
html: true html: true
animation: false animation: false
delay: 100 delay: 0
placement: 'bottom' placement: 'bottom'
title: -> title: ->
App.i18n.translateContent('Active Agents') 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="page-header-center">
<div class="status-fields"> <div class="status-fields">
<div class="status-field js-acceptChat js-waitingCustomers"> <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>
<div class="status-field js-chattingCustomers"> <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>
<div class="status-field js-activeAgents"> <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> </div>
</div> </div>

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

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