diff --git a/android/app/src/main/res/drawable-hdpi/icon_close_gray.png b/android/app/src/main/res/drawable-hdpi/icon_close_gray.png new file mode 100644 index 0000000000..4342d2e4f0 Binary files /dev/null and b/android/app/src/main/res/drawable-hdpi/icon_close_gray.png differ diff --git a/android/app/src/main/res/drawable-mdpi/icon_close_gray.png b/android/app/src/main/res/drawable-mdpi/icon_close_gray.png new file mode 100644 index 0000000000..c0cca73335 Binary files /dev/null and b/android/app/src/main/res/drawable-mdpi/icon_close_gray.png differ diff --git a/android/app/src/main/res/drawable-xhdpi/icon_close_gray.png b/android/app/src/main/res/drawable-xhdpi/icon_close_gray.png new file mode 100644 index 0000000000..1eea738abe Binary files /dev/null and b/android/app/src/main/res/drawable-xhdpi/icon_close_gray.png differ diff --git a/android/app/src/main/res/drawable-xxhdpi/icon_close_gray.png b/android/app/src/main/res/drawable-xxhdpi/icon_close_gray.png new file mode 100644 index 0000000000..c1f1c5f300 Binary files /dev/null and b/android/app/src/main/res/drawable-xxhdpi/icon_close_gray.png differ diff --git a/android/app/src/main/res/drawable-xxxhdpi/icon_close_gray.png b/android/app/src/main/res/drawable-xxxhdpi/icon_close_gray.png new file mode 100644 index 0000000000..07b1e5d3da Binary files /dev/null and b/android/app/src/main/res/drawable-xxxhdpi/icon_close_gray.png differ diff --git a/src/syng_im/components/chat/content_suggestions.cljs b/src/syng_im/components/chat/content_suggestions.cljs index ce74fde464..e79a88bc6f 100644 --- a/src/syng_im/components/chat/content_suggestions.cljs +++ b/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 - (when (= (:description suggestion) "Number format 12") - {:backgroundColor "blue"})) + [view st/suggestion-container [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"} - :style st/drag-down-icon}]] + [view nil + [icon :drag_down st/drag-down-icon]]] [view (st/suggestions-container (count suggestions)) [list-view {:dataSource (to-datasource suggestions) :renderRow render-row}]]]))))) diff --git a/src/syng_im/components/chat/content_suggestions_styles.cljs b/src/syng_im/components/chat/content_suggestions_styles.cljs index a2da470caf..c0169e8ea3 100644 --- a/src/syng_im/components/chat/content_suggestions_styles.cljs +++ b/src/syng_im/components/chat/content_suggestions_styles.cljs @@ -45,8 +45,8 @@ :borderRadius 5}) (def drag-down-touchable - {:height 22 - :alignItems :center + {:height 22 + :alignItems :center :justifyContent :center}) (def drag-down-icon diff --git a/src/syng_im/components/chat/input/input_styles.cljs b/src/syng_im/components/chat/input/input_styles.cljs index 7127145794..7079f4d101 100644 --- a/src/syng_im/components/chat/input/input_styles.cljs +++ b/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}) diff --git a/src/syng_im/components/chat/input/money.cljs b/src/syng_im/components/chat/input/money.cljs index be53c5dbc2..ac85a9fc9e 100644 --- a/src/syng_im/components/chat/input/money.cljs +++ b/src/syng_im/components/chat/input/money.cljs @@ -6,5 +6,4 @@ (defn money-input-view [command] [simple-command-input-view command - {:keyboardType :numeric - :style st/money-input}]) + {:keyboardType :numeric}]) diff --git a/src/syng_im/components/chat/input/simple_command.cljs b/src/syng_im/components/chat/input/simple_command.cljs index 29bebce112..31292f8df5 100644 --- a/src/syng_im/components/chat/input/simple_command.cljs +++ b/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 - :style st/cancel-icon}]]])]])))) + [icon :close-gray st/cancel-icon]]])]])))) diff --git a/src/syng_im/components/chat/plain_message_input.cljs b/src/syng_im/components/chat/plain_message_input.cljs index ad02302aa4..7931c21b85 100644 --- a/src/syng_im/components/chat/plain_message_input.cljs +++ b/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])} - [view nil [icon :list st/list-icon]]] + [touchable-highlight {:on-press #(dispatch [:switch-command-suggestions]) + :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)) - (pos? (count @staged-commands-atom))) + (when (message-valid? @staged-commands-atom input-message) [touchable-highlight {:on-press #(send @chat input-message)} [view st/send-container [icon :send st/send-icon]]])]])))) diff --git a/src/syng_im/components/chat/plain_message_input_styles.cljs b/src/syng_im/components/chat/plain_message_input_styles.cljs index 01b90f2bf8..8e31264837 100644 --- a/src/syng_im/components/chat/plain_message_input_styles.cljs +++ b/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 - :marginRight 6 - :marginBottom 6 - :marginLeft 21 - :width 13 - :height 12}) + {:width 13 + :height 12}) + +(def close-icon + {:width 12 + :height 12}) (def message-input {:flex 1 - :marginLeft 16 :marginTop -2 :padding 0 :fontSize 14 diff --git a/src/syng_im/components/chat/suggestions.cljs b/src/syng_im/components/chat/suggestions.cljs index b1bbd0d75e..cfef517fbe 100644 --- a/src/syng_im/components/chat/suggestions.cljs +++ b/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-background suggestion) - [text {:style st/suggestion-text} - (:text suggestion)]] - [text {:style st/suggestion-description} - (:description suggestion)]]]) + [view st/suggestion-container + [view st/suggestion-sub-container + [view (st/suggestion-background suggestion) + [text {:style st/suggestion-text} + (:text suggestion)]] + [text {:style st/value-text} + (: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) - [list-view {:dataSource (to-datasource suggestions) - :enableEmptySections true - :renderRow render-row - :style {}}]]))))) + [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}]]]))))) diff --git a/src/syng_im/components/chat/suggestions_styles.cljs b/src/syng_im/components/chat/suggestions_styles.cljs index 80ae964e68..1e3a1fb352 100644 --- a/src/syng_im/components/chat/suggestions_styles.cljs +++ b/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 - {:flexDirection :row - :marginVertical 1 - :marginHorizontal 0 - :height 40 - :backgroundColor color-white}) +(def suggestion-height 88) + +(def suggestion-container + {:flexDirection :column + :paddingLeft 16 + :backgroundColor color-white}) + +(def suggestion-sub-container + {:height suggestion-height + :borderBottomWidth 1 + :borderBottomColor separator-color}) (defn suggestion-background [{:keys [color]}] - {:flexDirection :column - :position :absolute - :top 10 - :left 60 + {:alignSelf :flex-start + :marginTop 10 + :height 24 :backgroundColor color - :borderRadius 10}) + :borderRadius 50}) (def suggestion-text - {:marginTop -2 - :marginHorizontal 10 - :fontSize 14 + {:marginTop 2.5 + :marginHorizontal 12 + :fontSize 12 :fontFamily font :color color-white}) -(def suggestion-description - {:flex 1 - :position :absolute - :top 7 - :left 190 - :lineHeight 18 +(def value-text + {:marginTop 6 :fontSize 14 :fontFamily font - :color :black}) + :color text1-color}) -(defn suggestions-container - [suggestions] +(def description-text + {: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}) diff --git a/src/syng_im/handlers/suggestions.cljs b/src/syng_im/handlers/suggestions.cljs index 046589e8bb..4b227940bb 100644 --- a/src/syng_im/handlers/suggestions.cljs +++ b/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 "!"))) diff --git a/src/syng_im/subs.cljs b/src/syng_im/subs.cljs index 749795ede3..15ce2cbcc4 100644 --- a/src/syng_im/subs.cljs +++ b/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))