diff --git a/src/status_im/chat/styles/message.cljs b/src/status_im/chat/styles/message.cljs index 1437dba3ac..97a94916aa 100644 --- a/src/status_im/chat/styles/message.cljs +++ b/src/status_im/chat/styles/message.cljs @@ -260,8 +260,12 @@ :textAlign :center :color text2-color}) -(defn message-container [height] - {:top height}) +(defn message-animated-container [height] + {:height height}) + +(defn message-container [window-width] + {:position :absolute + :width window-width}) (defn new-message-container [margin on-top?] {:background-color color-white diff --git a/src/status_im/chat/views/message.cljs b/src/status_im/chat/views/message.cljs index c44562dba4..a3365e82b0 100644 --- a/src/status_im/chat/views/message.cljs +++ b/src/status_im/chat/views/message.cljs @@ -9,7 +9,8 @@ image icon animated-view - touchable-highlight]] + touchable-highlight + get-dimensions]] [status-im.components.animation :as anim] [status-im.chat.views.request-message :refer [message-content-command-request]] [status-im.chat.styles.message :as st] @@ -34,6 +35,8 @@ [status-im.chat.handlers.console :as console] [taoensso.timbre :as log])) +(def window-width (:width (get-dimensions "window"))) + (defn message-content-status [_] (let [{:keys [chat-id group-chat name color]} (subscribe [:chat-properties [:chat-id :group-chat :name :color]]) members (subscribe [:current-chat-contacts])] @@ -290,31 +293,38 @@ [group-message-delivery-status message] [message-delivery-status message]))]) -(defn message-container-animation-logic [{:keys [top-offset callback]}] +(defn message-container-animation-logic [{:keys [to-value val callback]}] (fn [_] - (anim/start - (anim/timing top-offset {:toValue 0 - :duration 150}) - (fn [arg] - (when (.-finished arg) - (callback)))))) + (let [to-value @to-value] + (when (< 0 to-value) + (anim/start + (anim/timing val {:toValue to-value + :duration 250}) + (fn [arg] + (when (.-finished arg) + (callback)))))))) (defn message-container [message & children] (if (:new? message) - (let [top-offset (anim/create-value 40) + (let [layout-height (r/atom 0) + anim-value (anim/create-value 1) anim-callback #(dispatch [:set-message-shown message]) - context {:top-offset top-offset - :callback anim-callback} + context {:to-value layout-height + :val anim-value + :callback anim-callback} on-update (message-container-animation-logic context)] (r/create-class {:component-did-update - on-update - :component-did-mount on-update :reagent-render (fn [message & children] - [animated-view {:style (st/message-container top-offset)} - (into [view] children)])})) + @layout-height + [animated-view {:style (st/message-animated-container anim-value)} + (into [view {:style (st/message-container window-width) + :onLayout (fn [event] + (let [height (.. event -nativeEvent -layout -height)] + (reset! layout-height height)))}] + children)])})) (into [view] children))) (defn chat-message [{:keys [outgoing message-id chat-id user-statuses from]}]