diff --git a/android/app/src/main/res/drawable-hdpi/icon_group_big.png b/android/app/src/main/res/drawable-hdpi/icon_group_big.png new file mode 100644 index 0000000000..68687a6dfa Binary files /dev/null and b/android/app/src/main/res/drawable-hdpi/icon_group_big.png differ diff --git a/android/app/src/main/res/drawable-mdpi/icon_group_big.png b/android/app/src/main/res/drawable-mdpi/icon_group_big.png new file mode 100644 index 0000000000..c4bf8a7989 Binary files /dev/null and b/android/app/src/main/res/drawable-mdpi/icon_group_big.png differ diff --git a/android/app/src/main/res/drawable-xhdpi/icon_group_big.png b/android/app/src/main/res/drawable-xhdpi/icon_group_big.png new file mode 100644 index 0000000000..8b47926213 Binary files /dev/null and b/android/app/src/main/res/drawable-xhdpi/icon_group_big.png differ diff --git a/android/app/src/main/res/drawable-xxhdpi/icon_group_big.png b/android/app/src/main/res/drawable-xxhdpi/icon_group_big.png new file mode 100644 index 0000000000..a1bff88bb0 Binary files /dev/null and b/android/app/src/main/res/drawable-xxhdpi/icon_group_big.png differ diff --git a/android/app/src/main/res/drawable-xxxhdpi/icon_group_big.png b/android/app/src/main/res/drawable-xxxhdpi/icon_group_big.png new file mode 100644 index 0000000000..bf47ac4f7b Binary files /dev/null and b/android/app/src/main/res/drawable-xxxhdpi/icon_group_big.png differ diff --git a/src/status_im/components/styles.cljs b/src/status_im/components/styles.cljs index 4f697ad41e..aaa82f5a42 100644 --- a/src/status_im/components/styles.cljs +++ b/src/status_im/components/styles.cljs @@ -10,6 +10,7 @@ (def color-black "#000000de") (def color-purple "#a187d5") (def color-gray "#838c93de") +(def color-gray2 "#8f838c93") (def color-white :white) (def color-light-blue "#bbc4cb") (def color-light-blue-transparent "#bbc4cb32") @@ -99,4 +100,4 @@ (def button-input {:flex 1 :flexDirection :column - :height 50}) \ No newline at end of file + :height 50}) diff --git a/src/status_im/contacts/screen.cljs b/src/status_im/contacts/screen.cljs index db0e2e1b2e..880654ab57 100644 --- a/src/status_im/contacts/screen.cljs +++ b/src/status_im/contacts/screen.cljs @@ -8,7 +8,7 @@ linear-gradient scroll-view list-view - list-item]] + list-item] :as react] [status-im.components.action-button :refer [action-button action-button-item]] [status-im.contacts.views.contact :refer [contact-extended-view]] @@ -21,7 +21,6 @@ create-icon toolbar-background2]] [status-im.contacts.styles :as st] - [status-im.utils.listview :as lw] [status-im.i18n :refer [label]])) (defn contact-list-toolbar [] @@ -35,7 +34,9 @@ :style icon-search} :handler (fn [])}}]) -(defn contact-group [contacts title group top?] +(def contacts-limit 10) + +(defn contact-group [contacts contacts-count title group top?] [view st/contact-group [view st/contact-group-header (when-not top? @@ -43,22 +44,23 @@ :colors st/contact-group-header-gradient-top-colors}]) [view st/contact-group-header-inner [text {:style st/contact-group-text} title] - [text {:style st/contact-group-size-text} (str (count contacts))]] + [text {:style st/contact-group-size-text} (str contacts-count)]] [linear-gradient {:style st/contact-group-header-gradient-bottom :colors st/contact-group-header-gradient-bottom-colors}]] ;; todo what if there is no contacts, should we show some information ;; about this? - (when contacts - [view {:flexDirection :column} - (for [contact (take 4 contacts)] - ;; TODO not imlemented: contact more button handler - ^{:key contact} [contact-extended-view contact nil nil])]) - [view st/show-all - [touchable-highlight {:on-press #(dispatch [:show-group-contacts group])} - [text {:style st/show-all-text} (label :show-all)]]]]) + [view {:flexDirection :column} + (for [contact contacts] + ;; TODO not imlemented: contact more button handler + ^{:key contact} [contact-extended-view contact nil nil])] + (when (= contacts-limit (count contacts)) + [view st/show-all + [touchable-highlight {:on-press #(dispatch [:show-group-contacts group])} + [text {:style st/show-all-text} (label :show-all)]]])]) (defn contact-list [] - (let [contacts (subscribe [:all-contacts]) + (let [contacts (subscribe [:get-contacts-with-limit contacts-limit]) + contcats-count (subscribe [:contacts-count]) show-toolbar-shadow? (r/atom false)] (fn [] [drawer-view @@ -68,13 +70,25 @@ (when @show-toolbar-shadow? [linear-gradient {:style st/contact-group-header-gradient-bottom :colors st/contact-group-header-gradient-bottom-colors}])] - [scroll-view {:style st/contact-groups - :onScroll (fn [e] - (let [offset (.. e -nativeEvent -contentOffset -y)] - (reset! show-toolbar-shadow? (<= st/contact-group-header-height offset))))} - ;; TODO not implemented: dapps and persons separation - [contact-group @contacts (label :contacs-group-dapps) :dapps true] - [contact-group @contacts (label :contacs-group-people) :people false]] + (if (pos? @contcats-count) + [scroll-view {:style st/contact-groups + :onScroll (fn [e] + (let [offset (.. e -nativeEvent -contentOffset -y)] + (reset! show-toolbar-shadow? (<= st/contact-group-header-height offset))))} + ;; TODO not implemented: dapps and persons separation + [contact-group + @contacts + @contcats-count + (label :t/contacs-group-dapps) + :dapps true] + [contact-group + @contacts + @contcats-count + (label :t/contacs-group-people) + :people false]] + [view st/empty-contact-groups + [react/icon :group_big st/empty-contacts-icon] + [text {:style st/empty-contacts-text} (label :t/no-contacts)]]) [action-button {:buttonColor color-blue :offsetY 16 :offsetX 16} diff --git a/src/status_im/contacts/styles.cljs b/src/status_im/contacts/styles.cljs index 05e6d22c01..4da8803d96 100644 --- a/src/status_im/contacts/styles.cljs +++ b/src/status_im/contacts/styles.cljs @@ -8,7 +8,8 @@ text5-color color-white toolbar-background2 - online-color]])) + online-color + color-gray2]])) (def contacts-list-container {:flex 1 @@ -22,6 +23,20 @@ {:flex 1 :backgroundColor toolbar-background2}) +(def empty-contact-groups + (merge contact-groups + {:align-items :center + :padding-top 150})) + +(def empty-contacts-icon + {:height 62 + :width 62}) + +(def empty-contacts-text + {:margin-top 12 + :font-size 16 + :color color-gray2}) + (def contacts-list {:backgroundColor :white}) @@ -153,4 +168,4 @@ (def form-container {:marginLeft 16 - :margin-top 50}) \ No newline at end of file + :margin-top 50}) diff --git a/src/status_im/contacts/subs.cljs b/src/status_im/contacts/subs.cljs index e44c89b36a..969518e1dd 100644 --- a/src/status_im/contacts/subs.cljs +++ b/src/status_im/contacts/subs.cljs @@ -1,6 +1,6 @@ (ns status-im.contacts.subs (:require-macros [reagent.ratom :refer [reaction]]) - (:require [re-frame.core :refer [register-sub]])) + (:require [re-frame.core :refer [register-sub subscribe]])) (register-sub :get-contacts (fn [db _] @@ -16,6 +16,16 @@ (let [contacts (reaction (:contacts @db))] (reaction (sort-contacts @contacts))))) +(register-sub :get-contacts-with-limit + (fn [_ [_ limit]] + (let [contacts (subscribe [:all-contacts])] + (reaction (take limit @contacts))))) + +(register-sub :contacts-count + (fn [_ _] + (let [contacts (subscribe [:all-contacts])] + (reaction (count @contacts))))) + (defn get-contact-letter [contact] (when-let [letter (first (:name contact))] (clojure.string/upper-case letter))) @@ -25,25 +35,26 @@ (let [contacts (reaction (:contacts @db))] (reaction (let [ordered (sort-contacts @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)))))) + (reduce (fn [prev cur] + (let [prev-letter (get-contact-letter (last prev)) + cur-letter (get-contact-letter cur)] + (conj prev + (if (not= prev-letter cur-letter) + (assoc cur :letter cur-letter) + cur)))) + [] ordered)))))) (defn contacts-by-chat [fn db chat-id] (let [chat (reaction (get-in @db [:chats chat-id])) contacts (reaction (:contacts @db))] (reaction - (when @chat - (let [current-participants (->> @chat - :contacts - (map :identity) - set)] - (fn #(current-participants (:whisper-identity %)) - (vals @contacts))))))) + (when @chat + (let [current-participants (->> @chat + :contacts + (map :identity) + set)] + (fn #(current-participants (:whisper-identity %)) + (vals @contacts))))))) (defn contacts-by-current-chat [fn db] (let [current-chat-id (:current-chat-id @db)] @@ -72,8 +83,8 @@ chat (reaction (get-in @db [:chats chat-id])) contacts (contacts-by-chat filter db chat-id)] (reaction - (when @chat - (if (:group-chat @chat) - ;; TODO return group chat icon - nil - (:photo-path (first @contacts)))))))) + (when @chat + (if (:group-chat @chat) + ;; TODO return group chat icon + nil + (:photo-path (first @contacts)))))))) diff --git a/src/status_im/contacts/views/contact.cljs b/src/status_im/contacts/views/contact.cljs index 9a0d532fde..b63ea9c31e 100644 --- a/src/status_im/contacts/views/contact.cljs +++ b/src/status_im/contacts/views/contact.cljs @@ -8,8 +8,7 @@ (defn letter-view [letter] [view st/letter-container (when letter - [text {:style st/letter-text} - letter])]) + [text {:style st/letter-text} letter])]) (defn on-press [chat whisper-identity] (if chat @@ -24,12 +23,6 @@ [letter-view letter] [contact-inner-view contact]]]) -(defview contact-simple-view [{:keys [whisper-identity] :as contact}] - [chat [:get-chat whisper-identity]] - [touchable-highlight - {:onPress (on-press chat whisper-identity)} - [view {} [contact-inner-view contact]]]) - (defview contact-extended-view [{:keys [whisper-identity] :as contact} info more-click-handler] [chat [:get-chat whisper-identity]] [touchable-highlight diff --git a/src/status_im/discovery/styles.cljs b/src/status_im/discovery/styles.cljs index dd998b352d..540dc04a03 100644 --- a/src/status_im/discovery/styles.cljs +++ b/src/status_im/discovery/styles.cljs @@ -2,6 +2,7 @@ (:require [status-im.components.styles :refer [font title-font color-white + color-gray2 chat-background online-color selected-message-color @@ -49,7 +50,7 @@ :elevation 0}) (def discovery-subtitle - {:color "#8f838c93" + {:color color-gray2 :fontFamily "sans-serif-medium" :fontSize 14}) diff --git a/src/status_im/translations/en.cljs b/src/status_im/translations/en.cljs index 96ea2c8768..792dc4ebd5 100644 --- a/src/status_im/translations/en.cljs +++ b/src/status_im/translations/en.cljs @@ -73,8 +73,9 @@ :no-name "Noname" :new-contact "New Contact" :show-all "SHOW ALL" - :contacs-group-dapps "DApps" + :contacs-group-dapps "Dapps" :contacs-group-people "People" + :no-contacts "No contacts yet" ;group-settings :remove "Remove" @@ -130,6 +131,6 @@ :login "Login" ;users - :add-account "Add account" + :add-account "Add account" - }) \ No newline at end of file + })