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

feature #3248 - new contact profile 

Signed-off-by: Julien Eluard <julien.eluard@gmail.com>
This commit is contained in:
Goran Jovic 2018-03-14 14:36:03 +01:00 committed by Julien Eluard
parent 777a0ce3b3
commit b447b80ee4
No known key found for this signature in database
GPG Key ID: 6FD7DB5437FCBEF6
11 changed files with 93 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
resources/icons/add_contact.svg Normal file
View File

@ -0,0 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<g fill="none" fill-rule="evenodd">
<path fill="" fill-rule="nonzero" d="M16.09 19.727v-1.636a4.273 4.273 0 0 0-4.272-4.273H5.273A4.273 4.273 0 0 0 1 18.091v1.636a1 1 0 1 0 2 0v-1.636a2.273 2.273 0 0 1 2.273-2.273h6.545a2.273 2.273 0 0 1 2.273 2.273v1.636a1 1 0 1 0 2 0zm-7.545-9.182a2.273 2.273 0 1 0 0-4.545 2.273 2.273 0 0 0 0 4.545zM18 11V9.003c0-.554.647-1.003.926-1.003.276 0 .989.438.989 1.003V11h1.78a.999.999 0 0 1 1.002 1c0 .552-.438 1-1.003 1h-1.78v2c0 .554-.71 1.003-.988 1.003-.277 0-.926-.438-.926-1.003v-2h-1.997A.999.999 0 0 1 15 12c0-.552.438-1 1.003-1H18zm-9.455 1.545a4.273 4.273 0 1 1 0-8.545 4.273 4.273 0 0 1 0 8.545z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 755 B

5
resources/icons/in_contacts.svg Normal file
View File

@ -0,0 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<g fill="none" fill-rule="evenodd">
<path fill="" fill-rule="nonzero" d="M16.09 19.727v-1.636a4.273 4.273 0 0 0-4.272-4.273H5.273A4.273 4.273 0 0 0 1 18.091v1.636a1 1 0 1 0 2 0v-1.636a2.273 2.273 0 0 1 2.273-2.273h6.545a2.273 2.273 0 0 1 2.273 2.273v1.636a1 1 0 1 0 2 0zm-7.545-9.182a2.273 2.273 0 1 0 0-4.545 2.273 2.273 0 0 0 0 4.545zm8.38 1.115l4.368-4.367a1 1 0 0 1 1.414 1.414L17.716 13.7a1 1 0 0 1-1.35.075l-2.49-1.993a1 1 0 1 1 1.249-1.562l1.8 1.441zm-8.38.885a4.273 4.273 0 1 1 0-8.545 4.273 4.273 0 0 1 0 8.545z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 636 B

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

@ -123,10 +123,12 @@
:update-status "Update your status..."
:add-a-status "Add a status..."
:status-prompt "Set your status. Using #hastags will help others discover you and talk about what's on your mind"
:contact-code "Contact code"
:add-to-contacts "Add to contacts"
:in-contacts "In contacts"
:remove-from-contacts "Remove from contacts"
:start-conversation "Start conversation"
:send-message "Send message"
:testnet-text "You’re on the {{testnet}} Testnet. Do not send real ETH or SNT to your address"
:mainnet-text "You’re on the Mainnet. Real ETH will be sent"

2
src/status_im/ui/components/icons/vector_icons.cljs
View File

@ -37,6 +37,7 @@
:icons/speaker-off (slurp/slurp-svg "./resources/icons/speaker_off.svg")
:icons/transaction-history (slurp/slurp-svg "./resources/icons/transaction_history.svg")
:icons/add (slurp/slurp-svg "./resources/icons/add.svg")
:icons/add-contact (slurp/slurp-svg "./resources/icons/add_contact.svg")
:icons/add-wallet (slurp/slurp-svg "./resources/icons/add_wallet.svg")
:icons/address (slurp/slurp-svg "./resources/icons/address.svg")
:icons/arrow-left (slurp/slurp-svg "./resources/icons/arrow_left.svg")
@ -58,6 +59,7 @@
:icons/chats (slurp/slurp-svg "./resources/icons/chats.svg")
:icons/hamburger (slurp/slurp-svg "./resources/icons/hamburger.svg")
:icons/hidden (slurp/slurp-svg "./resources/icons/hidden.svg")
:icons/in-contacts (slurp/slurp-svg "./resources/icons/in_contacts.svg")
:icons/mic (slurp/slurp-svg "./resources/icons/mic.svg")
:icons/ok (slurp/slurp-svg "./resources/icons/ok.svg")
:icons/public (slurp/slurp-svg "./resources/icons/public.svg")

6
src/status_im/ui/components/list/styles.cljs
View File

