From e6414c7101ccc6ece44a059e07e49e7d68f580c1 Mon Sep 17 00:00:00 2001 From: Roman Volosovskyi Date: Wed, 29 Jun 2016 09:27:21 +0300 Subject: [PATCH] commands input --- src/status_im/chat/handlers/animation.cljs | 20 ++++++++++++---- .../chat/styles/content_suggestions.cljs | 9 -------- src/status_im/chat/styles/dragdown.cljs | 12 ++++++++++ src/status_im/chat/styles/input.cljs | 4 ++-- src/status_im/chat/styles/suggestions.cljs | 10 -------- src/status_im/chat/subs.cljs | 10 +++++--- src/status_im/chat/views/command.cljs | 2 +- src/status_im/chat/views/message_input.cljs | 3 +++ src/status_im/chat/views/response.cljs | 23 +++++++++++-------- src/status_im/chat/views/suggestions.cljs | 5 ++-- 10 files changed, 57 insertions(+), 41 deletions(-) create mode 100644 src/status_im/chat/styles/dragdown.cljs diff --git a/src/status_im/chat/handlers/animation.cljs b/src/status_im/chat/handlers/animation.cljs index 76047831af..837991d98b 100644 --- a/src/status_im/chat/handlers/animation.cljs +++ b/src/status_im/chat/handlers/animation.cljs @@ -37,11 +37,21 @@ (update :animations assoc :command-suggestions-height height) (update-in [:animations :commands-height-changed] changed?))))) +(defn get-minimum-height + [{:keys [current-chat-id] :as db}] + (let [path [:chats current-chat-id :command-input :command :type] + type (get-in db path)] + (if (= :response type) + minimum-suggestion-height + minimum-command-suggestions-height))) + (register-handler :animate-show-response [(after #(dispatch [:command-edit-mode]))] (fn [{:keys [current-chat-id] :as db}] (let [suggestions? (seq (get-in db [:suggestions current-chat-id])) - height (if suggestions? middle-height minimum-suggestion-height)] + height (if suggestions? + middle-height + (get-minimum-height db))] (assoc-in db [:animations :to-response-height] height)))) (defn fix-height @@ -54,7 +64,7 @@ over-middle-position? (not under-middle-position?) suggestions (get-in db [suggestions-key current-chat-id]) new-fixed (cond (not suggestions) - minimum + (minimum db) (and under-middle-position? moving-up?) middle-height @@ -66,7 +76,7 @@ max-height (and under-middle-position? moving-down?) - minimum)] + (minimum db))] (-> db (assoc-in [:animations height-key] new-fixed) (update-in [:animations height-signal-key] inc))))) @@ -75,10 +85,10 @@ (fix-height :command-suggestions-height :commands-height-changed :command-suggestions - minimum-command-suggestions-height)) + (constantly minimum-command-suggestions-height))) (register-handler :fix-response-height (fix-height :to-response-height :response-height-changed :suggestions - minimum-suggestion-height)) + get-minimum-height)) diff --git a/src/status_im/chat/styles/content_suggestions.cljs b/src/status_im/chat/styles/content_suggestions.cljs index 99c64afc20..97c403bca7 100644 --- a/src/status_im/chat/styles/content_suggestions.cljs +++ b/src/status_im/chat/styles/content_suggestions.cljs @@ -45,12 +45,3 @@ (def container {:backgroundColor color-white}) - -(def drag-down-touchable - {:height 22 - :alignItems :center - :justifyContent :center}) - -(def drag-down-icon - {:width 16 - :height 16}) diff --git a/src/status_im/chat/styles/dragdown.cljs b/src/status_im/chat/styles/dragdown.cljs new file mode 100644 index 0000000000..7505021a6f --- /dev/null +++ b/src/status_im/chat/styles/dragdown.cljs @@ -0,0 +1,12 @@ +(ns status-im.chat.styles.dragdown + (:require [status-im.components.styles :refer [color-white]])) + +(def drag-down-touchable + {:height 22 + :background-color color-white + :alignItems :center + :justifyContent :center}) + +(def drag-down-icon + {:width 16 + :height 16}) diff --git a/src/status_im/chat/styles/input.cljs b/src/status_im/chat/styles/input.cljs index 53e02cb16e..50f6fbfba7 100644 --- a/src/status_im/chat/styles/input.cljs +++ b/src/status_im/chat/styles/input.cljs @@ -21,8 +21,8 @@ {:flexDirection :column :marginTop 16 :marginBottom 16 - :marginLeft 16 - :marginRight 0 + :marginLeft 0 + :marginRight 8 :backgroundColor color :height 24 :borderRadius 50}) diff --git a/src/status_im/chat/styles/suggestions.cljs b/src/status_im/chat/styles/suggestions.cljs index 2d1d89525f..2e97d206b1 100644 --- a/src/status_im/chat/styles/suggestions.cljs +++ b/src/status_im/chat/styles/suggestions.cljs @@ -68,13 +68,3 @@ :height height :backgroundColor color-white :elevation 2}) - -(def drag-down-touchable - {:height 22 - :background-color color-white - :alignItems :center - :justifyContent :center}) - -(def drag-down-icon - {:width 16 - :height 16}) diff --git a/src/status_im/chat/subs.cljs b/src/status_im/chat/subs.cljs index c5340917e0..5ca88dd550 100644 --- a/src/status_im/chat/subs.cljs +++ b/src/status_im/chat/subs.cljs @@ -121,8 +121,12 @@ (register-sub :messages-offset (fn [] (let [command? (subscribe [:command?]) + command (subscribe [:get-chat-command]) suggestions (subscribe [:get-suggestions])] ;; todo fix magic values - (reaction (cond @command? c/request-info-height - (seq @suggestions) c/suggestions-header-height - :else 0))))) + (reaction + (let [type (:type @command)] + (cond (and @command? (= type :response)) c/request-info-height + (and @command? (= type :command)) c/suggestions-header-height + (seq @suggestions) c/suggestions-header-height + :else 0)))))) diff --git a/src/status_im/chat/views/command.cljs b/src/status_im/chat/views/command.cljs index 21951d0bc7..c5f65f0130 100644 --- a/src/status_im/chat/views/command.cljs +++ b/src/status_im/chat/views/command.cljs @@ -29,7 +29,7 @@ (defn command-icon [command] [view (st/command-text-container command) - [text {:style st/command-text} (:text command)]]) + [text {:style st/command-text} (str "!" (:name command))]]) (defn cancel-button [] [touchable-highlight {:on-press cancel-command-input} diff --git a/src/status_im/chat/views/message_input.cljs b/src/status_im/chat/views/message_input.cljs index 1df66f9c3d..fcf0ce6492 100644 --- a/src/status_im/chat/views/message_input.cljs +++ b/src/status_im/chat/views/message_input.cljs @@ -47,12 +47,15 @@ (defview plain-message-input-view [{:keys [input-options validator]}] [command? [:command?] + {:keys [type] :as command} [:get-chat-command] input-command [:get-chat-command-content] valid-plain-message? [:valid-plain-message?] valid-command? [:valid-command? validator]] [view st/input-container [view st/input-view [plain-message/commands-button] + (when (and command? (= :command type)) + [command/command-icon command]) [message-input-container [message-input input-options validator]] ;; TODO emoticons: not implemented diff --git a/src/status_im/chat/views/response.cljs b/src/status_im/chat/views/response.cljs index b81763c9f6..eaad55d093 100644 --- a/src/status_im/chat/views/response.cljs +++ b/src/status_im/chat/views/response.cljs @@ -12,6 +12,7 @@ touchable-highlight]] [status-im.components.drag-drop :as drag] [status-im.chat.styles.response :as st] + [status-im.chat.styles.dragdown :as ddst] [status-im.components.animation :as anim] [status-im.chat.suggestions-responder :as resp])) @@ -41,15 +42,19 @@ :fix-response-height) command (subscribe [:get-chat-command])] (fn [response-height] - [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]]]]]))) + (if (= :response (:type @command)) + [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]]]]] + [view (merge (drag/pan-handlers pan-responder) + {:style ddst/drag-down-touchable}) + [icon :drag_down ddst/drag-down-icon]])))) (defn container-animation-logic [{:keys [to-value val]}] (let [to-value @to-value] diff --git a/src/status_im/chat/views/suggestions.cljs b/src/status_im/chat/views/suggestions.cljs index 38336670fc..6004eb56ac 100644 --- a/src/status_im/chat/views/suggestions.cljs +++ b/src/status_im/chat/views/suggestions.cljs @@ -10,6 +10,7 @@ animated-view]] [status-im.utils.listview :refer [to-datasource]] [status-im.chat.styles.suggestions :as st] + [status-im.chat.styles.dragdown :as ddst] [reagent.core :as r] [status-im.components.animation :as anim] [status-im.components.drag-drop :as drag] @@ -59,8 +60,8 @@ (fn [_] [view (merge (drag/pan-handlers pan-responder) - {:style st/drag-down-touchable}) - [icon :drag_down st/drag-down-icon]]))) + {:style ddst/drag-down-touchable}) + [icon :drag_down ddst/drag-down-icon]]))) (defn container-animation-logic [{:keys [to-value val]}] (let [to-value @to-value]