From e7b328aa2742fa6645ff19fcaf8e93a052681026 Mon Sep 17 00:00:00 2001 From: Roman Volosovskyi Date: Mon, 27 Jun 2016 12:07:14 +0300 Subject: [PATCH] custom register-handler & response icon animation --- src/status_im/chat/handlers.cljs | 4 +- src/status_im/chat/handlers/animation.cljs | 3 +- src/status_im/chat/styles/message.cljs | 8 +-- src/status_im/chat/views/message.cljs | 21 +------- src/status_im/chat/views/request_message.cljs | 50 +++++++------------ src/status_im/chat/views/response.cljs | 11 ++-- src/status_im/chat/views/suggestions.cljs | 11 ++-- src/status_im/commands/handlers/jail.cljs | 3 +- src/status_im/commands/utils.cljs | 5 +- src/status_im/handlers.cljs | 4 +- src/status_im/utils/handlers.cljs | 8 ++- 11 files changed, 51 insertions(+), 77 deletions(-) diff --git a/src/status_im/chat/handlers.cljs b/src/status_im/chat/handlers.cljs index cca8759284..4181c2c587 100644 --- a/src/status_im/chat/handlers.cljs +++ b/src/status_im/chat/handlers.cljs @@ -1,5 +1,5 @@ (ns status-im.chat.handlers - (:require [re-frame.core :refer [register-handler enrich after debug dispatch]] + (:require [re-frame.core :refer [enrich after debug dispatch]] [status-im.models.commands :as commands] [clojure.string :as str] [status-im.components.styles :refer [default-chat-color]] @@ -12,7 +12,7 @@ [status-im.chat.sign-up :as sign-up-service] [status-im.models.chats :as chats] [status-im.navigation.handlers :as nav] - [status-im.utils.handlers :as u] + [status-im.utils.handlers :refer [register-handler] :as u] [status-im.persistence.realm :as r] [status-im.handlers.server :as server] [status-im.handlers.content-suggestions :refer [get-content-suggestions]] diff --git a/src/status_im/chat/handlers/animation.cljs b/src/status_im/chat/handlers/animation.cljs index 4dd4af37dc..48715ee0a1 100644 --- a/src/status_im/chat/handlers/animation.cljs +++ b/src/status_im/chat/handlers/animation.cljs @@ -1,5 +1,6 @@ (ns status-im.chat.handlers.animation - (:require [re-frame.core :refer [register-handler after dispatch debug]] + (:require [re-frame.core :refer [after dispatch debug]] + [status-im.utils.handlers :refer [register-handler]] [re-frame.middleware :refer [path]] [status-im.handlers.content-suggestions :refer [get-content-suggestions]] [status-im.chat.constants :refer [input-height request-info-height diff --git a/src/status_im/chat/styles/message.cljs b/src/status_im/chat/styles/message.cljs index 5bb60573d4..76d4a91904 100644 --- a/src/status_im/chat/styles/message.cljs +++ b/src/status_im/chat/styles/message.cljs @@ -153,15 +153,13 @@ :backgroundColor (:color command) :transform [{:scale scale}]}) -(defn command-image-view - [command] +(def command-image-view {:position :absolute :top 0 :right 0 :width 24 :height 24 :borderRadius 50 - :backgroundColor (:color command) :alignItems :center}) (def command-request-image @@ -198,7 +196,9 @@ (def command-image {:margin-top 5 :width 12 - :height 13}) + :height 13 + :tintColor :#a9a9a9cc}) + (def command-text (merge style-message-text {:marginTop 8 diff --git a/src/status_im/chat/views/message.cljs b/src/status_im/chat/views/message.cljs index 656cb72631..069a18e9da 100644 --- a/src/status_im/chat/views/message.cljs +++ b/src/status_im/chat/views/message.cljs @@ -69,7 +69,7 @@ (str "!" (:name command))]]] ;; todo doesn't reflect design (when-let [icon (:icon command)] - [view (st/command-image-view command) + [view st/command-image-view [image {:source {:uri icon} :style st/command-image}]]) (if preview @@ -84,25 +84,6 @@ (->> (when command (name command)) (str "request-"))) -;; todo remove (merging leftover) -#_(defview message-content-command-request - [{:keys [msg-id content from incoming-group]}] - [commands [:get-responses]] - (let [{:keys [command content]} (parse-command-request commands content)] - [touchable-highlight {:onPress #(set-chat-command msg-id command) - :accessibility-label (label command)} - [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]] - [view (st/command-request-image-view command) - [image {:source {:uri (:icon command)} - :style st/command-request-image}]] - (when-let [request-text (:request-text command)] - [view st/command-request-text-view - [text {:style st/style-sub-text} request-text]])]])) - (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 index 0e5117769a..77e5834327 100644 --- a/src/status_im/chat/views/request_message.cljs +++ b/src/status_im/chat/views/request_message.cljs @@ -19,49 +19,37 @@ (->> (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-animation ::request-button-scale-current to-scale]) - (when loop? - (dispatch [:set-animation ::request-button-scale (if (= to-scale minimum) - maximum - minimum)])))))))) +(def min-scale 1) +(def max-scale 1.3) + +(defn request-button-animation-logic + [{:keys [to-value val loop?] :as context}] + (anim/start + (anim/anim-sequence + [(anim/anim-delay (if @loop? request-message-icon-scale-delay 0)) + (anim/spring val {:toValue to-value})]) + #(when @loop? + (let [new-value (if (= to-value min-scale) max-scale min-scale) + context' (assoc context :to-value new-value)] + (request-button-animation-logic context'))))) (defn request-button [msg-id command] - (let [to-scale (subscribe [:animations ::request-button-scale]) - cur-scale (subscribe [:animations ::request-button-scale-current]) - scale-anim-val (anim/create-value (or @cur-scale 1)) + (let [scale-anim-val (anim/create-value min-scale) loop? (r/atom true) - context {:to-value to-scale + context {:to-value max-scale :val scale-anim-val - :loop? loop?} - on-update (request-button-animation-logic context)] + :loop? loop?}] (r/create-class {:component-did-mount - on-update - :component-did-update - on-update + #(request-button-animation-logic context) + :component-will-unmount + #(reset! loop? false) :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 {:uri (:icon command)} :style st/command-request-image}]]])}))) diff --git a/src/status_im/chat/views/response.cljs b/src/status_im/chat/views/response.cljs index 71933d6d8d..03f5e3ce7c 100644 --- a/src/status_im/chat/views/response.cljs +++ b/src/status_im/chat/views/response.cljs @@ -83,11 +83,10 @@ [icon :close-white st/cancel-icon]]]]]))) (defn container-animation-logic [{:keys [to-value val]}] - (fn [_] - (let [to-value @to-value] - (anim/start (anim/spring val {:toValue to-value - :tension 50 - :friction 10}))))) + (let [to-value @to-value] + (anim/start (anim/spring val {:toValue to-value + :tension 50 + :friction 10})))) (defn container [response-height & children] (let [;; todo to-response-height, cur-response-height must be specific @@ -96,7 +95,7 @@ changed (subscribe [:animations :response-height-changed]) context {:to-value to-response-height :val response-height} - on-update (container-animation-logic context)] + on-update #(container-animation-logic context)] (r/create-class {:component-did-mount on-update diff --git a/src/status_im/chat/views/suggestions.cljs b/src/status_im/chat/views/suggestions.cljs index 3eba75a4ea..26b0cc7f94 100644 --- a/src/status_im/chat/views/suggestions.cljs +++ b/src/status_im/chat/views/suggestions.cljs @@ -93,11 +93,10 @@ [icon :drag_down st/drag-down-icon]]))) (defn container-animation-logic [{:keys [to-value val]}] - (fn [_] - (let [to-value @to-value] - (anim/start (anim/spring val {:toValue to-value - :tension 50 - :friction 10}))))) + (let [to-value @to-value] + (anim/start (anim/spring val {:toValue to-value + :tension 50 + :friction 10})))) (defn container [h & elements] (let [;; todo to-response-height, cur-response-height must be specific @@ -106,7 +105,7 @@ changed (subscribe [:animations :commands-height-changed]) context {:to-value to-response-height :val h} - on-update (container-animation-logic context)] + on-update #(container-animation-logic context)] (r/create-class {:component-did-mount on-update diff --git a/src/status_im/commands/handlers/jail.cljs b/src/status_im/commands/handlers/jail.cljs index b2d1ac67af..d5852f5ee7 100644 --- a/src/status_im/commands/handlers/jail.cljs +++ b/src/status_im/commands/handlers/jail.cljs @@ -1,6 +1,5 @@ (ns status-im.commands.handlers.jail - (:require [re-frame.core :refer [register-handler after dispatch subscribe - trim-v debug]] + (:require [re-frame.core :refer [after dispatch subscribe trim-v debug]] [status-im.utils.handlers :as u] [status-im.utils.utils :refer [http-get toast]] [status-im.components.jail :as j] diff --git a/src/status_im/commands/utils.cljs b/src/status_im/commands/utils.cljs index 8ae48bf0e7..ca03a910cf 100644 --- a/src/status_im/commands/utils.cljs +++ b/src/status_im/commands/utils.cljs @@ -3,7 +3,8 @@ [clojure.walk :as w] [status-im.components.react :refer [text scroll-view view image touchable-highlight]] - [re-frame.core :refer [register-handler dispatch trim-v debug]])) + [re-frame.core :refer [register-handler dispatch trim-v debug]] + [status-im.utils.handlers :refer [register-handler]])) (defn json->clj [json] (if (= json "undefined") @@ -44,4 +45,4 @@ (defn reg-handler ([name handler] (reg-handler name nil handler)) ([name middleware handler] - (register-handler name [#_debug trim-v middleware] handler))) + (register-handler name [trim-v middleware] handler))) diff --git a/src/status_im/handlers.cljs b/src/status_im/handlers.cljs index f229403e07..789d2256e0 100644 --- a/src/status_im/handlers.cljs +++ b/src/status_im/handlers.cljs @@ -1,13 +1,13 @@ (ns status-im.handlers (:require - [re-frame.core :refer [register-handler after dispatch debug]] + [re-frame.core :refer [after dispatch debug]] [schema.core :as s :include-macros true] [status-im.db :refer [app-db schema]] [status-im.persistence.simple-kv-store :as kv] [status-im.protocol.state.storage :as storage] [status-im.utils.logging :as log] [status-im.utils.crypt :refer [gen-random-bytes]] - [status-im.utils.handlers :as u] + [status-im.utils.handlers :refer [register-handler] :as u] status-im.chat.handlers status-im.chat.handlers.animation status-im.group-settings.handlers diff --git a/src/status_im/utils/handlers.cljs b/src/status_im/utils/handlers.cljs index f14ce02a79..083196375e 100644 --- a/src/status_im/utils/handlers.cljs +++ b/src/status_im/utils/handlers.cljs @@ -1,4 +1,5 @@ -(ns status-im.utils.handlers) +(ns status-im.utils.handlers + (:require [re-frame.core :refer [after dispatch debug] :as re-core])) (defn side-effect! "Middleware for handlers that will not affect db." @@ -6,3 +7,8 @@ (fn [db params] (handler db params) db)) + +(defn register-handler + ([name handler] (register-handler name nil handler)) + ([name middleware handler] + (re-core/register-handler name [#_debug middleware] handler)))