status-im
/
status-react
mirror of https://github.com/status-im/status-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
images/att.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 651 B

BIN
images/mic.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 529 B

BIN
images/play.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 898 B

BIN
images/smile.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 584 B

116
src/messenger/android/chat.cljs
View File

@ -22,12 +22,13 @@
[:message/by-id id]) [:message/by-id id])
static om/IQuery static om/IQuery
(query [this] (query [this]
'[:id :body :outgoing :delivery-status :date :new-day]) '[:id :type :body :outgoing :delivery-status :date :new-day])
Object Object
(render (render
[this] [this]
(let [{:keys [id body outgoing delivery-status date new-day]} (let [{:keys [id body outgoing delivery-status date new-day] :as props}
(om/props this)] (om/props this)
type (keyword (:type props))]
(view {:paddingHorizontal 15} (view {:paddingHorizontal 15}
;;; date ;;; date
(when new-day (when new-day
@ -41,23 +42,79 @@
:opacity 0.8}} :opacity 0.8}}
date)) date))
;;; body ;;; body
(view {:style (merge {:width 260 (view {:style (merge {:flexDirection "column"
:width 260
:marginVertical 5} :marginVertical 5}
(if outgoing (if outgoing
{:alignSelf "flex-end"} {:alignSelf "flex-end"
{:alignSelf "flex-start"}))} :alignItems "flex-end"}
(view {:style (merge {:borderRadius 6 {:alignSelf "flex-start"
:paddingVertical 12 :alignItems "flex-start"}))}
(view {:style (merge {:borderRadius 6}
(if (= type :text)
{:paddingVertical 12
:paddingHorizontal 16} :paddingHorizontal 16}
{:paddingVertical 14
:paddingHorizontal 10})
(if outgoing (if outgoing
{:backgroundColor "#D3EEEF" {:backgroundColor "#D3EEEF"}
:alignSelf "flex-end"} {:backgroundColor "#FBF6E3"}))}
{:backgroundColor "#FBF6E3" (if (= type :text)
:alignSelf "flex-start"}))}
(text {:style {:fontSize 14 (text {:style {:fontSize 14
:fontFamily "Avenir-Roman" :fontFamily "Avenir-Roman"
:color "#4A5258"}} :color "#4A5258"}}
body))))))) 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})) (def message (om/factory Message {:keyfn :id}))
@ -66,6 +123,9 @@
(defn generate-message [n] (defn generate-message [n]
{:id n {:id n
:type (if (= (rem n 4) 3)
:audio
:text)
:body (if (= (rem n 3) 0) :body (if (= (rem n 3) 0)
(apply str n "." (repeat 5 " This is a text.")) (apply str n "." (repeat 5 " This is a text."))
(str n ". This is a text.")) (str n ". This is a text."))
@ -86,8 +146,34 @@
Object Object
(render (render
[this] [this]
(view {} (view {:style {:flexDirection "row"
(text-input {})))) :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)) (def new-message (om/factory NewMessage))

4
src/messenger/android/resources.cljs
View File

@ -6,3 +6,7 @@
(def online-icon (js/require "./images/online.png")) (def online-icon (js/require "./images/online.png"))
(def seen-icon (js/require "./images/seen.png")) (def seen-icon (js/require "./images/seen.png"))
(def delivered-icon (js/require "./images/delivered.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"))