Contact view refactoring

This commit is contained in:
virvar 2016-06-20 16:37:26 +03:00
parent dc1c322106
commit 93de4680de
8 changed files with 68 additions and 168 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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