Chat view design

Former-commit-id: 22cda3f0fb
This commit is contained in:
virvar 2016-02-26 16:18:46 +03:00
parent 5cd48e241a
commit ada19a9598
6 changed files with 109 additions and 19 deletions

BIN
images/att.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 651 B

BIN
images/mic.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 529 B

BIN
images/play.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 898 B

BIN
images/smile.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 584 B

View File

@ -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))

View File

@ -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"))