Chat view design
This commit is contained in:
virvar
parent
995738ba19
commit
22cda3f0fb
Binary file not shown.
|
After Width: | Height: | Size: 651 B |
Binary file not shown.
|
After Width: | Height: | Size: 529 B |
Binary file not shown.
|
After Width: | Height: | Size: 898 B |
Binary file not shown.
|
After Width: | Height: | Size: 584 B |
|
|
@ -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))
|
||||
|
||||
|
|
|
|||
|
|
@ -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"))
|
||||
|
|
|
|||
Loading…
Reference in New Issue