@ -104,9 +104,15 @@
{:background-color colors/white-transparent
:border-radius 50})
(def action-disabled
{:background-color colors/gray-lighter})
(def action-label
{:color colors/white})
(def action-label-disabled
{:color colors/gray})
(def action-separator
{:height 1
:background-color colors/white-light-transparent

14
src/status_im/ui/components/list/views.cljs
View File

@ -176,15 +176,21 @@
:renderSectionHeader (wrap-render-section-header-fn render-section-header-fn)}
(when platform/ios? {:SectionSeparatorComponent (fn [] (reagent/as-element section-separator))}))])
(defn- render-action [{:keys [label icon action]}
(defn- render-action [{:keys [label icon action disabled?]}
{:keys [action-style action-label-style icon-opts]}]
[react/touchable-highlight {:on-press action}
[react/view
[item
[item-icon {:icon icon
:style (merge styles/action action-style)
:icon-opts (merge {:color :white} icon-opts)}]
[item-primary-only {:style (merge styles/action-label action-label-style)}
:style (merge styles/action
action-style
(when disabled? styles/action-disabled))
:icon-opts (merge {:color :white}
icon-opts
(when disabled? {:color colors/gray}))}]
[item-primary-only {:style (merge styles/action-label
action-label-style
(when disabled? styles/action-label-disabled))}
label]
item-icon-forward]]])

3
src/status_im/ui/screens/profile/components/styles.cljs
View File

@ -88,6 +88,3 @@
(def profile-form
{:background-color colors/white
:padding 16})
(defstyle profile-info-container
{:background-color colors/white})

31
src/status_im/ui/screens/profile/contact/styles.cljs
View File

@ -4,12 +4,10 @@
(def network-info {:background-color :white})
(defstyle profile-setting-item
(defstyle profile-info-item
{:flex-direction :row
:align-items :center
:padding-left 16
:ios {:height 73}
:android {:height 72}})
:padding-left 16})
(defn profile-info-text-container [options]
{:flex 1
@ -17,7 +15,6 @@
(defstyle profile-info-title
{:color colors/gray
:margin-left 16
:font-size 14
:ios {:letter-spacing -0.2}})
@ -31,10 +28,30 @@
:android {:font-size 16
:color colors/black}})
(def action-container
{:background-color colors/white
:padding-top 24})
(def action
{:background-color (colors/alpha colors/blue 0.1)
:border-radius 50})
(def action-label
{:color colors/blue})
(def action-separator
{:height 1
:background-color colors/gray-light
:margin-left 50})
(def action-icon-opts
{:color colors/blue})
(def profile-setting-text-empty
(merge profile-setting-text
{:color colors/gray}))
(def profile-info-item-button
{:padding 16})
(defstyle contact-profile-info-container
{:padding-top 26
:background-color colors/white})

117
src/status_im/ui/screens/profile/contact/views.cljs
View File

