From c2ee61c1db1b000c7e8375bba1ace527381468ea Mon Sep 17 00:00:00 2001 From: virvar Date: Mon, 20 Jun 2016 16:37:26 +0300 Subject: [PATCH] Contact view refactoring Former-commit-id: 93de4680de470003df22d6894f7bd5107d625608 --- src/status_im/chats_list/screen.cljs | 2 +- src/status_im/contacts/screen.cljs | 8 +- src/status_im/contacts/styles.cljs | 18 ++++- src/status_im/contacts/views/contact.cljs | 31 ++++++-- .../contacts/views/contact_inner.cljs | 48 ++++-------- .../contacts/views/contact_list.cljs | 4 +- .../group_settings/styles/member.cljs | 78 ------------------- .../group_settings/views/member.cljs | 47 ++--------- 8 files changed, 68 insertions(+), 168 deletions(-) delete mode 100644 src/status_im/group_settings/styles/member.cljs diff --git a/src/status_im/chats_list/screen.cljs b/src/status_im/chats_list/screen.cljs index 572f0ac5a9..ae6219d985 100644 --- a/src/status_im/chats_list/screen.cljs +++ b/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 diff --git a/src/status_im/contacts/screen.cljs b/src/status_im/contacts/screen.cljs index df87dc87da..db0e2e1b2e 100644 --- a/src/status_im/contacts/screen.cljs +++ b/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)]]]]) diff --git a/src/status_im/contacts/styles.cljs b/src/status_im/contacts/styles.cljs index d685191212..05e6d22c01 100644 --- a/src/status_im/contacts/styles.cljs +++ b/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 - {:flexDirection :row +(def contact-inner-container + {: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 diff --git a/src/status_im/contacts/views/contact.cljs b/src/status_im/contacts/views/contact.cljs index cc67dba1d3..9a0d532fde 100644 --- a/src/status_im/contacts/views/contact.cljs +++ b/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 - contact-inner-view-2]])) + [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 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]]]]]) diff --git a/src/status_im/contacts/views/contact_inner.cljs b/src/status_im/contacts/views/contact_inner.cljs index 8b44f601c8..4c27d5e1a1 100644 --- a/src/status_im/contacts/views/contact_inner.cljs +++ b/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}] - [view st/contact-container - [letter-view letter] - [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))]]]) - -(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]]]]) +(defn contact-inner-view + ([contact] + (contact-inner-view contact nil)) + ([{:keys [name] :as contact} info] + [view st/contact-inner-container + [contact-photo contact] + [view st/info-container + [text {:style st/name-text} + (if (pos? (count (:name contact))) + name + ;; todo is this correct behaviour? + (label :t/no-name))] + (when info + [text {:style st/info-text} + info])]])) diff --git a/src/status_im/contacts/views/contact_list.cljs b/src/status_im/contacts/views/contact_list.cljs index 9010f26881..9a346e3829 100644 --- a/src/status_im/contacts/views/contact_list.cljs +++ b/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]] diff --git a/src/status_im/group_settings/styles/member.cljs b/src/status_im/group_settings/styles/member.cljs deleted file mode 100644 index e5ef3f9f58..0000000000 --- a/src/status_im/group_settings/styles/member.cljs +++ /dev/null @@ -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}) diff --git a/src/status_im/group_settings/views/member.cljs b/src/status_im/group_settings/views/member.cljs index c5292daa36..e73d46cc2a 100644 --- a/src/status_im/group_settings/views/member.cljs +++ b/src/status_im/group_settings/views/member.cljs @@ -1,44 +1,9 @@ (ns status-im.group-settings.views.member - (:require [clojure.string :as s] - [re-frame.core :refer [subscribe dispatch dispatch-sync]] - [status-im.components.react :refer [view - image - text - icon - touchable-highlight]] - [status-im.resources :as res] - [status-im.group-settings.styles.member :as st] + (:require [re-frame.core :refer [subscribe dispatch dispatch-sync]] + [status-im.contacts.views.contact :refer [contact-extended-view]] [status-im.i18n :refer [label]])) -(defn contact-photo [{:keys [photo-path]}] - [view st/contact-photo-container - [image {:source (if (s/blank? photo-path) - res/user-no-photo - {: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]]]]) +(defn member-view [{:keys [whisper-identity role] :as contact}] + ;; TODO implement :role property for group chat contact + [contact-extended-view contact role + #(dispatch [:set :selected-participants #{whisper-identity}])])