From a7e694cb4689b572a0d6fa8a10091ae5419d4502 Mon Sep 17 00:00:00 2001 From: virvar Date: Mon, 6 Jun 2016 15:05:35 +0300 Subject: [PATCH] Fix response suggestions: Fix scrolling messages when response view is shown. Empty suggestions can't be fully opened. Fix UI delays after animation. Code improvements. --- src/status_im/chat/handlers.cljs | 12 ++-- src/status_im/chat/handlers/animation.cljs | 60 ++++++++++++------- src/status_im/chat/screen.cljs | 5 +- src/status_im/chat/styles/response.cljs | 12 +--- src/status_im/chat/views/new_message.cljs | 17 +++--- src/status_im/chat/views/response.cljs | 70 ++++++++++------------ src/status_im/new_group/screen.cljs | 2 +- 7 files changed, 95 insertions(+), 83 deletions(-) diff --git a/src/status_im/chat/handlers.cljs b/src/status_im/chat/handlers.cljs index 4af77d29ba..64273fe406 100644 --- a/src/status_im/chat/handlers.cljs +++ b/src/status_im/chat/handlers.cljs @@ -48,11 +48,11 @@ (update-in [:chats current-chat-id :input-text] safe-trim)))) (register-handler :start-cancel-command - (fn [db _] - (if (commands/get-chat-command-to-msg-id db) - (dispatch [:animate-cancel-command]) - (dispatch [:cancel-command #(dispatch [:cancel-command])])) - db)) + (u/side-effect! + (fn [db _] + (if (commands/get-chat-command-to-msg-id db) + (dispatch [:animate-cancel-command]) + (dispatch [:cancel-command]))))) (register-handler :set-chat-command-content (fn [{:keys [current-chat-id] :as db} [_ content]] @@ -79,8 +79,8 @@ (commands/stage-command db command-info)))) (register-handler :set-response-chat-command + (after #(dispatch [:animate-show-response])) (fn [db [_ to-msg-id command-key]] - (dispatch [:animate-show-response]) (commands/set-response-chat-command db to-msg-id command-key))) (defn update-text diff --git a/src/status_im/chat/handlers/animation.cljs b/src/status_im/chat/handlers/animation.cljs index 5f0c918da0..3afb86c24b 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]] + [re-frame.middleware :refer [path]] [status-im.models.commands :as commands] [status-im.handlers.content-suggestions :refer [get-content-suggestions]] [status-im.chat.styles.plain-input :refer [input-height]] @@ -14,16 +15,16 @@ (assoc-in db [:animations :commands-input-is-switching?] false))) (register-handler :animate-cancel-command + (path :animations) (fn [db _] - (let [hiding? (get-in db [:animations :commands-input-is-switching?])] - (if-not hiding? - (-> db - (assoc-in [:animations :commands-input-is-switching?] true) - (assoc-in [:animations :message-input-buttons-scale] 1) - (assoc-in [:animations :message-input-offset] 0) - (assoc-in [:animations :to-response-height] zero-height) - (assoc-in [:animations :messages-offset] 0)) - db)))) + (if-not (:commands-input-is-switching? db) + (assoc db + :commands-input-is-switching? true + :message-input-buttons-scale 1 + :message-input-offset 0 + :to-response-height zero-height + :messages-offset 0) + db))) (register-handler :finish-animate-response-resize (fn [db _] @@ -71,22 +72,39 @@ (register-handler :set-response-max-height (fn [db [_ height]] - (assoc-in db [:animations :response-height-max] height))) + (let [prev-height (get-in db [:animations :response-height-max])] + (if (not= height prev-height) + (let [db (assoc-in db [:animations :response-height-max] height)] + (if (= prev-height (get-in db [:animations :to-response-height])) + (-> db + (assoc-in [:animations :to-response-height] height) + (assoc-in [:animations :response-height-current] height)) + db)) + db)))) (register-handler :on-drag-response (fn [db [_ dy]] (let [fixed (get-in db [:animations :to-response-height])] - (assoc-in db [:animations :response-height-current] (- fixed dy))))) + (-> db + (assoc-in [:animations :response-height-current] (- fixed dy)) + (assoc-in [:animations :response-resize?] false))))) (register-handler :fix-response-height (fn [db _] - (let [current (get-in db [:animations :response-height-current]) - normal-height response-height-normal - max-height (get-in db [:animations :response-height-max]) - delta (/ normal-height 2) - new-fixed (cond - (<= 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 :to-response-height] new-fixed)))) + (if (and (commands/get-chat-command-to-msg-id db) + (not (get-in db [:animations :commands-input-is-switching?]))) + (let [current (get-in db [:animations :response-height-current]) + normal-height response-height-normal + command (commands/get-chat-command db) + text (commands/get-chat-command-content db) + suggestions (get-content-suggestions command text) + max-height (get-in db [:animations :response-height-max]) + delta (/ normal-height 2) + new-fixed (cond + (or (<= current (+ zero-height delta)) + (empty? suggestions)) (+ 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 :to-response-height] new-fixed)) + db))) diff --git a/src/status_im/chat/screen.cljs b/src/status_im/chat/screen.cljs index 7b921803bc..a2fc957b1e 100644 --- a/src/status_im/chat/screen.cljs +++ b/src/status_im/chat/screen.cljs @@ -260,7 +260,10 @@ show-actions-atom [:show-actions] command [:get-chat-command] to-msg-id [:get-chat-command-to-msg-id]] - [view st/chat-view + [view {:style st/chat-view + :onLayout (fn [event] + (let [height (.. event -nativeEvent -layout -height)] + (dispatch [:set-response-max-height height])))} [chat-toolbar] [messages-container [messages-view group-chat]] diff --git a/src/status_im/chat/styles/response.cljs b/src/status_im/chat/styles/response.cljs index c01fb16c95..c9612e3e35 100644 --- a/src/status_im/chat/styles/response.cljs +++ b/src/status_im/chat/styles/response.cljs @@ -51,21 +51,15 @@ :opacity 0.69 :color color-white}) -(def container +(defn response-view [height] {:flexDirection :column - :justifyContent :flex-end :position :absolute :left 0 :right 0 - :top 0 :bottom 0 - :backgroundColor :transparent - :elevation 2}) - -(defn response-view [height] - {:flexDirection :column :height height - :backgroundColor color-white}) + :backgroundColor color-white + :elevation 2}) (def input-placeholder {:height input-height}) diff --git a/src/status_im/chat/views/new_message.cljs b/src/status_im/chat/views/new_message.cljs index 3f2ec8792a..fa8b5ab74b 100644 --- a/src/status_im/chat/views/new_message.cljs +++ b/src/status_im/chat/views/new_message.cljs @@ -18,14 +18,15 @@ (defn show-input [command] [plain-message-input-view - (case (:command command) - :phone {:input-options {:keyboardType :phone-pad} - :validator valid-mobile-number?} - :keypair-password {:input-options {:secureTextEntry true}} - :confirmation-code {:input-options {:keyboardType :numeric}} - :money {:input-options {:keyboardType :numeric}} - :request {:input-options {:keyboardType :numeric}} - nil)]) + (when command + (case (:command command) + :phone {:input-options {:keyboardType :phone-pad} + :validator valid-mobile-number?} + :keypair-password {:input-options {:secureTextEntry true}} + :confirmation-code {:input-options {:keyboardType :numeric}} + :money {:input-options {:keyboardType :numeric}} + :request {:input-options {:keyboardType :numeric}} + (throw (js/Error. "Uknown command type"))))]) (defn chat-message-new [] (let [command-atom (subscribe [:get-chat-command]) diff --git a/src/status_im/chat/views/response.cljs b/src/status_im/chat/views/response.cljs index e1f1a0f74c..9d2b84a490 100644 --- a/src/status_im/chat/views/response.cljs +++ b/src/status_im/chat/views/response.cljs @@ -33,18 +33,28 @@ ;; TODO stub data: request message info "By ???, MMM 1st at HH:mm"]]) -(defview request-info [] - [command [:get-chat-command]] - [view (st/request-info (:color command)) - [drag-icon] - [view st/inner-container - [command-icon nil] - [info-container command] - [touchable-highlight {:on-press #(dispatch [:start-cancel-command])} - [view st/cancel-container - [icon :close-white st/cancel-icon]]]]]) +(defn create-response-pan-responder [] + (drag/create-pan-responder + {:on-move (fn [e gesture] + (dispatch [:on-drag-response (.-dy gesture)])) + :on-release (fn [e gesture] + (dispatch [:fix-response-height]))})) -(defn inner-container-animation-logic [{:keys [animation? to-value current-value val]}] +(defn request-info [] + (let [pan-responder (create-response-pan-responder) + command (subscribe [:get-chat-command])] + (fn [] + [view (merge (drag/pan-handlers pan-responder) + {:style (st/request-info (:color @command))}) + [drag-icon] + [view st/inner-container + [command-icon nil] + [info-container @command] + [touchable-highlight {:on-press #(dispatch [:start-cancel-command])} + [view st/cancel-container + [icon :close-white st/cancel-icon]]]]]))) + +(defn container-animation-logic [{:keys [animation? to-value current-value val]}] (fn [_] (if @animation? (let [to-value @to-value] @@ -58,16 +68,8 @@ (dispatch [:cancel-command])))))) (anim/set-value val @current-value)))) -(defn create-response-pan-responder [] - (drag/create-pan-responder - {:on-move (fn [e gesture] - (dispatch [:on-drag-response (.-dy gesture)])) - :on-release (fn [e gesture] - (dispatch [:fix-response-height]))})) - -(defn inner-container [content] - (let [pan-responder (create-response-pan-responder) - commands-input-is-switching? (subscribe [:get-in [:animations :commands-input-is-switching?]]) +(defn container [& children] + (let [commands-input-is-switching? (subscribe [:get-in [:animations :commands-input-is-switching?]]) response-resize? (subscribe [:get-in [:animations :response-resize?]]) to-response-height (subscribe [:get-in [:animations :to-response-height]]) cur-response-height (subscribe [:get-in [:animations :response-height-current]]) @@ -76,28 +78,22 @@ :to-value to-response-height :current-value cur-response-height :val response-height} - on-update (inner-container-animation-logic context)] + on-update (container-animation-logic context)] (r/create-class {:component-did-mount on-update :component-did-update on-update :reagent-render - (fn [content] + (fn [& children] @to-response-height - [animated-view (merge (drag/pan-handlers pan-responder) - {:style (st/response-view (if (or @commands-input-is-switching? @response-resize?) - response-height - (or @cur-response-height 0)))}) - content])}))) + (into [animated-view {:style (st/response-view (if (or @commands-input-is-switching? @response-resize?) + response-height + (or @cur-response-height 0)))}] + children))}))) (defn response-view [] - [view {:style st/container - :onLayout (fn [event] - (let [height (.. event -nativeEvent -layout -height)] - (dispatch [:set-response-max-height height])))} - [inner-container - [view - [request-info] - [response-suggestions-view] - [view st/input-placeholder]]]]) + [container + [request-info] + [response-suggestions-view] + [view st/input-placeholder]]) diff --git a/src/status_im/new_group/screen.cljs b/src/status_im/new_group/screen.cljs index 97da481782..9e81f77b89 100644 --- a/src/status_im/new_group/screen.cljs +++ b/src/status_im/new_group/screen.cljs @@ -33,7 +33,7 @@ (defview group-name-input [] [group-name [:get :new-chat-name] validation-messages [:new-chat-name-validation-messages]] - [view nil + [view [text-input {:underlineColorAndroid color-purple :style st/group-name-input