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

Messages animation 

Former-commit-id: 7f7ab514ca
This commit is contained in:
virvar 2016-06-02 16:23:50 +03:00
parent 60ee2d132c
commit c8eb62bb94
4 changed files with 35 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/status_im/chat/handlers.cljs
View File

@ -5,7 +5,7 @@
[status-im.components.drag-drop :as drag]
[status-im.components.animation :as anim]
[status-im.components.styles :refer [default-chat-color]]
[status-im.chat.styles.response :as response-styles]
[status-im.chat.styles.response :refer [request-info-height response-height-normal]]
[status-im.chat.styles.response-suggestions :as response-suggestions-styles]
[status-im.chat.suggestions :as suggestions]
[status-im.protocol.api :as api]
@ -52,7 +52,8 @@
(defn animate-cancel-command! [{{:keys [response-height-anim-value
message-input-buttons-scale
message-input-offset]} :animations}]
message-input-offset
messages-offset-anim-value]} :animations}]
(let [height-to-value 1]
(anim/add-listener response-height-anim-value
(fn [val]
@ -66,7 +67,8 @@
(anim/start (anim/timing message-input-buttons-scale {:toValue 1
:duration response-input-hiding-duration}))
(anim/start (anim/timing message-input-offset {:toValue 0
:duration response-input-hiding-duration}))))
:duration response-input-hiding-duration}))
(anim/start (anim/spring messages-offset-anim-value {:toValue 0}))))
(register-handler :start-cancel-command
(after animate-cancel-command!)
@ -86,7 +88,7 @@
response-suggestions-styles/header-height
response-suggestions-styles/suggestion-height)
suggestions)))
height (+ suggestions-height response-styles/request-info-height)
height (+ suggestions-height request-info-height)
anim-value (get-in db [:animations :response-height-anim-value])]
(anim/start
(anim/spring anim-value {:toValue height
@ -119,7 +121,8 @@
(assoc-in db [:animations :commands-input-is-switching?] false)))
(defn animate-show-response! [{{scale-anim-value :message-input-buttons-scale
offset-anim-value :message-input-offset} :animations}]
input-offset-anim-value :message-input-offset
messages-offset-anim-value :messages-offset-anim-value} :animations}]
(let [to-value 0.1
delta 0.02]
(anim/add-listener scale-anim-value
@ -129,8 +132,9 @@
(dispatch [:finish-show-response!]))))
(anim/start (anim/timing scale-anim-value {:toValue to-value
:duration response-input-hiding-duration}))
(anim/start (anim/timing offset-anim-value {:toValue -40
:duration response-input-hiding-duration}))))
(anim/start (anim/timing input-offset-anim-value {:toValue -40
:duration response-input-hiding-duration}))
(anim/start (anim/spring messages-offset-anim-value {:toValue request-info-height}))))
(defn set-response-chat-command [db [_ to-msg-id command-key]]
(-> db
@ -360,11 +364,11 @@
(after animate-fix-response-height!)
(fn [db _]
(let [current (get-in db [:animations :response-height])
normal-height response-styles/response-height-normal
normal-height response-height-normal
max-height (get-in db [:animations :response-height-max])
delta (/ normal-height 2)
new-fixed (cond
(<= current delta) response-styles/request-info-height
(<= current delta) request-info-height
(<= current (+ normal-height delta)) normal-height
:else max-height)]
(-> db

7
src/status_im/chat/screen.cljs
View File

@ -3,6 +3,7 @@
(:require [re-frame.core :refer [subscribe dispatch]]
[clojure.string :as s]
[status-im.components.react :refer [view
animated-view
text
image
icon
@ -221,14 +222,16 @@
(defview messages-view [group-chat]
[messages [:chat :messages]
contacts [:chat :contacts]]
contacts [:chat :contacts]
messages-offset [:get-in [:animations :messages-offset-anim-value]]]
(let [contacts' (contacts-by-identity contacts)]
[animated-view {:style (st/messages-container messages-offset)}
[list-view {:renderRow (message-row contacts' group-chat)
:renderScrollComponent #(invertible-scroll-view (js->clj %))
:onEndReached #(dispatch [:load-more-messages])
:enableEmptySections true
:keyboardShouldPersistTaps true
:dataSource (to-datasource messages)}]))
:dataSource (to-datasource messages)}]]))
(defview chat []
[group-chat [:chat :group-chat]

4
src/status_im/chat/styles/screen.cljs
View File

@ -14,6 +14,10 @@
{:flex 1
:backgroundColor chat-background})
(defn messages-container [bottom]
{:flex 1
:bottom bottom})
(def toolbar-view
{:flexDirection :row
:height 56

1
src/status_im/db.cljs
View File

@ -40,6 +40,7 @@
:message-input-buttons-scale (anim/create-value 1)
:commands-input-is-switching? false
:response-height-anim-value (anim/create-value 0)
:messages-offset-anim-value (anim/create-value 0)
:response-resize? false}})
(def protocol-initialized-path [:protocol-initialized])