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

Request message icon animation 

Former-commit-id: 23f3004bc5
This commit is contained in:
virvar 2016-06-07 15:07:59 +03:00
parent 185bee8a9c
commit b8f3f2899c
4 changed files with 109 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -139,16 +139,19 @@
(def command-request-image-touchable
{:position :absolute
:top 12
:right 0
:width 32
:height 32})
:top 4
:right -8
:alignItems :center
:justifyContent :center
:width 48
:height 48})
(defn command-request-image-view [command]
(defn command-request-image-view [command scale]
{:width 32
:height 32
:borderRadius 50
:backgroundColor (:color command)})
:backgroundColor (:color command)
:transform [{:scale scale}]})
(def command-request-image
{:position :absolute

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

@ -5,6 +5,7 @@
text
image
touchable-highlight]]
[status-im.chat.views.request-message :refer [message-content-command-request]]
[status-im.chat.styles.message :as st]
[status-im.models.commands :refer [parse-command-msg-content
parse-command-request]]
@ -69,37 +70,6 @@
"******"
content)]]))))
(defn set-chat-command [msg-id command]
(dispatch [:set-response-chat-command msg-id (:command command)]))
(defn label [{:keys [command]}]
(->> (name command)
(str "request-")))
(defn message-content-command-request
[{:keys [msg-id content from incoming-group]}]
(let [commands-atom (subscribe [:get-commands])]
(fn [{:keys [msg-id content from incoming-group]}]
(let [commands @commands-atom
{:keys [command content]} (parse-command-request commands content)]
[view st/comand-request-view
[view st/command-request-message-view
(when incoming-group
[text {:style st/command-request-from-text}
from])
[text {:style st/style-message-text}
content]]
[touchable-highlight {:style st/command-request-image-touchable
:onPress #(set-chat-command msg-id command)
:accessibility-label (label command)}
[view (st/command-request-image-view command)
[image {:source (:request-icon command)
:style st/command-request-image}]]]
(when (:request-text command)
[view st/command-request-text-view
[text {:style st/style-sub-text}
(:request-text command)]])]))))
(defn message-view
[message content]
[view (st/message-view message)

85
src/status_im/chat/views/request_message.cljs Normal file
View File

@ -0,0 +1,85 @@
(ns status-im.chat.views.request-message
(:require [re-frame.core :refer [subscribe dispatch]]
[reagent.core :as r]
[status-im.components.react :refer [view
animated-view
text
image
touchable-highlight]]
[status-im.chat.styles.message :as st]
[status-im.models.commands :refer [parse-command-request]]
[status-im.components.animation :as anim]))
(def request-message-icon-scale-delay 600)
(defn set-chat-command [msg-id command]
(dispatch [:set-response-chat-command msg-id (:command command)]))
(defn label [{:keys [command]}]
(->> (name command)
(str "request-")))
(defn request-button-animation-logic [{:keys [to-value val loop?]}]
(fn [_]
(let [loop? @loop?
minimum 1
maximum 1.3
to-scale (if loop?
(or @to-value maximum)
minimum)]
(anim/start
(anim/anim-sequence
[(anim/anim-delay (if loop? request-message-icon-scale-delay 0))
(anim/spring val {:toValue to-scale})])
(fn [arg]
(when (.-finished arg)
(dispatch [:set-in [:animations ::request-button-scale-current] to-scale])
(when loop?
(dispatch [:set-in [:animations ::request-button-scale] (if (= to-scale minimum)
maximum
minimum)]))))))))
(defn request-button [msg-id command]
(let [to-scale (subscribe [:get-in [:animations ::request-button-scale]])
cur-scale (subscribe [:get-in [:animations ::request-button-scale-current]])
scale-anim-val (anim/create-value (or @cur-scale 1))
loop? (r/atom true)
context {:to-value to-scale
:val scale-anim-val
:loop? loop?}
on-update (request-button-animation-logic context)]
(r/create-class
{:component-did-mount
on-update
:component-did-update
on-update
:reagent-render
(fn [msg-id command]
@to-scale
[touchable-highlight {:on-press (fn []
(reset! loop? false)
(set-chat-command msg-id command))
:style st/command-request-image-touchable
:accessibility-label (label command)}
[animated-view {:style (st/command-request-image-view command scale-anim-val)}
[image {:source (:request-icon command)
:style st/command-request-image}]]])})))
(defn message-content-command-request
[{:keys [msg-id content from incoming-group]}]
(let [commands-atom (subscribe [:get-commands])]
(fn [{:keys [msg-id content from incoming-group]}]
(let [commands @commands-atom
{:keys [command content]} (parse-command-request commands content)]
[view st/comand-request-view
[view st/command-request-message-view
(when incoming-group
[text {:style st/command-request-from-text}
from])
[text {:style st/style-message-text}
content]]
[request-button msg-id command]
(when (:request-text command)
[view st/command-request-text-view
[text {:style st/style-sub-text}
(:request-text command)]])]))))

6
src/status_im/components/animation.cljs
View File

@ -11,6 +11,12 @@
(defn spring [anim-value config]
(.spring animated anim-value (clj->js config)))
(defn anim-sequence [animations]
(.sequence animated (clj->js animations)))
(defn anim-delay [duration]
(.delay animated duration))
(defn event [config]
(.event animated (clj->js [nil, config])))