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

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

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

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

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

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

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

1
src/status_im/db.cljs
View File

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