From 59e61265721a6a914b93f90ef19ea0ad75cd8fb3 Mon Sep 17 00:00:00 2001 From: virvar Date: Mon, 9 May 2016 15:29:08 +0300 Subject: [PATCH] Show suggestions as hint for phone number format Former-commit-id: 6eeaab5c2803eafb04e74b2a9df1872db94a7735 --- .../main/res/drawable-hdpi/icon_drag_down.png | Bin 0 -> 366 bytes .../main/res/drawable-mdpi/icon_drag_down.png | Bin 0 -> 242 bytes .../res/drawable-xhdpi/icon_drag_down.png | Bin 0 -> 500 bytes .../res/drawable-xxhdpi/icon_drag_down.png | Bin 0 -> 775 bytes .../res/drawable-xxxhdpi/icon_drag_down.png | Bin 0 -> 960 bytes .../components/chat/content_suggestions.cljs | 52 +++++++ .../chat/content_suggestions_styles.cljs | 54 ++++++++ .../components/chat/input/simple_command.cljs | 127 +++++++++--------- src/syng_im/components/drawer_styles.cljs | 12 -- src/syng_im/handlers/content_suggestions.cljs | 22 +++ src/syng_im/subs.cljs | 9 +- 11 files changed, 201 insertions(+), 75 deletions(-) create mode 100644 android/app/src/main/res/drawable-hdpi/icon_drag_down.png create mode 100644 android/app/src/main/res/drawable-mdpi/icon_drag_down.png create mode 100644 android/app/src/main/res/drawable-xhdpi/icon_drag_down.png create mode 100644 android/app/src/main/res/drawable-xxhdpi/icon_drag_down.png create mode 100644 android/app/src/main/res/drawable-xxxhdpi/icon_drag_down.png create mode 100644 src/syng_im/components/chat/content_suggestions.cljs create mode 100644 src/syng_im/components/chat/content_suggestions_styles.cljs create mode 100644 src/syng_im/handlers/content_suggestions.cljs 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 0000000000000000000000000000000000000000..7d0dfec989e2d7c3638f37a4221719e20238afd3 GIT binary patch literal 366 zcmV-!0g?WRP)Px$C`m*?R7eeD{0{^SGz3gEG#hO6s09Q=cr=IxK8RRAP5|Y#)f=}l+O1$l;0KTifmMn(p(1#jNIW4Lwq zKG?fAZ{K48VNMPX1}$|J23??KGEx#?IdtO5vlk4PfrehYd57Wqj~{U9TX*g;fXoyX z5oTZn6%|0huyxmdh6`7&!4)Ah1O@mRbT!q1mZ^hKnCyVBn1g(ZB~00QvcUFPCJJo&W#< M07*qoM6N<$g8E;IDF6Tf literal 0 HcmV?d00001 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 0000000000000000000000000000000000000000..88182afaf352679dbadc2f0a94f296a93f1b0ca6 GIT binary patch literal 242 zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61|;P_|4#%`jKx9jP7LeL$-D$|)_A%&hFAzD z|KVrh5n)i{`qH$uPwK#d158|*yE7m3_mm>Q~RhPg`g6 zn7_Z1eBo+HdO_)iMu`K54juaN_I7#O=jrR3HZsV|H}hRkuvK7d^mgzKZ}@R|xqm^k zW0gaL;55E_d;d3tD#ox+Xw2C#VF5z~S02NrL+<_#etQ|eT+`jKVcjyR3)xaUMMg8? p4reiJN^H5Yn6tC7@sR-o!>zL}KX~5w?gqM>!PC{xWt~$(696^eURnSE literal 0 HcmV?d00001 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 0000000000000000000000000000000000000000..ca0f2b6f4e7b51c1c6325dc3b2838a5fe4099997 GIT binary patch literal 500 zcmVPx$u1Q2eR9FdP{0{^S0|=M~&~C8RqYfAifzc2c4S~TI0<6z z{T7Couir4pNJ%j0YN|76sjD)uv$MgJkVXIe`HSJ&&D#u@uis>N^6UkJxTpw2c%Tmh z4>uRsJVsb$wD0gShGVDBp;*Gg!pxwmq{yJFrOu$DD9^yeL|lyh`}dFG&i#iBm#^Jq zxP9+F!=FEYQOvb6Gh%SEwE~O5Lx7oy8ATC@1JZc?)*UeB;^bt|)=&jIMoK~)LoG<) z*^8H8ORwIz&G7B}cdTkaf=ozu!9xHPRO`3xVz>)*Ikvb$Hcd!SfI&}7gFy!vG9YjT z=+jHrZZN!i{{dMU2Ah$QkwF<4l7U`s@Ti450H*rGr_V$i2-8D|Ms~0OA1{h>3`?|%i`M}#!w4lRm^yM2Em01DSpcGc z{QL^R qEHKqHphq1r8UmvsFd6~_9s&U7TCX|?{d1@Q0000Px%!AV3xRA>e5Slvz&K@>jQT2b19NP!rvwPoqHXng}OxWL4C;R|@>oloSQSH6HZ zl86a0z5zwrErs$UCO`>7TNIl{=S(wXw%w)MJ=-A3OtR_h&YYj`eCM3mt@f7}v8SW#jA@ynXi`exILPHsQ@gY@7pmoJ~VC67E{}<3X+7fYm~YJAPO_ z>QZ@YXb9fCeg)y-+ZSsV0Qof&J}fR>EZR*pO@oII?n7?Qfb8rHghC;^ZLXg+n@uRJ zZvfif+W8K>KG9!3U*NWd0ZR%60*)mi_HzT3?OniY@$(lj^b}*pfMg;L2+qwwCsBTd zIc=6V0YSJOojzIs=&1yZjzr<)wB|}58eT1!{ECFbfa!(IOikF=%l=`NM;g~;Ugd%=y0ADthNivSbNM z=9r3)GPAB*w<`d`C>Gx)D?UsIvs~$`_=FC-U+iRtp5$ql>Z2K;uD$@s#{aMaE|#$U z6=7?4ukU){?KnQoozA3Z;HJlR>=}RzM$`+oMY{t?-rGJ9FVAavf3LYO0AwSgUh=HH zp0Sf1$1poNbF2^t@k-)502z#U2@3{;@?&4;0|nr#rw+<`zdJYx{x6RefU9OgF`yVA zMnI(yF@R)o#Q-^kLV6O6XaSW+o zd>iHMAM7Y%S9>8yBxIh@p~IKHXsWF9@#yJP%k#Ojqxku`rS?acT9>bjnYlyhm;f^; zcXH6mDO^+ASpq9LPA%T@!cuvA^&1)v9bIcs z#uh8QKy-lx^DR~pafS@m3|5VE4P}f+Sr;@fC}Vuf)MdON)}fH`MXU zn0F^uovhD3FB`f3Zgk$)m0#3n%$U`7c5Uv5pEU*-u5&N$)M#mMe(<&GRH^mlUp4y} zX14061ZPIX#Wu(2vCF=l{@~e-(hhg0LtA&c)Js&(_c^%wqxm7eIu&IxzJne%OwE65 z51ILe>#bdLsJ*|~VD`**XBJ(p^7nU|vXu)bpLB6p7|@{ZKmXvrgN-W-Gmo}z3)>;Z ztt=V%!e!Z99ecCw0wq#uX~rLl)2|o3aws;osrw>eGcW1ute6C5)qHlFvmV0!e*2Td z^Zm_x7HJ82cz7!$>|Br~_2%t+XD&wd!tK|u?GH6!NmRyZ*l4#<^=;%NDVI{Mhv7>aVRC zIs4ANEpyheVA-DE^RTdDqWN6A>8b}Z0=*v?9-DCQr2gwa`dl^#!x(Q)VyOE#RnE5N zzMFk`wMw`P1AkLfh|u|mC20$DJ{{bif5ccd_2LJEV^ddL*#GuSq$%UE2PHmd&!$HP zO^S_L`ErKQu_<>?u5WJstMjv~CCmSGwpv5{oA5L zXNJVNtylCfuF__-@#+%)66oZ9>)bp2dnvznuKjAW>{dm|Bln2KL2ugx4=j#Jk=OqA zsP*CXFSUkG4jiAR%p#HUl;Td`d%*!JFe^ zKFl?~zDw1P-#b5r;dp?T+NJ%RUMB(%EfHOC#LU|vi`9cn&KL35J;`^fZnXh(Ap?V_ LtDnm{r-UW|BPP3p literal 0 HcmV?d00001 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))))