Contact list item design
This commit is contained in:
virvar
parent
35937c72a0
commit
0633c7912d
Binary file not shown.
|
After Width: | Height: | Size: 267 B |
|
|
@ -1,7 +1,13 @@
|
|||
(ns syng-im.components.chats.new-group
|
||||
(:require [re-frame.core :refer [subscribe dispatch dispatch-sync]]
|
||||
[syng-im.resources :as res]
|
||||
[syng-im.components.react :refer [view toolbar-android android? text-input text]]
|
||||
[syng-im.components.react :refer [view
|
||||
toolbar-android
|
||||
android?
|
||||
text-input
|
||||
text
|
||||
image
|
||||
touchable-highlight]]
|
||||
[syng-im.components.styles :refer [font
|
||||
text1-color
|
||||
text2-color
|
||||
|
|
@ -75,6 +81,20 @@
|
|||
:fontSize 14
|
||||
:lineHeight 20}}
|
||||
"Members"]
|
||||
[touchable-highlight {:on-press (fn []
|
||||
)}
|
||||
[view {:style {:flexDirection "row"
|
||||
:marginBottom 16}}
|
||||
[image {:style {:marginVertical 19
|
||||
:marginHorizontal 3}
|
||||
:source res/icon-add-gray}]
|
||||
[text {:style {:marginTop 18
|
||||
:marginLeft 32
|
||||
:color text2-color
|
||||
:fontFamily font
|
||||
:fontSize 14
|
||||
:lineHeight 20}}
|
||||
"Add members"]]]
|
||||
[list-view {:dataSource contacts-ds
|
||||
:renderRow (fn [row section-id row-id]
|
||||
(r/as-element [new-group-contact (js->clj row :keywordize-keys true) navigator]))
|
||||
|
|
|
|||
|
|
@ -11,11 +11,7 @@
|
|||
(let [checked (r/atom false)]
|
||||
(fn []
|
||||
[view {:style {:flexDirection "row"
|
||||
:marginTop 5
|
||||
:marginBottom 5
|
||||
:paddingLeft 15
|
||||
:paddingRight 15
|
||||
:height 75}}
|
||||
:height 56}}
|
||||
[item-checkbox {:onToggle (fn [checked?]
|
||||
(reset! checked checked?)
|
||||
(dispatch [:select-for-new-group whisper-identity checked?]))
|
||||
|
|
|
|||
|
|
@ -1,105 +1,66 @@
|
|||
(ns syng-im.components.contact-list.contact-inner
|
||||
(:require [clojure.string :as s]
|
||||
[syng-im.components.react :refer [view image text]]
|
||||
[syng-im.components.styles :refer [font]]
|
||||
[syng-im.components.styles :refer [font
|
||||
title-font
|
||||
text1-color
|
||||
color-white
|
||||
online-color]]
|
||||
[syng-im.resources :as res]))
|
||||
|
||||
(defn contact-photo [{:keys [photo-path]}]
|
||||
[view {:width 54
|
||||
:height 54
|
||||
:borderRadius 50
|
||||
:backgroundColor "#FFFFFF"
|
||||
:elevation 6}
|
||||
[view {:borderRadius 50}
|
||||
[image {:source (if (s/blank? photo-path)
|
||||
res/user-no-photo
|
||||
{:uri photo-path})
|
||||
:style {:borderWidth 2
|
||||
:borderColor "#FFFFFF"
|
||||
:borderRadius 50
|
||||
:width 54
|
||||
:height 54
|
||||
:position "absolute"}}]])
|
||||
:style {:borderRadius 50
|
||||
:width 40
|
||||
:height 40}}]])
|
||||
|
||||
(defn contact-online [{:keys [online]}]
|
||||
(when online
|
||||
[view {:position "absolute"
|
||||
:top 41
|
||||
:left 36
|
||||
:width 12
|
||||
:height 12
|
||||
:top 24
|
||||
:left 24
|
||||
:width 20
|
||||
:height 20
|
||||
:borderRadius 50
|
||||
:backgroundColor "#FFFFFF"
|
||||
:elevation 6}
|
||||
[image {:source res/online-icon
|
||||
:style {:width 12
|
||||
:height 12}}]]))
|
||||
: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 contact-inner-view [{:keys [name photo-path delivery-status datetime new-messages-count
|
||||
online whisper-identity]}]
|
||||
[view {:style {:flexDirection "row"
|
||||
:marginTop 5
|
||||
:marginBottom 5
|
||||
:paddingLeft 15
|
||||
:paddingRight 15
|
||||
:height 75}}
|
||||
[view {:width 54
|
||||
:height 54}
|
||||
;;; photo
|
||||
:height 56}}
|
||||
[view {:style {:marginTop 8
|
||||
:marginLeft 16
|
||||
:width 44
|
||||
:height 44}}
|
||||
;;; photo
|
||||
[contact-photo {:photo-path photo-path}]
|
||||
;;; online
|
||||
;;; online
|
||||
[contact-online {:online online}]]
|
||||
[view {:style {:flexDirection "column"
|
||||
:marginLeft 7
|
||||
:marginRight 10
|
||||
:flex 1
|
||||
:position "relative"}}
|
||||
;;; name
|
||||
[text {:style {:fontSize 15
|
||||
:fontFamily font}} name]
|
||||
;;; last message
|
||||
[text {:style {:color "#AAB2B2"
|
||||
:fontFamily font
|
||||
:fontSize 14
|
||||
:marginTop 2
|
||||
:paddingRight 10}}
|
||||
(str "Hi, I'm " name)]]
|
||||
[view {:style {:flexDirection "column"}}
|
||||
;;; 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 5}}])
|
||||
;;; datetime
|
||||
[text {:style {:fontFamily font
|
||||
:fontSize 11
|
||||
:color "#AAB2B2"
|
||||
:letterSpacing 1
|
||||
:lineHeight 15
|
||||
:marginLeft 5}}
|
||||
datetime]]
|
||||
;;; new messages count
|
||||
(when (< 0 new-messages-count)
|
||||
[view {:style {:position "absolute"
|
||||
:right 0
|
||||
:bottom 24
|
||||
:width 18
|
||||
:height 18
|
||||
:backgroundColor "#6BC6C8"
|
||||
:borderColor "#FFFFFF"
|
||||
:borderRadius 50
|
||||
:alignSelf "flex-end"}}
|
||||
[text {:style {:width 18
|
||||
:height 17
|
||||
:fontFamily font
|
||||
:fontSize 10
|
||||
:color "#FFFFFF"
|
||||
:lineHeight 19
|
||||
:textAlign "center"
|
||||
:top 1}}
|
||||
new-messages-count]])]])
|
||||
|
||||
;;; name
|
||||
[view {:style {:justifyContent "center"}}
|
||||
[text {:style {:marginLeft 16
|
||||
:fontSize 16
|
||||
:fontFamily font
|
||||
:color text1-color}}
|
||||
(if (< 0 (count name))
|
||||
name
|
||||
"Noname")]]])
|
||||
|
|
|
|||
|
|
@ -26,6 +26,7 @@
|
|||
(def icon-smile (js/require "./images/icon_smile.png"))
|
||||
|
||||
(def icon-add (js/require "./images/icon_add.png"))
|
||||
(def icon-add-gray (js/require "./images/icon_add_gray.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