diff --git a/src/status_im/chat/handlers/animation.cljs b/src/status_im/chat/handlers/animation.cljs index 91f72309c1..8dddfaa967 100644 --- a/src/status_im/chat/handlers/animation.cljs +++ b/src/status_im/chat/handlers/animation.cljs @@ -4,10 +4,13 @@ [status-im.components.drag-drop :as drag] [status-im.models.commands :as commands] [status-im.handlers.content-suggestions :refer [get-content-suggestions]] + [status-im.chat.styles.plain-input :refer [input-height]] [status-im.chat.styles.response :refer [request-info-height response-height-normal]] [status-im.chat.styles.response-suggestions :as response-suggestions-styles] [status-im.constants :refer [response-input-hiding-duration]])) +(def zero-height input-height) + (register-handler :finish-animate-cancel-command (fn [db _] (assoc-in db [:animations :commands-input-is-switching?] false))) @@ -17,18 +20,11 @@ message-input-offset messages-offset-anim-value]} :animations} [_ on-animation-stop]] - (let [height-to-value 1 - delta 1] - (anim/add-listener response-height-anim-value - (fn [val] - (when (<= (- height-to-value delta) (anim/value val) (+ height-to-value delta)) - (anim/remove-all-listeners response-height-anim-value) - (dispatch [:finish-animate-cancel-command]) - (on-animation-stop)))) - (anim/start (anim/spring response-height-anim-value {:toValue height-to-value - :velocity 1 - :tension 1 - :friction 5})) + (let [height-to-value zero-height] + (anim/start (anim/spring response-height-anim-value {:toValue height-to-value}) + (fn [] + (dispatch [:finish-animate-cancel-command]) + (on-animation-stop))) (anim/start (anim/timing message-input-buttons-scale {:toValue 1 :duration response-input-hiding-duration})) (anim/start (anim/timing message-input-offset {:toValue 0 @@ -57,16 +53,15 @@ (defn animate-response-resize! [{{height-anim-value :response-height-anim-value from :response-height to :response-height-fixed} :animations}] - (let [delta 5] - (anim/remove-all-listeners height-anim-value) - (anim/set-value height-anim-value from) - (anim/add-listener height-anim-value - (fn [val] - (dispatch [:set-response-height (anim/value val)]) - (when (<= (- to delta) (anim/value val) (+ to delta)) - (anim/remove-all-listeners height-anim-value) - (dispatch [:finish-animate-response-resize])))) - (anim/start (anim/spring height-anim-value {:toValue to})))) + (anim/remove-all-listeners height-anim-value) + (anim/set-value height-anim-value from) + (anim/add-listener height-anim-value + (fn [val] + (dispatch [:set-response-height (anim/value val)]))) + (anim/start (anim/spring height-anim-value {:toValue to}) + (fn [] + (anim/remove-all-listeners height-anim-value) + (dispatch [:finish-animate-response-resize])))) (register-handler :animate-response-resize (after animate-response-resize!) @@ -81,7 +76,8 @@ response-suggestions-styles/header-height response-suggestions-styles/suggestion-height) suggestions))] - (min response-height-normal (+ suggestions-height request-info-height)))) + (+ zero-height + (min response-height-normal (+ suggestions-height request-info-height))))) (defn update-response-height [db] (assoc-in db [:animations :response-height-fixed] (get-response-height db))) @@ -93,15 +89,10 @@ (defn animate-show-response! [{{scale-anim-value :message-input-buttons-scale input-offset-anim-value :message-input-offset messages-offset-anim-value :messages-offset-anim-value} :animations}] - (let [to-value 0.1 - delta 0.02] - (anim/add-listener scale-anim-value - (fn [val] - (when (<= (- to-value delta) (anim/value val) (+ to-value delta)) - (anim/remove-all-listeners scale-anim-value) - (dispatch [:finish-show-response!])))) + (let [to-value 0.1] (anim/start (anim/timing scale-anim-value {:toValue to-value - :duration response-input-hiding-duration})) + :duration response-input-hiding-duration}) + #(dispatch [:finish-show-response!])) (anim/start (anim/timing input-offset-anim-value {:toValue -40 :duration response-input-hiding-duration})) (anim/start (anim/spring messages-offset-anim-value {:toValue request-info-height})))) @@ -112,7 +103,7 @@ (dispatch [:animate-response-resize]) (-> db (assoc-in [:animations :commands-input-is-switching?] true) - (assoc-in [:animations :response-height] 0) + (assoc-in [:animations :response-height] zero-height) (update-response-height)))) (register-handler :set-response-max-height @@ -131,8 +122,8 @@ max-height (get-in db [:animations :response-height-max]) delta (/ normal-height 2) new-fixed (cond - (<= current delta) request-info-height - (<= current (+ normal-height delta)) (get-response-height db) + (<= current (+ zero-height delta)) (+ zero-height request-info-height) + (<= current (+ zero-height normal-height delta)) (get-response-height db) :else max-height)] (dispatch [:animate-response-resize]) (assoc-in db [:animations :response-height-fixed] new-fixed)))) diff --git a/src/status_im/chat/styles/plain_input.cljs b/src/status_im/chat/styles/plain_input.cljs index dc2883a7f2..da4168fae8 100644 --- a/src/status_im/chat/styles/plain_input.cljs +++ b/src/status_im/chat/styles/plain_input.cljs @@ -4,12 +4,14 @@ color-white color-blue]])) +(def input-height 56) + (def input-container {:flexDirection :column}) (def input-view {:flexDirection :row - :height 56 + :height input-height :backgroundColor color-white}) (def message-input-button-touchable diff --git a/src/status_im/chat/styles/response.cljs b/src/status_im/chat/styles/response.cljs index 1974517bb2..c01fb16c95 100644 --- a/src/status_im/chat/styles/response.cljs +++ b/src/status_im/chat/styles/response.cljs @@ -5,7 +5,8 @@ text1-color text2-color chat-background - color-black]])) + color-black]] + [status-im.chat.styles.plain-input :refer [input-height]])) (def response-height-normal 211) (def request-info-height 61) @@ -57,7 +58,7 @@ :left 0 :right 0 :top 0 - :bottom 56 + :bottom 0 :backgroundColor :transparent :elevation 2}) @@ -66,6 +67,9 @@ :height height :backgroundColor color-white}) +(def input-placeholder + {:height input-height}) + (defn request-info [color] {:flexDirection :column :height request-info-height diff --git a/src/status_im/chat/views/response.cljs b/src/status_im/chat/views/response.cljs index 848c49e078..489a08e07f 100644 --- a/src/status_im/chat/views/response.cljs +++ b/src/status_im/chat/views/response.cljs @@ -55,4 +55,5 @@ anim-height response-height))}) [request-info] - [response-suggestions-view]]]) + [response-suggestions-view] + [view st/input-placeholder]]]) diff --git a/src/status_im/components/animation.cljs b/src/status_im/components/animation.cljs index dac71685fd..677223b338 100644 --- a/src/status_im/components/animation.cljs +++ b/src/status_im/components/animation.cljs @@ -1,8 +1,9 @@ (ns status-im.components.animation (:require [status-im.components.react :refer [animated]])) -(defn start [anim] - (.start anim)) +(defn start + ([anim] (.start anim)) + ([anim callback] (.start anim callback))) (defn timing [anim-value config] (.timing animated anim-value (clj->js config)))