status-im
/
status-react
mirror of https://github.com/status-im/status-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Contacts tab view. Contacts group view. 

Former-commit-id: e223fcbf9e
This commit is contained in:
virvar 2016-06-17 18:38:47 +03:00
parent 4cdc81bc90
commit dc2895f2be
9 changed files with 161 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/status_im/android/core.cljs
View File

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

1
src/status_im/components/styles.cljs
View File

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

37
src/status_im/contacts/screen.cljs
View File

@ -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]
[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
[list-view {:dataSource (lw/to-datasource contacts)
:enableEmptySections true
:renderRow render-row
:style st/contacts-list}])
[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}]]]]])

48
src/status_im/contacts/styles.cljs
View File

@ -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

9
src/status_im/contacts/views/contact.cljs
View File

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

17
src/status_im/contacts/views/contact_inner.cljs
View File

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

48
src/status_im/contacts/views/contact_list.cljs Normal file
View File

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

6
src/status_im/navigation/handlers.cljs
View File

@ -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

3
src/status_im/translations/en.cljs
View File

@ -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"