diff --git a/src/messenger/android/chat.cljs b/src/messenger/android/chat.cljs index d3894f5f1e..590d112fdb 100644 --- a/src/messenger/android/chat.cljs +++ b/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)) diff --git a/src/messenger/android/contacts_list.cljs b/src/messenger/android/contacts_list.cljs index dca6c8f298..e876ed2a35 100644 --- a/src/messenger/android/contacts_list.cljs +++ b/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 diff --git a/src/messenger/android/core.cljs b/src/messenger/android/core.cljs index a06c962557..ecde908242 100644 --- a/src/messenger/android/core.cljs +++ b/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