customer chat: split closing a chat into a disconnect and close step.

and shorten some status messages to make the translation easier.
This commit is contained in:
Felix Niklas 2016-01-13 15:42:34 +01:00
parent 6bb8c7b6eb
commit 9f745e6c1c
3 changed files with 57 additions and 40 deletions

View file

@ -332,10 +332,13 @@ class ChatWindow extends App.Controller
'click': 'clearUnread'
'click .js-send': 'sendMessage'
'click .js-close': 'close'
'click .js-disconnect': 'disconnect'
elements:
'.js-customerChatInput': 'input'
'.js-status': 'status'
'.js-close': 'closeButton'
'.js-disconnect': 'disconnectButton'
'.js-body': 'body'
'.js-scrollHolder': 'scrollHolder'
@ -376,13 +379,13 @@ class ChatWindow extends App.Controller
@bind('chat_session_left', (data) =>
return if data.session_id isnt @session.session_id
return if data.self_written
@addStatusMessage("<strong>#{data.realname}</strong> has left the conversation")
@addStatusMessage("<strong>#{data.realname}</strong> left the conversation")
@goOffline()
)
@bind('chat_session_closed', (data) =>
return if data.session_id isnt @session.session_id
return if data.self_written
@addStatusMessage("<strong>#{data.realname}</strong> has closed the conversation")
@addStatusMessage("<strong>#{data.realname}</strong> closed the conversation")
@goOffline()
)
@bind('chat_focus', (data) =>
@ -438,14 +441,18 @@ class ChatWindow extends App.Controller
maxlength: 40000
})
close: =>
@el.one 'transitionend', { callback: @release }, @onTransitionend
@el.removeClass('is-open')
disconnect: =>
@addStatusMessage("<strong>You</strong> left the conversation")
App.WebSocket.send(
event:'chat_session_close'
data:
session_id: @session.session_id
)
@goOffline()
close: =>
@el.one 'transitionend', { callback: @release }, @onTransitionend
@el.removeClass('is-open')
if @removeCallback
@removeCallback(@session.session_id)
@ -588,8 +595,9 @@ class ChatWindow extends App.Controller
@$('.js-loader').remove()
goOffline: =>
#@addStatusMessage("<strong>#{ @options.name }</strong>'s connection got closed")
@status.attr('data-status', 'offline')
@disconnectButton.addClass 'is-hidden'
@closeButton.removeClass 'is-hidden'
@el.addClass('is-offline')
@input.attr('disabled', true)
@ -622,6 +630,8 @@ class ChatWindow extends App.Controller
time: time
addStatusMessage: (message, args) ->
@maybeAddTimestamp()
@body.append App.view('customer_chat/chat_status_message')
message: message
args: args

View file

@ -7,8 +7,11 @@
</div>
</div>
<div class="chat-name" title="<%= @title %>"><%= @name %></div>
<div class="chat-close js-close">
<%- @Icon('diagonal-cross') %>
<div class="chat-disconnect js-disconnect">
<div class="btn btn--action btn--small"><%- @T('disconnect') %></div>
</div>
<div class="chat-close js-close is-hidden">
<div class="btn btn--action btn--small"><%- @T('close') %></div>
</div>
</div>
<div class="chat-body-holder js-scrollHolder">

View file

@ -377,6 +377,18 @@ pre code.hljs {
&.btn--slim {
padding-left: 7px !important;
padding-right: 7px !important;
&.btn--small {
padding-left: 5px !important;
padding-right: 5px !important;
}
}
&.btn--small {
height: 27px;
font-size: 11px;
padding-left: 8px;
padding-right: 8px;
}
}
@ -7271,33 +7283,27 @@ output {
}
.chat-header {
padding: 12px 40px;
background: hsl(210,8%,95%);
border: 1px solid hsl(0,0%,91%);
border-radius: 3px 3px 0 0;
position: relative;
height: 37px;
line-height: 13px;
text-align: center;
flex-shrink: 0;
display: flex;
justify-content: space-between;
align-items: center;
}
.chat-name {
margin: 0 2px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex-shrink: 0;
}
.chat-status,
.chat-close {
position: absolute;
top: 0;
padding-top: inherit;
padding-bottom: inherit;
padding-left: 10px;
padding-right: 10px;
}
.chat-status {
left: 0;
top: -1px;
margin-left: 10px;
&[data-status='online'] .icon {
fill: $supergood-color;
}
@ -7326,25 +7332,23 @@ output {
.chat-status-holder {
position: relative;
}
.chat-close {
right: 0;
cursor: pointer;
.icon {
fill: currentColor;
opacity: 0.5;
}
&:hover {
background: hsl(210,8%,90%);
.icon {
opacity: 1;
}
.chat-disconnect,
.chat-close {
cursor: pointer;
padding: 0 4px;
.btn {
min-width: 80px;
justify-content: center;
}
}
.chat-disconnect.is-hidden,
.chat-close.is-hidden {
display: none;
}
.chat-body-holder {
flex: 1;
background: hsl(210,17%,98%);