status-im
/
status-mobile
mirror of https://github.com/status-im/status-mobile.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Updated animation (#418)

This commit is contained in:
Alexander Pantyuhov 2016-11-08 12:08:51 +03:00
parent 21aa16b842
commit 3785e0b408
2 changed files with 31 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/status_im/chat/styles/message.cljs
View File

@ -260,8 +260,12 @@
:textAlign :center :textAlign :center
:color text2-color}) :color text2-color})
(defn message-container [height] (defn message-animated-container [height]
{:top height}) {:height height})
(defn message-container [window-width]
{:position :absolute
:width window-width})
(defn new-message-container [margin on-top?] (defn new-message-container [margin on-top?]
{:background-color color-white {:background-color color-white

40
src/status_im/chat/views/message.cljs
View File

@ -9,7 +9,8 @@
image image
icon icon
animated-view animated-view
touchable-highlight]] touchable-highlight
get-dimensions]]
[status-im.components.animation :as anim] [status-im.components.animation :as anim]
[status-im.chat.views.request-message :refer [message-content-command-request]] [status-im.chat.views.request-message :refer [message-content-command-request]]
[status-im.chat.styles.message :as st] [status-im.chat.styles.message :as st]
@ -34,6 +35,8 @@
[status-im.chat.handlers.console :as console] [status-im.chat.handlers.console :as console]
[taoensso.timbre :as log])) [taoensso.timbre :as log]))
(def window-width (:width (get-dimensions "window")))
(defn message-content-status [_] (defn message-content-status [_]
(let [{:keys [chat-id group-chat name color]} (subscribe [:chat-properties [:chat-id :group-chat :name :color]]) (let [{:keys [chat-id group-chat name color]} (subscribe [:chat-properties [:chat-id :group-chat :name :color]])
members (subscribe [:current-chat-contacts])] members (subscribe [:current-chat-contacts])]
@ -290,31 +293,38 @@
[group-message-delivery-status message] [group-message-delivery-status message]
[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 [_] (fn [_]
(anim/start (let [to-value @to-value]
(anim/timing top-offset {:toValue 0 (when (< 0 to-value)
:duration 150}) (anim/start
(fn [arg] (anim/timing val {:toValue to-value
(when (.-finished arg) :duration 250})
(callback)))))) (fn [arg]
(when (.-finished arg)
(callback))))))))
(defn message-container [message & children] (defn message-container [message & children]
(if (:new? message) (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]) anim-callback #(dispatch [:set-message-shown message])
context {:top-offset top-offset context {:to-value layout-height
:callback anim-callback} :val anim-value
:callback anim-callback}
on-update (message-container-animation-logic context)] on-update (message-container-animation-logic context)]
(r/create-class (r/create-class
{:component-did-update {:component-did-update
on-update
:component-did-mount
on-update on-update
:reagent-render :reagent-render
(fn [message & children] (fn [message & children]
[animated-view {:style (st/message-container top-offset)} @layout-height
(into [view] children)])})) [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))) (into [view] children)))
(defn chat-message [{:keys [outgoing message-id chat-id user-statuses from]}] (defn chat-message [{:keys [outgoing message-id chat-id user-statuses from]}]