From ada19a9598845b964f514215ae9a19e3c963b5d1 Mon Sep 17 00:00:00 2001
From: virvar <revalka@gmail.com>
Date: Fri, 26 Feb 2016 16:18:46 +0300
Subject: [PATCH] Chat view design

Former-commit-id: 22cda3f0fb886df5635199785ae94bb386cc5580
---
 images/att.png                       | Bin 0 -> 651 bytes
 images/mic.png                       | Bin 0 -> 529 bytes
 images/play.png                      | Bin 0 -> 898 bytes
 images/smile.png                     | Bin 0 -> 584 bytes
 src/messenger/android/chat.cljs      | 124 +++++++++++++++++++++++----
 src/messenger/android/resources.cljs |   4 +
 6 files changed, 109 insertions(+), 19 deletions(-)
 create mode 100644 images/att.png
 create mode 100644 images/mic.png
 create mode 100644 images/play.png
 create mode 100644 images/smile.png

diff --git a/images/att.png b/images/att.png
new file mode 100644
index 0000000000000000000000000000000000000000..bafc26837d8ee48cd1539646bba84521877076e2
GIT binary patch
literal 651
zcmV;60(AX}P)<h;3K|Lk000e1NJLTq000sI000gM1^@s6BHB#100006VoOIv0RI60
z0RN!9r;`8x010qNS#tmY4c7nw4c7reD4Tcy000McNliru-~t*9G8T_YP5l4>0vJg|
zK~yNum6A<JR8bVif9K9~nxZl=gA7_{g(5@En`w-MzBkdzg|uiB;Us2Y3n7>YB&1a{
zV?nhkutm@!5Ngvv>KmR86$Ayfun%j|XyGP5=Dl~?C}}eW{Z@y24!?W&-z%)({Mf|a
z5J5Mh$AMa46BWn;=rk}afp;~VOnw89<#wvz_Mv(WFiS_Xz)Yoxb-<3LdPdb89z3xB
zwE(0Xw-<B(m;<i+qW5pd;~!arl<U^1r#TVYfp_%_b4_x=ads)@4Tx_7j%1Rt5rFQ|
z;?70Ot6wPyiTudMVv_*reBLTW))!HlRXJuUrU$S<`!h*<BsDs|2NOK<@ET39dJ`oW
z0y+TFZEarXSmBw7G>fp?0*(S0!yN!M`aqx&7zaN6WpY==j%))EW!3`O4mzK)?Wv3T
zS6j*~v;b4Nc+5sb*UG8Oaasas2YkhUE-A<T4!X4*wl+3Iqw}SLI}L0Gu1K|46EPal
zgy>lyqHtp{VfR{yPN1B$7X4Fck%ygy!X;6;3-niAM|Jtr_^LWk`ue30KvIr-8uT$R
z8TjSst=86`T_bL@hV+oCMyk2Q@XLriy=mJY{^X@9odtJT-~{l}7|vvD`z`;80Gulp
zYikz0C%{1<0A2v^D~Dw~n~2?8Q?w+j377pIRlN+<Rliq<a*24yKSj%=^LeWj-mp*5
l21Lv%jRc=_@wi(}^c(Kg)QrBzT^0ZU002ovPDHLkV1nX@8Os0w

literal 0
HcmV?d00001

diff --git a/images/mic.png b/images/mic.png
new file mode 100644
index 0000000000000000000000000000000000000000..9f5e8fc0a7d279ff73f43a1acb4cbd953739679c
GIT binary patch
literal 529
zcmV+s0`C2ZP)<h;3K|Lk000e1NJLTq000dD000vR1^@s6OE-s?00006VoOIv0RI60
z0RN!9r;`8x010qNS#tmY4c7nw4c7reD4Tcy000McNliru-~t*9F&o;}VuJtx0iH=j
zK~yNuy^^tOQ&AYjf8UoE1w{)@jUu8QM5>dMi-L&w2e=4YR9*@lg|vl^Zep?a?UjV6
z;8JvPDOka&qpN~a#V(b^mZ%l9@4n-p(HNiB$+O*a&-viq?`QO=IbInyF$t7`#ULhj
zC-tT7jCCJc)yi3n2R(CMroM4>&-C5(j^X?|;u62>U{TSDZo_*5d&yH~`~Ft?C;h)t
z)T)jg!^8W5n~mq2g<E4Irxod$W85?R>Sl%2$<aR00vilFC`fGkcBOV+LGEio>2?4&
zf@8b^hQ9A<A*ZvRdAew+9R`s3YgfiRaHv_0PnLEZm;oAqI#fw^zI>yxBGV}FshH`B
zd;0m7;FX!(Znl>P2WINAMZVwA@h=~v!Cgu1VQVbDV&a_4ru&lGssX$kkB><92-t~K
zGkji!Y>nVUm@WgSfIFq-4;7o63qOEenYdVvRJ@M30Br3ddI@o@l+<gvly|;1OVb1q
zBhHkP`eXa~#(X0Br)JwoF93?z)84|LF){)`*is0&80DG4v-^cKdfPuWo4f3<RJWQF
TiM{A)00000NkvXXu0mjf8lv=a

literal 0
HcmV?d00001

diff --git a/images/play.png b/images/play.png
new file mode 100644
index 0000000000000000000000000000000000000000..078b1e29c7e384a5aa181f39b271d3cefafcd85d
GIT binary patch
literal 898
zcmV-|1AY97P)<h;3K|Lk000e1NJLTq001EX001Ef1^@s6SLDKP00006VoOIv0RI60
z0RN!9r;`8x010qNS#tmY4c7nw4c7reD4Tcy000McNliru-~t*8GBjUh8k_(C0}n|=
zK~z}7&6r(G990y@f9LM7T^87q!ivRIgGp(M4^7&Tnix`JG%Y41Bn|LjOav?{70ZY3
zVtq3NtfZA-pcujvi7lWJ2_a2wH9q-dn&N||XiaIc%EErIyK{V?X+R;&F2ja@G7mFz
z=gx2LxpVISTp<PB?|AbVYFCL;fygtU`_|lEK)EBr^&~R>MEAf?PWzRu8q7C0=X$bZ
zjjGxVl;XVS+o)bjn8d)7UBk<1Lp<nctVZ=BP)xc~epjS9*fTJZ62z~aZ}<X>=2L|;
zxFw<Q;Yv>H!QS53mJkaquLacdjv?|QZcCZbEUJSa4~EuWHfvArHZ}Rl@_n@<0IQ$;
zk|dazYpcoL6vCUE7*e!?oz)4S$s5`bVxhgh4yYjm5~X&bz2Wq_IdQkC$?wfg%mPo5
zG3lL9Ko6C44n+;Xp1k;5nFRolr}IMQ41iG(wdI{u9yft}B-`%>$yosTtF`e3+vpAF
z1crU*FMu&brpAeUHx0?;HliZOP15Melm;=|zk2NP;jgMCzvDx)4jxWFD58}HDBsR_
zdW!ZFc>8_w8sEcH5KJe5m0Jc%)rH`C%Z}hZ^c>OeuMz&{OEea9$Uv!4C~|GWdn|kv
zFSEDp1FQojPP1r{0eo)%e4bzt{wl|L&u@T;+Yrh7_XtmnI&Hpe3Ct_xx{?E<5yF#K
ziQb$6+jcrJ=Pes%1)kmB+m+~#*NIGyVTb-nabacF5|x{Xo=SV@@BPX0l@a2<+)9t%
zaKi$ofR7wM6bYk|uxlC9R{2%{9<(>yPQ}EUKt38@S%ul2ZWVS9mOb(l`bkRki+{TT
zfI`n>Q?s&^^#w4O*`=J{mIC(hV~FDZ{xGU7nIupn@0N59Mc3K8!k)`xAfIK3p*Pqy
z@b!j9w_wS0PGNF~9o1ODT&QhRw=MnsaTAZ#p?Ym+V!(`A`nrscCO3ruDCiwo4DHoQ
zfzMs8Ir<(Za$fy!;j_DI(Op%Q|8IYywf?9W^9tzmK-r@*AqQ9n{s4Yf<p&j+PGx`M
YUrS^yas($rcK`qY07*qoM6N<$g0NSm4gdfE

literal 0
HcmV?d00001

diff --git a/images/smile.png b/images/smile.png
new file mode 100644
index 0000000000000000000000000000000000000000..e64022a14fcbbae4d6ea4932efb3326e5269ec8f
GIT binary patch
literal 584
zcmV-O0=NB%P)<h;3K|Lk000e1NJLTq000sI000sQ1^@s6R?d!B00006VoOIv0RI60
z0RN!9r;`8x010qNS#tmY4c7nw4c7reD4Tcy000McNliru-~t*9GXWKX`Fj8W0o6%F
zK~y-)rIgQ0R8bViKi@YmsR8@7keC)NTp1B9T9gtK&3h$<5lKlD_!ksyTqH?DI}4%~
zwR92DBB6u=$@iv$=5NS|5;wL9W)y<K9N%eCPIq3TjQHK1bI<v3?z!h&k&?Z*)WP1$
z6-<{Ahk#C?2AW6qij~ZS`rlU4d1```!qb>N0lHaVRnVA%=y6MsMZtB%L%^dg*)z%~
zhE*&ktR-0#oY@=%K-cIik2WlOJ&<Kb?F+D<&8v=aSYbTtk*y7-APZo3!RA{eK1Dot
zY#(v+&((~J%@ymmg3=veBn6pO5D%*mUj^nI{{<@+Js)%g%;_QLtaR!lrhydbfX#$?
zzz54Y{x0$#a<VvB20GY^JnyInEV5N4N!15^1?zI$pMdWhJbM<b*KySNwQa$N<PE6T
z>CvRZxVY{Z#)W>+v=blc?DVn+OaMQfS-)XX(9;r9?&}1Nr~31#u_6`)BZzwr><0<=
zF-@_!dyZX8IWm?98wGltxR)x#ga1H=C<T+iVEY@wXA+JnjF%d_CSg?e3<2Z7Y8#j-
zy!!Dq$ba9+-)0^JZh_7NJDsBy;2qKf6{499|Dz`0`;*%-byN5Eky)*hc;DO#()tZ=
WZkMl`>h>c50000<MNUMnLSTYOHU3lp

literal 0
HcmV?d00001

diff --git a/src/messenger/android/chat.cljs b/src/messenger/android/chat.cljs
index 54b718fc4b..0a1bbdd3f7 100644
--- a/src/messenger/android/chat.cljs
+++ b/src/messenger/android/chat.cljs
@@ -22,12 +22,13 @@
          [:message/by-id id])
   static om/IQuery
   (query [this]
-         '[:id :body :outgoing :delivery-status :date :new-day])
+         '[:id :type :body :outgoing :delivery-status :date :new-day])
   Object
   (render
    [this]
-   (let [{:keys [id body outgoing delivery-status date new-day]}
-         (om/props this)]
+   (let [{:keys [id body outgoing delivery-status date new-day] :as props}
+         (om/props this)
+         type (keyword (:type props))]
      (view {:paddingHorizontal 15}
            ;;; date
            (when new-day
@@ -41,23 +42,79 @@
                             :opacity 0.8}}
                    date))
            ;;; body
-           (view {:style (merge {:width 260
+           (view {:style (merge {:flexDirection "column"
+                                 :width 260
                                  :marginVertical 5}
                                 (if outgoing
-                                  {:alignSelf "flex-end"}
-                                  {:alignSelf "flex-start"}))}
-                 (view {:style (merge {:borderRadius 6
-                                       :paddingVertical 12
-                                       :paddingHorizontal 16}
+                                  {:alignSelf "flex-end"
+                                   :alignItems "flex-end"}
+                                  {:alignSelf "flex-start"
+                                   :alignItems "flex-start"}))}
+                 (view {:style (merge {:borderRadius 6}
+                                      (if (= type :text)
+                                        {:paddingVertical 12
+                                         :paddingHorizontal 16}
+                                        {:paddingVertical 14
+                                         :paddingHorizontal 10})
                                       (if outgoing
-                                        {:backgroundColor "#D3EEEF"
-                                         :alignSelf "flex-end"}
-                                        {:backgroundColor "#FBF6E3"
-                                         :alignSelf "flex-start"}))}
-                       (text {:style {:fontSize 14
-                                      :fontFamily "Avenir-Roman"
-                                      :color "#4A5258"}}
-                             body)))))))
+                                        {:backgroundColor "#D3EEEF"}
+                                        {:backgroundColor "#FBF6E3"}))}
+                       (if (= type :text)
+                         (text {:style {:fontSize 14
+                                        :fontFamily "Avenir-Roman"
+                                        :color "#4A5258"}}
+                               body)
+                         ;;; audio
+                         (view {:style {:flexDirection "row"
+                                        :alignItems "center"}}
+                               (view {:style {:width 33
+                                              :height 33
+                                              :borderRadius 50
+                                              :elevation 1}}
+                                     (image {:source res/play
+                                             :style {:width 33
+                                                     :height 33}}))
+                               (view {:style {:marginTop 10
+                                              :marginLeft 10
+                                              :width 120
+                                              :height 26
+                                              :elevation 1}}
+                                     (view {:style {:position "absolute"
+                                                    :top 4
+                                                    :width 120
+                                                    :height 2
+                                                    :backgroundColor "#EC7262"}})
+                                     (view {:style {:position "absolute"
+                                                    :left 0
+                                                    :top 0
+                                                    :width 2
+                                                    :height 10
+                                                    :backgroundColor "#4A5258"}})
+                                     (text {:style {:position "absolute"
+                                                    :left 1
+                                                    :top 11
+                                                    :fontFamily "Avenir-Roman"
+                                                    :fontSize 11
+                                                    :color "#4A5258"
+                                                    :letterSpacing 1
+                                                    :lineHeight 15}}
+                                           "03:39")))))
+                 ;;; delivery status
+                 (when (and outgoing delivery-status)
+                   (view {:style {:flexDirection "row"}}
+                         (image {:source (if (= (keyword delivery-status) :seen)
+                                           res/seen-icon
+                                           res/delivered-icon)
+                                 :style {:marginTop 5
+                                         :opacity 0.6}})
+                         (text {:style {:fontFamily "Avenir-Roman"
+                                        :fontSize 11
+                                        :color "#AAB2B2"
+                                        :opacity 0.8
+                                        :marginLeft 5}}
+                               (if (= (keyword delivery-status) :seen)
+                                 "Seen"
+                                 "Delivered")))))))))
 
 (def message (om/factory Message {:keyfn :id}))
 
@@ -66,6 +123,9 @@
 
 (defn generate-message [n]
   {:id n
+   :type (if (= (rem n 4) 3)
+           :audio
+           :text)
    :body (if (= (rem n 3) 0)
            (apply str n "." (repeat 5 " This is a text."))
            (str n ". This is a text."))
@@ -86,8 +146,34 @@
   Object
   (render
    [this]
-   (view {}
-         (text-input {}))))
+   (view {:style {:flexDirection "row"
+                  :margin 10
+                  :height 40
+                  :backgroundColor "#E5F5F6"
+                  :borderRadius 5}}
+         (image {:source res/mic
+                 :style {:marginTop 11
+                         :marginLeft 14
+                         :width 13
+                         :height 20}})
+         (text-input {:underlineColorAndroid "#9CBFC0"
+                      :style {:flex 1
+                              :marginLeft 18
+                              :lineHeight 42
+                              :fontSize 14
+                              :fontFamily "Avenir-Roman"
+                              :color "#9CBFC0"}}
+                     "Your message")
+         (image {:source res/smile
+                 :style {:marginTop 11
+                         :marginRight 12
+                         :width 18
+                         :height 18}})
+         (image {:source res/att
+                 :style {:marginTop 14
+                         :marginRight 16
+                         :width 17
+                         :height 14}}))))
 
 (def new-message (om/factory NewMessage))
 
diff --git a/src/messenger/android/resources.cljs b/src/messenger/android/resources.cljs
index 9c1cfcb0e0..509a52a09a 100644
--- a/src/messenger/android/resources.cljs
+++ b/src/messenger/android/resources.cljs
@@ -6,3 +6,7 @@
 (def online-icon (js/require "./images/online.png"))
 (def seen-icon (js/require "./images/seen.png"))
 (def delivered-icon (js/require "./images/delivered.png"))
+(def play (js/require "./images/play.png"))
+(def mic (js/require "./images/mic.png"))
+(def smile (js/require "./images/smile.png"))
+(def att (js/require "./images/att.png"))