diff --git a/android/app/src/main/res/drawable-hdpi/icon_drag_down.png b/android/app/src/main/res/drawable-hdpi/icon_drag_down.png new file mode 100644 index 0000000000..7d0dfec989 Binary files /dev/null and b/android/app/src/main/res/drawable-hdpi/icon_drag_down.png differ diff --git a/android/app/src/main/res/drawable-mdpi/icon_drag_down.png b/android/app/src/main/res/drawable-mdpi/icon_drag_down.png new file mode 100644 index 0000000000..88182afaf3 Binary files /dev/null and b/android/app/src/main/res/drawable-mdpi/icon_drag_down.png differ diff --git a/android/app/src/main/res/drawable-xhdpi/icon_drag_down.png b/android/app/src/main/res/drawable-xhdpi/icon_drag_down.png new file mode 100644 index 0000000000..ca0f2b6f4e Binary files /dev/null and b/android/app/src/main/res/drawable-xhdpi/icon_drag_down.png differ diff --git a/android/app/src/main/res/drawable-xxhdpi/icon_drag_down.png b/android/app/src/main/res/drawable-xxhdpi/icon_drag_down.png new file mode 100644 index 0000000000..7e7a4912bc Binary files /dev/null and b/android/app/src/main/res/drawable-xxhdpi/icon_drag_down.png differ diff --git a/android/app/src/main/res/drawable-xxxhdpi/icon_drag_down.png b/android/app/src/main/res/drawable-xxxhdpi/icon_drag_down.png new file mode 100644 index 0000000000..0fe8e31411 Binary files /dev/null and b/android/app/src/main/res/drawable-xxxhdpi/icon_drag_down.png differ diff --git a/src/syng_im/components/chat/content_suggestions.cljs b/src/syng_im/components/chat/content_suggestions.cljs new file mode 100644 index 0000000000..ce74fde464 --- /dev/null +++ b/src/syng_im/components/chat/content_suggestions.cljs @@ -0,0 +1,52 @@ +(ns syng-im.components.chat.content-suggestions + (:require-macros + [natal-shell.core :refer [with-error-view]]) + (:require [clojure.string :as cstr] + [reagent.core :as r] + [re-frame.core :refer [subscribe dispatch dispatch-sync]] + [syng-im.components.react :refer [view + image + text + touchable-highlight + list-view + list-item]] + [syng-im.components.chat.content-suggestions-styles :as st] + [syng-im.utils.listview :refer [to-datasource]] + [syng-im.utils.utils :refer [log toast http-post]] + [syng-im.utils.logging :as log])) + +(defn set-command-content [content] + (dispatch [:set-chat-command-content content])) + +(defn suggestion-list-item [suggestion] + [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-sub-container + [text {:style st/value-text} + (:value suggestion)] + [text {:style st/description-text} + (:description suggestion)]]]]) + +(defn render-row [row section-id row-id] + (list-item [suggestion-list-item (js->clj row :keywordize-keys true)])) + +(defn content-suggestions-view [] + (let [suggestions-atom (subscribe [:get-content-suggestions])] + (fn [] + (let [suggestions @suggestions-atom] + (when (seq suggestions) + [view nil + [touchable-highlight {:style st/drag-down-touchable + :onPress (fn [] + ;; TODO hide suggestions? + ) + :underlay-color :transparent} + [image {:source {:uri "icon_drag_down"} + :style 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 new file mode 100644 index 0000000000..a2da470caf --- /dev/null +++ b/src/syng_im/components/chat/content_suggestions_styles.cljs @@ -0,0 +1,54 @@ +(ns syng-im.components.chat.content-suggestions-styles + (: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-height 56) + +(def suggestion-container + {:flexDirection :column + :paddingLeft 16 + :backgroundColor color-white}) + +(def suggestion-sub-container + {:height suggestion-height + :borderBottomWidth 1 + :borderBottomColor separator-color}) + +(def value-text + {:marginTop 9 + :fontSize 14 + :fontFamily font + :color text1-color}) + +(def description-text + {:marginTop 1.5 + :fontSize 14 + :fontFamily font + :color text2-color}) + +(defn suggestions-container [suggestions-count] + {:flexDirection :row + :marginVertical 1 + :marginHorizontal 0 + :height (min 150 (* 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/components/chat/input/simple_command.cljs b/src/syng_im/components/chat/input/simple_command.cljs index 82c95f31c1..23703867ee 100644 --- a/src/syng_im/components/chat/input/simple_command.cljs +++ b/src/syng_im/components/chat/input/simple_command.cljs @@ -6,6 +6,7 @@ text text-input touchable-highlight]] + [syng-im.components.chat.content-suggestions :refer [content-suggestions-view]] [syng-im.components.styles :refer [font color-white color-blue @@ -37,65 +38,67 @@ (fn [command input-options & {:keys [validator]}] (let [chat-id @chat-id-atom message @message-atom] - [view {:style {:flexDirection "row" - :height 56 - :backgroundColor color-white - :elevation 4}} - [view {:style {:flexDirection "column" - :marginTop 16 - :marginBottom 16 - :marginLeft 16 - :marginRight 0 - :backgroundColor (:color command) - :height 24 - :borderRadius 50}} - [text {:style {:marginTop 3 - :marginHorizontal 12 - :fontSize 12 - :fontFamily font - :color color-white}} - (:text command)]] - [text-input (merge {:underlineColorAndroid "transparent" - :style {:flex 1 - :marginLeft 8 - :marginTop 7 - :fontSize 14 - :fontFamily font - :color text1-color} - :autoFocus true - :placeholder "Type" - :placeholderTextColor text2-color - :onChangeText (fn [new-text] - (set-input-message new-text)) - :onSubmitEditing (fn [e] - (when (valid? message validator) - (send-command chat-id command message)))} - input-options) - message] - (if (valid? message validator) - [touchable-highlight {:on-press (fn [] - (send-command chat-id command message)) - :underlay-color :transparent} - [view {:style {:marginTop 10 - :marginRight 10 - :width 36 - :height 36 - :borderRadius 50 - :backgroundColor color-blue}} - [image {:source {:uri "icon_send"} - :style {:marginTop 10.5 - :marginLeft 12 - :width 15 - :height 15}}]]] - [touchable-highlight {:on-press (fn [] - (cancel-command-input)) - :underlay-color :transparent} - [view {:style {:marginTop 10 - :marginRight 10 - :width 36 - :height 36}} - [image {:source res/icon-close-gray - :style {:marginTop 10.5 - :marginLeft 12 - :width 12 - :height 12}}]]])])))) + [view {:style {:flexDirection "column"}} + [content-suggestions-view] + [view {:style {:flexDirection "row" + :height 56 + :backgroundColor color-white + :elevation 4}} + [view {:style {:flexDirection "column" + :marginTop 16 + :marginBottom 16 + :marginLeft 16 + :marginRight 0 + :backgroundColor (:color command) + :height 24 + :borderRadius 50}} + [text {:style {:marginTop 3 + :marginHorizontal 12 + :fontSize 12 + :fontFamily font + :color color-white}} + (:text command)]] + [text-input (merge {:underlineColorAndroid "transparent" + :style {:flex 1 + :marginLeft 8 + :marginTop 7 + :fontSize 14 + :fontFamily font + :color text1-color} + :autoFocus true + :placeholder "Type" + :placeholderTextColor text2-color + :onChangeText (fn [new-text] + (set-input-message new-text)) + :onSubmitEditing (fn [e] + (when (valid? message validator) + (send-command chat-id command message)))} + input-options) + message] + (if (valid? message validator) + [touchable-highlight {:on-press (fn [] + (send-command chat-id command message)) + :underlay-color :transparent} + [view {:style {:marginTop 10 + :marginRight 10 + :width 36 + :height 36 + :borderRadius 50 + :backgroundColor color-blue}} + [image {:source {:uri "icon_send"} + :style {:marginTop 10.5 + :marginLeft 12 + :width 15 + :height 15}}]]] + [touchable-highlight {:on-press (fn [] + (cancel-command-input)) + :underlay-color :transparent} + [view {:style {:marginTop 10 + :marginRight 10 + :width 36 + :height 36}} + [image {:source res/icon-close-gray + :style {:marginTop 10.5 + :marginLeft 12 + :width 12 + :height 12}}]]])]])))) diff --git a/src/syng_im/components/drawer_styles.cljs b/src/syng_im/components/drawer_styles.cljs index 0896732490..b6ee3c0808 100644 --- a/src/syng_im/components/drawer_styles.cljs +++ b/src/syng_im/components/drawer_styles.cljs @@ -62,15 +62,3 @@ :fontFamily font :lineHeight 21 :color text3-color}) - - -(comment drawer-menu [navigator] - [view {:style st/drawer-menu} - - [view {:style } - [touchable-opacity {:onPress (fn [] - (close-drawer) - ;; TODO not implemented - )} - [text {:style } - "Switch users"]]]]) diff --git a/src/syng_im/handlers/content_suggestions.cljs b/src/syng_im/handlers/content_suggestions.cljs new file mode 100644 index 0000000000..8906558ff2 --- /dev/null +++ b/src/syng_im/handlers/content_suggestions.cljs @@ -0,0 +1,22 @@ +(ns syng-im.handlers.content-suggestions + (:require [re-frame.core :refer [subscribe dispatch dispatch-sync]] + [syng-im.db :as db] + [syng-im.utils.logging :as log] + [clojure.string :as s])) + +(def suggestions + {:phone [{:value "89171111111" + :description "Number format 1"} + {:value "+79171111111" + :description "Number format 2"} + {:value "9171111111" + :description "Number format 3"}]}) + +(defn get-content-suggestions [db command text] + (or (when command + (when-let [command-suggestions ((:command command) suggestions)] + (filterv (fn [s] + (and (.startsWith (:value s) (or text "")) + (not= (:value s) text))) + command-suggestions))) + [])) diff --git a/src/syng_im/subs.cljs b/src/syng_im/subs.cljs index 302f84b3a1..6aa80ee279 100644 --- a/src/syng_im/subs.cljs +++ b/src/syng_im/subs.cljs @@ -19,7 +19,8 @@ get-chat-command-request parse-command-msg-content parse-command-request-msg-content]] - [syng-im.handlers.suggestions :refer [get-suggestions]])) + [syng-im.handlers.suggestions :refer [get-suggestions]] + [syng-im.handlers.content-suggestions :refer [get-content-suggestions]])) ;; -- Chat -------------------------------------------------------------- @@ -43,6 +44,12 @@ (reaction))] (reaction (get-suggestions @db @input-text))))) +(register-sub :get-content-suggestions + (fn [db _] + (let [command (reaction (get-chat-command @db)) + text (reaction (get-chat-command-content @db))] + (reaction (get-content-suggestions @db @command @text))))) + (register-sub :get-commands (fn [db _] (reaction (get-commands @db))))