fix #10052 make finding the public key easier in profile
Signed-off-by: yenda <eric@status.im>
Before Width: | Height: | Size: 202 B |
Before Width: | Height: | Size: 163 B After Width: | Height: | Size: 319 B |
Before Width: | Height: | Size: 249 B After Width: | Height: | Size: 512 B |
Before Width: | Height: | Size: 363 B After Width: | Height: | Size: 886 B |
Before Width: | Height: | Size: 439 B |
|
@ -29,61 +29,68 @@
|
|||
props)]])
|
||||
|
||||
(defn- names [{:keys [usernames name public-key] :as contact}]
|
||||
(let [generated-name (when public-key (gfy/generate-gfy public-key))
|
||||
with-subtitle? (seq usernames)]
|
||||
[react/view (if with-subtitle? styles/profile-header-name-container-with-subtitle
|
||||
styles/profile-header-name-container)
|
||||
[react/text {:style (if with-subtitle? styles/profile-name-text-with-subtitle
|
||||
styles/profile-name-text)
|
||||
(let [generated-name (when public-key (gfy/generate-gfy public-key))]
|
||||
[react/view styles/profile-header-name-container-with-subtitle
|
||||
[react/text {:style styles/profile-name-text-with-subtitle
|
||||
:number-of-lines 2
|
||||
:ellipsize-mode :tail}
|
||||
|
||||
(multiaccounts/displayed-name contact)]
|
||||
(when with-subtitle?
|
||||
[react/text {:style styles/profile-three-words
|
||||
:number-of-lines 1}
|
||||
generated-name])]))
|
||||
[react/text {:style styles/profile-three-words
|
||||
:number-of-lines 1}
|
||||
(if (seq usernames)
|
||||
generated-name
|
||||
public-key)]]))
|
||||
|
||||
(defn- profile-header-display [{:keys [name public-key] :as contact}
|
||||
allow-icon-change? include-remove-action?]
|
||||
[react/view (merge styles/profile-header-display {:padding-horizontal 16})
|
||||
(if allow-icon-change?
|
||||
[react/view {:align-items :center
|
||||
:align-self :stretch
|
||||
:justify-content :center}
|
||||
[react/touchable-highlight
|
||||
{:accessibility-label :edit-profile-photo-button
|
||||
:on-press
|
||||
#(re-frame/dispatch
|
||||
[:bottom-sheet/show-sheet
|
||||
{:content (sheets/profile-icon-actions include-remove-action?)
|
||||
:content-height (if include-remove-action? 192 128)}])}
|
||||
[react/view
|
||||
[react/view {:background-color colors/white
|
||||
:border-radius 15
|
||||
:width 30
|
||||
:height 30
|
||||
:justify-content :center
|
||||
:align-items :center
|
||||
:position :absolute
|
||||
:z-index 1
|
||||
:top -5
|
||||
:right -5}
|
||||
[react/view {:background-color colors/blue
|
||||
:border-radius 12
|
||||
:width 24
|
||||
:height 24
|
||||
(defn chat-key-popover [public-key ens-name]
|
||||
(re-frame/dispatch [:show-popover
|
||||
{:view :share-chat-key
|
||||
:address public-key
|
||||
:ens-name ens-name}]))
|
||||
|
||||
(defn- profile-header-display
|
||||
[{:keys [name public-key preferred-name ens-name] :as contact}
|
||||
allow-icon-change? include-remove-action?]
|
||||
[react/touchable-opacity
|
||||
{:on-press #(chat-key-popover public-key (or ens-name
|
||||
preferred-name))}
|
||||
[react/view (merge styles/profile-header-display {:padding-horizontal 16})
|
||||
(if allow-icon-change?
|
||||
[react/view {:align-items :center
|
||||
:align-self :stretch
|
||||
:justify-content :center}
|
||||
[react/touchable-highlight
|
||||
{:accessibility-label :edit-profile-photo-button
|
||||
:on-press
|
||||
#(re-frame/dispatch
|
||||
[:bottom-sheet/show-sheet
|
||||
{:content (sheets/profile-icon-actions include-remove-action?)
|
||||
:content-height (if include-remove-action? 192 128)}])}
|
||||
[react/view
|
||||
[react/view {:background-color colors/white
|
||||
:border-radius 15
|
||||
:width 30
|
||||
:height 30
|
||||
:justify-content :center
|
||||
:align-items :center}
|
||||
[vector-icons/icon :tiny-edit {:color colors/white
|
||||
:width 16
|
||||
:height 16}]]]
|
||||
[chat-icon.screen/my-profile-icon {:multiaccount contact
|
||||
:edit? false}]]]]
|
||||
;; else
|
||||
[chat-icon.screen/my-profile-icon {:multiaccount contact
|
||||
:edit? false}])
|
||||
[names contact]])
|
||||
:align-items :center
|
||||
:position :absolute
|
||||
:z-index 1
|
||||
:top -5
|
||||
:right -5}
|
||||
[react/view {:background-color colors/blue
|
||||
:border-radius 12
|
||||
:width 24
|
||||
:height 24
|
||||
:justify-content :center
|
||||
:align-items :center}
|
||||
[vector-icons/icon :tiny-edit {:color colors/white
|
||||
:width 16
|
||||
:height 16}]]]
|
||||
[chat-icon.screen/my-profile-icon {:multiaccount contact
|
||||
:edit? false}]]]]
|
||||
;; else
|
||||
[chat-icon.screen/my-profile-icon {:multiaccount contact
|
||||
:edit? false}])
|
||||
[names contact]]])
|
||||
|
||||
(defn group-header-display [{:keys [chat-name color contacts]}]
|
||||
[react/view (merge styles/profile-header-display {:padding-horizontal 16})
|
||||
|
|
|
@ -89,12 +89,13 @@
|
|||
(i18n/label :t/unblock-contact)
|
||||
(i18n/label :t/block-contact))]])
|
||||
|
||||
(defn- header-in-toolbar [account]
|
||||
(defn- header-in-toolbar [{:keys [public-key ens-name] :as account}]
|
||||
(let [displayed-name (multiaccounts/displayed-name account)]
|
||||
[react/view {:flex 1
|
||||
:flex-direction :row
|
||||
:align-items :center
|
||||
:align-self :stretch}
|
||||
[react/touchable-opacity {:on-press #(profile.components/chat-key-popover public-key ens-name)
|
||||
:style {:flex 1
|
||||
:flex-direction :row
|
||||
:align-items :center
|
||||
:align-self :stretch}}
|
||||
;;TODO this should be done in a subscription
|
||||
[photos/photo (multiaccounts/displayed-photo account)
|
||||
{:size 40}]
|
||||
|
@ -112,15 +113,25 @@
|
|||
:allow-icon-change? false
|
||||
:include-remove-action? false}])
|
||||
|
||||
(defn- toolbar-action-items [public-key ens-name]
|
||||
[toolbar/actions
|
||||
[{:icon :main-icons/share
|
||||
:icon-opts {:width 24
|
||||
:height 24}
|
||||
:handler #(profile.components/chat-key-popover public-key ens-name)}]])
|
||||
|
||||
;;TO-DO Rework generate-view to use 3 functions from large-toolbar
|
||||
(views/defview profile []
|
||||
(views/letsubs [list-ref (reagent/atom nil)
|
||||
{:keys [ens-verified name] :as contact} [:contacts/current-contact]]
|
||||
{:keys [ens-verified name public-key] :as contact} [:contacts/current-contact]]
|
||||
(when contact
|
||||
(let [header-in-toolbar (header-in-toolbar contact)
|
||||
header (header (cond-> contact
|
||||
(and ens-verified name)
|
||||
(assoc :usernames [name])))
|
||||
(let [ens-name (when (and ens-verified name) name)
|
||||
contact (cond-> contact
|
||||
ens-name
|
||||
(assoc :usernames [ens-name]
|
||||
:ens-name ens-name))
|
||||
header-in-toolbar (header-in-toolbar contact)
|
||||
header (header contact)
|
||||
content
|
||||
[[react/view {:padding-top 12}
|
||||
(for [{:keys [label subtext accessibility-label icon action disabled?]} (actions contact)]
|
||||
|
@ -132,14 +143,12 @@
|
|||
:disabled? disabled?
|
||||
:on-press action}])]
|
||||
[react/view styles/contact-profile-details-container
|
||||
[profile-details (cond-> contact
|
||||
(and ens-verified name)
|
||||
(assoc :ens-name name))]]
|
||||
[profile-details contact]]
|
||||
[block-contact-action contact]]
|
||||
generated-view (large-toolbar/generate-view
|
||||
header-in-toolbar
|
||||
toolbar/default-nav-back
|
||||
nil
|
||||
(toolbar-action-items public-key ens-name)
|
||||
header
|
||||
content
|
||||
list-ref)]
|
||||
|
|
|
@ -61,37 +61,37 @@
|
|||
;:icon :main-icons/link
|
||||
:accessibility-label :share-my-contact-code-button}]]])))
|
||||
|
||||
(defn- header [{:keys [photo-path] :as account} photo-added?]
|
||||
(defn- header [{:keys [photo-path public-key ens-name] :as account} photo-added?]
|
||||
[profile.components/profile-header
|
||||
{:contact account
|
||||
;;set to true if we want to re-enable custom icon
|
||||
:allow-icon-change? false
|
||||
:include-remove-action? photo-added?}])
|
||||
|
||||
(defn- header-in-toolbar [account]
|
||||
(defn- header-in-toolbar [{:keys [public-key preferred-name] :as account}]
|
||||
(let [displayed-name (multiaccounts/displayed-name account)]
|
||||
[react/view {:flex 1
|
||||
:flex-direction :row
|
||||
:align-items :center
|
||||
:align-self :stretch}
|
||||
;;TODO this should be done in a subscription
|
||||
[photos/photo (multiaccounts/displayed-photo account) {:size 40}]
|
||||
[react/text {:style {:typography :title-bold
|
||||
:line-height 21
|
||||
:margin-right 40
|
||||
:margin-left 16
|
||||
:text-align :left}}
|
||||
displayed-name]]))
|
||||
[react/touchable-opacity
|
||||
{:on-press #(profile.components/chat-key-popover public-key preferred-name)
|
||||
:style {:flex 1}}
|
||||
[react/view {:style {:flex 1
|
||||
:flex-direction :row
|
||||
:align-items :center
|
||||
:align-self :stretch}}
|
||||
;;TODO this should be done in a subscription
|
||||
[photos/photo (multiaccounts/displayed-photo account) {:size 40}]
|
||||
[react/text {:style {:typography :title-bold
|
||||
:line-height 21
|
||||
:margin-right 40
|
||||
:margin-left 16
|
||||
:text-align :left}}
|
||||
displayed-name]]]))
|
||||
|
||||
(defn- toolbar-action-items [public-key ens-name]
|
||||
(defn- toolbar-action-items [public-key preferred-name]
|
||||
[toolbar/actions
|
||||
[{:icon :main-icons/share
|
||||
:icon-opts {:width 24
|
||||
:height 24}
|
||||
:handler #(re-frame/dispatch [:show-popover
|
||||
{:view :share-chat-key
|
||||
:address public-key
|
||||
:ens-name ens-name}])}]])
|
||||
:handler #(profile.components/chat-key-popover public-key preferred-name)}]])
|
||||
|
||||
(defn tribute-to-talk-item
|
||||
[opts]
|
||||
|
|