diff --git a/app/assets/javascripts/app/controllers/chat.coffee b/app/assets/javascripts/app/controllers/chat.coffee index af460d8ea..2357bb72d 100644 --- a/app/assets/javascripts/app/controllers/chat.coffee +++ b/app/assets/javascripts/app/controllers/chat.coffee @@ -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("#{data.realname} has left the conversation") + @addStatusMessage("#{data.realname} left the conversation") @goOffline() ) @bind('chat_session_closed', (data) => return if data.session_id isnt @session.session_id return if data.self_written - @addStatusMessage("#{data.realname} has closed the conversation") + @addStatusMessage("#{data.realname} 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("You 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("#{ @options.name }'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 diff --git a/app/assets/javascripts/app/views/customer_chat/chat_window.jst.eco b/app/assets/javascripts/app/views/customer_chat/chat_window.jst.eco index c9ca6b9d6..7cd95126e 100644 --- a/app/assets/javascripts/app/views/customer_chat/chat_window.jst.eco +++ b/app/assets/javascripts/app/views/customer_chat/chat_window.jst.eco @@ -7,8 +7,11 @@
<%= @name %>
-
- <%- @Icon('diagonal-cross') %> +
+
<%- @T('disconnect') %>
+
+
diff --git a/app/assets/stylesheets/zammad.scss b/app/assets/stylesheets/zammad.scss index 615dc54bb..5fa47a3c0 100644 --- a/app/assets/stylesheets/zammad.scss +++ b/app/assets/stylesheets/zammad.scss @@ -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%);