Merge pull request #139 from status-im/feature/#138

Feature/#138

Former-commit-id: 452d7d719a

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/chats_list/screen.cljs

@@ -75,7 +75,7 @@
           [action-button-item
            {:title       (label :t/new-chat)
             :buttonColor :#9b59b6
-            :onPress     #(dispatch [:navigate-to :contact-list])}
+            :onPress     #(dispatch [:show-group-contacts :people])}
            [icon {:name  :android-create
                   :style st/create-icon}]]
           [action-button-item

src/status_im/components/chat_icon/screen.cljs

@@ -6,7 +6,7 @@
                                                 image
                                                 icon]]
             [status-im.components.chat-icon.styles :as st]
-            [status-im.components.styles :refer [color-purple]]
+            [status-im.components.styles :refer [default-chat-color]]
             [clojure.string :as s]))
 
 (defn default-chat-icon [name styles]
@@ -63,6 +63,26 @@
     :default-chat-icon      (st/default-chat-icon-menu-item color)
     :default-chat-icon-text st/default-chat-icon-text}])
 
+(defn contact-icon-view [contact styles]
+  (let [photo-path (:photo-path contact)
+        ;; TODO stub data
+        online true]
+    [view (:container styles)
+     (if-not (s/blank? photo-path)
+       [chat-icon photo-path styles]
+       [default-chat-icon (:name contact) styles])
+     [contact-online online styles]]))
+
+(defn contact-icon-contacts-tab [contact]
+  [contact-icon-view contact
+   {:container              st/container-chat-list
+    :online-view            st/online-view
+    :online-dot-left        st/online-dot-left
+    :online-dot-right       st/online-dot-right
+    :chat-icon              st/chat-icon-chat-list
+    :default-chat-icon      (st/default-chat-icon-chat-list default-chat-color)
+    :default-chat-icon-text st/default-chat-icon-text}])
+
 (defn profile-icon-view [photo-path name color online]
   (let [styles {:container              st/container-profile
                 :online-view            st/online-view-profile
@@ -81,7 +101,7 @@
   [contact [:contact]]
   (let [;; TODO stub data
         online true
-        color  color-purple]
+        color  default-chat-color]
     [profile-icon-view (:photo-path contact) (:name contact) color online]))
 
 (defview my-profile-icon []
@@ -89,5 +109,5 @@
    photo-path [:get :photo-path]]
   (let [;; TODO stub data
         online true
-        color  color-purple]
+        color  default-chat-color]
     [profile-icon-view photo-path name color online]))

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")
@@ -20,6 +21,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

@@ -1,15 +1,17 @@
 (ns status-im.contacts.screen
   (:require-macros [status-im.utils.views :refer [defview]])
   (:require [re-frame.core :refer [subscribe dispatch dispatch-sync]]
+            [reagent.core :as r]
             [status-im.components.react :refer [view text
                                                 image
                                                 touchable-highlight
+                                                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-view]]
+            [status-im.contacts.views.contact :refer [contact-extended-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]]
@@ -19,41 +21,80 @@
                                                  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]))
