Suggestions style. Add close commands button.

Former-commit-id: 6f5dade40f

src/syng_im/components/chat/content_suggestions.cljs

@@ -5,7 +5,7 @@
             [reagent.core :as r]
             [re-frame.core :refer [subscribe dispatch dispatch-sync]]
             [syng-im.components.react :refer [view
-                                              image
+                                              icon
                                               text
                                               touchable-highlight
                                               list-view
@@ -22,9 +22,7 @@
   [touchable-highlight {:onPress (fn []
                                    (set-command-content (:value suggestion)))
                         :underlay-color :transparent}
-   [view (merge st/suggestion-container
+   [view st/suggestion-container
-                (when (= (:description suggestion) "Number format 12")
-                  {:backgroundColor "blue"}))
     [view st/suggestion-sub-container
      [text {:style st/value-text}
       (:value suggestion)]
@@ -45,8 +43,8 @@
                                                    ;; TODO hide suggestions?
                                                    )
                                  :underlay-color :transparent}
-            [image {:source {:uri "icon_drag_down"}
+            [view nil
-                    :style  st/drag-down-icon}]]
+             [icon :drag_down st/drag-down-icon]]]
            [view (st/suggestions-container (count suggestions))
             [list-view {:dataSource (to-datasource suggestions)
                         :renderRow  render-row}]]])))))

src/syng_im/components/chat/input/input_styles.cljs

@@ -7,14 +7,6 @@
                                                chat-background
                                                color-black]]))
 
-(def money-input
-  {:flex       1
-   :marginLeft 8
-   :lineHeight 42
-   :fontSize   32
-   :fontFamily font
-   :color      :black})
-
 (def command-input-and-suggestions-container
   {:flexDirection :column})
 

src/syng_im/components/chat/input/money.cljs

@@ -6,5 +6,4 @@
 
 (defn money-input-view [command]
   [simple-command-input-view command
-   {:keyboardType :numeric
+   {:keyboardType :numeric}])
-    :style        st/money-input}])

src/syng_im/components/chat/input/simple_command.cljs

@@ -1,7 +1,6 @@
 (ns syng-im.components.chat.input.simple-command
   (:require [re-frame.core :refer [subscribe dispatch dispatch-sync]]
             [syng-im.components.react :refer [view
-                                              image
                                               icon
                                               text
                                               text-input
@@ -47,5 +46,4 @@
              [view st/send-container [icon :send st/send-icon]]]
             [touchable-highlight {:on-press cancel-command-input}
              [view st/cancel-container
-              [image {:source res/icon-close-gray
+              [icon :close-gray st/cancel-icon]]])]]))))
-                      :style  st/cancel-icon}]]])]]))))

src/syng_im/components/chat/plain_message_input.cljs

@@ -18,25 +18,39 @@
       (dispatch [:send-group-chat-msg chat-id input-message])
       (dispatch [:send-chat-msg]))))
 
+(defn message-valid? [staged-commands message]
+  (or (and (pos? (count message))
+           (not= "!" message))
+      (pos? (count staged-commands))))
+
+(defn try-send [chat staged-commands message]
+  (when (message-valid? staged-commands message)
+    (send chat message)))
+
 (defn plain-message-input-view []
   (let [chat                 (subscribe [:get-current-chat])
         input-message-atom   (subscribe [:get-chat-input-text])
-        staged-commands-atom (subscribe [:get-chat-staged-commands])]
+        staged-commands-atom (subscribe [:get-chat-staged-commands])
+        typing-command?      (subscribe [:typing-command?])]
     (fn []
       (let [input-message @input-message-atom]
         [view st/input-container
          [suggestions-view]
          [view st/input-view
-          [touchable-highlight {:on-press #(dispatch [:switch-command-suggestions])}
+          [touchable-highlight {:on-press #(dispatch [:switch-command-suggestions])
-           [view nil [icon :list st/list-icon]]]
+                                :style    st/switch-commands-touchable}
+           [view nil
+            (if @typing-command?
+              [icon :close-gray st/close-icon]
+              [icon :list st/list-icon])]]
           [text-input {:style           st/message-input
                        :autoFocus       (pos? (count @staged-commands-atom))
                        :onChangeText    set-input-message
-                       :onSubmitEditing #(send @chat input-message)}
+                       :onSubmitEditing #(try-send @chat @staged-commands-atom
+                                                   input-message)}
            input-message]
           [icon :smile st/smile-icon]
-          (when (or (pos? (count input-message))
+          (when (message-valid? @staged-commands-atom input-message)
-                    (pos? (count @staged-commands-atom)))
             [touchable-highlight {:on-press #(send @chat input-message)}
              [view st/send-container
               [icon :send st/send-icon]]])]]))))

src/syng_im/components/chat/plain_message_input_styles.cljs

@@ -12,17 +12,22 @@
    :height          56
    :backgroundColor color-white})
 
