status-im/status-mobile
2
0
Fork 0
mirror of https://github.com/status-im/status-mobile.git synced 2025-01-30 18:35:37 +00:00
Code Issues Projects Releases Wiki Activity

Contact list item design

Browse Source
This commit is contained in:
virvar 2016-04-22 17:10:09 +03:00
parent 35937c72a0
commit 0633c7912d
5 changed files with 69 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
images/icon_add_gray.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 267 B

22
src/syng_im/components/chats/new_group.cljs
View File

@ -1,7 +1,13 @@
(ns syng-im.components.chats.new-group (ns syng-im.components.chats.new-group
(:require [re-frame.core :refer [subscribe dispatch dispatch-sync]] (:require [re-frame.core :refer [subscribe dispatch dispatch-sync]]
[syng-im.resources :as res] [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 [syng-im.components.styles :refer [font
text1-color text1-color
text2-color text2-color
@ -75,6 +81,20 @@
:fontSize 14 :fontSize 14
:lineHeight 20}} :lineHeight 20}}
"Members"] "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 [list-view {:dataSource contacts-ds
:renderRow (fn [row section-id row-id] :renderRow (fn [row section-id row-id]
(r/as-element [new-group-contact (js->clj row :keywordize-keys true) navigator])) (r/as-element [new-group-contact (js->clj row :keywordize-keys true) navigator]))

6
src/syng_im/components/chats/new_group_contact.cljs
View File

@ -11,11 +11,7 @@
(let [checked (r/atom false)] (let [checked (r/atom false)]
(fn [] (fn []
[view {:style {:flexDirection "row" [view {:style {:flexDirection "row"
:marginTop 5 :height 56}}
:marginBottom 5
:paddingLeft 15
:paddingRight 15
:height 75}}
[item-checkbox {:onToggle (fn [checked?] [item-checkbox {:onToggle (fn [checked?]
(reset! checked checked?) (reset! checked checked?)
(dispatch [:select-for-new-group whisper-identity checked?])) (dispatch [:select-for-new-group whisper-identity checked?]))

129
src/syng_im/components/contact_list/contact_inner.cljs
View File

@ -1,105 +1,66 @@
(ns syng-im.components.contact-list.contact-inner (ns syng-im.components.contact-list.contact-inner
(:require [clojure.string :as s] (:require [clojure.string :as s]
[syng-im.components.react :refer [view image text]] [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])) [syng-im.resources :as res]))
(defn contact-photo [{:keys [photo-path]}] (defn contact-photo [{:keys [photo-path]}]
[view {:width 54 [view {:borderRadius 50}
:height 54
:borderRadius 50
:backgroundColor "#FFFFFF"
:elevation 6}
[image {:source (if (s/blank? photo-path) [image {:source (if (s/blank? photo-path)
res/user-no-photo res/user-no-photo
{:uri photo-path}) {:uri photo-path})
:style {:borderWidth 2 :style {:borderRadius 50
:borderColor "#FFFFFF" :width 40
:borderRadius 50 :height 40}}]])
:width 54
:height 54
:position "absolute"}}]])
(defn contact-online [{:keys [online]}] (defn contact-online [{:keys [online]}]
(when online (when online
[view {:position "absolute" [view {:position "absolute"
:top 41 :top 24
:left 36 :left 24
:width 12 :width 20
:height 12 :height 20
:borderRadius 50 :borderRadius 50
:backgroundColor "#FFFFFF" :backgroundColor online-color
:elevation 6} :borderWidth 2
[image {:source res/online-icon :borderColor color-white}
:style {:width 12 [view {:position "absolute"
:height 12}}]])) :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 (defn contact-inner-view [{:keys [name photo-path delivery-status datetime new-messages-count
online whisper-identity]}] online whisper-identity]}]
[view {:style {:flexDirection "row" [view {:style {:flexDirection "row"
:marginTop 5 :height 56}}
:marginBottom 5 [view {:style {:marginTop 8
:paddingLeft 15 :marginLeft 16
:paddingRight 15 :width 44
:height 75}} :height 44}}
[view {:width 54 ;;; photo
:height 54}
;;; photo
[contact-photo {:photo-path photo-path}] [contact-photo {:photo-path photo-path}]
;;; online ;;; online
[contact-online {:online online}]] [contact-online {:online online}]]
[view {:style {:flexDirection "column" ;;; name
:marginLeft 7 [view {:style {:justifyContent "center"}}
:marginRight 10 [text {:style {:marginLeft 16
:flex 1 :fontSize 16
:position "relative"}}
;;; name
[text {:style {:fontSize 15
:fontFamily font}} name]
;;; last message
[text {:style {:color "#AAB2B2"
:fontFamily font :fontFamily font
:fontSize 14 :color text1-color}}
:marginTop 2 (if (< 0 (count name))
:paddingRight 10}} name
(str "Hi, I'm " name)]] "Noname")]]])
[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]])]])

1
src/syng_im/resources.cljs
View File

@ -26,6 +26,7 @@
(def icon-smile (js/require "./images/icon_smile.png")) (def icon-smile (js/require "./images/icon_smile.png"))
(def icon-add (js/require "./images/icon_add.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-group (js/require "./images/icon_group.png"))
(def icon-hamburger (js/require "./images/icon_hamburger.png")) (def icon-hamburger (js/require "./images/icon_hamburger.png"))
(def icon-search (js/require "./images/icon_search.png")) (def icon-search (js/require "./images/icon_search.png"))