diff --git a/android/app/src/main/res/drawable-hdpi/share.png b/android/app/src/main/res/drawable-hdpi/share.png deleted file mode 100644 index f70ab8f28b6..00000000000 Binary files a/android/app/src/main/res/drawable-hdpi/share.png and /dev/null differ diff --git a/android/app/src/main/res/drawable-mdpi/share.png b/android/app/src/main/res/drawable-mdpi/share.png index 1e6e4c0bf14..b01925172ff 100644 Binary files a/android/app/src/main/res/drawable-mdpi/share.png and b/android/app/src/main/res/drawable-mdpi/share.png differ diff --git a/android/app/src/main/res/drawable-xhdpi/share.png b/android/app/src/main/res/drawable-xhdpi/share.png index 9854f8e085c..28105d6fdae 100644 Binary files a/android/app/src/main/res/drawable-xhdpi/share.png and b/android/app/src/main/res/drawable-xhdpi/share.png differ diff --git a/android/app/src/main/res/drawable-xxhdpi/share.png b/android/app/src/main/res/drawable-xxhdpi/share.png index e5372ebf594..89254b2da1f 100644 Binary files a/android/app/src/main/res/drawable-xxhdpi/share.png and b/android/app/src/main/res/drawable-xxhdpi/share.png differ diff --git a/android/app/src/main/res/drawable-xxxhdpi/share.png b/android/app/src/main/res/drawable-xxxhdpi/share.png deleted file mode 100644 index 9e05ff9b400..00000000000 Binary files a/android/app/src/main/res/drawable-xxxhdpi/share.png and /dev/null differ diff --git a/src/status_im/ui/screens/profile/components/views.cljs b/src/status_im/ui/screens/profile/components/views.cljs index 7f05afb9dd4..57e25740bb4 100644 --- a/src/status_im/ui/screens/profile/components/views.cljs +++ b/src/status_im/ui/screens/profile/components/views.cljs @@ -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}) diff --git a/src/status_im/ui/screens/profile/contact/views.cljs b/src/status_im/ui/screens/profile/contact/views.cljs index ce0f4aeb731..eecc40e8ff2 100644 --- a/src/status_im/ui/screens/profile/contact/views.cljs +++ b/src/status_im/ui/screens/profile/contact/views.cljs @@ -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)] diff --git a/src/status_im/ui/screens/profile/user/views.cljs b/src/status_im/ui/screens/profile/user/views.cljs index 5b027695176..11af4aff2db 100644 --- a/src/status_im/ui/screens/profile/user/views.cljs +++ b/src/status_im/ui/screens/profile/user/views.cljs @@ -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]