commands button

src/status_im/chat/styles/plain_message.cljs

@@ -9,11 +9,24 @@
    :justifyContent :center})
 
 (defn message-input-button [scale]
-  {:transform [{:scale scale}]})
+  {:transform [{:scale scale}]
+   :width 24
+   :height 24
+   :alignItems     :center
+   :justifyContent :center})
 
 (def list-icon
-  {:width  13
+  {:width  16
-   :height 12})
+   :height 16})
+
+(def requests-icon
+  {:background-color :#7099e6
+   :width            8
+   :height           8
+   :border-radius    8
+   :left 0
+   :top 0
+   :position :absolute})
 
 (def close-icon
   {:width  12

src/status_im/chat/views/plain_message.cljs

@@ -5,6 +5,7 @@
             [status-im.components.react :refer [view
                                                 animated-view
                                                 icon
+                                                text
                                                 touchable-highlight]]
             [status-im.components.animation :as anim]
             [status-im.chat.styles.plain-message :as st]
@@ -30,22 +31,24 @@
 (defn list-container [min]
   (fn [{:keys [command? width]}]
     (let [n-width (if @command? min 56)
-          delay   (if @command? 100 0)]
+          delay (if @command? 100 0)]
       (anim/start (anim/timing width {:toValue  n-width
                                       :duration response-input-hiding-duration
                                       :delay    delay})
                   #(dispatch [:set :disable-input false])))))
 
 (defn commands-button []
-  (let [command?        (subscribe [:command?])
+  (let [command? (subscribe [:command?])
-        buttons-scale   (anim/create-value (if @command? 1 0))
+        requests (subscribe [:get-requests])
+        suggestions (subscribe [:get-suggestions])
+        buttons-scale (anim/create-value (if @command? 1 0))
         container-width (anim/create-value (if @command? 20 56))
-        context         {:command? command?
+        context {:command? command?
-                         :val      buttons-scale
+                 :val      buttons-scale
-                         :width    container-width}
+                 :width    container-width}
-        on-update       (fn [_]
+        on-update (fn [_]
-                          ((button-animation-logic context))
+                    ((button-animation-logic context))
-                          ((list-container 20) context))]
+                    ((list-container 20) context))]
     (r/create-class
       {:component-did-mount
        on-update
@@ -58,7 +61,12 @@
           [animated-view {:style (st/message-input-button-touchable
                                    container-width)}
            [animated-view {:style (st/message-input-button buttons-scale)}
-            [icon :list st/list-icon]]]])})))
+            (if (seq @suggestions)
+              [icon :close_gray st/close-icon]
+              [icon :input_list st/list-icon])
+            (when (and (seq @requests)
+                       (not (seq @suggestions)))
+              [view st/requests-icon])]]])})))
 
 (defn smile-animation-logic [{:keys [command? val width]}]
   (fn [_]
@@ -71,13 +79,13 @@
                       (anim/set-value width 0.1)))))))
 
 (defn smile-button []
-  (let [command?        (subscribe [:command?])
+  (let [command? (subscribe [:command?])
-        buttons-scale   (anim/create-value (if @command? 1 0))
+        buttons-scale (anim/create-value (if @command? 1 0))
         container-width (anim/create-value (if @command? 0.1 56))
-        context         {:command? command?
+        context {:command? command?
-                         :val      buttons-scale
+                 :val      buttons-scale
-                         :width    container-width}
+                 :width    container-width}
-        on-update       (smile-animation-logic context)]
+        on-update (smile-animation-logic context)]
     (r/create-class
       {:component-did-mount
        on-update