From 0bd1c2a3cc6d25c1c62dba9b692c926d808dd1da Mon Sep 17 00:00:00 2001 From: Felix Niklas Date: Thu, 12 Nov 2015 17:31:20 +0100 Subject: [PATCH] chat client: add timeout screen (@showTimeout) --- public/assets/chat/chat.coffee | 19 +++++++++++++------ public/assets/chat/chat.css | 18 ++++++++++++------ public/assets/chat/chat.scss | 19 ++++++++++++++----- public/assets/chat/views/chat.eco | 2 +- public/assets/chat/views/timeout.eco | 6 ++++++ 5 files changed, 46 insertions(+), 18 deletions(-) create mode 100644 public/assets/chat/views/timeout.eco diff --git a/public/assets/chat/chat.coffee b/public/assets/chat/chat.coffee index ef1f87778..aad552028 100644 --- a/public/assets/chat/chat.coffee +++ b/public/assets/chat/chat.coffee @@ -32,9 +32,9 @@ do($ = window.jQuery, window) -> 'Compose your message...': 'Ihre Nachricht...' 'All colleges are busy.': 'Alle Kollegen sind belegt.' 'You are on waiting list position %s.': 'Sie sind in der Warteliste an der Position %s.' - '': '' - '': '' - '': '' + 'Start new conversation': 'Neue Konversation starten' + 'Since you didn\'t respond in the last %s your conversation with %s got closed.': 'Da sie in den letzten %s nichts geschrieben haben wurde ihre Konversation mit %s geschlossen.' + 'minutes': 'Minuten' sessionId: undefined T: (string, items...) => @@ -138,7 +138,6 @@ do($ = window.jQuery, window) -> @onConnectionEstablished(data) for message in data.session - @log 'debug', "message in session", message @renderMessage message: message.content id: message.id @@ -233,7 +232,8 @@ do($ = window.jQuery, window) -> @scrollToBottom() open: => - return if @isOpen + if @isOpen + @show() if !@sessionId @showLoader() @@ -365,6 +365,8 @@ do($ = window.jQuery, window) -> time: time addStatus: (status) -> + @maybeAddTimestamp() + @el.find('.zammad-chat-body').append @view('status') status: status @@ -434,7 +436,6 @@ do($ = window.jQuery, window) -> sessionStorage.setItem 'sessionId', id onConnectionEstablished: (data) => - # stop delay of initial queue position if @onInitialQueueDelayId clearTimeout @onInitialQueueDelayId @@ -456,6 +457,12 @@ do($ = window.jQuery, window) -> @el.find('.zammad-chat-agent-status').removeClass('zammad-chat-is-hidden') @input.focus() + showTimeout: -> + @el.find('.zammad-chat-body').html @view('timeout') + agent: @agent.name + delay: 10 + unit: @T('minutes') + showLoader: -> @el.find('.zammad-chat-body').html @view('loader')() diff --git a/public/assets/chat/chat.css b/public/assets/chat/chat.css index 0b61a04e0..2541703b4 100644 --- a/public/assets/chat/chat.css +++ b/public/assets/chat/chat.css @@ -139,9 +139,9 @@ top: 3.5em; margin-top: 1px; text-align: center; - background: radial-gradient(rgba(255, 255, 255, 0.75), white); + background: white; z-index: 1; - padding: 10px; + padding: 20px; display: -webkit-flex; display: -ms-flexbox; display: flex; @@ -157,6 +157,8 @@ line-height: 1.45; } .zammad-chat-modal-text .zammad-chat-loading-animation { font-size: 0.7em; } + .zammad-chat-modal-text .zammad-chat-button { + margin-top: 1em; } .zammad-chat-modal .zammad-chat-loading-animation { margin-right: 8px; @@ -293,11 +295,10 @@ .zammad-chat-input::-webkit-input-placeholder { color: #bdc9d0; } -.zammad-chat-send { +.zammad-chat-button { -webkit-appearance: none; -moz-appearance: none; appearance: none; - float: right; font-family: inherit; font-size: inherit; background: #379ad7; @@ -308,7 +309,12 @@ border: none; 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); - outline: none; } + outline: none; + font-size: 0.8em; + display: inline-block; } + +.zammad-chat-send { + float: right; } .zammad-chat-is-hidden { display: none; } @@ -332,7 +338,7 @@ 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-send, +.zammad-chat--flat .zammad-chat-button, .zammad-chat--flat .zammad-chat-status { box-shadow: none; } diff --git a/public/assets/chat/chat.scss b/public/assets/chat/chat.scss index 15a82f6e3..336c156e8 100644 --- a/public/assets/chat/chat.scss +++ b/public/assets/chat/chat.scss @@ -172,9 +172,9 @@ $baseTextColor: if($luminance < 0.2, white, black); top: 3.5em; margin-top: 1px; text-align: center; - background: radial-gradient(rgba(255,255,255,.75), rgba(255,255,255,1)); + background: white; z-index: 1; - padding: 10px; + padding: 20px; display: flex; align-items: center; justify-content: center; @@ -187,6 +187,10 @@ $baseTextColor: if($luminance < 0.2, white, black); .zammad-chat-loading-animation { font-size: 0.7em; } + + .zammad-chat-button { + margin-top: 1em; + } } .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%); } -.zammad-chat-send { +.zammad-chat-button { appearance: none; - float: right; font-family: inherit; font-size: inherit; background: $themeColor; @@ -336,6 +339,12 @@ $baseTextColor: if($luminance < 0.2, white, black); 0 0 0 1px darken($themeColor, 10%) inset, 0 1px rgba(0,0,0,.1); outline: none; + font-size: 0.8em; + display: inline-block; +} + +.zammad-chat-send { + float: right; } .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; } .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 { box-shadow: none; } diff --git a/public/assets/chat/views/chat.eco b/public/assets/chat/views/chat.eco index 480aef2f4..ee146e78e 100644 --- a/public/assets/chat/views/chat.eco +++ b/public/assets/chat/views/chat.eco @@ -17,6 +17,6 @@
- +
\ No newline at end of file diff --git a/public/assets/chat/views/timeout.eco b/public/assets/chat/views/timeout.eco new file mode 100644 index 000000000..6a7ab1659 --- /dev/null +++ b/public/assets/chat/views/timeout.eco @@ -0,0 +1,6 @@ +
+
+ <%- @T('Since you didn\'t respond in the last %s your conversation with %s got closed.', "#{ @delay } #{ @unit }", @agent) %>
+
<%= @T('Start new conversation') %>
+
+
\ No newline at end of file