Chats view design
This commit is contained in:
virvar
parent
256c639cf3
commit
55f90dc040
Binary file not shown.
|
After Width: | Height: | Size: 147 B |
Binary file not shown.
|
After Width: | Height: | Size: 293 B |
Binary file not shown.
|
After Width: | Height: | Size: 126 B |
Binary file not shown.
|
After Width: | Height: | Size: 460 B |
|
|
@ -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)]])
|
||||
|
|
|
|||
|
|
@ -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]])]])
|
||||
|
|
@ -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")
|
||||
|
|
|
|||
|
|
@ -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"))
|
||||
|
|
|
|||
Loading…
Reference in New Issue