From 9b78afe982a7fbceb9d51a22777ce26f7cf3a07b Mon Sep 17 00:00:00 2001 From: Felix Niklas Date: Thu, 12 Nov 2015 13:10:13 +0100 Subject: [PATCH] customer chat interface animation fix --- app/assets/javascripts/app/controllers/chat.coffee | 14 +++++++------- app/assets/stylesheets/zammad.scss | 2 +- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/app/assets/javascripts/app/controllers/chat.coffee b/app/assets/javascripts/app/controllers/chat.coffee index 1908cfd2c..b16afb616 100644 --- a/app/assets/javascripts/app/controllers/chat.coffee +++ b/app/assets/javascripts/app/controllers/chat.coffee @@ -29,6 +29,8 @@ class App.CustomerChat extends App.Controller @render() + @on 'layout-has-changed', @propagateLayoutChange + @bind( 'chat_status_agent' (data) => @@ -126,16 +128,14 @@ class App.CustomerChat extends App.Controller removeCallback: @removeChat messageCallback: @updateNavMenu - @on 'layout-has-changed', @propagateLayoutChange - - @$('.chat-workspace').append(chat.el) + @$('.chat-workspace').append chat.el + chat.render() @chatWindows[session.session_id] = chat removeChat: (session_id) => delete @chatWindows[session_id] propagateLayoutChange: (event) => - # adjust scroll position on layoutChange for session_id, chat of @chatWindows chat.trigger 'layout-changed' @@ -192,7 +192,6 @@ class chatWindow extends App.Controller @lastTimestamp @lastAddedType @isTyping = false - @render() @resetUnreadMessages() @on 'layout-change', @scrollToBottom @@ -226,8 +225,9 @@ class chatWindow extends App.Controller @el.one 'transitionend', @onTransitionend - # make sure animation will run - setTimeout (=> @el.addClass('is-open')), 0 + # force repaint + @el.prop('offsetHeight') + @el.addClass('is-open') # @addMessage 'Hello. My name is Roger, how can I help you?', 'agent' if @session && @session.messages diff --git a/app/assets/stylesheets/zammad.scss b/app/assets/stylesheets/zammad.scss index 069a50f71..880c04aa0 100644 --- a/app/assets/stylesheets/zammad.scss +++ b/app/assets/stylesheets/zammad.scss @@ -7118,7 +7118,6 @@ output { .chat-window { flex: 0 1 0; overflow: hidden; - padding: 10px; display: flex; flex-direction: column; color: hsl(0,0%,33%); @@ -7128,6 +7127,7 @@ output { &.is-open { flex: 1 0 25%; transform: scale(1); + padding: 10px; } &.is-offline {