Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

New profile UI #17521

Closed
wants to merge 7 commits into from
Closed

New profile UI #17521

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
468c05e
add new icons + resources
nguyentruongky Oct 4, 2023
3b5397d
implement profile v2
nguyentruongky Oct 4, 2023
7e50f4f
customize the spacing to match the design
nguyentruongky Oct 4, 2023
62751cb
move new profile to status_im2
nguyentruongky Oct 4, 2023
d66bd94
Merge develop
nguyentruongky Oct 4, 2023
da460d0
Changes as reviewed
nguyentruongky Oct 5, 2023
0da41c7
Merge branch 'develop' into new-profile-ui
nguyentruongky Oct 5, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file modified resources/images/icons/appearance@2x.png
100755 → 100644
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified resources/images/icons/appearance@3x.png
100755 → 100644
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified resources/images/icons/communities@2x.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified resources/images/icons/communities@3x.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added resources/images/icons/dapps@2x.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added resources/images/icons/dapps@3x.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added resources/images/icons/edit_profile@2x.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added resources/images/icons/edit_profile@3x.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added resources/images/icons/external@2x.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added resources/images/icons/external@3x.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added resources/images/icons/globe@2x.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added resources/images/icons/globe@3x.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added resources/images/icons/key_profile@2x.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added resources/images/icons/key_profile@3x.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added resources/images/icons/keycard_profile@2x.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added resources/images/icons/keycard_profile@3x.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified resources/images/icons/log_out@2x.png
100755 → 100644
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified resources/images/icons/log_out@3x.png
100755 → 100644
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added resources/images/icons/message_profile@2x.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added resources/images/icons/message_profile@3x.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added resources/images/icons/mobile_profile@2x.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added resources/images/icons/mobile_profile@3x.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added resources/images/icons/multi_profile@2x.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added resources/images/icons/multi_profile@3x.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified resources/images/icons/notification@2x.png
100755 → 100644
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified resources/images/icons/notification@3x.png
100755 → 100644
View file
Open in desktop
Binary file modified resources/images/icons/share@2x.ios.png
100755 → 100644
View file
Open in desktop
Binary file modified resources/images/icons/share@3x.ios.png
100755 → 100644
View file
Open in desktop
Binary file added resources/images/icons/syncing@2x.png
View file
Open in desktop
Binary file added resources/images/icons/syncing@3x.png
View file
Open in desktop
Binary file added resources/images/icons/wallet_profile@2x.png
View file
Open in desktop
Binary file added resources/images/icons/wallet_profile@3x.png
View file
Open in desktop
5 changes: 3 additions & 2 deletions src/quo/components/header.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@
:flex 1})

(defn header-action
[{:keys [icon label on-press disabled accessibility-label]}]
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

please rollback this file

[{:keys [icon label on-press disabled accessibility-label style]}]
[button/button
(merge {:on-press on-press
:disabled disabled}
Expand All @@ -89,7 +89,8 @@
:theme :icon}
label {:type :secondary})
(when accessibility-label
{:accessibility-label accessibility-label}))
{:accessibility-label accessibility-label})
{:style style})
(cond
icon icon
label label)])
Expand Down
20 changes: 13 additions & 7 deletions src/quo/components/list/item.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,13 +43,13 @@
[size]
(case size
:small 36
40))
(min size 40)))

(defn size->container-size
[size]
(case size
:small 52
64))
(min size 64)))
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this seems like it's wrong to me, why did you make these changes? 🤔

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Changed. Needed to changed to smaller size to match the design.


(defn size->single-title-size
[size]
Expand All @@ -70,29 +70,31 @@
children))

