diff --git a/app/assets/stylesheets/zammad.scss b/app/assets/stylesheets/zammad.scss index be1f87e5e..069a50f71 100644 --- a/app/assets/stylesheets/zammad.scss +++ b/app/assets/stylesheets/zammad.scss @@ -3009,6 +3009,7 @@ footer { } .user-menu > li:hover .list-button:before, + .user-menu > li.is-active .list-button:before, .user-menu > li.is-hovered .list-button:before { content: ''; position: absolute; @@ -3019,7 +3020,12 @@ footer { background: white; } + .user-menu > li.is-active .list-button:before { + background: $highlight-color; + } + .user-menu li.add:hover .list-button:before, + .user-menu li.add.is-active .list-button:before, .user-menu li.add.is-hovered .list-button:before { background: #38ae6a; } @@ -3034,14 +3040,17 @@ footer { fill: hsl(145,51%,45%); } - .user-menu > li.settings:hover .user-menu-icon, - .user-menu > li.settings.active .user-menu-icon { + .user-menu > li:hover .user-menu-icon { fill: hsl(232,10%,16%); } + .user-menu > li.is-active .user-menu-icon { + fill: white; + } + .user-menu > li.add:hover .user-menu-icon.icon-plus, .user-menu > li.add.is-hovered .user-menu-icon.icon-plus, - .user-menu > li.add.active .user-menu-icon.icon-plus { + .user-menu > li.add.is-active .user-menu-icon.icon-plus { fill: white; } diff --git a/public/assets/chat/chat.coffee b/public/assets/chat/chat.coffee index 0beb91613..4843b9208 100644 --- a/public/assets/chat/chat.coffee +++ b/public/assets/chat/chat.coffee @@ -44,7 +44,8 @@ do($ = window.jQuery, window) -> @setAgentOnlineState @isOnline - @el.find('.zammad-chat-header').click @toggle + @el.find('.js-chat-open').click @open + @el.find('.js-chat-close').click @close @el.find('.zammad-chat-controls').on 'submit', @onSubmit @el.find('.zammad-chat-input').on keydown: @checkForEnter @@ -72,6 +73,8 @@ do($ = window.jQuery, window) -> @ws.onerror = (e) => console.log 'debug', 'ws:onerror', e + @onReady() + checkForEnter: (event) => if not event.shiftKey and event.keyCode is 13 event.preventDefault() @@ -197,25 +200,26 @@ do($ = window.jQuery, window) -> from: 'agent' @scrollToBottom() - toggle: => - if @isOpen then @close() else @open() + open: => + return if @isOpen - open: -> @showLoader() @el .addClass('zammad-chat-is-open') .animate { bottom: 0 }, 500, @onOpenAnimationEnd - onOpenAnimationEnd: => @isOpen = true + + onOpenAnimationEnd: => #setTimeout @onQueue, 1180 # setTimeout @onConnectionEstablished, 1180 # setTimeout @onAgentTypingStart, 2000 # setTimeout @receiveMessage, 5000, "Hello! How can I help you?" @connect() - close: -> + close: (event) => + event.stopPropagation() if event remainerHeight = @el.height() - @el.find('.zammad-chat-header').outerHeight() @el.animate { bottom: -remainerHeight }, 500, @onCloseAnimationEnd diff --git a/public/assets/chat/chat.css b/public/assets/chat/chat.css index a4a579484..da8764e09 100644 --- a/public/assets/chat/chat.css +++ b/public/assets/chat/chat.css @@ -36,28 +36,36 @@ overflow: hidden; cursor: pointer; } +.zammad-chat.zammad-chat-is-open .zammad-chat-header { + cursor: default; } + .zammad-chat-welcome-text { font-size: 1.2em; } -.zammad-chat-toggle { +.zammad-chat-header-icon { position: absolute; right: 0; top: 0; height: 100%; width: 3.4em; text-align: center; - line-height: 3.5em; } + line-height: 3.5em; + cursor: pointer; } -.zammad-chat-toggle-icon-open, -.zammad-chat-toggle-icon-close { +.zammad-chat-header-icon-open, +.zammad-chat-header-icon-close { fill: currentColor; - height: 0.85em; } + width: 1.6em; + vertical-align: middle; } -.zammad-chat-toggle-icon-close, -.zammad-chat.zammad-chat-is-open .zammad-chat-toggle-icon-open { +.zammad-chat-header-icon-close { + width: 1.3em; } + +.zammad-chat-header-icon-close, +.zammad-chat.zammad-chat-is-open .zammad-chat-header-icon-open { display: none; } -.zammad-chat.zammad-chat-is-open .zammad-chat-toggle-icon-close { +.zammad-chat.zammad-chat-is-open .zammad-chat-header-icon-close { display: inline; } .zammad-chat-agent { diff --git a/public/assets/chat/chat.js b/public/assets/chat/chat.js index 282cad7e7..4603c0f90 100644 --- a/public/assets/chat/chat.js +++ b/public/assets/chat/chat.js @@ -1,68 +1,3 @@ -if (!window.zammadChatTemplates) { - window.zammadChatTemplates = {}; -} -window.zammadChatTemplates["agent"] = function (__obj) { - if (!__obj) __obj = {}; - var __out = [], __capture = function(callback) { - var out = __out, result; - __out = []; - callback.call(this); - result = __out.join(''); - __out = out; - return __safe(result); - }, __sanitize = function(value) { - if (value && value.ecoSafe) { - return value; - } else if (typeof value !== 'undefined' && value != null) { - return __escape(value); - } else { - return ''; - } - }, __safe, __objSafe = __obj.safe, __escape = __obj.escape; - __safe = __obj.safe = function(value) { - if (value && value.ecoSafe) { - return value; - } else { - if (!(typeof value !== 'undefined' && value != null)) value = ''; - var result = new String(value); - result.ecoSafe = true; - return result; - } - }; - if (!__escape) { - __escape = __obj.escape = function(value) { - return ('' + value) - .replace(/&/g, '&') - .replace(//g, '>') - .replace(/"/g, '"'); - }; - } - (function() { - (function() { - if (this.agent.avatar) { - __out.push('\n\n'); - } - - __out.push('\n\n '); - - __out.push(__sanitize(this.agent.name)); - - __out.push(' '); - - __out.push(this.agentPhrase); - - __out.push('\n'); - - }).call(this); - - }).call(__obj); - __obj.safe = __objSafe, __obj.escape = __escape; - return __out.join(''); -}; - var bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; }; (function($, window) { @@ -128,8 +63,9 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments); this.onAgentTypingStart = bind(this.onAgentTypingStart, this); this.onQueue = bind(this.onQueue, this); this.onCloseAnimationEnd = bind(this.onCloseAnimationEnd, this); + this.close = bind(this.close, this); this.onOpenAnimationEnd = bind(this.onOpenAnimationEnd, this); - this.toggle = bind(this.toggle, this); + this.open = bind(this.open, this); this.receiveMessage = bind(this.receiveMessage, this); this.onSubmit = bind(this.onSubmit, this); this.onTypingEnd = bind(this.onTypingEnd, this); @@ -145,7 +81,8 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments); this.el = $(this.view('chat')(this.options)); this.options.target.append(this.el); this.setAgentOnlineState(this.isOnline); - this.el.find('.zammad-chat-header').click(this.toggle); + this.el.find('.js-chat-open').click(this.open); + this.el.find('.js-chat-close').click(this.close); this.el.find('.zammad-chat-controls').on('submit', this.onSubmit); this.el.find('.zammad-chat-input').on({ keydown: this.checkForEnter, @@ -176,6 +113,7 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments); return console.log('debug', 'ws:onerror', e); }; })(this); + this.onReady(); } ZammadChat.prototype.checkForEnter = function(event) { @@ -330,28 +268,26 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments); return this.scrollToBottom(); }; - ZammadChat.prototype.toggle = function() { - if (this.isOpen) { - return this.close(); - } else { - return this.open(); - } - }; - ZammadChat.prototype.open = function() { + if (this.isOpen) { + return; + } this.showLoader(); - return this.el.addClass('zammad-chat-is-open').animate({ + this.el.addClass('zammad-chat-is-open').animate({ bottom: 0 }, 500, this.onOpenAnimationEnd); + return this.isOpen = true; }; ZammadChat.prototype.onOpenAnimationEnd = function() { - this.isOpen = true; return this.connect(); }; - ZammadChat.prototype.close = function() { + ZammadChat.prototype.close = function(event) { var remainerHeight; + if (event) { + event.stopPropagation(); + } remainerHeight = this.el.height() - this.el.find('.zammad-chat-header').outerHeight(); return this.el.animate({ bottom: -remainerHeight @@ -565,6 +501,71 @@ jQuery.fn.autoGrow = function(options) { }); }; +if (!window.zammadChatTemplates) { + window.zammadChatTemplates = {}; +} +window.zammadChatTemplates["agent"] = function (__obj) { + if (!__obj) __obj = {}; + var __out = [], __capture = function(callback) { + var out = __out, result; + __out = []; + callback.call(this); + result = __out.join(''); + __out = out; + return __safe(result); + }, __sanitize = function(value) { + if (value && value.ecoSafe) { + return value; + } else if (typeof value !== 'undefined' && value != null) { + return __escape(value); + } else { + return ''; + } + }, __safe, __objSafe = __obj.safe, __escape = __obj.escape; + __safe = __obj.safe = function(value) { + if (value && value.ecoSafe) { + return value; + } else { + if (!(typeof value !== 'undefined' && value != null)) value = ''; + var result = new String(value); + result.ecoSafe = true; + return result; + } + }; + if (!__escape) { + __escape = __obj.escape = function(value) { + return ('' + value) + .replace(/&/g, '&') + .replace(//g, '>') + .replace(/"/g, '"'); + }; + } + (function() { + (function() { + if (this.agent.avatar) { + __out.push('\n\n'); + } + + __out.push('\n\n '); + + __out.push(__sanitize(this.agent.name)); + + __out.push(' '); + + __out.push(this.agentPhrase); + + __out.push('\n'); + + }).call(this); + + }).call(__obj); + __obj.safe = __objSafe, __obj.escape = __escape; + return __out.join(''); +}; + if (!window.zammadChatTemplates) { window.zammadChatTemplates = {}; } @@ -607,7 +608,7 @@ window.zammadChatTemplates["chat"] = function (__obj) { } (function() { (function() { - __out.push('