chat client mobile fixes

- increase close button click area (new toggle method)
- increase font-size on mobile to 16px to prevent zoom
- switch to percentage height on mobile instead of vh
- smooth scrolling in the chat body
- disable background scroll
- make modal windows fullscreen (overlap input field)
This commit is contained in:
Felix Niklas 2016-02-08 16:06:56 +01:00
parent 898471c96b
commit 69baae7370
11 changed files with 276 additions and 119 deletions

View file

@ -224,6 +224,10 @@ do($ = window.jQuery, window) ->
@options = $.extend {}, @defaults, options
super(@options)
# fullscreen
@isFullscreen = (window.matchMedia and window.matchMedia('(max-width: 768px)').matches)
@scrollRoot = $(@getScrollRoot())
# check prerequisites
if !$
@state = 'unsupported'
@ -259,29 +263,18 @@ do($ = window.jQuery, window) ->
)
@io.connect()
getScrollRoot: ->
return document.scrollingElement if 'scrollingElement' of document
html = document.documentElement
start = html.scrollTop
html.scrollTop = start + 1
end = html.scrollTop
html.scrollTop = start
return if end > start then html else document.body
render: =>
if !@el || !$('.zammad-chat').get(0)
@el = $(@view('chat')(
title: @options.title
))
@options.target.append @el
@input = @el.find('.zammad-chat-input')
# start bindings
@el.find('.js-chat-open').click @open
@el.find('.js-chat-close').click @close
@el.find('.zammad-chat-controls').on 'submit', @onSubmit
@input.on
keydown: @checkForEnter
input: @onInput
$(window).on('beforeunload', =>
@onLeaveTemporary()
)
$(window).bind('hashchange', =>
return if @isOpen
@idleTimeout.start()
)
@renderBase()
# disable open button
$(".#{ @options.buttonClass }").addClass @inactiveClass
@ -298,6 +291,34 @@ do($ = window.jQuery, window) ->
@send 'chat_status_customer',
session_id: @sessionId
renderBase: ->
@el = $(@view('chat')(
title: @options.title
))
@options.target.append @el
@input = @el.find('.zammad-chat-input')
# start bindings
@el.find('.js-chat-open').click @open
@el.find('.js-chat-toggle').click @toggle
@el.find('.zammad-chat-controls').on 'submit', @onSubmit
@input.on
keydown: @checkForEnter
input: @onInput
$(window).on('beforeunload', =>
@onLeaveTemporary()
)
$(window).bind('hashchange', =>
return if @isOpen
@idleTimeout.start()
)
if @isFullscreen
@input.on
focus: @onFocus
focusout: @onFocusOut
checkForEnter: (event) =>
if not event.shiftKey and event.keyCode is 13
event.preventDefault()
@ -399,6 +420,19 @@ do($ = window.jQuery, window) ->
@onTyping()
onFocus: =>
$(window).scrollTop(10)
keyboardShown = $(window).scrollTop() > 0
$(window).scrollTop(0)
if keyboardShown
@log.notice 'virtual keyboard shown'
# on keyboard shown
# can't measure visible area height :(
onFocusOut: ->
# on keyboard hidden
onTyping: ->
# send typing start event only every 1.5 seconds
@ -487,6 +521,9 @@ do($ = window.jQuery, window) ->
onOpenAnimationEnd: =>
@idleTimeout.stop()
if @isFullscreen
@disableScrollOnRoot()
sessionClose: =>
# send close
@send 'chat_session_close',
@ -505,6 +542,12 @@ do($ = window.jQuery, window) ->
@setSessionId undefined
toggle: (event) =>
if @isOpen
@close(event)
else
@open(event)
close: (event) =>
if !@isOpen
@log.debug 'can\'t close widget, it\'s not open'
@ -519,6 +562,9 @@ do($ = window.jQuery, window) ->
@sessionClose()
if @isFullscreen
@enableScrollOnRoot()
# close window
@el.removeClass('zammad-chat-is-open')
remainerHeight = @el.height() - @el.find('.zammad-chat-header').outerHeight()
@ -563,6 +609,9 @@ do($ = window.jQuery, window) ->
@input.prop('disabled', false)
@el.find('.zammad-chat-send').prop('disabled', false)
hideModal: ->
@el.find('.zammad-chat-modal').html ''
onQueueScreen: (data) =>
@setSessionId data.session_id
@ -586,7 +635,7 @@ do($ = window.jQuery, window) ->
@log.notice 'onQueue', data.position
@inQueue = true
@el.find('.zammad-chat-body').html @view('waiting')
@el.find('.zammad-chat-modal').html @view('waiting')
position: data.position
onAgentTypingStart: =>
@ -713,11 +762,12 @@ do($ = window.jQuery, window) ->
@enableInput()
@el.find('.zammad-chat-body').empty()
@hideModal()
@el.find('.zammad-chat-welcome').addClass('zammad-chat-is-hidden')
@el.find('.zammad-chat-agent').removeClass('zammad-chat-is-hidden')
@el.find('.zammad-chat-agent-status').removeClass('zammad-chat-is-hidden')
@input.focus()
@input.focus() if not @isFullscreen
@setAgentOnlineState 'online'
@ -726,7 +776,7 @@ do($ = window.jQuery, window) ->
@inactiveTimeout.start()
showCustomerTimeout: ->
@el.find('.zammad-chat-body').html @view('customer_timeout')
@el.find('.zammad-chat-modal').html @view('customer_timeout')
agent: @agent.name
delay: @options.inactiveTimeout
reload = ->
@ -735,7 +785,7 @@ do($ = window.jQuery, window) ->
@sessionClose()
showWaitingListTimeout: ->
@el.find('.zammad-chat-body').html @view('waiting_list_timeout')
@el.find('.zammad-chat-modal').html @view('waiting_list_timeout')
delay: @options.watingListTimeout
reload = ->
location.reload()
@ -743,7 +793,7 @@ do($ = window.jQuery, window) ->
@sessionClose()
showLoader: ->
@el.find('.zammad-chat-body').html @view('loader')()
@el.find('.zammad-chat-modal').html @view('loader')()
setAgentOnlineState: (state) =>
@state = state
@ -808,4 +858,16 @@ do($ = window.jQuery, window) ->
@destroy(remove: false)
)
disableScrollOnRoot: ->
@rootScrollOffset = @scrollRoot.scrollTop()
@scrollRoot.css
overflow: 'hidden'
position: 'fixed'
enableScrollOnRoot: ->
@scrollRoot.scrollTop @rootScrollOffset
@scrollRoot.css
overflow: ''
position: ''
window.ZammadChat = ZammadChat

