no contacts screen & some fixes

Former-commit-id: dc567356ca

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")

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)]
+    (for [contact contacts]
       ;; TODO not imlemented: contact more button handler
-        ^{:key contact} [contact-extended-view contact nil nil])])
+      ^{: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)]]]])
+       [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}])]
+        (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 (label :contacs-group-dapps) :dapps true]
+           [contact-group
-         [contact-group @contacts (label :contacs-group-people) :people false]]
+            @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}

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})
 

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,13 +35,14 @@
     (let [contacts (reaction (:contacts @db))]
       (reaction
         (let [ordered (sort-contacts @contacts)]
-          (map (fn [prev cur]
+          (reduce (fn [prev cur]
-                 (let [prev-letter (get-contact-letter prev)
+                    (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)))
+                              cur))))
-               (cons nil ordered) ordered))))))
+                  [] ordered))))))
 
 (defn contacts-by-chat [fn db chat-id]
   (let [chat     (reaction (get-in @db [:chats chat-id]))

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}
+     [text {:style st/letter-text} letter])])
-      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

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})
 

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"