command suggestions design

Former-commit-id: a1556ee335

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)))

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)
+          height (if suggestions? middle-height 10)
-          changed? (if (and suggestions? (not= 0.1 current))
+          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

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
+  {:backgroundColor color-white})
-   :paddingLeft     16
-   :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})

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)
+       [view {:flex 0.6}
-        [text {:style st/suggestion-text} label]]
+        [text {:style st/value-text} label]
-       [text {:style st/value-text} label]
+        [text {:style st/description-text} description]]
-       [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 []
+(defview suggestions-view []
-  (let
+  [suggestions [:get-suggestions]
-    [suggestions (subscribe [:get-suggestions])]
+   requests [:get :chat-requests]]
-    (r/create-class
+  [scroll-view
-      {:reagent-render
+   (when requests [title "Requests"])
-       (fn []
+   [title "Commands"]
-         [view (st/suggestions-container (count @suggestions))
+   [view (st/suggestions-container (count suggestions))
-          [list-view {:dataSource                (to-datasource @suggestions)
+    [list-view {:dataSource                (to-datasource suggestions)
-                      :enableEmptySections       true
+                :keyboardShouldPersistTaps true
-                      :keyboardShouldPersistTaps true
+                :renderRow                 render-row}]]])
-                      :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}]]))

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)))