From 6f5dade40fa03ee6557d8ae3e396843bbe08fee4 Mon Sep 17 00:00:00 2001 From: virvar Date: Tue, 10 May 2016 16:12:45 +0300 Subject: [PATCH] Suggestions style. Add close commands button. --- .../res/drawable-hdpi/icon_close_gray.png | Bin 0 -> 347 bytes .../res/drawable-mdpi/icon_close_gray.png | Bin 0 -> 274 bytes .../res/drawable-xhdpi/icon_close_gray.png | Bin 0 -> 444 bytes .../res/drawable-xxhdpi/icon_close_gray.png | Bin 0 -> 624 bytes .../res/drawable-xxxhdpi/icon_close_gray.png | Bin 0 -> 892 bytes .../components/chat/content_suggestions.cljs | 10 +-- .../chat/content_suggestions_styles.cljs | 4 +- .../components/chat/input/input_styles.cljs | 8 -- src/syng_im/components/chat/input/money.cljs | 3 +- .../components/chat/input/simple_command.cljs | 4 +- .../components/chat/plain_message_input.cljs | 26 ++++-- .../chat/plain_message_input_styles.cljs | 19 +++-- src/syng_im/components/chat/suggestions.cljs | 32 +++++--- .../components/chat/suggestions_styles.cljs | 75 ++++++++++++------ src/syng_im/handlers/suggestions.cljs | 7 +- src/syng_im/subs.cljs | 7 +- 16 files changed, 122 insertions(+), 73 deletions(-) create mode 100644 android/app/src/main/res/drawable-hdpi/icon_close_gray.png create mode 100644 android/app/src/main/res/drawable-mdpi/icon_close_gray.png create mode 100644 android/app/src/main/res/drawable-xhdpi/icon_close_gray.png create mode 100644 android/app/src/main/res/drawable-xxhdpi/icon_close_gray.png create mode 100644 android/app/src/main/res/drawable-xxxhdpi/icon_close_gray.png 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 0000000000000000000000000000000000000000..4342d2e4f00d4c020d637c738842f72c738882c8 GIT binary patch literal 347 zcmV-h0i^zkP)Px$6-h)vR5%f}lsyuHFc5{a4A<}q+{MBRFm_te$_z4M2@TpgUctL~p>YP)Px#%t=H+R45gVku46wKoEszwkaX&xd2E`0fzvOtHEK=1cw1j@SLKjsO>(7<2{Mnx+msc)+hp@723VdP+lnUJ$EQk?;pL8qW{p_Oq(xXN;mbPU!9jA<^sV5BuBf^qDVrM?r`c4;Y@Iq%O2SYwxE6*Mql Y-|X|O9pyIW`2YX_07*qoM6N<$g1J_5!TPx$c1c7*R7efAmN8PpKnz8tHKc`WP;moJK#?wmF8~8wI!GCqNs*x;Gh84A9R(-g z2HXT{#u58>M;?>x#Naig3 zeO&OB3viMP5<1@yz0H@aNnbu;cR;Is=DTCiKz_`XbDgQtM-q9)x-)1Z^xj`1ozQt z&2EYN$7QONNdqAAS$ceEXQ+IJp##(Ka6hOrA1RZjv<=>B071^g0!KV1`CqT>9>6u1 zy=G*2imX8j9)SngKCkC0;A+$s%Q!=E z%yk)mh3lF#@k2It8=;3GaG1o+-#xT&_+yg4G!x6Px%DoI2^R9Fek*gZ?bKo|$`yNl?SFCleN94sz6b+bjJehd|hRh-009JNx=Z{Q{< z4#usMZaV4c<{&r-83c<>ynov(*EDJFB>``_8cKLMZd{bZptHj_T}tT9 z(!%UXsZ{#KvAjyF)tY#Ge%%X6Smk5*A!Uuj-K~3ibb7u*g20mpri6Izd-%kL878*bbnd7#E&`UaO_ z&cuPxmL*C7LttT;z?d_6qSP?NgN5POgbAD%N)-bGEZos6I)SRcK9igS5LhM&`sXuJ zndTY-WrZ@uVEhq~Ey@Oy2r@<4V#b1WQRpA{IzYQ9{C1?il45U}NPt@PtkF06ZbF+V zDj4)l1)-A)3jLCbDhBaNAapcE>0q=#CMaEuHb@6$fi3Mx~WSbC4 zZE_5OY!U$?7t>q=kZA%L5#2V)*#(&dMh8#Y*Ue4w72@IP2$nFtVd9vG2(910db_W$^#2h2fz)B6KRl_guONHN?10000< KMNUMnLSTZ(Ul}F< literal 0 HcmV?d00001 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 0000000000000000000000000000000000000000..07b1e5d3dae2f04b85987e2ccb5a1b0aa527254e GIT binary patch literal 892 zcmV-?1B3jDP)Px&Hc3Q5RA>d&nmun5F&M`mI~{nDK*~bD12gaq$_OI}MixW|6qN;)iHe0PVklx^ z1d%l({RYsP?~o}Hl?n{xjQ>uZ+~w|KKj-Ii#Y4~W+w=R~*}hA2iq6x);rmCVvU^0T zPs*HJq04UvgC|p8-{o;Q{Mi3Rzh971w}{M?j2`drJ^KtMg+H$kkG|N72gomzn)J5l z{>$gP-N znPu15ZES9G5hPgfmKp3CTP1cIyC0o)DZzrr=3<$_?zT~Yvj-5|ol;^i1iF$)fd_Lz zVAB$*@Zh!EXfffYg_~FGn#lgrSAY~p34fA+N0gEP3ON#n%yq5=;L)e<4hx1w3Oo&z zrqH6J&2Y|=BK1>m(cREvhlhuFK2~Ku0FORv1<*iJLK;3wKuV$w_-KJtiMHTb0$u`( zFJ}JwHGzKIKB0AlF?|ZI0pHLcIcF0R=*JP}z+-H-06K9b&_0y>)#Acq+(rWEC?$~s zpClk5kqVzIkRl-gFCx%HLJA(SE1!i>!AV)xGo1El+oVrbjK+)D4|Xv8aGSE(am-ff z`{0PHK)ScHKY02*U(U@Z2{eWGkP;G&1ybRqBpL}w!AnT67cp*Nv2z|%#7z@VT61*k z$F3tcc1@eQV%8Pl+nGqfgZ1*8Lc0URaAt`v|AkO$A_rDBu>qz2Bz*5xH)6$B&(tb?s9PmQ?{ zNFAsSFs3{uwi8GhAOzgnjkEK2Fclj 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))