Chats view design

src/syng_im/components/chats/chat_list_item.cljs

@@ -5,13 +5,26 @@
                                               image
                                               touchable-highlight]]
             [syng-im.components.styles :refer [font]]
+            [syng-im.components.chats.chat-list-item-inner :refer [chat-list-item-inner-view]]
             [syng-im.utils.logging :as log]
             [syng-im.resources :as res]))
 
 (defn chat-list-item [chat-obj navigator]
+  (log/info "!!!!!")
+  (log/info chat-obj)
   [touchable-highlight {:on-press (fn []
                                     (dispatch [:show-chat (aget chat-obj "chat-id") navigator]))}
-   [view {:style {:flexDirection  "row"
+   ;; TODO add [photo-path delivery-status new-messages-count online] values to chat-obj
+   ;; TODO should chat-obj be clj-map?
+   [view {} [chat-list-item-inner-view (merge (js->clj chat-obj :keywordize-keys true)
+                                              {:photo-path         nil
+                                               :delivery-status    :seen
+                                               :new-messages-count 3
+                                               :timestamp          "13:54"
+                                               :online             true
+                                               :group-chat true})]]])
+
+(comment [view {:style {:flexDirection  "row"
                         :width          260
                         :marginVertical 5}}
           [image {:source res/chat-icon
@@ -24,4 +37,4 @@
           [text {:style {:fontSize   14
                          :fontFamily font
                          :color      "#4A5258"}}
-     (subs (aget chat-obj "name") 0 30)]]])
+           (subs (aget chat-obj "name") 0 30)]])

src/syng_im/components/chats/chat_list_item_inner.cljs

@@ -0,0 +1,126 @@
+(ns syng-im.components.chats.chat-list-item-inner
+  (:require [clojure.string :as s]
+            [syng-im.components.react :refer [view image text]]
+            [syng-im.components.styles :refer [font
+                                               title-font
+                                               color-white
+                                               color-blue
+                                               online-color
+                                               text1-color
+                                               text2-color
+                                               new-messages-count-color]]
+            [syng-im.resources :as res]))
+
+(defn contact-photo [{:keys [photo-path]}]
+  [view {:borderRadius 50}
+   [image {:source (if (s/blank? photo-path)
+                     res/user-no-photo
+                     {:uri photo-path})
+           :style  {:borderRadius 50
+                    :width        40
+                    :height       40}}]])
+
+(defn contact-online [{:keys [online]}]
+  (when online
+    [view {:position        "absolute"
+           :top             24
+           :left            24
+           :width           20
+           :height          20
+           :borderRadius    50
+           :backgroundColor online-color
+           :borderWidth     2
+           :borderColor     color-white}
+     [view {:position        "absolute"
+            :top             6
+            :left            3
+            :width           4
+            :height          4
+            :borderRadius    50
+            :backgroundColor color-white}]
+     [view {:position        "absolute"
+            :top             6
+            :left            9
+            :width           4
+            :height          4
+            :borderRadius    50
+            :backgroundColor color-white}]]))
+
+(defn chat-list-item-inner-view
+  [{:keys [name photo-path delivery-status timestamp new-messages-count online
+           group-chat contacts]}]
+  [view {:style {:flexDirection     "row"
+                 :paddingVertical   15
+                 :paddingHorizontal 16
+                 :height            90}}
+   [view {:marginTop 2
+          :width     44
+          :height    44}
+;;; photo
+    [contact-photo {:photo-path photo-path}]
+;;; online
+    [contact-online {:online online}]]
+   [view {:style {:flexDirection "column"
+                  :marginLeft    12
+                  :flex          1}}
+;;; name
+    [view {:style {:flexDirection "row"}}
+     [text {:style {:marginTop  -2.5
+                    :color      text1-color
+                    :fontSize   14
+                    :fontFamily title-font}} name]
+;;; group size
+     (when group-chat
+       [image {:source res/icon-group
+               :style  {:marginTop 4
+                        :marginLeft 8}}])
+     (when group-chat
+       [text {:style {:marginTop  -0.5
+                      :marginLeft 4
+                      :fontFamily font
+                      :fontSize   12
+                      :color      text2-color}}
+        (if (< 1 (count contacts))
+          (str (count contacts) " members")
+          "1 member")])]
+;;; last message
+    [text {:style {:marginTop    7
+                   :marginRight  40
+                   :color        text1-color
+                   :fontFamily   font
+                   :fontSize     14
+                   :lineHeight   20}}
+     (repeatedly 5 #(str "Hi, I'm " name "! "))]]
+   [view {}
+;;; delivery status
+    [view {:style {:flexDirection "row"
+                   :position      "absolute"
+                   :top           0
+                   :right         0}}
+     (when delivery-status
+       [image {:source (if (= (keyword delivery-status) :seen)
+                         res/seen-icon
+                         res/delivered-icon)
+               :style  {:marginTop 4}}])
+;;; datetime
+     [text {:style {:fontFamily font
+                    :fontSize   12
+                    :color      text2-color
+                    :marginLeft 4}}
+      timestamp]]
+;;; new messages count
+    (when (< 0 new-messages-count)
+      [view {:style {:position        "absolute"
+                     :top             36
+                     :right           0
+                     :width           24
+                     :height          24
+                     :backgroundColor new-messages-count-color
+                     :borderRadius    50}}
+       [text {:style {:top        4
+                      :left       0
+                      :fontFamily title-font
+                      :fontSize   10
+                      :color      color-blue
+                      :textAlign  "center"}}
+        new-messages-count]])]])

src/syng_im/components/styles.cljs

@@ -1,6 +1,8 @@
 (ns syng-im.components.styles)
 
-(def font "Robot-Regular")
+(def font "sans-serif")
+;; (def font "Avenir-Roman")
+(def title-font "sans-serif-medium")
 
 (def color-blue "#7099e6")
 (def color-black "#000000de")
@@ -11,5 +13,7 @@
 (def color-light-blue-transparent "#bbc4cb32")
 (def color-dark-mint "#5fc48d")
 
-(def text1-color "#838c93")
+(def text1-color color-black)
-(def text2-color "#838c93de")
+(def text2-color color-gray)
+(def online-color color-blue)
+(def new-messages-count-color "#7099e632")

src/syng_im/resources.cljs

@@ -21,3 +21,8 @@
 (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"))
+
+(def icon-add (js/require "./images/icon_add.png"))
+(def icon-group (js/require "./images/icon_group.png"))
+(def icon-hamburger (js/require "./images/icon_hamburger.png"))
+(def icon-search (js/require "./images/icon_search.png"))