Request message icon animation

src/status_im/chat/styles/message.cljs

@@ -138,17 +138,20 @@
   (merge style-sub-text {:marginBottom 2}))
 
 (def command-request-image-touchable
-  {:position :absolute
+  {:position       :absolute
-   :top      12
+   :top            4
-   :right    0
+   :right          -8
-   :width    32
+   :alignItems     :center
-   :height   32})
+   :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

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
+                                                text
-                                              image
+                                                image
-                                              touchable-highlight]]
+                                                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-status
-                                       content-type-command
+                                         content-type-command
-                                       content-type-command-request]]))
+                                         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)

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)]])]))))

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])))