Contact view refactoring
This commit is contained in:
parent
dc1c322106
commit
93de4680de
|
@ -46,7 +46,7 @@
|
||||||
[action-button-item
|
[action-button-item
|
||||||
{:title (label :t/new-chat)
|
{:title (label :t/new-chat)
|
||||||
:buttonColor :#9b59b6
|
:buttonColor :#9b59b6
|
||||||
:onPress #(dispatch [:navigate-to :contact-list])}
|
:onPress #(dispatch [:show-group-contacts :people])}
|
||||||
[icon {:name :android-create
|
[icon {:name :android-create
|
||||||
:style st/create-icon}]]
|
:style st/create-icon}]]
|
||||||
[action-button-item
|
[action-button-item
|
||||||
|
|
|
@ -11,7 +11,7 @@
|
||||||
list-item]]
|
list-item]]
|
||||||
[status-im.components.action-button :refer [action-button
|
[status-im.components.action-button :refer [action-button
|
||||||
action-button-item]]
|
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.toolbar :refer [toolbar]]
|
||||||
[status-im.components.drawer.view :refer [drawer-view open-drawer]]
|
[status-im.components.drawer.view :refer [drawer-view open-drawer]]
|
||||||
[status-im.components.icons.ionicons :refer [icon]]
|
[status-im.components.icons.ionicons :refer [icon]]
|
||||||
|
@ -24,9 +24,6 @@
|
||||||
[status-im.utils.listview :as lw]
|
[status-im.utils.listview :as lw]
|
||||||
[status-im.i18n :refer [label]]))
|
[status-im.i18n :refer [label]]))
|
||||||
|
|
||||||
(defn render-row [row _ _]
|
|
||||||
(list-item [contact-view-2 row]))
|
|
||||||
|
|
||||||
(defn contact-list-toolbar []
|
(defn contact-list-toolbar []
|
||||||
[toolbar {:nav-action {:image {:source {:uri :icon_hamburger}
|
[toolbar {:nav-action {:image {:source {:uri :icon_hamburger}
|
||||||
:style hamburger-icon}
|
:style hamburger-icon}
|
||||||
|
@ -54,7 +51,8 @@
|
||||||
(when contacts
|
(when contacts
|
||||||
[view {:flexDirection :column}
|
[view {:flexDirection :column}
|
||||||
(for [contact (take 4 contacts)]
|
(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
|
[view st/show-all
|
||||||
[touchable-highlight {:on-press #(dispatch [:show-group-contacts group])}
|
[touchable-highlight {:on-press #(dispatch [:show-group-contacts group])}
|
||||||
[text {:style st/show-all-text} (label :show-all)]]]])
|
[text {:style st/show-all-text} (label :show-all)]]]])
|
||||||
|
|
|
@ -87,6 +87,10 @@
|
||||||
;; ios only:
|
;; ios only:
|
||||||
:letterSpacing 0.5})
|
:letterSpacing 0.5})
|
||||||
|
|
||||||
|
(def contact-container
|
||||||
|
{:flexDirection :row
|
||||||
|
:backgroundColor color-white})
|
||||||
|
|
||||||
(def letter-container
|
(def letter-container
|
||||||
{:paddingTop 11
|
{:paddingTop 11
|
||||||
:paddingLeft 20
|
:paddingLeft 20
|
||||||
|
@ -101,13 +105,15 @@
|
||||||
{:marginTop 4
|
{:marginTop 4
|
||||||
:marginLeft 12})
|
:marginLeft 12})
|
||||||
|
|
||||||
(def contact-container
|
(def contact-inner-container
|
||||||
{:flexDirection :row
|
{:flex 1
|
||||||
|
:flexDirection :row
|
||||||
:height 56
|
:height 56
|
||||||
:backgroundColor color-white})
|
:backgroundColor color-white})
|
||||||
|
|
||||||
(def name-container
|
(def info-container
|
||||||
{:flex 1
|
{:flex 1
|
||||||
|
:flexDirection :column
|
||||||
:marginLeft 12
|
:marginLeft 12
|
||||||
:justifyContent :center})
|
:justifyContent :center})
|
||||||
|
|
||||||
|
@ -116,6 +122,12 @@
|
||||||
:fontFamily font
|
:fontFamily font
|
||||||
:color text1-color})
|
:color text1-color})
|
||||||
|
|
||||||
|
(def info-text
|
||||||
|
{:marginTop 1
|
||||||
|
:fontSize 12
|
||||||
|
:fontFamily font
|
||||||
|
:color text2-color})
|
||||||
|
|
||||||
(def more-btn
|
(def more-btn
|
||||||
{:width 56
|
{:width 56
|
||||||
:height 56
|
:height 56
|
||||||
|
|
|
@ -1,23 +1,42 @@
|
||||||
(ns status-im.contacts.views.contact
|
(ns status-im.contacts.views.contact
|
||||||
(:require-macros [status-im.utils.views :refer [defview]])
|
(: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]]
|
[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]
|
(defn on-press [chat whisper-identity]
|
||||||
(if chat
|
(if chat
|
||||||
#(dispatch [:navigate-to :chat whisper-identity])
|
#(dispatch [:navigate-to :chat whisper-identity])
|
||||||
#(dispatch [:start-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]]
|
[chat [:get-chat whisper-identity]]
|
||||||
[touchable-highlight
|
[touchable-highlight
|
||||||
{:onPress (on-press chat whisper-identity)}
|
{:onPress (on-press chat whisper-identity)}
|
||||||
[view {} [contact-inner-view contact]]])
|
[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]]
|
[chat [:get-chat whisper-identity]]
|
||||||
[touchable-highlight
|
[touchable-highlight
|
||||||
{:onPress (on-press chat whisper-identity)}
|
{: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]]]]])
|
||||||
|
|
|
@ -1,42 +1,26 @@
|
||||||
(ns status-im.contacts.views.contact-inner
|
(ns status-im.contacts.views.contact-inner
|
||||||
(:require [clojure.string :as s]
|
(: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.components.chat-icon.screen :refer [contact-icon-contacts-tab]]
|
||||||
[status-im.contacts.styles :as st]
|
[status-im.contacts.styles :as st]
|
||||||
[status-im.i18n :refer [label]]))
|
[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]
|
(defn contact-photo [contact]
|
||||||
[view st/contact-photo-container
|
[view st/contact-photo-container
|
||||||
[contact-icon-contacts-tab contact]])
|
[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]]]])
|
|
||||||
|
|
|
@ -6,7 +6,7 @@
|
||||||
touchable-highlight
|
touchable-highlight
|
||||||
list-view
|
list-view
|
||||||
list-item]]
|
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.toolbar :refer [toolbar]]
|
||||||
[status-im.components.drawer.view :refer [drawer-view open-drawer]]
|
[status-im.components.drawer.view :refer [drawer-view open-drawer]]
|
||||||
[status-im.components.icons.ionicons :refer [icon]]
|
[status-im.components.icons.ionicons :refer [icon]]
|
||||||
|
@ -20,7 +20,7 @@
|
||||||
[status-im.i18n :refer [label]]))
|
[status-im.i18n :refer [label]]))
|
||||||
|
|
||||||
(defn render-row [row _ _]
|
(defn render-row [row _ _]
|
||||||
(list-item [contact-view row]))
|
(list-item [contact-with-letter-view row]))
|
||||||
|
|
||||||
(defview contact-list-toolbar []
|
(defview contact-list-toolbar []
|
||||||
[group [:get :contacts-group]]
|
[group [:get :contacts-group]]
|
||||||
|
|
|
@ -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
|
(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]]))
|
[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]]]])
|
|
||||||
|
|
Loading…
Reference in New Issue