diff --git a/src/status_im/contacts/screen.cljs b/src/status_im/contacts/screen.cljs index a763c2ea50..5ea7be8b15 100644 --- a/src/status_im/contacts/screen.cljs +++ b/src/status_im/contacts/screen.cljs @@ -36,7 +36,7 @@ :handler (fn [])}}]) (defview contact-list [] - [contacts [:get-contacts]] + [contacts [:contacts-with-letters]] [drawer-view [view st/contacts-list-container [contact-list-toolbar] diff --git a/src/status_im/contacts/styles.cljs b/src/status_im/contacts/styles.cljs index 9c0a864cd6..59fa3453e3 100644 --- a/src/status_im/contacts/styles.cljs +++ b/src/status_im/contacts/styles.cljs @@ -2,12 +2,11 @@ (:require [status-im.components.styles :refer [font title-font text1-color + text3-color color-white toolbar-background2 online-color]])) - - (def contacts-list-container {:flex 1 :backgroundColor :white}) @@ -15,38 +14,26 @@ (def contacts-list {:backgroundColor :white}) +(def letter-container + {:paddingTop 11 + :paddingLeft 20 + :width 56}) + +(def letter-text + {:fontSize 24 + :fontFamily font + :color text3-color}) + (def contact-photo-container {:marginTop 4 :marginLeft 12}) -(def photo-image - {:borderRadius 50 - :width 40 - :height 40}) - -(def online-container - {:position :absolute - :top 24 - :left 24 - :width 20 - :height 20 - :borderRadius 50 - :backgroundColor online-color - :borderWidth 2 - :borderColor color-white}) - (def contact-container {:flexDirection :row :height 56}) -(def photo-container - {:marginTop 8 - :marginLeft 16 - :width 44 - :height 44}) - (def name-container - {:marginLeft 12 + {:marginLeft 12 :justifyContent :center}) (def name-text diff --git a/src/status_im/contacts/subs.cljs b/src/status_im/contacts/subs.cljs index 026bb029c0..3f5764c9b5 100644 --- a/src/status_im/contacts/subs.cljs +++ b/src/status_im/contacts/subs.cljs @@ -12,6 +12,23 @@ (let [contacts (reaction (:contacts @db))] (reaction (sort-by :name (vals @contacts)))))) +(defn get-contact-letter [contact] + (when-let [letter (first (:name contact))] + (clojure.string/upper-case letter))) + +(register-sub :contacts-with-letters + (fn [db _] + (let [contacts (reaction (:contacts @db))] + (reaction + (let [ordered (sort-by :name (vals @contacts))] + (map (fn [prev cur] + (let [prev-letter (get-contact-letter prev) + cur-letter (get-contact-letter cur)] + (if (not= prev-letter cur-letter) + (assoc cur :letter cur-letter) + cur))) + (cons nil ordered) ordered)))))) + (defn contacts-by-chat [fn db chat-id] (let [chat (reaction (get-in @db [:chats chat-id])) contacts (reaction (:contacts @db))] diff --git a/src/status_im/contacts/views/contact_inner.cljs b/src/status_im/contacts/views/contact_inner.cljs index d7fa63d8da..9512ef3120 100644 --- a/src/status_im/contacts/views/contact_inner.cljs +++ b/src/status_im/contacts/views/contact_inner.cljs @@ -5,12 +5,19 @@ [status-im.contacts.styles :as st] [status-im.i18n :refer [label]])) +(defn letter-view [letter] + [view st/letter-container + (when letter + [text {:style st/letter-text} + letter])]) + (defn contact-photo [{:keys [whisper-identity]}] [view st/contact-photo-container [contact-icon-contacts-tab whisper-identity]]) -(defn contact-inner-view [{:keys [name] :as contact}] +(defn contact-inner-view [{:keys [name letter] :as contact}] [view st/contact-container + [letter-view letter] [contact-photo contact] [view st/name-container [text {:style st/name-text}