Merge pull request #139 from status-im/feature/#138
Feature/#138
Former-commit-id: 452d7d719a
This commit is contained in:
Jarrad
GitHub
commit
748dfcae33
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.9 KiB |
|
|
@ -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]
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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]))
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
@ -98,4 +100,4 @@
|
|||
(def button-input
|
||||
{:flex 1
|
||||
:flexDirection :column
|
||||
:height 50})
|
||||
:height 50})
|
||||
|
|
|
|||
|
|
@ -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.components.styles :refer [toolbar-background2]]
|
||||
[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]]
|
||||
|
|
@ -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}
|
||||
:style hamburger-icon}
|
||||
:handler open-drawer}
|
||||
[toolbar {:nav-action {:image {:source {:uri :icon_hamburger}
|
||||
:style hamburger-icon}
|
||||
: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 []
|
||||
[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}])
|
||||
[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}]]
|
||||
]]])
|
||||
(def contacts-limit 10)
|
||||
|
||||
(defn contact-group [contacts contacts-count title group top?]
|
||||
[view st/contact-group
|
||||
[view st/contact-group-header
|
||||
(when-not top?
|
||||
[linear-gradient {:style st/contact-group-header-gradient-top
|
||||
:colors st/contact-group-header-gradient-top-colors}])
|
||||
[view st/contact-group-header-inner
|
||||
[text {:style st/contact-group-text} title]
|
||||
[text {:style st/contact-group-size-text} (str contacts-count)]]
|
||||
[linear-gradient {:style st/contact-group-header-gradient-bottom
|
||||
:colors st/contact-group-header-gradient-bottom-colors}]]
|
||||
;; todo what if there is no contacts, should we show some information
|
||||
;; about this?
|
||||
[view {:flexDirection :column}
|
||||
(for [contact contacts]
|
||||
;; TODO not imlemented: contact more button handler
|
||||
^{:key contact} [contact-extended-view contact nil nil])]
|
||||
(when (= contacts-limit (count contacts))
|
||||
[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}]]]]])))
|
||||
|
|
|
|||
|
|
@ -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
|
||||
{:borderRadius 50})
|
||||
(def contact-group
|
||||
{:flexDirection :column})
|
||||
|
||||
(def photo-image
|
||||
{:borderRadius 50
|
||||
:width 40
|
||||
:height 40})
|
||||
(def contact-group-header
|
||||
{:flexDirection :column
|
||||
:backgroundColor toolbar-background2})
|
||||
|
||||
(def online-container
|
||||
{:position :absolute
|
||||
:top 24
|
||||
:left 24
|
||||
:width 20
|
||||
:height 20
|
||||
:borderRadius 50
|
||||
:backgroundColor online-color
|
||||
:borderWidth 2
|
||||
:borderColor color-white})
|
||||
(def contact-group-header-inner
|
||||
{:flexDirection :row
|
||||
:alignItems :center
|
||||
:height 48
|
||||
:backgroundColor toolbar-background2})
|
||||
|
||||
(def online-dot
|
||||
{:position :absolute
|
||||
:top 6
|
||||
:width 4
|
||||
:height 4
|
||||
:borderRadius 50
|
||||
(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 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
|
||||
(assoc online-dot :left 3))
|
||||
|
||||
(def online-dot-right
|
||||
(assoc online-dot :left 9))
|
||||
(def show-all-text
|
||||
{:marginLeft 72
|
||||
:fontSize 14
|
||||
:fontFamily font-medium
|
||||
:color text3-color
|
||||
;; ios only:
|
||||
:letterSpacing 0.5})
|
||||
|
||||
(def contact-container
|
||||
{:flexDirection :row
|
||||
:height 56})
|
||||
{:flexDirection :row
|
||||
:backgroundColor color-white})
|
||||
|
||||
(def photo-container
|
||||
{:marginTop 8
|
||||
:marginLeft 16
|
||||
:width 44
|
||||
:height 44})
|
||||
(def letter-container
|
||||
{:paddingTop 11
|
||||
:paddingLeft 20
|
||||
:width 56})
|
||||
|
||||
(def name-container
|
||||
{:justifyContent :center})
|
||||
(def letter-text
|
||||
{: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
|
||||
|
|
@ -82,4 +168,4 @@
|
|||
|
||||
(def form-container
|
||||
{:marginLeft 16
|
||||
:margin-top 50})
|
||||
:margin-top 50})
|
||||
|
|
|
|||
|
|
@ -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
|
||||
(let [current-participants (->> @chat
|
||||
:contacts
|
||||
(map :identity)
|
||||
set)]
|
||||
(fn #(current-participants (:whisper-identity %))
|
||||
(vals @contacts)))))))
|
||||
(when @chat
|
||||
(let [current-participants (->> @chat
|
||||
:contacts
|
||||
(map :identity)
|
||||
set)]
|
||||
(fn #(current-participants (:whisper-identity %))
|
||||
(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
|
||||
(if (:group-chat @chat)
|
||||
;; TODO return group chat icon
|
||||
nil
|
||||
(:photo-path (first @contacts))))))))
|
||||
(when @chat
|
||||
(if (:group-chat @chat)
|
||||
;; TODO return group chat icon
|
||||
nil
|
||||
(:photo-path (first @contacts))))))))
|
||||
|
|
|
|||
|
|
@ -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]]]]])
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
res/user-no-photo
|
||||
{:uri photo-path})
|
||||
:style st/photo-image}]])
|
||||
[contact-icon-contacts-tab contact]])
|
||||
|
||||
(defn contact-online [{:keys [online]}]
|
||||
(when online
|
||||
[view st/online-container
|
||||
[view st/online-dot-left]
|
||||
[view st/online-dot-right]]))
|
||||
|
||||
(defn contact-inner-view [{:keys [name photo-path online]}]
|
||||
[view st/contact-container
|
||||
[view st/photo-container
|
||||
[contact-photo {:photo-path photo-path}]
|
||||
[contact-online {:online online}]]
|
||||
[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
|
||||
([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])]]))
|
||||
|
|
|
|||
|
|
@ -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}])]])
|
||||
|
|
@ -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})
|
||||
|
||||
|
|
|
|||
|
|
@ -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})
|
||||
|
|
@ -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}])])
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
||||
})
|
||||
})
|
||||
|
|
|
|||
Loading…
Reference in New Issue