Chat view design

Former-commit-id: 22cda3f0fb

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))
 

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"))