From a1556ee3357c7dc05450791e33780ec62aecb36b Mon Sep 17 00:00:00 2001 From: Roman Volosovskyi Date: Wed, 29 Jun 2016 16:30:59 +0300 Subject: [PATCH] command suggestions design --- src/status_im/chat/handlers.cljs | 2 - src/status_im/chat/handlers/animation.cljs | 9 ++-- src/status_im/chat/styles/suggestions.cljs | 16 ++++--- src/status_im/chat/views/suggestions.cljs | 53 ++++++++++++++-------- src/status_im/utils/handlers.cljs | 2 +- 5 files changed, 48 insertions(+), 34 deletions(-) diff --git a/src/status_im/chat/handlers.cljs b/src/status_im/chat/handlers.cljs index 26f7683ac1..ae8f747d2b 100644 --- a/src/status_im/chat/handlers.cljs +++ b/src/status_im/chat/handlers.cljs @@ -113,7 +113,6 @@ content) command-info {:command command :content content'}] (-> db - ;(assoc-in [:chats current-chat-id :command-input :command] nil) (commands/stage-command command-info) (assoc :staged-command command-info))))) @@ -138,7 +137,6 @@ (defn update-text [{:keys [current-chat-id] :as db} [_ text]] (let [suggestions (get-in db [:command-suggestions current-chat-id])] - (println :hui (count suggestions) text :bla) (if-not (= 1 (count suggestions)) (update-input-text db text) db))) diff --git a/src/status_im/chat/handlers/animation.cljs b/src/status_im/chat/handlers/animation.cljs index 4ae299dc71..9a98c088f0 100644 --- a/src/status_im/chat/handlers/animation.cljs +++ b/src/status_im/chat/handlers/animation.cljs @@ -30,8 +30,10 @@ (fn [{:keys [current-chat-id] :as db} _] (let [suggestions? (seq (get-in db [:command-suggestions current-chat-id])) current (get-in db [:animations :command-suggestions-height]) - height (if suggestions? middle-height 0.1) - changed? (if (and suggestions? (not= 0.1 current)) + height (if suggestions? middle-height 10) + changed? (if (and suggestions? + (not (nil? current)) + (not= 10 current)) identity inc)] (-> db (update :animations assoc :command-suggestions-height height) @@ -43,7 +45,7 @@ type (get-in db path)] (if (= :response type) minimum-suggestion-height - 0.1))) + 10))) (register-handler :animate-show-response [(after #(dispatch [:command-edit-mode]))] @@ -52,7 +54,6 @@ height (if suggestions? middle-height (get-minimum-height db))] - (println "hei" suggestions? ) (assoc-in db [:animations :to-response-height] height)))) (defn fix-height diff --git a/src/status_im/chat/styles/suggestions.cljs b/src/status_im/chat/styles/suggestions.cljs index 2e97d206b1..15ae5a1b9a 100644 --- a/src/status_im/chat/styles/suggestions.cljs +++ b/src/status_im/chat/styles/suggestions.cljs @@ -12,22 +12,23 @@ text2-color text3-color]])) -(def suggestion-height 88) +(def suggestion-height 60) + +(def suggestion-highlight + {:margin-left 57}) (def suggestion-container - {:flexDirection :column - :paddingLeft 16 - :backgroundColor color-white}) + {:backgroundColor color-white}) (def suggestion-sub-container {:height suggestion-height :borderBottomWidth 1 - :borderBottomColor separator-color}) + :borderBottomColor separator-color + :flex-direction :row}) (defn suggestion-background [{:keys [color]}] - {:alignSelf :flex-start - :marginTop 10 + {:marginTop 10 :height 24 :backgroundColor color :borderRadius 50}) @@ -55,6 +56,7 @@ {:flexDirection :row :marginVertical 1 :marginHorizontal 0 + :flex 1 :height (min 168 (* suggestion-height suggestions-count)) :backgroundColor color-white :borderRadius 5}) diff --git a/src/status_im/chat/views/suggestions.cljs b/src/status_im/chat/views/suggestions.cljs index 6004eb56ac..53f7f68b5c 100644 --- a/src/status_im/chat/views/suggestions.cljs +++ b/src/status_im/chat/views/suggestions.cljs @@ -2,6 +2,7 @@ (:require-macros [status-im.utils.views :refer [defview]]) (:require [re-frame.core :refer [subscribe dispatch]] [status-im.components.react :refer [view + scroll-view text icon touchable-highlight @@ -15,7 +16,8 @@ [status-im.components.animation :as anim] [status-im.components.drag-drop :as drag] [status-im.components.react :as react] - [status-im.chat.suggestions-responder :as resp])) + [status-im.chat.suggestions-responder :as resp] + [status-im.chat.constants :as c])) (defn set-command-input [command] (dispatch [:set-chat-command command])) @@ -26,29 +28,39 @@ :as suggestion}]] (let [label (str "!" name)] [touchable-highlight - {:onPress #(set-command-input command)} + {:onPress #(set-command-input command) + :style st/suggestion-highlight} [view st/suggestion-container [view st/suggestion-sub-container - [view (st/suggestion-background suggestion) - [text {:style st/suggestion-text} label]] - [text {:style st/value-text} label] - [text {:style st/description-text} description]]]])) + [view {:flex 0.6} + [text {:style st/value-text} label] + [text {:style st/description-text} description]] + [view {:flex 0.4 + :flex-direction :column + :align-items :flex-end + :margin-right 16} + [view (st/suggestion-background suggestion) + [text {:style st/suggestion-text} label]]]]]])) (defn render-row [row _ _] (list-item [suggestion-list-item row])) +(defn title [s] + [view {:margin-left 57 + :margin-bottom 16} + [text {:style {:font-size 13 + :color :#8f838c93}} s]]) -(defn suggestions-view [] - (let - [suggestions (subscribe [:get-suggestions])] - (r/create-class - {:reagent-render - (fn [] - [view (st/suggestions-container (count @suggestions)) - [list-view {:dataSource (to-datasource @suggestions) - :enableEmptySections true - :keyboardShouldPersistTaps true - :renderRow render-row}]])}))) +(defview suggestions-view [] + [suggestions [:get-suggestions] + requests [:get :chat-requests]] + [scroll-view + (when requests [title "Requests"]) + [title "Commands"] + [view (st/suggestions-container (count suggestions)) + [list-view {:dataSource (to-datasource suggestions) + :keyboardShouldPersistTaps true + :renderRow render-row}]]]) (defn header [h] (let [orientation (subscribe [:get :orientation]) @@ -64,7 +76,7 @@ [icon :drag_down ddst/drag-down-icon]]))) (defn container-animation-logic [{:keys [to-value val]}] - (let [to-value @to-value] + (when-let [to-value @to-value] (anim/start (anim/spring val {:toValue to-value})))) (defn container [h & elements] @@ -86,7 +98,8 @@ (into [animated-view {:style (st/container h)}] elements))}))) (defn suggestion-container [] - (let [h (anim/create-value 0)] + (let [h (anim/create-value 10)] [container h [header h] - [suggestions-view]])) + [suggestions-view] + [view {:height c/input-height}]])) diff --git a/src/status_im/utils/handlers.cljs b/src/status_im/utils/handlers.cljs index 083196375e..4d2777e335 100644 --- a/src/status_im/utils/handlers.cljs +++ b/src/status_im/utils/handlers.cljs @@ -11,4 +11,4 @@ (defn register-handler ([name handler] (register-handler name nil handler)) ([name middleware handler] - (re-core/register-handler name [#_debug middleware] handler))) + (re-core/register-handler name [debug middleware] handler)))