From e223fcbf9ed7ee1032d1d6568c980d38ed637eea Mon Sep 17 00:00:00 2001 From: virvar Date: Fri, 17 Jun 2016 18:38:47 +0300 Subject: [PATCH] Contacts tab view. Contacts group view. --- src/status_im/android/core.cljs | 3 +- src/status_im/components/styles.cljs | 1 + src/status_im/contacts/screen.cljs | 43 ++++++++++++----- src/status_im/contacts/styles.cljs | 48 ++++++++++++++++++- src/status_im/contacts/views/contact.cljs | 9 +++- .../contacts/views/contact_inner.cljs | 17 ++++++- .../contacts/views/contact_list.cljs | 48 +++++++++++++++++++ src/status_im/navigation/handlers.cljs | 6 +++ src/status_im/translations/en.cljs | 3 ++ 9 files changed, 161 insertions(+), 17 deletions(-) create mode 100644 src/status_im/contacts/views/contact_list.cljs diff --git a/src/status_im/android/core.cljs b/src/status_im/android/core.cljs index 154c7104ce..52c7cee85e 100644 --- a/src/status_im/android/core.cljs +++ b/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] diff --git a/src/status_im/components/styles.cljs b/src/status_im/components/styles.cljs index a1176d46bf..4f697ad41e 100644 --- a/src/status_im/components/styles.cljs +++ b/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) diff --git a/src/status_im/contacts/screen.cljs b/src/status_im/contacts/screen.cljs index 5ea7be8b15..2be5a9c2cb 100644 --- a/src/status_im/contacts/screen.cljs +++ b/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.components.styles :refer [toolbar-background2]] + [status-im.contacts.views.contact :refer [contact-view-2]] [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 - ;; about this? - (when contacts - [list-view {:dataSource (lw/to-datasource contacts) - :enableEmptySections true - :renderRow render-row - :style st/contacts-list}]) + [scroll-view {:style flex} + ;; TODO not implemented: dapps and persons separation + [view st/contact-group + [text {:style st/contact-group-text} (label :contacs-group-dapps)] + [text {:style st/contact-group-size-text} (str (count contacts))]] + ;; todo what if there is no contacts, should we show some information + ;; 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}]]]]]) diff --git a/src/status_im/contacts/styles.cljs b/src/status_im/contacts/styles.cljs index 59fa3453e3..bf0e3499d8 100644 --- a/src/status_im/contacts/styles.cljs +++ b/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 diff --git a/src/status_im/contacts/views/contact.cljs b/src/status_im/contacts/views/contact.cljs index f253789990..cc67dba1d3 100644 --- a/src/status_im/contacts/views/contact.cljs +++ b/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]]]) diff --git a/src/status_im/contacts/views/contact_inner.cljs b/src/status_im/contacts/views/contact_inner.cljs index 9512ef3120..2a5eb95257 100644 --- a/src/status_im/contacts/views/contact_inner.cljs +++ b/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]]]]) diff --git a/src/status_im/contacts/views/contact_list.cljs b/src/status_im/contacts/views/contact_list.cljs new file mode 100644 index 0000000000..abb60fa465 --- /dev/null +++ b/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}])]]) diff --git a/src/status_im/navigation/handlers.cljs b/src/status_im/navigation/handlers.cljs index aa9c1eee32..405d172f74 100644 --- a/src/status_im/navigation/handlers.cljs +++ b/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 diff --git a/src/status_im/translations/en.cljs b/src/status_im/translations/en.cljs index 8ec3ba3fb7..96ea2c8768 100644 --- a/src/status_im/translations/en.cljs +++ b/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"