Begin Chat view

src/messenger/android/chat.cljs

@@ -20,17 +20,34 @@
          [:message/by-id id])
   static om/IQuery
   (query [this]
-         '[:id :body :delivery-status :datetime])
+         '[:id :body :outgoing :delivery-status :datetime])
   Object
   (render [this]
-          (let [{:keys [id body delivery-status datetime]}
+          (let [{:keys [id body outgoing delivery-status datetime]}
                 (om/props this)]
-            (text {:style {:color "#AAB2B2"
-                           :fontFamily "Avenir-Roman"
-                           :fontSize 14
-                           :marginTop 2
-                           :paddingRight 10}}
-                  body))))
+            (view {:height 70}
+                  (text {:style {:marginVertical 10
+                                 :fontFamily "Avenir-Roman"
+                                 :fontSize 11
+                                 :color "#AAB2B2"
+                                 :letterSpacing 1
+                                 :lineHeight 15
+                                 :textAlign "center"
+                                 :opacity 0.8}}
+                        datetime)
+                  (view {:style (merge {:borderRadius 6
+                                        :marginVertical 5
+                                        :paddingVertical 12
+                                        :paddingHorizontal 16}
+                                       (if outgoing
+                                         {:backgroundColor "#D3EEEF"
+                                          :alignSelf "flex-end"}
+                                         {:backgroundColor "#FBF6E3"
+                                          :alignSelf "flex-start"}))}
+                        (text {:style {:fontSize 14
+                                       :fontFamily "Avenir-Roman"
+                                       :color "#4A5258"}}
+                              body))))))
 
 (def message (om/factory Message {:keyfn :id}))
 
@@ -39,17 +56,18 @@
 
 (defn generate-message [n]
   {:id n
-   :body "Hi"
+   :body "This is a text. This is a text."
+   :outgoing (< (rand) 0.5)
    :delivery-status (if (< (rand) 0.5) :delivered :seen)
    :datetime "15:30"})
 
 (defn generate-messages [n]
   (map generate-message (range 1 (inc n))))
 
-(defn load-message []
-  (swap! state/app-state update :contacts-ds
-         #(clone-with-rows %
-                           (vec (generate-messages 10)))))
+(defn load-messages []
+  (clone-with-rows (data-source {:rowHasChanged (fn [row1 row2]
+                                                  (not= row1 row2))})
+                   (vec (generate-messages 10))))
 
 (defui Chat
   ;; static om/IQuery
@@ -59,20 +77,21 @@
   ;; (componentDidMount [this]
   ;;                    (load-contacts))
   (render [this]
-          (let [{:keys [contacts-ds]} (om/props this)
-                {:keys [nav]} (om/get-computed this)]
+          (let [{:keys [nav]} (om/get-computed this)
+                messages-ds (load-messages)]
             (view {:style {:flex 1}}
                   (toolbar-android {:logo res/logo-icon
                                     :title "Chat name"
+                                    :titleColor "#4A5258"
+                                    :subtitle "Last seen just now"
+                                    :subtitleColor "#AAB2B2"
+                                    :navIcon res/nav-back-icon
                                     :style {:backgroundColor "#e9eaed"
                                             :height 56}
-                                    :navIcon res/nav-back-icon
                                     :onIconClicked (fn []
                                                      (nav-pop nav))})
-                  (text {} "Hello")
-                  ;; (list-view {:dataSource contacts-ds
-                  ;;             :renderRow render-row
-                  ;;             :style {}})
-                  ))))
+                  (list-view {:dataSource messages-ds
+                              :renderRow render-row
+                              :style {}})))))
 
 (def chat (om/factory Chat))

src/messenger/android/contacts_list.cljs

@@ -179,6 +179,7 @@
             (view {:style {:flex 1}}
                   (toolbar-android {:logo res/logo-icon
                                     :title "Chats"
+                                    :titleColor "#4A5258"
                                     :style {:backgroundColor "#e9eaed"
                                             :height 56}})
                   (list-view {:dataSource contacts-ds

src/messenger/android/core.cljs

@@ -34,13 +34,14 @@
          '[:page :contacts-ds])
   Object
   (render [this]
-          (let [{:keys [page contacts-ds]} (om/props this)]
+          (let [{:keys [page]} (om/props this)]
             (navigator
              {:initialRoute {:component contacts-list}
               :renderScene (fn [route nav]
                              (when state/*nav-render*
                                (init-back-button-handler! nav)
-                               (let [{:keys [component]} (js->clj route :keywordize-keys true)]
+                               (let [{:keys [component]}
+                                     (js->clj route :keywordize-keys true)]
                                  (component (om/computed (om/props this) {:nav nav})))))}))))
 
 (swap! state/app-state assoc :contacts-ds