chat client: add timeout screen (@showTimeout)
This commit is contained in:
parent
a16781daa0
commit
0bd1c2a3cc
5 changed files with 46 additions and 18 deletions
|
@ -32,9 +32,9 @@ do($ = window.jQuery, window) ->
|
||||||
'Compose your message...': 'Ihre Nachricht...'
|
'Compose your message...': 'Ihre Nachricht...'
|
||||||
'All colleges are busy.': 'Alle Kollegen sind belegt.'
|
'All colleges are busy.': 'Alle Kollegen sind belegt.'
|
||||||
'You are on waiting list position <strong>%s</strong>.': 'Sie sind in der Warteliste an der Position <strong>%s</strong>.'
|
'You are on waiting list position <strong>%s</strong>.': 'Sie sind in der Warteliste an der Position <strong>%s</strong>.'
|
||||||
'': ''
|
'Start new conversation': 'Neue Konversation starten'
|
||||||
'': ''
|
'Since you didn\'t respond in the last %s your conversation with <strong>%s</strong> got closed.': 'Da sie in den letzten %s nichts geschrieben haben wurde ihre Konversation mit <strong>%s</strong> geschlossen.'
|
||||||
'': ''
|
'minutes': 'Minuten'
|
||||||
sessionId: undefined
|
sessionId: undefined
|
||||||
|
|
||||||
T: (string, items...) =>
|
T: (string, items...) =>
|
||||||
|
@ -138,7 +138,6 @@ do($ = window.jQuery, window) ->
|
||||||
@onConnectionEstablished(data)
|
@onConnectionEstablished(data)
|
||||||
|
|
||||||
for message in data.session
|
for message in data.session
|
||||||
@log 'debug', "message in session", message
|
|
||||||
@renderMessage
|
@renderMessage
|
||||||
message: message.content
|
message: message.content
|
||||||
id: message.id
|
id: message.id
|
||||||
|
@ -233,7 +232,8 @@ do($ = window.jQuery, window) ->
|
||||||
@scrollToBottom()
|
@scrollToBottom()
|
||||||
|
|
||||||
open: =>
|
open: =>
|
||||||
return if @isOpen
|
if @isOpen
|
||||||
|
@show()
|
||||||
|
|
||||||
if !@sessionId
|
if !@sessionId
|
||||||
@showLoader()
|
@showLoader()
|
||||||
|
@ -365,6 +365,8 @@ do($ = window.jQuery, window) ->
|
||||||
time: time
|
time: time
|
||||||
|
|
||||||
addStatus: (status) ->
|
addStatus: (status) ->
|
||||||
|
@maybeAddTimestamp()
|
||||||
|
|
||||||
@el.find('.zammad-chat-body').append @view('status')
|
@el.find('.zammad-chat-body').append @view('status')
|
||||||
status: status
|
status: status
|
||||||
|
|
||||||
|
@ -434,7 +436,6 @@ do($ = window.jQuery, window) ->
|
||||||
sessionStorage.setItem 'sessionId', id
|
sessionStorage.setItem 'sessionId', id
|
||||||
|
|
||||||
onConnectionEstablished: (data) =>
|
onConnectionEstablished: (data) =>
|
||||||
|
|
||||||
# stop delay of initial queue position
|
# stop delay of initial queue position
|
||||||
if @onInitialQueueDelayId
|
if @onInitialQueueDelayId
|
||||||
clearTimeout @onInitialQueueDelayId
|
clearTimeout @onInitialQueueDelayId
|
||||||
|
@ -456,6 +457,12 @@ do($ = window.jQuery, window) ->
|
||||||
@el.find('.zammad-chat-agent-status').removeClass('zammad-chat-is-hidden')
|
@el.find('.zammad-chat-agent-status').removeClass('zammad-chat-is-hidden')
|
||||||
@input.focus()
|
@input.focus()
|
||||||
|
|
||||||
|
showTimeout: ->
|
||||||
|
@el.find('.zammad-chat-body').html @view('timeout')
|
||||||
|
agent: @agent.name
|
||||||
|
delay: 10
|
||||||
|
unit: @T('minutes')
|
||||||
|
|
||||||
showLoader: ->
|
showLoader: ->
|
||||||
@el.find('.zammad-chat-body').html @view('loader')()
|
@el.find('.zammad-chat-body').html @view('loader')()
|
||||||
|
|
||||||
|
|
|
@ -139,9 +139,9 @@
|
||||||
top: 3.5em;
|
top: 3.5em;
|
||||||
margin-top: 1px;
|
margin-top: 1px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
background: radial-gradient(rgba(255, 255, 255, 0.75), white);
|
background: white;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
padding: 10px;
|
padding: 20px;
|
||||||
display: -webkit-flex;
|
display: -webkit-flex;
|
||||||
display: -ms-flexbox;
|
display: -ms-flexbox;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -157,6 +157,8 @@
|
||||||
line-height: 1.45; }
|
line-height: 1.45; }
|
||||||
.zammad-chat-modal-text .zammad-chat-loading-animation {
|
.zammad-chat-modal-text .zammad-chat-loading-animation {
|
||||||
font-size: 0.7em; }
|
font-size: 0.7em; }
|
||||||
|
.zammad-chat-modal-text .zammad-chat-button {
|
||||||
|
margin-top: 1em; }
|
||||||
|
|
||||||
.zammad-chat-modal .zammad-chat-loading-animation {
|
.zammad-chat-modal .zammad-chat-loading-animation {
|
||||||
margin-right: 8px;
|
margin-right: 8px;
|
||||||
|
@ -293,11 +295,10 @@
|
||||||
.zammad-chat-input::-webkit-input-placeholder {
|
.zammad-chat-input::-webkit-input-placeholder {
|
||||||
color: #bdc9d0; }
|
color: #bdc9d0; }
|
||||||
|
|
||||||
.zammad-chat-send {
|
.zammad-chat-button {
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
-moz-appearance: none;
|
-moz-appearance: none;
|
||||||
appearance: none;
|
appearance: none;
|
||||||
float: right;
|
|
||||||
font-family: inherit;
|
font-family: inherit;
|
||||||
font-size: inherit;
|
font-size: inherit;
|
||||||
background: #379ad7;
|
background: #379ad7;
|
||||||
|
@ -308,7 +309,12 @@
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 1.5em;
|
border-radius: 1.5em;
|
||||||
box-shadow: 0 2px rgba(255, 255, 255, 0.25) inset, 0 0 0 1px #247fb7 inset, 0 1px rgba(0, 0, 0, 0.1);
|
box-shadow: 0 2px rgba(255, 255, 255, 0.25) inset, 0 0 0 1px #247fb7 inset, 0 1px rgba(0, 0, 0, 0.1);
|
||||||
outline: none; }
|
outline: none;
|
||||||
|
font-size: 0.8em;
|
||||||
|
display: inline-block; }
|
||||||
|
|
||||||
|
.zammad-chat-send {
|
||||||
|
float: right; }
|
||||||
|
|
||||||
.zammad-chat-is-hidden {
|
.zammad-chat-is-hidden {
|
||||||
display: none; }
|
display: none; }
|
||||||
|
@ -332,7 +338,7 @@
|
||||||
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08) inset; }
|
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08) inset; }
|
||||||
|
|
||||||
.zammad-chat--flat .zammad-chat-agent-status,
|
.zammad-chat--flat .zammad-chat-agent-status,
|
||||||
.zammad-chat--flat .zammad-chat-send,
|
.zammad-chat--flat .zammad-chat-button,
|
||||||
.zammad-chat--flat .zammad-chat-status {
|
.zammad-chat--flat .zammad-chat-status {
|
||||||
box-shadow: none; }
|
box-shadow: none; }
|
||||||
|
|
||||||
|
|
|
@ -172,9 +172,9 @@ $baseTextColor: if($luminance < 0.2, white, black);
|
||||||
top: 3.5em;
|
top: 3.5em;
|
||||||
margin-top: 1px;
|
margin-top: 1px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
background: radial-gradient(rgba(255,255,255,.75), rgba(255,255,255,1));
|
background: white;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
padding: 10px;
|
padding: 20px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
@ -187,6 +187,10 @@ $baseTextColor: if($luminance < 0.2, white, black);
|
||||||
.zammad-chat-loading-animation {
|
.zammad-chat-loading-animation {
|
||||||
font-size: 0.7em;
|
font-size: 0.7em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.zammad-chat-button {
|
||||||
|
margin-top: 1em;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.zammad-chat-modal .zammad-chat-loading-animation {
|
.zammad-chat-modal .zammad-chat-loading-animation {
|
||||||
|
@ -319,9 +323,8 @@ $baseTextColor: if($luminance < 0.2, white, black);
|
||||||
color: desaturate(lightenMax($themeColor, 25%, 85%), 50%);
|
color: desaturate(lightenMax($themeColor, 25%, 85%), 50%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.zammad-chat-send {
|
.zammad-chat-button {
|
||||||
appearance: none;
|
appearance: none;
|
||||||
float: right;
|
|
||||||
font-family: inherit;
|
font-family: inherit;
|
||||||
font-size: inherit;
|
font-size: inherit;
|
||||||
background: $themeColor;
|
background: $themeColor;
|
||||||
|
@ -336,6 +339,12 @@ $baseTextColor: if($luminance < 0.2, white, black);
|
||||||
0 0 0 1px darken($themeColor, 10%) inset,
|
0 0 0 1px darken($themeColor, 10%) inset,
|
||||||
0 1px rgba(0,0,0,.1);
|
0 1px rgba(0,0,0,.1);
|
||||||
outline: none;
|
outline: none;
|
||||||
|
font-size: 0.8em;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.zammad-chat-send {
|
||||||
|
float: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
.zammad-chat-is-hidden {
|
.zammad-chat-is-hidden {
|
||||||
|
@ -363,7 +372,7 @@ $baseTextColor: if($luminance < 0.2, white, black);
|
||||||
box-shadow: 0 0 0 1px rgba(0,0,0,.08) inset;
|
box-shadow: 0 0 0 1px rgba(0,0,0,.08) inset;
|
||||||
}
|
}
|
||||||
.zammad-chat--flat .zammad-chat-agent-status,
|
.zammad-chat--flat .zammad-chat-agent-status,
|
||||||
.zammad-chat--flat .zammad-chat-send,
|
.zammad-chat--flat .zammad-chat-button,
|
||||||
.zammad-chat--flat .zammad-chat-status {
|
.zammad-chat--flat .zammad-chat-status {
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
|
@ -17,6 +17,6 @@
|
||||||
<div class="zammad-chat-body"></div>
|
<div class="zammad-chat-body"></div>
|
||||||
<form class="zammad-chat-controls">
|
<form class="zammad-chat-controls">
|
||||||
<textarea class="zammad-chat-input" rows="1" placeholder="<%- @T('Compose your message...') %>"></textarea>
|
<textarea class="zammad-chat-input" rows="1" placeholder="<%- @T('Compose your message...') %>"></textarea>
|
||||||
<button type="submit" class="zammad-chat-send"><%- @T('Send') %></button>
|
<button type="submit" class="zammad-chat-button zammad-chat-send"><%- @T('Send') %></button>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
6
public/assets/chat/views/timeout.eco
Normal file
6
public/assets/chat/views/timeout.eco
Normal file
|
@ -0,0 +1,6 @@
|
||||||
|
<div class="zammad-chat-modal">
|
||||||
|
<div class="zammad-chat-modal-text">
|
||||||
|
<%- @T('Since you didn\'t respond in the last %s your conversation with <strong>%s</strong> got closed.', "#{ @delay } #{ @unit }", @agent) %><br>
|
||||||
|
<div class="zammad-chat-button"><%= @T('Start new conversation') %></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
Loading…
Reference in a new issue