commands input

Former-commit-id: e6414c7101

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

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

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

src/status_im/chat/styles/input.cljs

@@ -21,8 +21,8 @@
   {:flexDirection   :column
    :marginTop       16
    :marginBottom    16
-   :marginLeft      16
+   :marginLeft      0
-   :marginRight     0
+   :marginRight     8
    :backgroundColor color
    :height          24
    :borderRadius    50})

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

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
+      (reaction
-                      (seq @suggestions) c/suggestions-header-height
+        (let [type (:type @command)]
-                      :else 0)))))
+          (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))))))

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}

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

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)
+      (if (= :response (:type @command))
-                   {:style (st/request-info (:color @command))})
+        [view (merge (drag/pan-handlers pan-responder)
-       [drag-icon]
+                     {:style (st/request-info (:color @command))})
-       [view st/inner-container
+         [drag-icon]
-        [command-icon nil]
+         [view st/inner-container
-        [info-container @command]
+          [command-icon nil]
-        [touchable-highlight {:on-press #(dispatch [:start-cancel-command])}
+          [info-container @command]
-         [view st/cancel-container
+          [touchable-highlight {:on-press #(dispatch [:start-cancel-command])}
-          [icon :close-white st/cancel-icon]]]]])))
+           [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]

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})
+              {:style ddst/drag-down-touchable})
-       [icon :drag_down st/drag-down-icon]])))
+       [icon :drag_down ddst/drag-down-icon]])))
 
 (defn container-animation-logic [{:keys [to-value val]}]
   (let [to-value @to-value]