-
 (defn contact-list-toolbar []
-  [toolbar {:nav-action {:image   {:source {:uri :icon_hamburger}
+  [toolbar {:nav-action       {:image   {:source {:uri :icon_hamburger}
-                                   :style  hamburger-icon}
+                                         :style  hamburger-icon}
-                         :handler open-drawer}
+                               :handler open-drawer}
             :title            (label :t/contacts)
             :background-color toolbar-background2
+            :style            {:elevation 0}
             :action           {:image   {:source {:uri :icon_search}
                                          :style  icon-search}
                                :handler (fn [])}}])
 
-(defview contact-list []
+(def contacts-limit 10)
-  [contacts [:get-contacts]]
+
-   [drawer-view
+(defn contact-group [contacts contacts-count title group top?]
-    [view st/contacts-list-container
+  [view st/contact-group
-     [contact-list-toolbar]
+   [view st/contact-group-header
-     ;; todo what if there is no contacts, should we show some information
+    (when-not top?
-     ;; about this?
+      [linear-gradient {:style  st/contact-group-header-gradient-top
-     (when contacts
+                        :colors st/contact-group-header-gradient-top-colors}])
-       [list-view {:dataSource          (lw/to-datasource contacts)
+    [view st/contact-group-header-inner
-                   :enableEmptySections true
+     [text {:style st/contact-group-text} title]
-                   :renderRow           render-row
+     [text {:style st/contact-group-size-text} (str contacts-count)]]
-                   :style               st/contacts-list}])
+    [linear-gradient {:style  st/contact-group-header-gradient-bottom
-     [action-button {:buttonColor color-blue
+                      :colors st/contact-group-header-gradient-bottom-colors}]]
-                     :offsetY     16
+   ;; todo what if there is no contacts, should we show some information
-                     :offsetX     16}
+   ;; about this?
-      [action-button-item
+   [view {:flexDirection :column}
-       {:title       (label :t/new-contact)
+    (for [contact contacts]
-        :buttonColor :#9b59b6
+      ;; TODO not imlemented: contact more button handler
-        :onPress     #(dispatch [:navigate-to :new-contact])}
+      ^{:key contact} [contact-extended-view contact nil nil])]
-       [icon {:name  :android-create
+   (when (= contacts-limit (count contacts))
-              :style create-icon}]]
+     [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 [:get-contacts-with-limit contacts-limit])
+        contcats-count       (subscribe [:contacts-count])
+        show-toolbar-shadow? (r/atom false)]
+    (fn []
+      [drawer-view
+       [view st/contacts-list-container
+        [contact-list-toolbar]
+        [view {:style st/toolbar-shadow}
+         (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
+            @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}
+         [action-button-item
+          {:title       (label :t/new-contact)
+           :buttonColor :#9b59b6
+           :onPress     #(dispatch [:navigate-to :new-contact])}
+          [icon {:name  :android-create
+                 :style create-icon}]]]]])))

src/status_im/contacts/styles.cljs

@@ -1,72 +1,158 @@
 (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]]))
+                                                 online-color
-
+                                                 color-gray2]]))
-
 
 (def contacts-list-container
   {:flex            1
    :backgroundColor :white})
 
+(def toolbar-shadow
+  {:height          2
+   :backgroundColor toolbar-background2})
+
+(def contact-groups
+  {: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})
 
-(def contact-photo-container
+(def contact-group
-  {:borderRadius 50})
+  {:flexDirection :column})
 
-(def photo-image
+(def contact-group-header
-  {:borderRadius 50
+  {:flexDirection   :column
-   :width        40
+   :backgroundColor toolbar-background2})
-   :height       40})
 
-(def online-container
+(def contact-group-header-inner
-  {:position        :absolute
+  {:flexDirection   :row
-   :top             24
+   :alignItems      :center
-   :left            24
+   :height          48
-   :width           20
+   :backgroundColor toolbar-background2})
-   :height          20
-   :borderRadius    50
-   :backgroundColor online-color
-   :borderWidth     2
-   :borderColor     color-white})
 
-(def online-dot
+(def contact-group-text
-  {:position        :absolute
+  {:flex       1
-   :top             6
+   :marginLeft 16
-   :width           4
+   :fontSize   14
-   :height          4
+   :fontFamily font-medium
-   :borderRadius    50
+   :color      text5-color})
+
+(def contact-group-size-text
+  {:marginRight 14
+   :fontSize    12
+   :fontFamily  font
+   :color       text2-color})
+
+(def contact-group-header-gradient-top
+  {:flexDirection   :row
+   :height          3
+   :backgroundColor toolbar-background2})
+
+(def contact-group-header-gradient-top-colors
+  ["rgba(24, 52, 76, 0.165)"
+   "rgba(24, 52, 76, 0.03)"
+   "rgba(24, 52, 76, 0.01)"])
+
+(def contact-group-header-gradient-bottom
+  {:flexDirection   :row
+   :height          2
+   :backgroundColor toolbar-background2})
+
+(def contact-group-header-gradient-bottom-colors
+  ["rgba(24, 52, 76, 0.01)"
+   "rgba(24, 52, 76, 0.05)"])
+
+(def contact-group-header-height (+ (:height contact-group-header-inner)
+                                    (:height contact-group-header-gradient-bottom)))
+
+(def show-all
+  {:flexDirection   :row
+   :alignItems      :center
+   :height          56
    :backgroundColor color-white})
 
-(def online-dot-left
+(def show-all-text
-  (assoc online-dot :left 3))
+  {:marginLeft    72
-
+   :fontSize      14
-(def online-dot-right
+   :fontFamily    font-medium
-  (assoc online-dot :left 9))
+   :color         text3-color
+   ;; ios only:
+   :letterSpacing 0.5})
 
 (def contact-container
-  {:flexDirection :row
+  {:flexDirection   :row
-   :height        56})
+   :backgroundColor color-white})
 
-(def photo-container
+(def letter-container
-  {:marginTop  8
+  {:paddingTop  11
-   :marginLeft 16
+   :paddingLeft 20
-   :width      44
+   :width       56})
-   :height     44})
 
-(def name-container
+(def letter-text
-  {:justifyContent :center})
+  {:fontSize   24
+   :fontFamily font
+   :color      text3-color})
+
+(def contact-photo-container
+  {:marginTop  4
+   :marginLeft 12})
+
+(def contact-inner-container
+  {:flex            1
+   :flexDirection   :row
+   :height          56
+   :backgroundColor color-white})
+
+(def info-container
+  {:flex           1
+   :flexDirection  :column
+   :marginLeft     12
+   :justifyContent :center})
 
 (def name-text
-  {:marginLeft 16
+  {:fontSize   16
-   :fontSize   16
    :fontFamily font
    :color      text1-color})
 
+(def info-text
+  {:marginTop  1
+   :fontSize   12
+   :fontFamily font
+   :color      text2-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/subs.cljs

@@ -1,28 +1,60 @@
 (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 _]
     (let [contacts (reaction (:contacts @db))]
       (reaction (vals @contacts)))))
 
+(defn sort-contacts [contacts]
+  (sort-by :name #(compare (clojure.string/lower-case %1)
+                           (clojure.string/lower-case %2)) (vals contacts)))
+
 (register-sub :all-contacts
   (fn [db _]
     (let [contacts (reaction (:contacts @db))]
-      (reaction (sort-by :name (vals @contacts))))))
+      (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)))
+
+(register-sub :contacts-with-letters
+  (fn [db _]
+    (let [contacts (reaction (:contacts @db))]
+      (reaction
+        (let [ordered (sort-contacts @contacts)]
+          (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
+      (when @chat
-       (let [current-participants (->> @chat
+        (let [current-participants (->> @chat
-                                       :contacts
+                                        :contacts
-                                       (map :identity)
+                                        (map :identity)
-                                       set)]
+                                        set)]
-         (fn #(current-participants (:whisper-identity %))
+          (fn #(current-participants (:whisper-identity %))
-           (vals @contacts)))))))
+              (vals @contacts)))))))
 
 (defn contacts-by-current-chat [fn db]
   (let [current-chat-id (:current-chat-id @db)]
@@ -33,6 +65,10 @@
     (let [identity (:contact-identity @db)]
       (reaction (get-in @db [:contacts identity])))))
 
