From 0633c7912d2e511e49fd9464fc27fd4583c1e128 Mon Sep 17 00:00:00 2001 From: virvar Date: Fri, 22 Apr 2016 17:10:09 +0300 Subject: [PATCH] Contact list item design --- images/icon_add_gray.png | Bin 0 -> 267 bytes src/syng_im/components/chats/new_group.cljs | 22 ++- .../components/chats/new_group_contact.cljs | 6 +- .../contact_list/contact_inner.cljs | 131 ++++++------------ src/syng_im/resources.cljs | 1 + 5 files changed, 69 insertions(+), 91 deletions(-) create mode 100644 images/icon_add_gray.png diff --git a/images/icon_add_gray.png b/images/icon_add_gray.png new file mode 100644 index 0000000000000000000000000000000000000000..8ddec19c24b75725cba3c3d51b566460d454463d GIT binary patch literal 267 zcmeAS@N?(olHy`uVBq!ia0vp^f*{Pn1|+R>-G2co#^NA%Cx&(BWL^R}M?GB}Lo5W7 zQw}iSQadaB_xtN=C1L63e^%{Ta(%}Xqlc3iI{*LwtNYUa@P0pmUVqs*=YNKOp0j1P zUEINQD4Rpi_r;^bX9U~=Oq!hJ-5*#Q{7K)Cnvi0_!_&?@Bk|ymsS~GW%W-SS{z?CF zzi}NyE5A_(V^3g9qnNS5zhD36vrd`NpqHp}Uv&Z}$?D68>;;*-G&8dz!FuOUbu#dwDDgTe~DWM4f<&S7f literal 0 HcmV?d00001 diff --git a/src/syng_im/components/chats/new_group.cljs b/src/syng_im/components/chats/new_group.cljs index e7bf049eaf..76cf5ecc81 100644 --- a/src/syng_im/components/chats/new_group.cljs +++ b/src/syng_im/components/chats/new_group.cljs @@ -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])) diff --git a/src/syng_im/components/chats/new_group_contact.cljs b/src/syng_im/components/chats/new_group_contact.cljs index f0e7303763..79153d775b 100644 --- a/src/syng_im/components/chats/new_group_contact.cljs +++ b/src/syng_im/components/chats/new_group_contact.cljs @@ -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?])) diff --git a/src/syng_im/components/contact_list/contact_inner.cljs b/src/syng_im/components/contact_list/contact_inner.cljs index 5f3e4883f3..996c58270d 100644 --- a/src/syng_im/components/contact_list/contact_inner.cljs +++ b/src/syng_im/components/contact_list/contact_inner.cljs @@ -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")]]]) diff --git a/src/syng_im/resources.cljs b/src/syng_im/resources.cljs index 5315cc3c32..86992cd208 100644 --- a/src/syng_im/resources.cljs +++ b/src/syng_im/resources.cljs @@ -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"))