From 6f95b37db13b801e453b88f3fd5602263b357e34 Mon Sep 17 00:00:00 2001 From: virvar Date: Thu, 14 Apr 2016 16:13:01 +0300 Subject: [PATCH] Start chat design --- images/icon_back.png | Bin 0 -> 225 bytes images/icon_dollar.png | Bin 0 -> 314 bytes images/icon_list.png | Bin 0 -> 122 bytes images/icon_lock_gray.png | Bin 0 -> 262 bytes images/icon_lock_white.png | Bin 0 -> 209 bytes images/icon_ok_small.png | Bin 0 -> 234 bytes images/icon_smile.png | Bin 0 -> 704 bytes src/syng_im/android/core.cljs | 5 +- src/syng_im/components/chat.cljs | 6 +- src/syng_im/components/chat/chat_message.cljs | 125 +++++++++--------- src/syng_im/components/chats/chats_list.cljs | 4 +- src/syng_im/models/commands.cljs | 12 +- src/syng_im/resources.cljs | 8 ++ 13 files changed, 91 insertions(+), 69 deletions(-) create mode 100644 images/icon_back.png create mode 100644 images/icon_dollar.png create mode 100644 images/icon_list.png create mode 100644 images/icon_lock_gray.png create mode 100644 images/icon_lock_white.png create mode 100644 images/icon_ok_small.png create mode 100644 images/icon_smile.png diff --git a/images/icon_back.png b/images/icon_back.png new file mode 100644 index 0000000000000000000000000000000000000000..70e85f3fc44191cc06d91632b388c2e4709a86f0 GIT binary patch literal 225 zcmeAS@N?(olHy`uVBq!ia0vp^96-#+!3HFS!eXZZDaPU;cPEB*=VV?2IkP=o977}| zlT!{bg@o|9?*I4Swz;#jP@H?0O~j;!*XtJS__n{Eho|QR*Mmv_CATyhh3}NSA@h)H zgXg`S#s5qr81+0SyzKd*;>Z=T@9%$GPLIQHStPk9H885Nwf+B}D3fC%EUp}Fcj73I z!}NOAD*hDJO-_gUT2>x=8c|`y>|8~e@YCB}b!&)$T!9-Su YGi|XUYehE;0iDU<>FVdQ&MBb@08cwpD*ylh literal 0 HcmV?d00001 diff --git a/images/icon_dollar.png b/images/icon_dollar.png new file mode 100644 index 0000000000000000000000000000000000000000..be7735955eb949d8d675cd5070653588e5217299 GIT binary patch literal 314 zcmV-A0mc4_P)Px#^hrcPR45fq&b^L7K@`AoWJ!nzxU_EK2}GfyK!wU1Y%LmvN<{AgG+S;q5s5~k zP$)?hqVQ3uRV`;chL!?%c|3>|mBhy|I< zQA{8QzHoqxPdt%R{?P3B6FuFRU+9=qoG{bP7w5YIk44ofy`glX(f`n0UH4hG>W; z=e(P{Y3jrO_4;f{jLMJA)RM09DVFwBFf+Y)dFzo(e#!ryJq-?gj7uC8wG|kgqJ@)9 Tt1_d3`WZZ3{an^LB{Ts5pz9k44ofy`glX(f`9Po5;4ABrx zPH|xR?H@Dc=jZR`;)mUHphoepghAWnp>zv8? zW#H>$;JMtw8kyf`H4eP&+ooD-+moGVet8XJ)7hN2E79(PJC#Y*lF2Yc>dz$eooCc zNv2CjT-GE_P@52?Vt?SwLI2B+%qNt8$Tm)3t(KArami?6)n;H{k44ofy`glX(f`bbGouhG>ZH z4RGXZP~dUCw~+r*`zIEAm5V&PYf@SYUCKLZCWzQXM*{qYY4L+G%>vVj7c0yIDGjGx!_Kgg)1=Tjhe30Hz8BiE^ zn59=H^Thn@j=U}V_gcyQmqt77`lb(ZyT_s@esXEAuX`njxg HN@xNA^RrEF literal 0 HcmV?d00001 diff --git a/images/icon_ok_small.png b/images/icon_ok_small.png new file mode 100644 index 0000000000000000000000000000000000000000..86047df5f3b28b5f1e2f31344f8bb76e38cc27a2 GIT binary patch literal 234 zcmVPx#q)9|UR2Ug!WWWJ-A3fW`$nYMaC1LKAN|NrO1 z6u4L!ZvolF!otWD_?O||{{R0O?Ef?Tw?|h1Qp5-%_8&W|^7lVbAp@fr$O@PVAUPCp k;>2yf{UPx%dPzhRn2NsK@>h`5+h2~h3G=ig@Py%T<8-h2(GMM< zicoLTg-MWrK7avf>qZdt1#~4*yKz&YQo)67QMAb&zwfpa(il@p9hf=io}Vvg&d)?; z$Z9s5yOx&MuBzHGD{>AdN7Q1eeo?V+RCVr9JT{w3rPc=Bbx=^QJRG;8zF2#FP}lzr z$4{b~FXl6|{c__z@cX9Z*L-W`8NpPgZH&1Y)mY---pD>~@{}RM_lW!id}d0O+7x{q zPA@`&iP$_8ztxy*A?rPYW8e(?DFG&@8#inaOhX=1HGVOlzD=7DFuW!sBbeyr;;qbU zDz{o?zjncjeF3|eiJ0+1Ha(*(z}MwpA9)2tmM-Sfjje$C_2p{aL!@=)^zi=Or?uqQ zlOn-W=B$v*oaHsk)!KdJG6Pwyn9JPT46s=jUcXv@2a5b^(x45l&;faP;&MhX6eb?h zel+ldI{IKgrkM?7%vhE4{4h59l9Y>);aCmnx~O*!(>Y&aDayXWXxJ8>=dJcUx4|?T zjrg}8-4zDW>z{4-k2H-!yNG@A`_ITR&=0LvD>A>Z)JD{&MtZ8wqazZ`;ks{^=8HzH zyd@WC=Mrf$ne3ukcgT-g$mN79qVpw|Q6u3jS{qz*BZLN>Luo4i2Gk1L={fcE!M;wO zScb0#n-cAChT}v97e;A9#jpoEpjs {:view-id :chat-list}) + [navigator {:initial-route (clj->js {:view-id + ;:chat-list + :chat + }) :render-scene (fn [route nav] (log/debug "route" route) (when true ;; nav/*nav-render* diff --git a/src/syng_im/components/chat.cljs b/src/syng_im/components/chat.cljs index 6ae060535a..3dfe8893fc 100644 --- a/src/syng_im/components/chat.cljs +++ b/src/syng_im/components/chat.cljs @@ -39,16 +39,16 @@ contacts (:contacts @chat) contact-by-identity (contacts-by-identity contacts)] [view {:style {:flex 1 - :backgroundColor "#eef2f5"}} + :backgroundColor "#EBF0F4"}} (when android? ;; TODO add IOS version - [toolbar-android {:logo res/logo-icon + [toolbar-android {:logo res/logo-icon ;; todo contact/chat avatar :title (or (@chat :name) "Chat name") :titleColor "#4A5258" :subtitle "Last seen just now" :subtitleColor "#AAB2B2" - :navIcon res/nav-back-icon + :navIcon res/icon-back :style {:backgroundColor "white" :height 56 :elevation 2} diff --git a/src/syng_im/components/chat/chat_message.cljs b/src/syng_im/components/chat/chat_message.cljs index 46ab93eb1a..b6a68a6d9b 100644 --- a/src/syng_im/components/chat/chat_message.cljs +++ b/src/syng_im/components/chat/chat_message.cljs @@ -66,23 +66,26 @@ (defn message-content-command [content] - (let [;; command-msg-atom (subscribe [:parse-command-msg-content content]) - commands-atom (subscribe [:get-commands])] + (let [commands-atom (subscribe [:get-commands])] (fn [content] - (let [;; {:keys [command content]} @command-msg-atom - commands @commands-atom + (let [commands @commands-atom {:keys [command content]} (parse-command-msg-content commands content)] [view {:style {:flexDirection "column"}} - [view {:style {:marginTop -5 - :marginLeft 0 - :backgroundColor (:color command) - :borderRadius 10}} - [text {:style {:marginTop 0 - :marginHorizontal 10 - :fontSize 14 - :fontFamily "Avenir-Roman" - :color "white"}} - (:text command)]] + [view {:style {:flexDirection "row" + :marginRight 32}} + [view {:style {:backgroundColor (:color command) + :height 24 + :borderRadius 50 + :paddingTop 2 + :paddingHorizontal 12}} + [text {:style {:fontSize 12 + :fontFamily "Avenir-Roman" + :color "white"}} + (:text command)]]] + [image {:source (:icon command) + :style {:position "absolute" + :top 4 + :right 0}}] [text {:style {:marginTop 5 :marginHorizontal 0 :fontSize 14 @@ -97,21 +100,17 @@ (dispatch [:set-response-chat-command msg-id (:command command)])) (defn message-content-command-request [msg-id content outgoing text-color background-color] - (let [;; command-request-atom (subscribe [:parse-command-request-msg-content content]) - commands-atom (subscribe [:get-commands])] + (let [commands-atom (subscribe [:get-commands])] (fn [msg-id content outgoing text-color background-color] - (let [;; {:keys [command content]} @command-request-atom - commands @commands-atom + (let [commands @commands-atom {:keys [command content]} (parse-command-request-msg-content commands content)] [touchable-highlight {:onPress (fn [] (set-chat-command msg-id command))} - [view {} - [view {:style (merge {:marginTop 15 - :borderRadius 6 - :paddingVertical 12 - :paddingHorizontal 16} + [view {:style {:paddingRight 16}} + [view {:style (merge {:borderRadius 7 + :padding 12} (if outgoing - {:backgroundColor "#D3EEEF"} + {:backgroundColor "white"} {:backgroundColor background-color}))} [text {:style (merge {:fontSize 14 :fontFamily "Avenir-Roman"} @@ -120,30 +119,30 @@ {:color text-color}))} content]] [view {:style {:position "absolute" - :top 0 - :left 20 - :width 30 - :height 30 + :top 12 + :right 0 + :width 32 + :height 32 :borderRadius 50 :backgroundColor (:color command)}} - [image {:source res/att - :style {:width 17 - :height 14 - :position "absolute" - :top 8 - :left 6}}]]]])))) + [image {:source (:request-icon command) + :style {:position "absolute" + :top 9 + :left 10}}]] + [text {:style {:marginTop 2 + :fontFamily "Avenir-Roman" + :fontSize 12 + :color "#AAB2B2" + :opacity 0.8 }} + (str (:request-text command))]]])))) (defn message-content [{:keys [msg-id content-type content outgoing text-color background-color]}] (if (= content-type content-type-command-request) [message-content-command-request msg-id content outgoing text-color background-color] - [view {:style (merge {:borderRadius 6} - (if (= content-type text-content-type) - {:paddingVertical 12 - :paddingHorizontal 16} - {:paddingVertical 14 - :paddingHorizontal 10}) + [view {:style (merge {:borderRadius 7 + :padding 12} (if outgoing - {:backgroundColor "#D3EEEF"} + {:backgroundColor "white"} {:backgroundColor background-color}))} (cond (= content-type text-content-type) @@ -168,7 +167,7 @@ :style {:marginTop 6 :opacity 0.6}}] [text {:style {:fontFamily "Avenir-Roman" - :fontSize 11 + :fontSize 12 :color "#AAB2B2" :opacity 0.8 :marginLeft 5}} @@ -178,31 +177,35 @@ :failed "Failed")]]) (defn message-body [{:keys [msg-id content content-type outgoing delivery-status text-color background-color]}] - [view {:style (merge {:flexDirection "column" - :width 260 - :marginVertical 5} - (if outgoing - {:alignSelf "flex-end" - :alignItems "flex-end"} - {:alignSelf "flex-start" - :alignItems "flex-start"}))} - [message-content {:msg-id msg-id - :content-type content-type - :content content - :outgoing outgoing - :text-color text-color - :background-color background-color}] - (when (and outgoing delivery-status) - [message-delivery-status {:delivery-status delivery-status}])]) + (let [delivery-status :seen] + [view {:style (merge {:flexDirection "column" + :width 260 + :paddingTop 5 + :paddingRight 8 + :paddingBottom 5 + :paddingLeft 8} + (if outgoing + {:alignSelf "flex-end" + :alignItems "flex-end"} + {:alignSelf "flex-start" + :alignItems "flex-start"}))} + [message-content {:msg-id msg-id + :content-type content-type + :content content + :outgoing outgoing + :text-color text-color + :background-color background-color}] + (when (and outgoing delivery-status) + [message-delivery-status {:delivery-status delivery-status}])])) (defn chat-message [{:keys [msg-id content content-type outgoing delivery-status date new-day text-color background-color] :as msg}] - [view {:paddingHorizontal 15} + [view {} (when new-day [message-date {:date date}]) [message-body {:msg-id msg-id :content content :content-type content-type :outgoing outgoing - :text-color text-color - :background-color background-color + :text-color "black" ;text-color + :background-color "white" ;background-color :delivery-status (keyword delivery-status)}]]) diff --git a/src/syng_im/components/chats/chats_list.cljs b/src/syng_im/components/chats/chats_list.cljs index 6947c87742..86bf7b430c 100644 --- a/src/syng_im/components/chats/chats_list.cljs +++ b/src/syng_im/components/chats/chats_list.cljs @@ -30,11 +30,11 @@ (when android? ;; TODO add IOS version [toolbar-android {:logo res/logo-icon - :title "Your Chats" + :title "Chats" :titleColor "#4A5258" :subtitle "List of your recent chats" :subtitleColor "#AAB2B2" - :navIcon res/nav-back-icon + :navIcon res/icon-list :style {:backgroundColor "white" :height 56 :elevation 2} diff --git a/src/syng_im/models/commands.cljs b/src/syng_im/models/commands.cljs index 5705401728..259c378cd1 100644 --- a/src/syng_im/models/commands.cljs +++ b/src/syng_im/models/commands.cljs @@ -4,6 +4,7 @@ [cljs.core.async :as async :refer [chan put! !]] [re-frame.core :refer [subscribe dispatch dispatch-sync]] [syng-im.db :as db] + [syng-im.resources :as res] [syng-im.models.chat :refer [current-chat-id]] [syng-im.utils.utils :refer [log toast]] [syng-im.utils.logging :as log] @@ -14,6 +15,8 @@ :text "!money" :description "Send money" :color "#48ba30" + :request-icon res/icon-lock-white + :icon res/icon-lock-gray :suggestion true} {:command :location :text "!location" @@ -28,7 +31,10 @@ {:command :confirmation-code :text "!confirmationCode" :description "Send confirmation code" - :color "#019af0" + :request-text "Confirmation code request" + :color "#6581E7" + :request-icon res/icon-lock-white + :icon res/icon-lock-gray :suggestion true} {:command :send :text "!send" @@ -43,7 +49,9 @@ {:command :keypair-password :text "!keypairPassword" :description "" - :color "#019af0" + :color "#6581E7" + :request-icon res/icon-lock-white + :icon res/icon-lock-gray :suggestion false} {:command :help :text "!help" diff --git a/src/syng_im/resources.cljs b/src/syng_im/resources.cljs index 52a956d3f6..9a6b5e274d 100644 --- a/src/syng_im/resources.cljs +++ b/src/syng_im/resources.cljs @@ -13,3 +13,11 @@ (def smile (js/require "./images/smile.png")) (def att (js/require "./images/att.png")) (def v (js/require "./images/v.png")) + +(def icon-back (js/require "./images/icon_back.png")) +(def icon-dollar (js/require "./images/icon_dollar.png")) +(def icon-list (js/require "./images/icon_list.png")) +(def icon-lock-gray (js/require "./images/icon_lock_gray.png")) +(def icon-lock-white (js/require "./images/icon_lock_white.png")) +(def icon-ok-small (js/require "./images/icon_ok_small.png")) +(def icon-smile (js/require "./images/icon_smile.png"))