customer chat: add scrollhint
This commit is contained in:
parent
30fe8aef36
commit
f62796ab9e
3 changed files with 47 additions and 8 deletions
|
@ -343,14 +343,16 @@ class ChatWindow extends App.Controller
|
|||
'click .js-send': 'sendMessage'
|
||||
'click .js-close': 'close'
|
||||
'click .js-disconnect': 'disconnect'
|
||||
'click .js-scrollHint': 'onScrollHintClick'
|
||||
|
||||
elements:
|
||||
'.js-customerChatInput': 'input'
|
||||
'.js-status': 'status'
|
||||
'.js-close': 'closeButton'
|
||||
'.js-disconnect': 'disconnectButton'
|
||||
'.js-body': 'body'
|
||||
'.js-scrollHolder': 'scrollHolder'
|
||||
'.js-customerChatInput': 'input'
|
||||
'.js-status': 'status'
|
||||
'.js-close': 'closeButton'
|
||||
'.js-disconnect': 'disconnectButton'
|
||||
'.js-body': 'body'
|
||||
'.js-scrollHolder': 'scrollHolder'
|
||||
'.js-scrollHint': 'scrollHint'
|
||||
|
||||
sounds:
|
||||
message: new Audio('assets/sounds/chat_message.mp3')
|
||||
|
@ -364,6 +366,7 @@ class ChatWindow extends App.Controller
|
|||
@isTyping = false
|
||||
@isAgentTyping = false
|
||||
@resetUnreadMessages()
|
||||
@scrolledToBottom = true
|
||||
|
||||
@chat = App.Chat.find(@session.chat_id)
|
||||
@name = "#{@chat.displayName()} ##{@session.id}"
|
||||
|
@ -407,6 +410,7 @@ class ChatWindow extends App.Controller
|
|||
name: @name
|
||||
|
||||
@el.one 'transitionend', @onTransitionend
|
||||
@scrollHolder.scroll @detectScrolledtoBottom
|
||||
|
||||
# force repaint
|
||||
@el.prop('offsetHeight')
|
||||
|
@ -611,7 +615,6 @@ class ChatWindow extends App.Controller
|
|||
@isTyping = true
|
||||
@maybeAddTimestamp()
|
||||
@body.append App.view('customer_chat/chat_loader')()
|
||||
return if !@el.find('.js-loader').visible(true)
|
||||
@scrollToBottom()
|
||||
|
||||
# clear old delay, set new
|
||||
|
@ -677,8 +680,20 @@ class ChatWindow extends App.Controller
|
|||
|
||||
@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: ->
|
||||
@scrollHolder.scrollTop(@scrollHolder.prop('scrollHeight'))
|
||||
if @scrolledToBottom
|
||||
@scrollHolder.scrollTop(@scrollHolder.prop('scrollHeight'))
|
||||
else
|
||||
@scrollHint.removeClass('is-hidden')
|
||||
|
||||
class Setting extends App.ControllerModal
|
||||
buttonClose: true
|
||||
|
|
|
@ -18,6 +18,10 @@
|
|||
<div class="btn btn--action btn--small"><%- @T('close') %></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 js-body"></div>
|
||||
</div>
|
||||
|
|
|
@ -7717,6 +7717,26 @@ output {
|
|||
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 {
|
||||
flex: 1;
|
||||
background: hsl(210,17%,98%);
|
||||
|
|
Loading…
Reference in a new issue