+(register-sub :contact-by-identity
+  (fn [db [_ identity]]
+    (reaction (get-in @db [:contacts identity]))))
+
 (register-sub :all-new-contacts
   (fn [db _]
     (contacts-by-current-chat remove db)))
@@ -47,8 +83,8 @@
           chat     (reaction (get-in @db [:chats chat-id]))
           contacts (contacts-by-chat filter db chat-id)]
       (reaction
-       (when @chat
+        (when @chat
-         (if (:group-chat @chat)
+          (if (:group-chat @chat)
-           ;; TODO return group chat icon
+            ;; TODO return group chat icon
-           nil
+            nil
-           (:photo-path (first @contacts))))))))
+            (:photo-path (first @contacts))))))))

src/status_im/contacts/views/contact.cljs

@@ -1,16 +1,35 @@
 (ns status-im.contacts.views.contact
   (:require-macros [status-im.utils.views :refer [defview]])
-  (:require [status-im.components.react :refer [view touchable-highlight]]
+  (:require [status-im.components.react :refer [view text icon touchable-highlight]]
             [re-frame.core :refer [dispatch subscribe]]
+            [status-im.contacts.styles :as st]
             [status-im.contacts.views.contact-inner :refer [contact-inner-view]]))
 
+(defn letter-view [letter]
+  [view st/letter-container
+   (when letter
+     [text {:style st/letter-text} letter])])
+
 (defn on-press [chat whisper-identity]
   (if chat
     #(dispatch [:navigate-to :chat whisper-identity])
     #(dispatch [:start-chat whisper-identity])))
 
-(defview contact-view [{:keys [whisper-identity] :as contact}]
+(defview contact-with-letter-view [{:keys [whisper-identity letter] :as contact}]
   [chat [:get-chat whisper-identity]]
   [touchable-highlight
    {:onPress (on-press chat whisper-identity)}
-   [view {} [contact-inner-view contact]]])
+   [view st/contact-container
+    [letter-view letter]
+    [contact-inner-view contact]]])
+
+(defview contact-extended-view [{:keys [whisper-identity] :as contact} info more-click-handler]
+  [chat [:get-chat whisper-identity]]
+  [touchable-highlight
+   {:onPress (on-press chat whisper-identity)}
+   [view st/contact-container
+    [contact-inner-view contact info]
+    [touchable-highlight
+     {:on-press more-click-handler}
+     [view st/more-btn
+      [icon :more-vertical st/more-btn-icon]]]]])

src/status_im/contacts/views/contact_inner.cljs

@@ -1,31 +1,26 @@
 (ns status-im.contacts.views.contact-inner
   (:require [clojure.string :as s]
             [status-im.components.react :refer [view image text]]
-            [status-im.resources :as res]
+            [status-im.components.chat-icon.screen :refer [contact-icon-contacts-tab]]
             [status-im.contacts.styles :as st]
             [status-im.i18n :refer [label]]))
 
-(defn contact-photo [{:keys [photo-path]}]
+(defn contact-photo [contact]
   [view st/contact-photo-container
-   [image {:source (if (s/blank? photo-path)
+   [contact-icon-contacts-tab contact]])
-                     res/user-no-photo
-                     {:uri photo-path})
-           :style  st/photo-image}]])
 
-(defn contact-online [{:keys [online]}]
+(defn contact-inner-view
-  (when online
+  ([contact]
-    [view st/online-container
+   (contact-inner-view contact nil))
-     [view st/online-dot-left]
+  ([{:keys [name] :as contact} info]
-     [view st/online-dot-right]]))
+   [view st/contact-inner-container
-
+    [contact-photo contact]
-(defn contact-inner-view [{:keys [name photo-path online]}]
+    [view st/info-container
-  [view st/contact-container
+     [text {:style st/name-text}
-   [view st/photo-container
+      (if (pos? (count (:name contact)))
-    [contact-photo {:photo-path photo-path}]
+        name
-    [contact-online {:online online}]]
+        ;; todo is this correct behaviour?
-   [view st/name-container
+        (label :t/no-name))]
-    [text {:style st/name-text}
+     (when info
-     (if (pos? (count name))
+       [text {:style st/info-text}
-       name
+        info])]]))
-       ;; todo is this correct behaviour?
-       (label :t/no-name))]]])

src/status_im/contacts/views/contact_list.cljs

@@ -0,0 +1,46 @@
+(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-with-letter-view]]
+            [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-background1]]
+            [status-im.contacts.styles :as st]
+            [status-im.utils.listview :as lw]
+            [status-im.i18n :refer [label]]))
+
+(defn render-row [row _ _]
+  (list-item [contact-with-letter-view row]))
+
+(defview contact-list-toolbar []
+  [group [:get :contacts-group]]
+  [toolbar {:title            (label (if (= group :dapps)
+                                       :t/contacs-group-dapps
+                                       :t/contacs-group-people))
+            :background-color toolbar-background1
+            :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/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/group_settings/styles/member.cljs

@@ -1,78 +0,0 @@
-(ns status-im.group-settings.styles.member
-  (:require [status-im.components.styles :refer [font
-                                               title-font
-                                               text1-color
-                                               text2-color
-                                               color-white
-                                               online-color]]))
-
-(def contact-photo-container
-  {:borderRadius 50})
-
-(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 online-dot
-  {:position        :absolute
-   :top             6
-   :width           4
-   :height          4
-   :borderRadius    50
-   :backgroundColor color-white})
-
-(def online-dot-left
-  (assoc online-dot :left 3))
-
-(def online-dot-right
-  (assoc online-dot :left 9))
-
-(def contact-container
-  {:flexDirection :row
-   :height        56})
-
-(def photo-container
-  {:marginTop  8
-   :marginLeft 16
-   :width      44
-   :height     44})
-
-(def info-container
-  {:flex           1
-   :flexDirection  :column
-   :marginLeft     16
-   :justifyContent :center})
-
-(def name-text
-  {:marginTop  -2
-   :fontSize   16
-   :fontFamily font
-   :color      text1-color})
-
-(def role-text
-  {:marginTop  1
-   :fontSize   12
-   :fontFamily font
-   :color      text2-color})
-
-(def more-btn
-  {:width          56
-   :height         56
-   :alignItems     :center
-   :justifyContent :center })
-
-(def more-btn-icon
-  {:width  4
-   :height 16})

src/status_im/group_settings/views/member.cljs

@@ -1,44 +1,9 @@
 (ns status-im.group-settings.views.member
-  (:require [clojure.string :as s]
+  (:require [re-frame.core :refer [subscribe dispatch dispatch-sync]]
-            [re-frame.core :refer [subscribe dispatch dispatch-sync]]
+            [status-im.contacts.views.contact :refer [contact-extended-view]]
-            [status-im.components.react :refer [view
-                                              image
-                                              text
-                                              icon
-                                              touchable-highlight]]
-            [status-im.resources :as res]
-            [status-im.group-settings.styles.member :as st]
             [status-im.i18n :refer [label]]))
 
-(defn contact-photo [{:keys [photo-path]}]
+(defn member-view [{:keys [whisper-identity role] :as contact}]
-  [view st/contact-photo-container
+  ;; TODO implement :role property for group chat contact
-   [image {:source (if (s/blank? photo-path)
+  [contact-extended-view contact role
-                     res/user-no-photo
+   #(dispatch [:set :selected-participants #{whisper-identity}])])
-                     {:uri photo-path})
-           :style  st/photo-image}]])
-
-(defn contact-online [{:keys [online]}]
-  (when online
-    [view st/online-container
-     [view st/online-dot-left]
-     [view st/online-dot-right]]))
-
-(defn member-view [{:keys [whisper-identity name photo-path online role]}]
-  [view st/contact-container
-   [view st/photo-container
-    [contact-photo {:photo-path photo-path}]
-    [contact-online {:online online}]]
-   [view st/info-container
-    [text {:style st/name-text}
-     (if (pos? (count name))
-       name
-       ;; todo is this correct behaviour?
-       (label :t/no-name))]
-    ;; TODO implement :role property for group chat contact
-    (when role
-      [text {:style st/role-text}
-       role])]
-   [touchable-highlight
-    {:on-press #(dispatch [:set :selected-participants #{whisper-identity}])}
-    [view st/more-btn
-     [icon :more-vertical st/more-btn-icon]]]])

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,10 @@
    :contacts                              "Contacts"
    :no-name                               "Noname"
    :new-contact                           "New Contact"
+   :show-all                              "SHOW ALL"
+   :contacs-group-dapps                   "Dapps"
+   :contacs-group-people                  "People"
+   :no-contacts                           "No contacts yet"
 
    ;group-settings
    :remove                                "Remove"
@@ -127,6 +131,6 @@
    :login                                 "Login"
 
    ;users
-   :add-account                                 "Add account"
+   :add-account                           "Add account"
 
    })