@ -1,117 +1,70 @@
(ns status-im.ui.screens.profile.contact.views
(:require-macros [status-im.utils.views :refer [defview letsubs]])
(:require [status-im.ui.screens.profile.contact.styles :as styles]
[status-im.ui.components.common.common :as common]
[status-im.ui.components.react :as react]
[status-im.ui.screens.profile.components.styles :as profile.components.styles]
[status-im.ui.screens.profile.components.views :as profile.components]
[status-im.ui.components.status-bar.view :as status-bar]
[status-im.ui.components.action-button.styles :as action-button.styles]
[status-im.ui.components.action-button.action-button :as action-button]
[status-im.i18n :as i18n]
[re-frame.core :as re-frame]
[status-im.ui.components.toolbar.view :as toolbar]
[status-im.ui.components.toolbar.actions :as actions]
[status-im.ui.components.list-selection :as list-selection]
[status-im.ui.components.icons.vector-icons :as vector-icons]))
[status-im.ui.components.list.views :as list]))
(defn profile-contact-toolbar [contact]
(defn profile-contact-toolbar []
[toolbar/toolbar {}
toolbar/default-nav-back
[toolbar/content-title ""]
[toolbar/actions
(when (and (not (:pending? contact))
(not (:unremovable? contact)))
[(actions/opts [{:action #(re-frame/dispatch [:hide-contact contact])
:label (i18n/label :t/remove-from-contacts)}])])]])
[toolbar/content-title ""]])
(defn network-info []
[react/view styles/network-info
[common/network-info]
[common/separator]])
(defn actions [{:keys [pending? whisper-identity dapp?]} chat-id]
(concat (if pending?
[{:label (i18n/label :t/add-to-contacts)
:icon :icons/add-contact
:action #(re-frame/dispatch [:add-pending-contact chat-id])}]
[{:label (i18n/label :t/in-contacts)
:icon :icons/in-contacts
:disabled? true}])
[{:label (i18n/label :t/send-message)
:icon :icons/chats
:action #(re-frame/dispatch [:start-chat whisper-identity {:navigation-replace? true}])}]
(when-not dapp?
[{:label (i18n/label :t/send-transaction)
:icon :icons/arrow-right
:action #(re-frame/dispatch [:profile/send-transaction chat-id whisper-identity])}])))
(defn profile-actions [{:keys [pending? whisper-identity dapp?]} chat-id]
[react/view action-button.styles/actions-list
(if pending?
[action-button/action-button {:label (i18n/label :t/add-to-contacts)
:icon :icons/add
:icon-opts {:color :blue}
:on-press #(re-frame/dispatch [:add-pending-contact chat-id])}]
[action-button/action-button-disabled {:label (i18n/label :t/in-contacts) :icon :icons/ok}])
[action-button/action-separator]
[action-button/action-button {:label (i18n/label :t/start-conversation)
:icon :icons/chats
:icon-opts {:color :blue}
:on-press #(re-frame/dispatch [:start-chat whisper-identity {:navigation-replace? true}])}]
(when-not dapp?
[react/view
[action-button/action-separator]
[action-button/action-button {:label (i18n/label :t/send-transaction)
:icon :icons/arrow-right
:icon-opts {:color :blue}
:on-press #(re-frame/dispatch [:profile/send-transaction chat-id whisper-identity])}]])])
(defn profile-info-item [{:keys [label value options text-mode empty-value? accessibility-label]}]
[react/view styles/profile-setting-item
(defn profile-info-item [{:keys [label value options accessibility-label]}]
[react/view styles/profile-info-item
[react/view (styles/profile-info-text-container options)
[react/text {:style styles/profile-info-title}
label]
[react/view styles/profile-setting-spacing]
[react/text {:style (if empty-value?
styles/profile-setting-text-empty
styles/profile-setting-text)
:number-of-lines 1
:ellipsizeMode text-mode
[react/text {:style styles/profile-setting-text
:accessibility-label accessibility-label}
value]]
(when options
[react/touchable-highlight {:on-press #(list-selection/show {:options options})}
[react/view profile.components.styles/modal-menu
[vector-icons/icon :icons/options {:container-style styles/profile-info-item-button}]]])])
value]]])
(defn profile-options [text]
(into []
(when text
(list-selection/share-options text))))
(defn profile-info-address-item [address]
(defn profile-info-contact-code-item [whisper-identity]
[profile-info-item
{:label (i18n/label :t/address)
:action address
:options (profile-options address)
:text-mode :middle
:accessibility-label :profile-address
:value address}])
(defn profile-info-public-key-item [whisper-identity]
[profile-info-item
{:label (i18n/label :t/public-key)
:action whisper-identity
:options (profile-options whisper-identity)
:text-mode :middle
{:label (i18n/label :t/contact-code)
:accessibility-label :profile-public-key
:value whisper-identity}])
(defn profile-info [{:keys [whisper-identity address]}]
(defn profile-info [{:keys [whisper-identity]}]
[react/view
[profile-info-address-item address]
[profile.components/settings-item-separator]
[profile-info-public-key-item whisper-identity]])
[profile-info-contact-code-item whisper-identity]])
(defview profile []
(letsubs [contact [:contact]
chat-id [:get :current-chat-id]]
[react/view profile.components.styles/profile
[status-bar/status-bar]
[profile-contact-toolbar contact]
[network-info]
[profile-contact-toolbar]
[react/scroll-view
[react/view profile.components.styles/profile-form
[profile.components/profile-header contact false false nil nil]]
[common/form-spacer]
[profile-actions contact chat-id]
[common/form-spacer]
[react/view profile.components.styles/profile-info-container
[profile-info contact]
[common/bottom-shadow]]]]))
[list/action-list (actions contact chat-id)
{:container-style styles/action-container
:action-style styles/action
:action-label-style styles/action-label
:action-separator-style styles/action-separator
:icon-opts styles/action-icon-opts}]
[react/view styles/contact-profile-info-container
[profile-info contact]]]]))

3
src/status_im/ui/screens/profile/user/styles.cljs
View File

@ -42,3 +42,6 @@
(defstyle logout-text
(merge profile.components.styles/settings-item-text
{:color colors/red}))
(defstyle my-profile-info-container
{:background-color colors/white})

2
src/status_im/ui/screens/profile/user/views.cljs
View File

@ -130,6 +130,6 @@
[profile.components/profile-header shown-account editing? true profile-icon-options :my-profile/update-name]]
[react/view action-button.styles/actions-list
[share-contact-code current-account public-key]]
[react/view profile.components.styles/profile-info-container
[react/view styles/my-profile-info-container
[my-profile-settings current-account]]
[logout]]])))