From b8f3f2899cec897ed55467005ff7d2314d556812 Mon Sep 17 00:00:00 2001 From: virvar Date: Tue, 7 Jun 2016 15:07:59 +0300 Subject: [PATCH] Request message icon animation Former-commit-id: 23f3004bc5f684ea634ad0a381667cf10f31ff67 --- src/status_im/chat/styles/message.cljs | 17 ++-- src/status_im/chat/views/message.cljs | 46 ++-------- src/status_im/chat/views/request_message.cljs | 85 +++++++++++++++++++ src/status_im/components/animation.cljs | 6 ++ 4 files changed, 109 insertions(+), 45 deletions(-) create mode 100644 src/status_im/chat/views/request_message.cljs diff --git a/src/status_im/chat/styles/message.cljs b/src/status_im/chat/styles/message.cljs index e87614f23b..937d85b994 100644 --- a/src/status_im/chat/styles/message.cljs +++ b/src/status_im/chat/styles/message.cljs @@ -138,17 +138,20 @@ (merge style-sub-text {:marginBottom 2})) (def command-request-image-touchable - {:position :absolute - :top 12 - :right 0 - :width 32 - :height 32}) + {:position :absolute + :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 diff --git a/src/status_im/chat/views/message.cljs b/src/status_im/chat/views/message.cljs index 74611ddf2d..6cd5f02917 100644 --- a/src/status_im/chat/views/message.cljs +++ b/src/status_im/chat/views/message.cljs @@ -2,17 +2,18 @@ (:require [clojure.string :as s] [re-frame.core :refer [subscribe dispatch]] [status-im.components.react :refer [view - text - image - touchable-highlight]] + 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]] + parse-command-request]] [status-im.resources :as res] [status-im.constants :refer [text-content-type - content-type-status - content-type-command - content-type-command-request]])) + content-type-status + content-type-command + content-type-command-request]])) (defn message-date [{:keys [date]}] [view {} @@ -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) diff --git a/src/status_im/chat/views/request_message.cljs b/src/status_im/chat/views/request_message.cljs new file mode 100644 index 0000000000..b8f4bfc05b --- /dev/null +++ b/src/status_im/chat/views/request_message.cljs @@ -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)]])])))) diff --git a/src/status_im/components/animation.cljs b/src/status_im/components/animation.cljs index 677223b338..a945d44f4c 100644 --- a/src/status_im/components/animation.cljs +++ b/src/status_im/components/animation.cljs @@ -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])))