customer chat: add scrollhint
This commit is contained in:
parent
30fe8aef36
commit
f62796ab9e
3 changed files with 47 additions and 8 deletions
|
@ -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
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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%);
|
||||||
|
|
Loading…
Reference in a new issue