parent
0ed10176b2
commit
8fa81ec0ff
|
@ -20,17 +20,34 @@
|
||||||
[:message/by-id id])
|
[:message/by-id id])
|
||||||
static om/IQuery
|
static om/IQuery
|
||||||
(query [this]
|
(query [this]
|
||||||
'[:id :body :delivery-status :datetime])
|
'[:id :body :outgoing :delivery-status :datetime])
|
||||||
Object
|
Object
|
||||||
(render [this]
|
(render [this]
|
||||||
(let [{:keys [id body delivery-status datetime]}
|
(let [{:keys [id body outgoing delivery-status datetime]}
|
||||||
(om/props this)]
|
(om/props this)]
|
||||||
(text {:style {:color "#AAB2B2"
|
(view {:height 70}
|
||||||
:fontFamily "Avenir-Roman"
|
(text {:style {:marginVertical 10
|
||||||
:fontSize 14
|
:fontFamily "Avenir-Roman"
|
||||||
:marginTop 2
|
:fontSize 11
|
||||||
:paddingRight 10}}
|
:color "#AAB2B2"
|
||||||
body))))
|
: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}))
|
(def message (om/factory Message {:keyfn :id}))
|
||||||
|
|
||||||
|
@ -39,17 +56,18 @@
|
||||||
|
|
||||||
(defn generate-message [n]
|
(defn generate-message [n]
|
||||||
{:id 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)
|
:delivery-status (if (< (rand) 0.5) :delivered :seen)
|
||||||
:datetime "15:30"})
|
:datetime "15:30"})
|
||||||
|
|
||||||
(defn generate-messages [n]
|
(defn generate-messages [n]
|
||||||
(map generate-message (range 1 (inc n))))
|
(map generate-message (range 1 (inc n))))
|
||||||
|
|
||||||
(defn load-message []
|
(defn load-messages []
|
||||||
(swap! state/app-state update :contacts-ds
|
(clone-with-rows (data-source {:rowHasChanged (fn [row1 row2]
|
||||||
#(clone-with-rows %
|
(not= row1 row2))})
|
||||||
(vec (generate-messages 10)))))
|
(vec (generate-messages 10))))
|
||||||
|
|
||||||
(defui Chat
|
(defui Chat
|
||||||
;; static om/IQuery
|
;; static om/IQuery
|
||||||
|
@ -59,20 +77,21 @@
|
||||||
;; (componentDidMount [this]
|
;; (componentDidMount [this]
|
||||||
;; (load-contacts))
|
;; (load-contacts))
|
||||||
(render [this]
|
(render [this]
|
||||||
(let [{:keys [contacts-ds]} (om/props this)
|
(let [{:keys [nav]} (om/get-computed this)
|
||||||
{:keys [nav]} (om/get-computed this)]
|
messages-ds (load-messages)]
|
||||||
(view {:style {:flex 1}}
|
(view {:style {:flex 1}}
|
||||||
(toolbar-android {:logo res/logo-icon
|
(toolbar-android {:logo res/logo-icon
|
||||||
:title "Chat name"
|
:title "Chat name"
|
||||||
|
:titleColor "#4A5258"
|
||||||
|
:subtitle "Last seen just now"
|
||||||
|
:subtitleColor "#AAB2B2"
|
||||||
|
:navIcon res/nav-back-icon
|
||||||
:style {:backgroundColor "#e9eaed"
|
:style {:backgroundColor "#e9eaed"
|
||||||
:height 56}
|
:height 56}
|
||||||
:navIcon res/nav-back-icon
|
|
||||||
:onIconClicked (fn []
|
:onIconClicked (fn []
|
||||||
(nav-pop nav))})
|
(nav-pop nav))})
|
||||||
(text {} "Hello")
|
(list-view {:dataSource messages-ds
|
||||||
;; (list-view {:dataSource contacts-ds
|
:renderRow render-row
|
||||||
;; :renderRow render-row
|
:style {}})))))
|
||||||
;; :style {}})
|
|
||||||
))))
|
|
||||||
|
|
||||||
(def chat (om/factory Chat))
|
(def chat (om/factory Chat))
|
||||||
|
|
|
@ -179,6 +179,7 @@
|
||||||
(view {:style {:flex 1}}
|
(view {:style {:flex 1}}
|
||||||
(toolbar-android {:logo res/logo-icon
|
(toolbar-android {:logo res/logo-icon
|
||||||
:title "Chats"
|
:title "Chats"
|
||||||
|
:titleColor "#4A5258"
|
||||||
:style {:backgroundColor "#e9eaed"
|
:style {:backgroundColor "#e9eaed"
|
||||||
:height 56}})
|
:height 56}})
|
||||||
(list-view {:dataSource contacts-ds
|
(list-view {:dataSource contacts-ds
|
||||||
|
|
|
@ -34,13 +34,14 @@
|
||||||
'[:page :contacts-ds])
|
'[:page :contacts-ds])
|
||||||
Object
|
Object
|
||||||
(render [this]
|
(render [this]
|
||||||
(let [{:keys [page contacts-ds]} (om/props this)]
|
(let [{:keys [page]} (om/props this)]
|
||||||
(navigator
|
(navigator
|
||||||
{:initialRoute {:component contacts-list}
|
{:initialRoute {:component contacts-list}
|
||||||
:renderScene (fn [route nav]
|
:renderScene (fn [route nav]
|
||||||
(when state/*nav-render*
|
(when state/*nav-render*
|
||||||
(init-back-button-handler! nav)
|
(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})))))}))))
|
(component (om/computed (om/props this) {:nav nav})))))}))))
|
||||||
|
|
||||||
(swap! state/app-state assoc :contacts-ds
|
(swap! state/app-state assoc :contacts-ds
|
||||||
|
|
Loading…
Reference in New Issue