Chat: prevent clicking onto the status from closing the chat

Users might accidentally close the chat because they click on the online status of the agent since it looks a bit like a button

fixes #1826, thanks to @silsha for the request
This commit is contained in:
Felix Niklas 2018-04-13 13:22:15 +02:00
parent cf16264940
commit edc39d801e
5 changed files with 2908 additions and 4 deletions

View file

@ -437,6 +437,7 @@ do($ = window.jQuery, window) ->
# start bindings
@el.find('.js-chat-open').click @open
@el.find('.js-chat-toggle').click @toggle
@el.find('.js-chat-status').click @stopPropagation
@el.find('.zammad-chat-controls').on 'submit', @onSubmit
@el.find('.zammad-chat-body').on 'scroll', @detectScrolledtoBottom
@el.find('.zammad-scroll-hint').click @onScrollHintClick
@ -663,6 +664,9 @@ do($ = window.jQuery, window) ->
focus: @onFocus
focusout: @onFocusOut
stopPropagation: (event) ->
event.stopPropagation()
checkForEnter: (event) =>
if not event.shiftKey and event.keyCode is 13
event.preventDefault()

View file

@ -686,6 +686,7 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
this.input = this.el.find('.zammad-chat-input');
this.el.find('.js-chat-open').click(this.open);
this.el.find('.js-chat-toggle').click(this.toggle);
this.el.find('.js-chat-status').click(this.stopPropagation);
this.el.find('.zammad-chat-controls').on('submit', this.onSubmit);
this.el.find('.zammad-chat-body').on('scroll', this.detectScrolledtoBottom);
this.el.find('.zammad-scroll-hint').click(this.onScrollHintClick);
@ -917,6 +918,10 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
}
};
ZammadChat.prototype.stopPropagation = function(event) {
return event.stopPropagation();
};
ZammadChat.prototype.checkForEnter = function(event) {
if (!event.shiftKey && event.keyCode === 13) {
event.preventDefault();
@ -1937,7 +1942,7 @@ window.zammadChatTemplates["chat"] = function (__obj) {
__out.push(__sanitize(" style='background: " + this.background + "'"));
}
__out.push('>\n <div class="zammad-chat-header-controls js-chat-toggle">\n <span class="zammad-chat-agent-status zammad-chat-is-hidden" data-status="online"></span>\n <span class="zammad-chat-header-icon">\n <svg class="zammad-chat-header-icon-open" width="13" height="7" viewBox="0 0 13 7"><path d="M10.807 7l1.4-1.428-5-4.9L6.5-.02l-.7.7-4.9 4.9 1.414 1.413L6.5 2.886 10.807 7z" fill-rule="evenodd"/></svg>\n <svg class="zammad-chat-header-icon-close" width="13" height="13" viewBox="0 0 13 13"><path d="m2.241.12l-2.121 2.121 4.243 4.243-4.243 4.243 2.121 2.121 4.243-4.243 4.243 4.243 2.121-2.121-4.243-4.243 4.243-4.243-2.121-2.121-4.243 4.243-4.243-4.243" fill-rule="evenodd"/></svg>\n </span>\n </div>\n <div class="zammad-chat-agent zammad-chat-is-hidden">\n </div>\n <div class="zammad-chat-welcome">\n <svg class="zammad-chat-icon" viewBox="0 0 24 24" width="24" height="24"><path d="M2 5C2 4 3 3 4 3h16c1 0 2 1 2 2v10C22 16 21 17 20 17H4C3 17 2 16 2 15V5zM12 17l6 4v-4h-6z"/></svg>\n <span class="zammad-chat-welcome-text">');
__out.push('>\n <div class="zammad-chat-header-controls js-chat-toggle">\n <span class="zammad-chat-agent-status zammad-chat-is-hidden js-chat-status" data-status="online"></span>\n <span class="zammad-chat-header-icon">\n <svg class="zammad-chat-header-icon-open" width="13" height="7" viewBox="0 0 13 7"><path d="M10.807 7l1.4-1.428-5-4.9L6.5-.02l-.7.7-4.9 4.9 1.414 1.413L6.5 2.886 10.807 7z" fill-rule="evenodd"/></svg>\n <svg class="zammad-chat-header-icon-close" width="13" height="13" viewBox="0 0 13 13"><path d="m2.241.12l-2.121 2.121 4.243 4.243-4.243 4.243 2.121 2.121 4.243-4.243 4.243 4.243 2.121-2.121-4.243-4.243 4.243-4.243-2.121-2.121-4.243 4.243-4.243-4.243" fill-rule="evenodd"/></svg>\n </span>\n </div>\n <div class="zammad-chat-agent zammad-chat-is-hidden">\n </div>\n <div class="zammad-chat-welcome">\n <svg class="zammad-chat-icon" viewBox="0 0 24 24" width="24" height="24"><path d="M2 5C2 4 3 3 4 3h16c1 0 2 1 2 2v10C22 16 21 17 20 17H4C3 17 2 16 2 15V5zM12 17l6 4v-4h-6z"/></svg>\n <span class="zammad-chat-welcome-text">');
__out.push(this.T(this.title));

File diff suppressed because one or more lines are too long

View file

@ -1,7 +1,7 @@
<div class="zammad-chat<%= ' zammad-chat--flat' if @flat %>"<%= " style='font-size: #{ @fontSize }'" if @fontSize %>>
<div class="zammad-chat-header js-chat-open"<%= " style='background: #{ @background }'" if @background %>>
<div class="zammad-chat-header-controls js-chat-toggle">
<span class="zammad-chat-agent-status zammad-chat-is-hidden" data-status="online"></span>
<span class="zammad-chat-agent-status zammad-chat-is-hidden js-chat-status" data-status="online"></span>
<span class="zammad-chat-header-icon">
<svg class="zammad-chat-header-icon-open" width="13" height="7" viewBox="0 0 13 7"><path d="M10.807 7l1.4-1.428-5-4.9L6.5-.02l-.7.7-4.9 4.9 1.414 1.413L6.5 2.886 10.807 7z" fill-rule="evenodd"/></svg>
<svg class="zammad-chat-header-icon-close" width="13" height="13" viewBox="0 0 13 13"><path d="m2.241.12l-2.121 2.121 4.243 4.243-4.243 4.243 2.121 2.121 4.243-4.243 4.243 4.243 2.121-2.121-4.243-4.243 4.243-4.243-2.121-2.121-4.243 4.243-4.243-4.243" fill-rule="evenodd"/></svg>

2896
public/assets/chat/yarn.lock Normal file

File diff suppressed because it is too large Load diff