View file

@ -23,8 +23,9 @@
.zammad-chat {
right: 0;
width: 100%;
height: 100vh;
border-radius: 0 !important; } }
height: 100%;
border-radius: 0 !important;
font-size: 16px; } }
.zammad-chat.zammad-chat-is-shown {
display: -webkit-flex;
@ -172,6 +173,8 @@
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center; }
.zammad-chat-modal:empty {
display: none; }
.zammad-chat-modal-text {
font-size: 1.3em;
@ -192,7 +195,8 @@
background: white;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1; }
flex: 1;
-webkit-overflow-scrolling: touch; }
@media only screen and (max-width: 768px) {
.zammad-chat-body {
height: auto;

View file

@ -378,12 +378,15 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
this.onWebSocketClose = bind(this.onWebSocketClose, this);
this.onCloseAnimationEnd = bind(this.onCloseAnimationEnd, this);
this.close = bind(this.close, this);
this.toggle = bind(this.toggle, this);
this.sessionClose = bind(this.sessionClose, this);
this.onOpenAnimationEnd = bind(this.onOpenAnimationEnd, this);
this.open = bind(this.open, this);
this.renderMessage = bind(this.renderMessage, this);
this.receiveMessage = bind(this.receiveMessage, this);
this.onSubmit = bind(this.onSubmit, this);
this.onFocusOut = bind(this.onFocusOut, this);
this.onFocus = bind(this.onFocus, this);
this.onInput = bind(this.onInput, this);
this.onReopenSession = bind(this.onReopenSession, this);
this.onError = bind(this.onError, this);
@ -391,10 +394,13 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
this.send = bind(this.send, this);
this.checkForEnter = bind(this.checkForEnter, this);
this.render = bind(this.render, this);
this.getScrollRoot = bind(this.getScrollRoot, this);
this.view = bind(this.view, this);
this.T = bind(this.T, this);
this.options = $.extend({}, this.defaults, options);
ZammadChat.__super__.constructor.call(this, this.options);
this.isFullscreen = window.matchMedia && window.matchMedia('(max-width: 768px)').matches;
this.scrollRoot = $(this.getScrollRoot());
if (!$) {
this.state = 'unsupported';
this.log.notice('Chat: no jquery found!');
@ -431,33 +437,26 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
this.io.connect();
}
ZammadChat.prototype.getScrollRoot = function() {
var end, html, start;
if ("scrollingElement" in document) {
return document.scrollingElement;
}
html = document.documentElement;
start = html.scrollTop;
html.scrollTop = start + 1;
end = html.scrollTop;
html.scrollTop = start;
if (end > start) {
return html;
} else {
return document.body;
}
};
ZammadChat.prototype.render = function() {
if (!this.el || !$('.zammad-chat').get(0)) {
this.el = $(this.view('chat')({
title: this.options.title
}));
this.options.target.append(this.el);
this.input = this.el.find('.zammad-chat-input');
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.input.on({
keydown: this.checkForEnter,
input: this.onInput
});
$(window).on('beforeunload', (function(_this) {
return function() {
return _this.onLeaveTemporary();
};
})(this));
$(window).bind('hashchange', (function(_this) {
return function() {
if (_this.isOpen) {
return;
}
return _this.idleTimeout.start();
};
})(this));
this.renderBase();
}
$("." + this.options.buttonClass).addClass(this.inactiveClass);
this.setAgentOnlineState('online');
@ -470,6 +469,40 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
});
};
ZammadChat.prototype.renderBase = function() {
this.el = $(this.view('chat')({
title: this.options.title
}));
this.options.target.append(this.el);
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('.zammad-chat-controls').on('submit', this.onSubmit);
this.input.on({
keydown: this.checkForEnter,
input: this.onInput
});
$(window).on('beforeunload', (function(_this) {
return function() {
return _this.onLeaveTemporary();
};
})(this));
$(window).bind('hashchange', (function(_this) {
return function() {
if (_this.isOpen) {
return;
}
return _this.idleTimeout.start();
};
})(this));
if (this.isFullscreen) {
return this.input.on({
focus: this.onFocus,
focusout: this.onFocusOut
});
}
};
ZammadChat.prototype.checkForEnter = function(event) {
if (!event.shiftKey && event.keyCode === 13) {
event.preventDefault();
@ -606,6 +639,18 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
return this.onTyping();
};
ZammadChat.prototype.onFocus = function() {
var keyboardShown;
$(window).scrollTop(10);
keyboardShown = $(window).scrollTop() > 0;
$(window).scrollTop(0);
if (keyboardShown) {
return this.log.notice("virtual keyboard shown");
}
};
ZammadChat.prototype.onFocusOut = function() {};
ZammadChat.prototype.onTyping = function() {
if (this.isTyping && this.isTyping > new Date(new Date().getTime() - 1500)) {
return;
@ -694,7 +739,10 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
};
ZammadChat.prototype.onOpenAnimationEnd = function() {
return this.idleTimeout.stop();
this.idleTimeout.stop();
if (this.isFullscreen) {
return this.disableScrollOnRoot();
}
};
ZammadChat.prototype.sessionClose = function() {
@ -710,6 +758,14 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
return this.setSessionId(void 0);
};
ZammadChat.prototype.toggle = function(event) {
if (this.isOpen) {
return this.close(event);
} else {
return this.open(event);
}
};
ZammadChat.prototype.close = function(event) {
var remainerHeight;
if (!this.isOpen) {
@ -725,6 +781,9 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
event.stopPropagation();
}
this.sessionClose();
if (this.isFullscreen) {
this.enableScrollOnRoot();
}
this.el.removeClass('zammad-chat-is-open');
remainerHeight = this.el.height() - this.el.find('.zammad-chat-header').outerHeight();
return this.el.animate({
@ -777,6 +836,10 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
return this.el.find('.zammad-chat-send').prop('disabled', false);
};
ZammadChat.prototype.hideModal = function() {
return this.el.find('.zammad-chat-modal').html('');
};
ZammadChat.prototype.onQueueScreen = function(data) {
var show;
this.setSessionId(data.session_id);
@ -799,7 +862,7 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
ZammadChat.prototype.onQueue = function(data) {
this.log.notice('onQueue', data.position);
this.inQueue = true;
return this.el.find('.zammad-chat-body').html(this.view('waiting')({
return this.el.find('.zammad-chat-modal').html(this.view('waiting')({
position: data.position
}));
};
@ -942,11 +1005,13 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
agent: this.agent
}));
this.enableInput();
this.el.find('.zammad-chat-body').empty();
this.hideModal();
this.el.find('.zammad-chat-welcome').addClass('zammad-chat-is-hidden');
this.el.find('.zammad-chat-agent').removeClass('zammad-chat-is-hidden');
this.el.find('.zammad-chat-agent-status').removeClass('zammad-chat-is-hidden');
this.input.focus();
if (!this.isFullscreen) {
this.input.focus();
}
this.setAgentOnlineState('online');
this.waitingListTimeout.stop();
this.idleTimeout.stop();
@ -955,7 +1020,7 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
ZammadChat.prototype.showCustomerTimeout = function() {
var reload;
this.el.find('.zammad-chat-body').html(this.view('customer_timeout')({
this.el.find('.zammad-chat-modal').html(this.view('customer_timeout')({
agent: this.agent.name,
delay: this.options.inactiveTimeout
}));
@ -968,7 +1033,7 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
ZammadChat.prototype.showWaitingListTimeout = function() {
var reload;
this.el.find('.zammad-chat-body').html(this.view('waiting_list_timeout')({
this.el.find('.zammad-chat-modal').html(this.view('waiting_list_timeout')({
delay: this.options.watingListTimeout
}));
reload = function() {
@ -979,7 +1044,7 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
};
ZammadChat.prototype.showLoader = function() {
return this.el.find('.zammad-chat-body').html(this.view('loader')());
return this.el.find('.zammad-chat-modal').html(this.view('loader')());
};
ZammadChat.prototype.setAgentOnlineState = function(state) {
@ -1066,6 +1131,22 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
});
};
ZammadChat.prototype.disableScrollOnRoot = function() {
this.rootScrollOffset = this.scrollRoot.scrollTop();
return this.scrollRoot.css({
overflow: 'hidden',
position: 'fixed'
});
};
ZammadChat.prototype.enableScrollOnRoot = function() {
this.scrollRoot.scrollTop(this.rootScrollOffset);
return this.scrollRoot.css({
overflow: '',
position: ''
});
};
return ZammadChat;
})(Base);
@ -1278,11 +1359,11 @@ window.zammadChatTemplates["chat"] = function (__obj) {
__out.push(__sanitize(" style='background: " + this.background + "'"));
}
__out.push('>\n <div class="zammad-chat-header-controls">\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" 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 js-chat-close" 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"><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" fill-rule="evenodd"/></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" data-status="online"></span>\n <span class="zammad-chat-header-icon">\n <svg class="zammad-chat-header-icon-open" 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" 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"><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" fill-rule="evenodd"/></svg>\n <span class="zammad-chat-welcome-text">');
__out.push(this.T(this.title));
__out.push('</span>\n </div>\n </div>\n <div class="zammad-chat-body"></div>\n <form class="zammad-chat-controls">\n <textarea class="zammad-chat-input" rows="1" placeholder="');
__out.push('</span>\n </div>\n </div>\n <div class="zammad-chat-modal"></div>\n <div class="zammad-chat-body"></div>\n <form class="zammad-chat-controls">\n <textarea class="zammad-chat-input" rows="1" placeholder="');
__out.push(this.T('Compose your message...'));
@ -1347,19 +1428,19 @@ window.zammadChatTemplates["customer_timeout"] = function (__obj) {
}
(function() {
(function() {
__out.push('<div class="zammad-chat-modal">\n <div class="zammad-chat-modal-text">\n ');
__out.push('<div class="zammad-chat-modal-text">\n ');
if (this.agent) {
__out.push('\n ');
__out.push('\n ');
__out.push(this.T('Since you didn\'t respond in the last %s minutes your conversation with <strong>%s</strong> got closed.', this.delay, this.agent));
__out.push('\n ');
__out.push('\n ');
} else {
__out.push('\n ');
__out.push(this.T('Since you didn\'t respond in the last %s minutes your conversation got closed.', this.delay));
__out.push('\n ');
__out.push(this.T('Since you didn\'t respond in the last %s minutes your conversation got closed.', this.delay));
__out.push('\n ');
}
__out.push('\n <br>\n <div class="zammad-chat-button js-restart"');
__out.push('\n <br>\n <div class="zammad-chat-button js-restart"');
if (this.background) {
__out.push(__sanitize(" style='background: " + this.background + "'"));
@ -1369,7 +1450,7 @@ window.zammadChatTemplates["customer_timeout"] = function (__obj) {
__out.push(this.T('Start new conversation'));
__out.push('</div>\n </div>\n</div>');
__out.push('</div>\n</div>');
}).call(this);
@ -1420,11 +1501,11 @@ window.zammadChatTemplates["loader"] = function (__obj) {
}
(function() {
(function() {
__out.push('<div class="zammad-chat-modal">\n <span class="zammad-chat-loading-animation">\n <span class="zammad-chat-loading-circle"></span>\n <span class="zammad-chat-loading-circle"></span>\n <span class="zammad-chat-loading-circle"></span>\n </span>\n <span class="zammad-chat-modal-text">');
__out.push('<span class="zammad-chat-loading-animation">\n <span class="zammad-chat-loading-circle"></span>\n <span class="zammad-chat-loading-circle"></span>\n <span class="zammad-chat-loading-circle"></span>\n</span>\n<span class="zammad-chat-modal-text">');
__out.push(this.T('Connecting'));
__out.push('</span>\n</div>');
__out.push('</span>');
}).call(this);
@ -1707,15 +1788,15 @@ window.zammadChatTemplates["waiting"] = function (__obj) {
}
(function() {
(function() {
__out.push('<div class="zammad-chat-modal">\n <div class="zammad-chat-modal-text">\n <span class="zammad-chat-loading-animation">\n <span class="zammad-chat-loading-circle"></span>\n <span class="zammad-chat-loading-circle"></span>\n <span class="zammad-chat-loading-circle"></span>\n </span>\n ');
__out.push('<div class="zammad-chat-modal-text">\n <span class="zammad-chat-loading-animation">\n <span class="zammad-chat-loading-circle"></span>\n <span class="zammad-chat-loading-circle"></span>\n <span class="zammad-chat-loading-circle"></span>\n </span>\n ');
__out.push(this.T('All colleagues are busy.'));
__out.push('<br>\n ');
__out.push('<br>\n ');
__out.push(this.T('You are on waiting list position <strong>%s</strong>.', this.position));
__out.push('\n </div>\n</div>');
__out.push('\n</div>');
}).call(this);
@ -1766,11 +1847,11 @@ window.zammadChatTemplates["waiting_list_timeout"] = function (__obj) {
}
(function() {
(function() {
__out.push('<div class="zammad-chat-modal">\n <div class="zammad-chat-modal-text">\n ');
__out.push('<div class="zammad-chat-modal-text">\n ');
__out.push(this.T('We are sorry, it takes longer as expected to get an empty slot. Please try again later or send us an email. Thank you!'));
__out.push('\n <br>\n <div class="zammad-chat-button js-restart"');
__out.push('\n <br>\n <div class="zammad-chat-button js-restart"');
if (this.background) {
__out.push(__sanitize(" style='background: " + this.background + "'"));
@ -1780,7 +1861,7 @@ window.zammadChatTemplates["waiting_list_timeout"] = function (__obj) {
__out.push(this.T('Start new conversation'));
__out.push('</div>\n </div>\n</div>');
__out.push('</div>\n</div>');
}).call(this);

File diff suppressed because one or more lines are too long

View file

@ -23,8 +23,9 @@
@media only screen and (max-width: 768px) {
right: 0;
width: 100%;
height: 100vh;
height: 100%;
border-radius: 0 !important;
font-size: 16px;
}
}
.zammad-chat.zammad-chat-is-shown {
@ -173,6 +174,10 @@
display: flex;
align-items: center;
justify-content: center;
&:empty {
display: none;
}
}
.zammad-chat-modal-text {
@ -199,6 +204,7 @@
overflow: auto;
background: white;
flex: 1;
-webkit-overflow-scrolling: touch;
@media only screen and (max-width: 768px) {
height: auto;

View file

@ -1,10 +1,10 @@
<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">
<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-header-icon">
<svg class="zammad-chat-header-icon-open" 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 js-chat-close" 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>
<svg class="zammad-chat-header-icon-close" 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>
</span>
</div>
<div class="zammad-chat-agent zammad-chat-is-hidden">
@ -14,6 +14,7 @@
<span class="zammad-chat-welcome-text"><%- @T(@title) %></span>
</div>
</div>
<div class="zammad-chat-modal"></div>
<div class="zammad-chat-body"></div>
<form class="zammad-chat-controls">
<textarea class="zammad-chat-input" rows="1" placeholder="<%- @T('Compose your message...') %>"></textarea>

View file

@ -1,11 +1,9 @@
<div class="zammad-chat-modal">
<div class="zammad-chat-modal-text">
<% if @agent: %>
<%- @T('Since you didn\'t respond in the last %s minutes your conversation with <strong>%s</strong> got closed.', @delay, @agent) %>
<% else: %>
<%- @T('Since you didn\'t respond in the last %s minutes your conversation got closed.', @delay) %>
<% end %>
<br>
<div class="zammad-chat-button js-restart"<%= " style='background: #{ @background }'" if @background %>><%- @T('Start new conversation') %></div>
</div>
<div class="zammad-chat-modal-text">
<% if @agent: %>
<%- @T('Since you didn\'t respond in the last %s minutes your conversation with <strong>%s</strong> got closed.', @delay, @agent) %>
<% else: %>
<%- @T('Since you didn\'t respond in the last %s minutes your conversation got closed.', @delay) %>
<% end %>
<br>
<div class="zammad-chat-button js-restart"<%= " style='background: #{ @background }'" if @background %>><%- @T('Start new conversation') %></div>
</div>

View file

@ -1,8 +1,6 @@
<div class="zammad-chat-modal">
<span class="zammad-chat-loading-animation">
<span class="zammad-chat-loading-circle"></span>
<span class="zammad-chat-loading-circle"></span>
<span class="zammad-chat-loading-circle"></span>
</span>
<span class="zammad-chat-modal-text"><%- @T('Connecting') %></span>
</div>
<span class="zammad-chat-loading-animation">
<span class="zammad-chat-loading-circle"></span>
<span class="zammad-chat-loading-circle"></span>
<span class="zammad-chat-loading-circle"></span>
</span>
<span class="zammad-chat-modal-text"><%- @T('Connecting') %></span>

View file

@ -1,11 +1,9 @@
<div class="zammad-chat-modal">
<div class="zammad-chat-modal-text">
<span class="zammad-chat-loading-animation">
<span class="zammad-chat-loading-circle"></span>
<span class="zammad-chat-loading-circle"></span>
<span class="zammad-chat-loading-circle"></span>
</span>
<%- @T('All colleagues are busy.') %><br>
<%- @T('You are on waiting list position <strong>%s</strong>.', @position) %>
</div>
<div class="zammad-chat-modal-text">
<span class="zammad-chat-loading-animation">
<span class="zammad-chat-loading-circle"></span>
<span class="zammad-chat-loading-circle"></span>
<span class="zammad-chat-loading-circle"></span>
</span>
<%- @T('All colleagues are busy.') %><br>
<%- @T('You are on waiting list position <strong>%s</strong>.', @position) %>
</div>

View file

@ -1,7 +1,5 @@
<div class="zammad-chat-modal">
<div class="zammad-chat-modal-text">
<%- @T('We are sorry, it takes longer as expected to get an empty slot. Please try again later or send us an email. Thank you!') %>
<br>
<div class="zammad-chat-button js-restart"<%= " style='background: #{ @background }'" if @background %>><%- @T('Start new conversation') %></div>
</div>
<div class="zammad-chat-modal-text">
<%- @T('We are sorry, it takes longer as expected to get an empty slot. Please try again later or send us an email. Thank you!') %>
<br>
<div class="zammad-chat-button js-restart"<%= " style='background: #{ @background }'" if @background %>><%- @T('Start new conversation') %></div>
</div>

View file

@ -76,6 +76,17 @@
</head>
<body>
<img class="mockup" width="100%" src="znuny.png">
<img class="mockup" width="100%" src="znuny.png">
<img class="mockup" width="100%" src="znuny.png">
<img class="mockup" width="100%" src="znuny.png">
<img class="mockup" width="100%" src="znuny.png">
<img class="mockup" width="100%" src="znuny.png">
<img class="mockup" width="100%" src="znuny.png">
<img class="mockup" width="100%" src="znuny.png">
<img class="mockup" width="100%" src="znuny.png">
<img class="mockup" width="100%" src="znuny.png">
<img class="mockup" width="100%" src="znuny.png">
<img class="mockup" width="100%" src="znuny.png">
<div class="settings">
<table>
@ -144,7 +155,7 @@
chatId: 1,
host: host,
cssUrl: cssUrl,
debug: true,
debug: false,
background: '#494d52',
flat: true,
shown: false,