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

Chats view design 

Former-commit-id: 55f90dc040
This commit is contained in:
virvar 2016-04-16 00:23:08 +03:00
parent b88b330ec8
commit 1667cb85a6
8 changed files with 165 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
images/icon_add.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 147 B

BIN
images/icon_group.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 293 B

BIN
images/icon_hamburger.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 126 B

BIN
images/icon_search.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 460 B

41
src/syng_im/components/chats/chat_list_item.cljs
View File

@ -5,23 +5,36 @@
image
touchable-highlight]]
[syng-im.components.styles :refer [font]]
[syng-im.components.chats.chat-list-item-inner :refer [chat-list-item-inner-view]]
[syng-im.utils.logging :as log]
[syng-im.resources :as res]))
(defn chat-list-item [chat-obj navigator]
(log/info "!!!!!")
(log/info chat-obj)
[touchable-highlight {:on-press (fn []
(dispatch [:show-chat (aget chat-obj "chat-id") navigator]))}
[view {:style {:flexDirection "row"
:width 260
:marginVertical 5}}
[image {:source res/chat-icon
:style {:borderWidth 2
:borderColor "#FFFFFF"
:width 32
:height 30
:marginRight 5
:marginLeft 5}}]
[text {:style {:fontSize 14
:fontFamily font
:color "#4A5258"}}
(subs (aget chat-obj "name") 0 30)]]])
;; TODO add [photo-path delivery-status new-messages-count online] values to chat-obj
;; TODO should chat-obj be clj-map?
[view {} [chat-list-item-inner-view (merge (js->clj chat-obj :keywordize-keys true)
{:photo-path nil
:delivery-status :seen
:new-messages-count 3
:timestamp "13:54"
:online true
:group-chat true})]]])
(comment [view {:style {:flexDirection "row"
:width 260
:marginVertical 5}}
[image {:source res/chat-icon
:style {:borderWidth 2
:borderColor "#FFFFFF"
:width 32
:height 30
:marginRight 5
:marginLeft 5}}]
[text {:style {:fontSize 14
:fontFamily font
:color "#4A5258"}}
(subs (aget chat-obj "name") 0 30)]])

126
src/syng_im/components/chats/chat_list_item_inner.cljs Normal file
View File

@ -0,0 +1,126 @@
(ns syng-im.components.chats.chat-list-item-inner
(:require [clojure.string :as s]
[syng-im.components.react :refer [view image text]]
[syng-im.components.styles :refer [font
title-font
color-white
color-blue
online-color
text1-color
text2-color
new-messages-count-color]]
[syng-im.resources :as res]))
(defn contact-photo [{:keys [photo-path]}]
[view {:borderRadius 50}
[image {:source (if (s/blank? photo-path)
res/user-no-photo
{:uri photo-path})
:style {:borderRadius 50
:width 40
:height 40}}]])
(defn contact-online [{:keys [online]}]
(when online
[view {:position "absolute"
:top 24
:left 24
:width 20
:height 20
:borderRadius 50
:backgroundColor online-color
:borderWidth 2
:borderColor color-white}
[view {:position "absolute"
:top 6
:left 3
:width 4
:height 4
:borderRadius 50
:backgroundColor color-white}]
[view {:position "absolute"
:top 6
:left 9
:width 4
:height 4
:borderRadius 50
:backgroundColor color-white}]]))
(defn chat-list-item-inner-view
[{:keys [name photo-path delivery-status timestamp new-messages-count online
group-chat contacts]}]
[view {:style {:flexDirection "row"
:paddingVertical 15
:paddingHorizontal 16
:height 90}}
[view {:marginTop 2
:width 44
:height 44}
;;; photo
[contact-photo {:photo-path photo-path}]
;;; online
[contact-online {:online online}]]
[view {:style {:flexDirection "column"
:marginLeft 12
:flex 1}}
;;; name
[view {:style {:flexDirection "row"}}
[text {:style {:marginTop -2.5
:color text1-color
:fontSize 14
:fontFamily title-font}} name]
;;; group size
(when group-chat
[image {:source res/icon-group
:style {:marginTop 4
:marginLeft 8}}])
(when group-chat
[text {:style {:marginTop -0.5
:marginLeft 4
:fontFamily font
:fontSize 12
:color text2-color}}
(if (< 1 (count contacts))
(str (count contacts) " members")
"1 member")])]
;;; last message
[text {:style {:marginTop 7
:marginRight 40
:color text1-color
:fontFamily font
:fontSize 14
:lineHeight 20}}
(repeatedly 5 #(str "Hi, I'm " name "! "))]]
[view {}
;;; delivery status
[view {:style {:flexDirection "row"
:position "absolute"
:top 0
:right 0}}
(when delivery-status
[image {:source (if (= (keyword delivery-status) :seen)
res/seen-icon
res/delivered-icon)
:style {:marginTop 4}}])
;;; datetime
[text {:style {:fontFamily font
:fontSize 12
:color text2-color
:marginLeft 4}}
timestamp]]
;;; new messages count
(when (< 0 new-messages-count)
[view {:style {:position "absolute"
:top 36
:right 0
:width 24
:height 24
:backgroundColor new-messages-count-color
:borderRadius 50}}
[text {:style {:top 4
:left 0
:fontFamily title-font
:fontSize 10
:color color-blue
:textAlign "center"}}
new-messages-count]])]])

10
src/syng_im/components/styles.cljs
View File

@ -1,6 +1,8 @@
(ns syng-im.components.styles)
(def font "Robot-Regular")
(def font "sans-serif")
;; (def font "Avenir-Roman")
(def title-font "sans-serif-medium")
(def color-blue "#7099e6")
(def color-black "#000000de")
@ -11,5 +13,7 @@
(def color-light-blue-transparent "#bbc4cb32")
(def color-dark-mint "#5fc48d")
(def text1-color "#838c93")
(def text2-color "#838c93de")
(def text1-color color-black)
(def text2-color color-gray)
(def online-color color-blue)
(def new-messages-count-color "#7099e632")

5
src/syng_im/resources.cljs
View File

@ -21,3 +21,8 @@
(def icon-lock-white (js/require "./images/icon_lock_white.png"))
(def icon-ok-small (js/require "./images/icon_ok_small.png"))
(def icon-smile (js/require "./images/icon_smile.png"))
(def icon-add (js/require "./images/icon_add.png"))
(def icon-group (js/require "./images/icon_group.png"))
(def icon-hamburger (js/require "./images/icon_hamburger.png"))
(def icon-search (js/require "./images/icon_search.png"))