customer chat interface animation fix

This commit is contained in:
Felix Niklas 2015-11-12 13:10:13 +01:00
parent 789cb15640
commit 9b78afe982
2 changed files with 8 additions and 8 deletions

View file

@ -29,6 +29,8 @@ class App.CustomerChat extends App.Controller
@render() @render()
@on 'layout-has-changed', @propagateLayoutChange
@bind( @bind(
'chat_status_agent' 'chat_status_agent'
(data) => (data) =>
@ -126,16 +128,14 @@ class App.CustomerChat extends App.Controller
removeCallback: @removeChat removeCallback: @removeChat
messageCallback: @updateNavMenu messageCallback: @updateNavMenu
@on 'layout-has-changed', @propagateLayoutChange @$('.chat-workspace').append chat.el
chat.render()
@$('.chat-workspace').append(chat.el)
@chatWindows[session.session_id] = chat @chatWindows[session.session_id] = chat
removeChat: (session_id) => removeChat: (session_id) =>
delete @chatWindows[session_id] delete @chatWindows[session_id]
propagateLayoutChange: (event) => propagateLayoutChange: (event) =>
# adjust scroll position on layoutChange # adjust scroll position on layoutChange
for session_id, chat of @chatWindows for session_id, chat of @chatWindows
chat.trigger 'layout-changed' chat.trigger 'layout-changed'
@ -192,7 +192,6 @@ class chatWindow extends App.Controller
@lastTimestamp @lastTimestamp
@lastAddedType @lastAddedType
@isTyping = false @isTyping = false
@render()
@resetUnreadMessages() @resetUnreadMessages()
@on 'layout-change', @scrollToBottom @on 'layout-change', @scrollToBottom
@ -226,8 +225,9 @@ class chatWindow extends App.Controller
@el.one 'transitionend', @onTransitionend @el.one 'transitionend', @onTransitionend
# make sure animation will run # force repaint
setTimeout (=> @el.addClass('is-open')), 0 @el.prop('offsetHeight')
@el.addClass('is-open')
# @addMessage 'Hello. My name is Roger, how can I help you?', 'agent' # @addMessage 'Hello. My name is Roger, how can I help you?', 'agent'
if @session && @session.messages if @session && @session.messages

View file

@ -7118,7 +7118,6 @@ output {
.chat-window { .chat-window {
flex: 0 1 0; flex: 0 1 0;
overflow: hidden; overflow: hidden;
padding: 10px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
color: hsl(0,0%,33%); color: hsl(0,0%,33%);
@ -7128,6 +7127,7 @@ output {
&.is-open { &.is-open {
flex: 1 0 25%; flex: 1 0 25%;
transform: scale(1); transform: scale(1);
padding: 10px;
} }
&.is-offline { &.is-offline {