Contacts tab view. Contacts group view.

Former-commit-id: e223fcbf9e

src/status_im/android/core.cljs

@@ -7,7 +7,7 @@
             [status-im.subs]
             [status-im.components.react :refer [navigator app-registry]]
             [status-im.components.main-tabs :refer [main-tabs]]
-            [status-im.contacts.screen :refer [contact-list]]
+            [status-im.contacts.views.contact-list :refer [contact-list] ]
             [status-im.contacts.views.new-contact :refer [new-contact]]
             [status-im.qr-scanner.screen :refer [qr-scanner]]
             [status-im.discovery.screen :refer [discovery]]
@@ -46,6 +46,7 @@
         :new-group [new-group]
         :group-settings [group-settings]
         :contact-list [main-tabs]
+        :group-contacts [contact-list]
         :new-contact [new-contact]
         :qr-scanner [qr-scanner]
         :chat [chat]

src/status_im/components/styles.cljs

@@ -20,6 +20,7 @@
 (def text2-color color-gray)
 (def text3-color color-blue)
 (def text4-color color-white)
+(def text5-color "#838c938f")
 (def online-color color-blue)
 (def new-messages-count-color color-blue-transparent)
 (def chat-background color-light-gray)

src/status_im/contacts/screen.cljs

@@ -4,16 +4,17 @@
             [status-im.components.react :refer [view text
                                                 image
                                                 touchable-highlight
+                                                scroll-view
                                                 list-view
                                                 list-item]]
             [status-im.components.action-button :refer [action-button
                                                         action-button-item]]
-            [status-im.contacts.views.contact :refer [contact-view]]
+            [status-im.contacts.views.contact :refer [contact-view-2]]
-            [status-im.components.styles :refer [toolbar-background2]]
             [status-im.components.toolbar :refer [toolbar]]
             [status-im.components.drawer.view :refer [drawer-view open-drawer]]
             [status-im.components.icons.ionicons :refer [icon]]
             [status-im.components.styles :refer [color-blue
+                                                 flex
                                                  hamburger-icon
                                                  icon-search
                                                  create-icon
@@ -23,7 +24,7 @@
             [status-im.i18n :refer [label]]))
 
 (defn render-row [row _ _]
-  (list-item [contact-view row]))
+  (list-item [contact-view-2 row]))
 
 (defn contact-list-toolbar []
   [toolbar {:nav-action {:image   {:source {:uri :icon_hamburger}
@@ -36,17 +37,34 @@
                                :handler (fn [])}}])
 
 (defview contact-list []
-  [contacts [:contacts-with-letters]]
+  [contacts [:get-contacts]]
    [drawer-view
     [view st/contacts-list-container
      [contact-list-toolbar]
-     ;; todo what if there is no contacts, should we show some information
+     [scroll-view {:style flex}
-     ;; about this?
+      ;; TODO not implemented: dapps and persons separation
-     (when contacts
+      [view st/contact-group
-       [list-view {:dataSource          (lw/to-datasource contacts)
+       [text {:style st/contact-group-text} (label :contacs-group-dapps)]
-                   :enableEmptySections true
+       [text {:style st/contact-group-size-text} (str (count contacts))]]
-                   :renderRow           render-row
+      ;; todo what if there is no contacts, should we show some information
-                   :style               st/contacts-list}])
+      ;; about this?
+      (when contacts
+        [view {:flexDirection :column}
+         (for [contact (take 4 contacts)]
+           ^{:key contact} [contact-view-2 contact])])
+      [view st/show-all
+       [touchable-highlight {:on-press #(dispatch [:show-group-contacts :dapps])}
+        [text {:style st/show-all-text} (label :show-all)]]]
+      [view st/contact-group
+       [text {:style st/contact-group-text} (label :contacs-group-people)]
+       [text {:style st/contact-group-size-text} (str (count contacts))]]
+      (when contacts
+        [view {:flexDirection :column}
+         (for [contact (take 4 contacts)]
+           ^{:key contact} [contact-view-2 contact])])
+      [view st/show-all
+       [touchable-highlight {:on-press #(dispatch [:show-group-contacts :people])}
+        [text {:style st/show-all-text} (label :show-all)]]]]
      [action-button {:buttonColor color-blue
                      :offsetY     16
                      :offsetX     16}
@@ -55,5 +73,4 @@
         :buttonColor :#9b59b6
         :onPress     #(dispatch [:navigate-to :new-contact])}
        [icon {:name  :android-create
-              :style create-icon}]]
+              :style create-icon}]]]]])
-      ]]])

src/status_im/contacts/styles.cljs

@@ -1,8 +1,11 @@
 (ns status-im.contacts.styles
   (:require [status-im.components.styles :refer [font
+                                                 font-medium
                                                  title-font
                                                  text1-color
+                                                 text2-color
                                                  text3-color
+                                                 text5-color
                                                  color-white
                                                  toolbar-background2
                                                  online-color]]))
@@ -14,6 +17,38 @@
 (def contacts-list
   {:backgroundColor :white})
 
+(def contact-group
+  {:flexDirection   :row
+   :alignItems      :center
+   :height          52
+   :backgroundColor toolbar-background2})
+
+(def contact-group-text
+  {:flex       1
+   :marginLeft 16
+   :fontSize   14
+   :fontFamily font-medium
+   :color      text5-color})
+
+(def contact-group-size-text
+  {:marginRight 14
+   :fontSize    12
+   :fontFamily  font
+   :color       text2-color})
+
+(def show-all
+  {:flexDirection :row
+   :alignItems    :center
+   :height        56})
+
+(def show-all-text
+  {:marginLeft    72
+   :fontSize      14
+   :fontFamily    font-medium
+   :color         text3-color
+   ;; ios only:
+   :letterSpacing 0.5})
+
 (def letter-container
   {:paddingTop  11
    :paddingLeft 20
@@ -33,7 +68,8 @@
    :height        56})
 
 (def name-container
-  {:marginLeft     12
+  {:flex           1
+   :marginLeft     12
    :justifyContent :center})
 
 (def name-text
@@ -41,6 +77,16 @@
    :fontFamily font
    :color      text1-color})
 
