customer chat: add scrollhint

This commit is contained in:
Felix Niklas 2016-07-04 15:59:12 +02:00
parent 30fe8aef36
commit f62796ab9e
3 changed files with 47 additions and 8 deletions

View file

@ -343,6 +343,7 @@ class ChatWindow extends App.Controller
'click .js-send': 'sendMessage' 'click .js-send': 'sendMessage'
'click .js-close': 'close' 'click .js-close': 'close'
'click .js-disconnect': 'disconnect' 'click .js-disconnect': 'disconnect'
'click .js-scrollHint': 'onScrollHintClick'
elements: elements:
'.js-customerChatInput': 'input' '.js-customerChatInput': 'input'
@ -351,6 +352,7 @@ class ChatWindow extends App.Controller
'.js-disconnect': 'disconnectButton' '.js-disconnect': 'disconnectButton'
'.js-body': 'body' '.js-body': 'body'
'.js-scrollHolder': 'scrollHolder' '.js-scrollHolder': 'scrollHolder'
'.js-scrollHint': 'scrollHint'
sounds: sounds:
message: new Audio('assets/sounds/chat_message.mp3') message: new Audio('assets/sounds/chat_message.mp3')
@ -364,6 +366,7 @@ class ChatWindow extends App.Controller
@isTyping = false @isTyping = false
@isAgentTyping = false @isAgentTyping = false
@resetUnreadMessages() @resetUnreadMessages()
@scrolledToBottom = true
@chat = App.Chat.find(@session.chat_id) @chat = App.Chat.find(@session.chat_id)
@name = "#{@chat.displayName()} ##{@session.id}" @name = "#{@chat.displayName()} ##{@session.id}"
@ -407,6 +410,7 @@ class ChatWindow extends App.Controller
name: @name name: @name
@el.one 'transitionend', @onTransitionend @el.one 'transitionend', @onTransitionend
@scrollHolder.scroll @detectScrolledtoBottom
# force repaint # force repaint
@el.prop('offsetHeight') @el.prop('offsetHeight')
@ -611,7 +615,6 @@ class ChatWindow extends App.Controller
@isTyping = true @isTyping = true
@maybeAddTimestamp() @maybeAddTimestamp()
@body.append App.view('customer_chat/chat_loader')() @body.append App.view('customer_chat/chat_loader')()
return if !@el.find('.js-loader').visible(true)
@scrollToBottom() @scrollToBottom()
# clear old delay, set new # clear old delay, set new
@ -677,8 +680,20 @@ class ChatWindow extends App.Controller
@scrollToBottom() @scrollToBottom()
detectScrolledtoBottom: =>
scrollBottom = @scrollHolder.scrollTop() + @scrollHolder.height()
@scrolledToBottom = scrollBottom == @scrollHolder.prop('scrollHeight')
onScrollHintClick: ->
# animate scroll
@scrollHolder.animate({scrollTop: @scrollHolder.prop('scrollHeight')}, 300)
@scrollHint.addClass('is-hidden')
scrollToBottom: -> scrollToBottom: ->
if @scrolledToBottom
@scrollHolder.scrollTop(@scrollHolder.prop('scrollHeight')) @scrollHolder.scrollTop(@scrollHolder.prop('scrollHeight'))
else
@scrollHint.removeClass('is-hidden')
class Setting extends App.ControllerModal class Setting extends App.ControllerModal
buttonClose: true buttonClose: true

View file

@ -18,6 +18,10 @@
<div class="btn btn--action btn--small"><%- @T('close') %></div> <div class="btn btn--action btn--small"><%- @T('close') %></div>
</div> </div>
</div> </div>
<div class="chat-scroll-hint js-scrollHint is-hidden">
<%- @Icon('chat') %>
<div class="chat-scroll-hint-message">Scroll down to see new messages</div>
</div>
<div class="chat-body-holder js-scrollHolder"> <div class="chat-body-holder js-scrollHolder">
<div class="chat-body js-body"></div> <div class="chat-body js-body"></div>
</div> </div>

View file

@ -7717,6 +7717,26 @@ output {
display: none; display: none;
} }
.chat-scroll-hint {
background: hsl(210,8%,98%);
display: flex;
align-items: center;
border: 1px solid hsl(0,0%,91%);
border-top: none;
padding: 7px 10px 6px;
color: hsl(0,0%,60%);
cursor: pointer;
&.is-hidden {
display: none;
}
.icon {
fill: hsl(210,5%,78%);
margin-right: 8px;
}
}
.chat-body-holder { .chat-body-holder {
flex: 1; flex: 1;
background: hsl(210,17%,98%); background: hsl(210,17%,98%);