(defn icon-column
[{:keys [icon icon-bg-color icon-color size icon-container-style]}]
[{:keys [icon icon-bg-color icon-color icon-size icon-container-style]}]
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

hmm, imo this prop name doesn't need to be changed or is there a particular reason for it?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Changed.

(when icon
(let [icon-size (size->icon-size size)]
(let [_icon-size (size->icon-size icon-size)]
[rn/view {:style (or icon-container-style (:tiny spacing/padding-horizontal))}
(cond
(vector? icon)
icon
(keyword? icon)
[rn/view
{:style {:width icon-size
:height icon-size
{:style {:width _icon-size
:height _icon-size
:align-items :center
:justify-content :center
:border-radius (/ icon-size 2)
:border-radius (/ _icon-size 2)
:background-color icon-bg-color}}
[icons/icon icon {:color icon-color}]])])))

(defn title-column
[{:keys [title text-color subtitle subtitle-max-lines subtitle-secondary
title-accessibility-label size text-size title-text-weight
title-style
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

please rollback this file

right-side-present?]}]
[rn/view
{:style (merge (:tiny spacing/padding-horizontal)
title-style
;; make left-side title grow if nothing is present on right-side
(when-not right-side-present?
{:flex 1
Expand Down Expand Up @@ -215,8 +217,10 @@

(defn list-item
[{:keys [theme accessory disabled subtitle-max-lines icon icon-container-style
icon-size
left-side-alignment icon-color icon-bg-color
title subtitle subtitle-secondary active on-press on-long-press chevron size text-size
title-style
accessory-text accessibility-label title-accessibility-label accessory-style
haptic-feedback haptic-type error animated animated-accessory? title-text-weight
container-style
Expand Down Expand Up @@ -267,10 +271,12 @@
[container {:size size :container-style container-style}
[left-side
{:icon-color icon-color
:icon-size icon-size
:text-color (if on-press
text-color
(:text-color (themes :main)))
:left-side-alignment left-side-alignment
:title-style title-style
:icon-bg-color icon-bg-color
:title-accessibility-label title-accessibility-label
:icon icon
Expand Down
1 change: 1 addition & 0 deletions src/quo/core.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@

(def text text/text)
(def header header/header)
(def header-action header/header-action)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

see other comments about using quo2 components only. Also we generally try to avoid exporting multiple components from the one file, so in general I would prefer they were separated to their own view file.
However in this case it's not necessary as I think we should avoid using this code completely 👍

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Removed it.

(def animated-header animated-header/header)
(def text-input text-input/text-input)
(def tooltip tooltip/tooltip)
Expand Down
5 changes: 5 additions & 0 deletions src/quo2/foundations/colors.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,6 +121,11 @@
(def white-opa-90 (alpha white 0.9))
(def white-opa-95 (alpha white 0.95))

(def magenta "#EC266C")
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

you can remove these colors, we already have them defined. They are also a more dynamic set of colors based on the users customization-color (set in the onboarding phase)

instead when you go to use this customization-color you should pass as

(:require [src/quo2/foundations/colors.cljs :as colors])
...
(let [{:keys [customization-color]} (rf/sub [:profile/multiaccount])]
   [quo/button {
    :customization-color (colors/custom-color customization-color 50 40)
   }

that's what it will be for the use case you are using it for anyway where 40 is 40% opacity.
50 there is a suffix that is used in the mapping, you can see it if you trace through the custom-color function etc

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

if you search in the codebase you'll see many other examples of customization-color

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks @J-Son89 it's changed.

;; with transparency
(def magenta-opa-40 (alpha "#EC266C" 0.4))


;;;;Blur
(def white-70-blur (alpha white 0.7))
(def white-70-blur-opaque (alpha-opaque white 0.7))
Expand Down
2 changes: 1 addition & 1 deletion src/status_im/ui/screens/popover/views.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
[status-im.ui.components.react :as react]
[status-im.ui.screens.keycard.frozen-card.view :as frozen-card]
[status-im.ui.screens.keycard.views :as keycard.views]
[status-im.ui.screens.profile.user.views :as profile.user]
[status-im2.contexts.profile.profiles.views-v2 :as profile.user]
[status-im.ui.screens.reset-password.views :as reset-password.views]
[status-im.ui.screens.signing.sheets :as signing-sheets]
[status-im.ui.screens.signing.views :as signing]
Expand Down
76 changes: 75 additions & 1 deletion src/status_im/ui/screens/profile/user/styles.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,80 @@
(ns status-im.ui.screens.profile.user.styles)
(ns status-im.ui.screens.profile.user.styles
(:require [quo2.foundations.colors :as colors]
[react-native.safe-area :as safe-area]))

(def share-link-button
{:margin-top 12
:margin-horizontal 16
:margin-bottom 16})

(def radius 16)

(def top-background-view
{:background-color colors/magenta-opa-40
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this is where you should be using the custom-color approach
so it's better here to do:

(defn top-background-view [customization-color]
  {:background-color (colors/custom-color customization-color 50 40)

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks. Changed all its appearance.

:position :absolute
:top 0
:left 0
:height 400
:width 400
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

any particular reason for 400? would:bottom 0 :right 0 as well not be better? 🤔

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just want to keep the view as the solid background (magenta) on the top when pull down.
if use bottom 0, the magenta background is visible when scroll to the bottom.

:z-index -1})

(def toolbar
{:padding-bottom 16
:padding-top (safe-area/get-top)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@smohamedjavid this is alright to do, or we normally get this value at the rendering of the component view in a let var? 🤔

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You are right. We usually get the safe area value from the component's let var. 👍

;; view.cljs
(let [top (safe-area/get-top)]
  [rn/view {:style (style/toolbar top)}])

;; style.cljs
(defn toolbar
  [top]
  {:padding-bottom  16
   :padding-top     top
   :flex-direction  :row
   :align-items     :center
   :justify-content :space-between})

:flex-direction :row
:align-items :center
:justify-content :space-between})

(def header-icon-style
{:border-radius 10
:margin-left 16
:width 32
:height 32
:background-color colors/white-opa-10})

(def right-accessories
{:flex-direction :row
:align-items :center
:justify-content :space-between
:margin-right 20})

(def avatar
{:margin-top 8
:margin-horizontal 24
:z-index 100})

(def user-info
{:background-color colors/neutral-95
:padding-horizontal 16
:border-top-left-radius 20
:border-top-right-radius 20
:margin-top -38
:padding-top 38
:padding-bottom 16})

(def container-style {:background-color colors/neutral-95})

(def rounded-view
{:margin-top 16
:margin-horizontal 20
:overflow "hidden"
:border-radius radius})

(def list-item-container
{:background-color "#242D3F"
:padding-left -12
:padding-right 6
:height 50})

(def logout-container
{:align-items :center
:justify-content :center
:flex-direction :row
:height 48
:margin-horizontal 20
:margin-top 16
:margin-bottom 64
:overflow "hidden"
:border-radius radius
:background-color colors/danger-50-opa-20})
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

imo for danger it's better to also use the colors mechanism-> i.e in this case.
(colors/custom-color :danger 50 20)

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks. Changed.


30 changes: 25 additions & 5 deletions src/status_im/ui/screens/screens.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@
[status-im.ui.screens.profile.contact.views :as contact]
[status-im.ui.screens.profile.group-chat.views :as profile.group-chat]
[status-im.ui.screens.profile.seed.views :as profile.seed]
[status-im.ui.screens.profile.user.views :as profile.user]
[status-im2.contexts.profile.profiles.views-v2 :as profile.user]
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

it would be preferable if you register the new screen in status-im2.navigation.screens namespace instead 👍

[status-im.ui.screens.progress.views :as progress]
[status-im.ui.screens.qr-scanner.views :as qr-scanner]
[status-im.ui.screens.reset-password.views :as reset-password]
Expand All @@ -74,7 +74,12 @@
[status-im.ui.screens.wallet.settings.views :as wallet-settings]
[status-im.ui.screens.wallet.swap.views :as wallet.swap]
[status-im.ui.screens.wallet.transactions.views :as wallet-transactions]
[status-im2.contexts.chat.group-details.view :as group-details]))
[status-im2.contexts.chat.group-details.view :as group-details]
[status-im2.contexts.chat.home.view :as chat-home]
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

it's unclear why you have added all of these screens here? we already have them registered in the app? any particular reason? 🤨

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Want to navigate to the chat home screen. Just removed.

[status-im2.contexts.communities.home.view :as communities-home]
[status-im2.contexts.shell.share.view :as share-view]
[status-im.ui.screens.browser.stack :as browser]
[status-im2.navigation.options :as options]))

(defn right-button-options
[id icon]
Expand Down Expand Up @@ -110,7 +115,11 @@
:component stickers/pack}

;; Community (legacy only for e2e needed)

{:name :community-home
:options {:topBar {:title {:text (i18n/label :t/import-community-title)}}
:insets {:top? true
:bottom? true}}
:component communities-home/view}
{:name :community-members
;;TODO custom subtitle
:options {:insets {:top? true}}
Expand Down Expand Up @@ -425,6 +434,11 @@
:top? true}}
:component contact/nickname-view}

{:name :chat-home
:options {:topBar {:title {:text (i18n/label :t/chat)}}
:insets {:top? true}}
:component chat-home/view}

;[Group chat] Add participants
{:name :add-participants-toggle-list
:on-focus [:group/add-participants-toggle-list]
Expand Down Expand Up @@ -530,6 +544,11 @@
:options {:insets {:bottom? true
:top? true}}
:component bookmarks/new-bookmark}
{:name :browser
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

please rollback this file

;;TODO dynamic title
:options {:insets {:bottom? false
:top? false}}
:component browser/browser-stack}

;Profile
{:name :profile
Expand Down Expand Up @@ -661,13 +680,14 @@
{:name :change-pairing-code
:insets {:bottom? true}
:component keycard.pairing/change-pairing-code}

{:name :show-all-connections
:options {:topBar {:title {:text (i18n/label :all-connections)}}
:insets {:bottom? true
:top? true}}
:component manage-all-connections/views}

{:name :share-view
:options options/transparent-screen-options
:component share-view/view}
;; BUG REPORT
{:name :bug-report
:options {:insets {:top? true}}
Expand Down
66 changes: 66 additions & 0 deletions src/status_im2/contexts/profile/profiles/components.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
(ns status-im2.contexts.profile.profiles.components
(:require [status-im.ui.components.react :as react]
[quo.core :as quo]
[status-im2.contexts.profile.profiles.style :as styles]
[status-im2.contexts.chat.messages.avatar.view :as avatar]
[status-im.multiaccounts.core :as multiaccounts]))

(def top-background-view
[react/view
{:style styles/top-background-view}])

(defn button
[{:keys [icon accessibility-label on-press style]}]
[quo/header-action
{:icon icon
:on-press on-press
:accessibility-label accessibility-label
:style (merge styles/header-icon-style style)}])

(defn fixed-toolbar
[{:keys [on-close on-switch-profile on-show-qr on-share]}]
[react/view
{:style styles/toolbar}
[button
{:icon :main-icons/close
:accessibility-label :close-header-button
:on-press on-close
:style {:margin-left 20}}]
[react/view
{:style styles/right-accessories}
[button
{:icon :main-icons/multi-profile
:accessibility-label :multi-profile-header-button
:on-press on-switch-profile}]
[button
{:icon :main-icons/qr2
:accessibility-label :qr-header-button
:on-press on-show-qr
:style {:margin-left 14}}]
[button
{:icon :main-icons/share
:accessibility-label :share-header-button
:on-press on-share}]]])

(defn user-info
[{:keys [emoji-hash account public-key about]}]
[react/view
[react/view
{:style styles/avatar}
[avatar/avatar public-key :big]]

[react/view
{:style styles/user-info}
[quo/text
{:weight :semi-bold
:size :xx-large
:style {:margin-top 16}}
(multiaccounts/displayed-name account)]
[quo/text
{:size :large
:style {:margin-top 8}}
about]
[quo/text
{:size :large
:style {:margin-top 8}}
emoji-hash]]])
Loading