Contact view refactoring

Former-commit-id: 93de4680de

src/status_im/chats_list/screen.cljs

@@ -46,7 +46,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/contacts/screen.cljs

@@ -11,7 +11,7 @@
                                                 list-item]]
             [status-im.components.action-button :refer [action-button
                                                         action-button-item]]
-            [status-im.contacts.views.contact :refer [contact-view-2]]
+            [status-im.contacts.views.contact :refer [contact-extended-view]]
             [status-im.components.toolbar :refer [toolbar]]
             [status-im.components.drawer.view :refer [drawer-view open-drawer]]
             [status-im.components.icons.ionicons :refer [icon]]
@@ -24,9 +24,6 @@
             [status-im.utils.listview :as lw]
             [status-im.i18n :refer [label]]))
 
-(defn render-row [row _ _]
-  (list-item [contact-view-2 row]))
-
 (defn contact-list-toolbar []
   [toolbar {:nav-action       {:image   {:source {:uri :icon_hamburger}
                                          :style  hamburger-icon}
@@ -54,7 +51,8 @@
    (when contacts
      [view {:flexDirection :column}
       (for [contact (take 4 contacts)]
-        ^{:key contact} [contact-view-2 contact])])
+        ;; 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)]]]])

src/status_im/contacts/styles.cljs

@@ -87,6 +87,10 @@
    ;; ios only:
    :letterSpacing 0.5})
 
+(def contact-container
+  {:flexDirection   :row
+   :backgroundColor color-white})
+
 (def letter-container
   {:paddingTop  11
    :paddingLeft 20
@@ -101,13 +105,15 @@
   {:marginTop  4
    :marginLeft 12})
 
-(def contact-container
+(def contact-inner-container
-  {:flexDirection   :row
+  {:flex            1
+   :flexDirection   :row
    :height          56
    :backgroundColor color-white})
 
-(def name-container
+(def info-container
   {:flex           1
+   :flexDirection  :column
    :marginLeft     12
    :justifyContent :center})
 
@@ -116,6 +122,12 @@
    :fontFamily font
    :color      text1-color})
 
+(def info-text
+  {:marginTop  1
+   :fontSize   12
+   :fontFamily font
+   :color      text2-color})
+
 (def more-btn
   {:width          56
    :height         56

src/status_im/contacts/views/contact.cljs

@@ -1,23 +1,42 @@
 (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.views.contact-inner :refer [contact-inner-view
+            [status-im.contacts.styles :as st]
-                                                            contact-inner-view-2]]))
+            [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 st/contact-container
+    [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-view-2 [{:keys [whisper-identity] :as 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 [contact-inner-view-2 contact]]])
+   [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,42 +1,26 @@
 (ns status-im.contacts.views.contact-inner
   (:require [clojure.string :as s]
-            [status-im.components.react :refer [view image text touchable-highlight icon]]
+            [status-im.components.react :refer [view image text]]
             [status-im.components.chat-icon.screen :refer [contact-icon-contacts-tab]]
             [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 [contact]
   [view st/contact-photo-container
    [contact-icon-contacts-tab contact]])
 
-(defn contact-inner-view [{:keys [name letter] :as contact}]
+(defn contact-inner-view
-  [view st/contact-container
+  ([contact]
-   [letter-view letter]
+   (contact-inner-view contact nil))
-   [contact-photo contact]
+  ([{:keys [name] :as contact} info]
-   [view st/name-container
+   [view st/contact-inner-container
-    [text {:style st/name-text}
+    [contact-photo contact]
-     (if (pos? (count name))
+    [view st/info-container
-       name
+     [text {:style st/name-text}
-       ;; todo is this correct behaviour?
+      (if (pos? (count (:name contact)))
-       (label :t/no-name))]]])
+        name
-
+        ;; todo is this correct behaviour?
-(defn contact-inner-view-2 [{:keys [name] :as contact}]
+        (label :t/no-name))]
-  [view st/contact-container
+     (when info
-   [contact-photo contact]
+       [text {:style st/info-text}
-   [view st/name-container
+        info])]]))
-    [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

@@ -6,7 +6,7 @@
                                                 touchable-highlight
                                                 list-view
                                                 list-item]]
-            [status-im.contacts.views.contact :refer [contact-view]]
+            [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]]
@@ -20,7 +20,7 @@
             [status-im.i18n :refer [label]]))
 
 (defn render-row [row _ _]
-  (list-item [contact-view row]))
+  (list-item [contact-with-letter-view row]))
 
 (defview contact-list-toolbar []
   [group [:get :contacts-group]]

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