+(def switch-commands-touchable
+  {:width          56
+   :height         56
+   :alignItems     :center
+   :justifyContent :center})
+
 (def list-icon
-  {:marginTop    22
+  {:width  13
-   :marginRight  6
+   :height 12})
-   :marginBottom 6
+
-   :marginLeft   21
+(def close-icon
-   :width        13
+  {:width  12
    :height 12})
 
 (def message-input
   {:flex       1
-   :marginLeft 16
    :marginTop  -2
    :padding    0
    :fontSize   14

src/syng_im/components/chat/suggestions.cljs

@@ -4,6 +4,7 @@
   (:require [re-frame.core :refer [subscribe dispatch]]
             [syng-im.components.react :refer [view
                                               text
+                                              icon
                                               touchable-highlight
                                               list-view
                                               list-item]]
@@ -16,12 +17,15 @@
 (defn suggestion-list-item [suggestion]
   [touchable-highlight
    {:onPress #(set-command-input (keyword (:command suggestion)))}
-   [view st/suggestion-item-container
+   [view st/suggestion-container
+    [view st/suggestion-sub-container
      [view (st/suggestion-background suggestion)
       [text {:style st/suggestion-text}
        (:text suggestion)]]
-    [text {:style st/suggestion-description}
+     [text {:style st/value-text}
-     (:description suggestion)]]])
+      (:text suggestion)]
+     [text {:style st/description-text}
+      (:description suggestion)]]]])
 
 (defn render-row [row _ _]
   (list-item [suggestion-list-item (js->clj row :keywordize-keys true)]))
@@ -31,8 +35,14 @@
     (fn []
       (let [suggestions @suggestions-atom]
         (when (seq suggestions)
-          [view (st/suggestions-container suggestions)
+          [view nil
+           [touchable-highlight {:style   st/drag-down-touchable
+                                 :onPress (fn []
+                                            ;; TODO hide suggestions?
+                                            )}
+            [view nil
+             [icon :drag_down st/drag-down-icon]]]
+           [view (st/suggestions-container (count suggestions))
             [list-view {:dataSource (to-datasource suggestions)
                         :enableEmptySections true
-                       :renderRow  render-row
+                        :renderRow  render-row}]]])))))
-                       :style      {}}]])))))

src/syng_im/components/chat/suggestions_styles.cljs

@@ -1,44 +1,69 @@
 (ns syng-im.components.chat.suggestions-styles
-  (:require [syng-im.components.styles :refer [font color-white]]))
+  (:require [syng-im.components.styles :refer [font
+                                               color-light-blue-transparent
+                                               color-white
+                                               color-black
+                                               color-blue
+                                               color-blue-transparent
+                                               selected-message-color
+                                               online-color
+                                               separator-color
+                                               text1-color
+                                               text2-color
+                                               text3-color]]))
 
-(def suggestion-item-container
+(def suggestion-height 88)
-  {:flexDirection    :row
+
-   :marginVertical   1
+(def suggestion-container
-   :marginHorizontal 0
+  {:flexDirection   :column
-   :height           40
+   :paddingLeft     16
    :backgroundColor color-white})
 
+(def suggestion-sub-container
+  {:height            suggestion-height
+   :borderBottomWidth 1
+   :borderBottomColor separator-color})
+
 (defn suggestion-background
   [{:keys [color]}]
-  {:flexDirection   :column
+  {:alignSelf       :flex-start
-   :position        :absolute
+   :marginTop       10
-   :top             10
+   :height          24
-   :left            60
    :backgroundColor color
-   :borderRadius    10})
+   :borderRadius    50})
 
 (def suggestion-text
-  {:marginTop        -2
+  {:marginTop        2.5
-   :marginHorizontal 10
+   :marginHorizontal 12
-   :fontSize         14
+   :fontSize         12
    :fontFamily       font
    :color            color-white})
 
-(def suggestion-description
+(def value-text
-  {:flex       1
+  {:marginTop  6
-   :position   :absolute
-   :top        7
-   :left       190
-   :lineHeight 18
    :fontSize   14
    :fontFamily font
-   :color      :black})
+   :color      text1-color})
 
-(defn suggestions-container
+(def description-text
-  [suggestions]
+  {:marginTop  2
+   :fontSize   12
+   :fontFamily font
+   :color      text2-color})
+
+(defn suggestions-container [suggestions-count]
   {:flexDirection    :row
    :marginVertical   1
    :marginHorizontal 0
-   :height           (min 105 (* 42 (count suggestions)))
+   :height           (min 168 (* suggestion-height suggestions-count))
    :backgroundColor  color-white
    :borderRadius     5})
+
+(def drag-down-touchable
+  {:height         22
+   :alignItems     :center
+   :justifyContent :center})
+
+(def drag-down-icon
+  {:width  16
+   :height 16})

src/syng_im/handlers/suggestions.cljs

@@ -65,6 +65,9 @@
                                (get-commands db))]
       suggestion)))
 
-(defn switch-command-suggestions [db]
+(defn typing-command? [db]
   (let [text (get-chat-input-text db)]
-    (set-chat-input-text db (if (suggestion? text) nil "!"))))
+    (suggestion? text)))
+
+(defn switch-command-suggestions [db]
+  (set-chat-input-text db (if (typing-command? db) nil "!")))

src/syng_im/subs.cljs

@@ -18,7 +18,8 @@
                                              get-chat-command-content
                                              get-chat-command-request
                                              parse-command-request]]
-            [syng-im.handlers.suggestions :refer [get-suggestions]]
+            [syng-im.handlers.suggestions :refer [get-suggestions
+                                                  typing-command?]]
             [syng-im.handlers.content-suggestions :refer [get-content-suggestions]]))
 
 ;; -- Chat --------------------------------------------------------------
@@ -40,6 +41,10 @@
                           (reaction))]
       (reaction (get-suggestions @db @input-text)))))
 
+(register-sub :typing-command?
+  (fn [db _]
+    (reaction (typing-command? @db))))
+
 (register-sub :get-content-suggestions
   (fn [db _]
     (let [command (reaction (get-chat-command @db))