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

and shorten some status messages to make the translation easier.

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("<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: =>
+  disconnect: =>
-    @el.one 'transitionend', { callback: @release }, @onTransitionend
+    @addStatusMessage("<strong>You</strong> left the conversation")
-    @el.removeClass('is-open')
     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

app/assets/javascripts/app/views/customer_chat/chat_window.jst.eco

@@ -7,8 +7,11 @@
     </div>
   </div>
   <div class="chat-name" title="<%= @title %>"><%= @name %></div>
-  <div class="chat-close js-close">
+  <div class="chat-disconnect js-disconnect">
-    <%- @Icon('diagonal-cross') %>
+    <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">

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;
+  margin-left: 10px;
-  top: -1px;
+  
-
   &[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 {
+.chat-disconnect,
-    background: hsl(210,8%,90%);
+.chat-close {
-    
+  cursor: pointer;
-    .icon {
+  padding: 0 4px;
-      opacity: 1;
+  
-    }
+  .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%);