+(def more-btn
+  {:width          56
+   :height         56
+   :alignItems     :center
+   :justifyContent :center})
+
+(def more-btn-icon
+  {:width  4
+   :height 16})
+
 ; new contact
 
 (def contact-form-container

src/status_im/contacts/views/contact.cljs

@@ -2,7 +2,8 @@
   (:require-macros [status-im.utils.views :refer [defview]])
   (:require [status-im.components.react :refer [view touchable-highlight]]
             [re-frame.core :refer [dispatch subscribe]]
-            [status-im.contacts.views.contact-inner :refer [contact-inner-view]]))
+            [status-im.contacts.views.contact-inner :refer [contact-inner-view
+                                                            contact-inner-view-2]]))
 
 (defn on-press [chat whisper-identity]
   (if chat
@@ -14,3 +15,9 @@
   [touchable-highlight
    {:onPress (on-press chat whisper-identity)}
    [view {} [contact-inner-view contact]]])
+
+(defview contact-view-2 [{:keys [whisper-identity] :as contact}]
+  [chat [:get-chat whisper-identity]]
+  [touchable-highlight
+   {:onPress (on-press chat whisper-identity)}
+   [view [contact-inner-view-2 contact]]])

src/status_im/contacts/views/contact_inner.cljs

@@ -1,6 +1,6 @@
 (ns status-im.contacts.views.contact-inner
   (:require [clojure.string :as s]
-            [status-im.components.react :refer [view image text]]
+            [status-im.components.react :refer [view image text touchable-highlight icon]]
             [status-im.components.chat-icon.screen :refer [contact-icon-contacts-tab]]
             [status-im.contacts.styles :as st]
             [status-im.i18n :refer [label]]))
@@ -25,3 +25,18 @@
        name
        ;; todo is this correct behaviour?
        (label :t/no-name))]]])
+
+(defn contact-inner-view-2 [{:keys [name] :as contact}]
+  [view st/contact-container
+   [contact-photo contact]
+   [view st/name-container
+    [text {:style st/name-text}
+     (if (pos? (count name))
+       name
+       ;; todo is this correct behaviour?
+       (label :t/no-name))]]
+   [touchable-highlight
+    ;; TODO not imlemented: contact more button
+    {:on-press nil}
+    [view st/more-btn
+     [icon :more-vertical st/more-btn-icon]]]])

src/status_im/contacts/views/contact_list.cljs

@@ -0,0 +1,48 @@
+(ns status-im.contacts.views.contact-list
+  (:require-macros [status-im.utils.views :refer [defview]])
+  (:require [re-frame.core :refer [subscribe dispatch dispatch-sync]]
+            [status-im.components.react :refer [view text
+                                                image
+                                                touchable-highlight
+                                                list-view
+                                                list-item]]
+            [status-im.contacts.views.contact :refer [contact-view]]
+            [status-im.components.styles :refer [toolbar-background2]]
+            [status-im.components.toolbar :refer [toolbar]]
+            [status-im.components.drawer.view :refer [drawer-view open-drawer]]
+            [status-im.components.icons.ionicons :refer [icon]]
+            [status-im.components.styles :refer [color-blue
+                                                 hamburger-icon
+                                                 icon-search
+                                                 create-icon
+                                                 toolbar-background2]]
+            [status-im.contacts.styles :as st]
+            [status-im.utils.listview :as lw]
+            [status-im.i18n :refer [label]]))
+
+(defn render-row [row _ _]
+  (list-item [contact-view row]))
+
+(defview contact-list-toolbar []
+  [group [:get :contacts-group]]
+  [toolbar {;; TODO contacts group name
+            :title            (label (if (= group :dapps)
+                                       :t/contacs-group-dapps
+                                       :t/contacs-group-people))
+            :background-color toolbar-background2
+            :action           {:image   {:source {:uri :icon_search}
+                                         :style  icon-search}
+                               :handler (fn [])}}])
+
+(defview contact-list []
+  [contacts [:contacts-with-letters]]
+   [drawer-view
+    [view st/contacts-list-container
+     [contact-list-toolbar]
+     ;; todo what if there is no contacts, should we show some information
+     ;; about this?
+     (when contacts
+       [list-view {:dataSource          (lw/to-datasource contacts)
+                   :enableEmptySections true
+                   :renderRow           render-row
+                   :style               st/contacts-list}])]])

src/status_im/navigation/handlers.cljs

@@ -67,6 +67,12 @@
   (fn [db _]
     (push-view db :contact-list)))
 
+(register-handler :show-group-contacts
+  (fn [db [_ group]]
+    (-> db
+        (assoc :contacts-group group)
+        (push-view :group-contacts))))
+
 (defn show-profile
   [db [_ identity]]
   (-> db

src/status_im/translations/en.cljs

@@ -72,6 +72,9 @@
    :contacts                              "Contacts"
    :no-name                               "Noname"
    :new-contact                           "New Contact"
+   :show-all                              "SHOW ALL"
+   :contacs-group-dapps                   "DApps"
+   :contacs-group-people                  "People"
 
    ;group-settings
    :remove                                "Remove"