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('