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

Improve profile card (#15264)

This commit is contained in:
Parvesh Monu 2023-03-06 14:24:34 +05:30 committed by GitHub
parent 16ffc23509
commit f314806b83
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 111 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/quo2/components/profile/profile_card/style.cljs
View File

@ -2,12 +2,14 @@
(:require [quo2.foundations.colors :as colors]))
(defn card-container
[customization-color]
{:flex-direction :column
:padding 12
:flex 1
:border-radius 16
:background-color (colors/custom-color customization-color 50 40)})
[customization-color padding-bottom]
{:flex-direction :column
:padding-horizontal 12
:padding-top 12
:padding-bottom padding-bottom
:flex 1
:border-radius 16
:background-color (colors/custom-color customization-color 50 40)})
(def card-header
{:flex-direction :row
@ -16,25 +18,23 @@
(def name-container
{:flex-direction :row
:margin-top 8
:margin-bottom 2
:align-items :center
:padding-right 12})
(def user-name
{:margin-right 4
:color colors/white})
{:color colors/white})
(def emoji-hash
{:margin-top 10})
{:margin-top 12})
(def user-hash
{:color colors/white-opa-60})
(def sign-button
{:margin-top 14})
{:margin-top 2
:color colors/white-opa-60})
(def keycard-icon
{:color colors/white-opa-40})
{:margin-left 4
:color colors/white-opa-40})
(def option-button
{:background-color colors/white-opa-5})
{:background-color colors/white-opa-5
:margin-left 8})

131
src/quo2/components/profile/profile_card/view.cljs
View File

@ -1,63 +1,80 @@
(ns quo2.components.profile.profile-card.view
(:require
[quo2.components.profile.profile-card.style :as style]
[quo2.foundations.colors :as colors]
[quo2.components.avatars.user-avatar :as user-avatar]
[quo2.components.icon :as icon]
[quo2.components.markdown.text :as text]
[quo2.components.buttons.button :as button]
[react-native.core :as rn]))
(:require [utils.i18n :as i18n]
[react-native.core :as rn]
[quo2.components.icon :as icon]
[quo2.components.tags.tag :as tag]
[quo2.foundations.colors :as colors]
[quo2.components.markdown.text :as text]
[quo2.components.buttons.button :as button]
[quo2.components.avatars.user-avatar :as user-avatar]
[quo2.components.profile.profile-card.style :as style]))
(defn profile-card
[{:keys [show-sign-profile? key-card? profile-picture name hash customization-color sign-label
emoji-hash on-press-dots on-press-sign show-emoji-hash?]
:or {show-sign-profile? false
show-emoji-hash? false
customization-color :turquoise
key-card? false}}]
[rn/view
{:style (style/card-container customization-color)}
[{:keys [key-card? profile-picture name hash customization-color
emoji-hash on-options-press show-emoji-hash? padding-bottom
show-options-button? show-user-hash? show-logged-in? on-card-press]
:or {show-emoji-hash? false
show-user-hash? false
customization-color :turquoise
show-options-button? false
show-logged-in? false
key-card? false}}]
[rn/touchable-without-feedback
{:on-press on-card-press
:flex 1
:accessibility-label :profile-card}
[rn/view
{:style style/card-header}
[user-avatar/user-avatar
{:full-name name
:profile-picture profile-picture
:override-theme :dark
:size :medium
:status-indicator? false}]
[button/button
{:size 32
:type :blur-bg
:icon true
:override-theme :dark
:style style/option-button
:on-press on-press-dots}
:i/options]]
[rn/view
{:style style/name-container}
[text/text
{:size :heading-2
:weight :semi-bold
:number-of-lines 1
:style style/user-name} name]
(when key-card?
(icon/icon
:i/keycard
style/keycard-icon))]
[text/text
{:weight :monospace
:number-of-lines 1
:style style/user-hash} hash]
(when (and show-emoji-hash? emoji-hash)
(style/card-container
customization-color
(or padding-bottom (if show-emoji-hash? 12 10)))
[rn/view
{:style style/card-header}
[user-avatar/user-avatar
{:full-name name
:profile-picture profile-picture
:override-theme :dark
:size :medium
:status-indicator? false}]
[rn/view {:flex-direction :row}
(when show-logged-in?
[tag/tag
{:type :icon
:size 32
:blurred? true
:labelled? true
:resource :main-icons2/check
:accessibility-label :logged-in-tag
:icon-color colors/success-50
:override-theme :dark
:label (i18n/label :t/logged-in)}])
(when show-options-button?
[button/button
{:size 32
:type :blur-bg
:icon true
:override-theme :dark
:style style/option-button
:on-press on-options-press
:accessibility-label :profile-card-options}
:i/options])]]
[rn/view
{:style style/name-container}
[text/text
{:weight :monospace
{:size :heading-2
:weight :semi-bold
:number-of-lines 1
:style style/emoji-hash} emoji-hash])
(when show-sign-profile?
[button/button
{:on-press on-press-sign
:type :community
:community-color (colors/custom-color customization-color 60)
:community-text-color colors/white
:style style/sign-button} sign-label])])
:style style/user-name} name]
(when key-card?
(icon/icon
:i/keycard
style/keycard-icon))]
(when show-user-hash?
[text/text
{:weight :monospace
:number-of-lines 1
:style style/user-hash} hash])
(when (and show-emoji-hash? emoji-hash)
[text/text
{:weight :monospace
:number-of-lines 1
:style style/emoji-hash} emoji-hash])]])

4
src/quo2/components/tags/tag.cljs
View File

@ -83,13 +83,13 @@
- `labelled` boolean: is true if tag has label else false"
[_ _]
(fn [{:keys [id on-press disabled? size resource active accessibility-label
label type labelled? blurred? icon-color]
label type labelled? blurred? icon-color override-theme]
:or {size 32}}]
(let [state (cond disabled? :disabled
active :active
:else :default)
{:keys [border-color blurred-border-color text-color]}
(get-in themes [(theme/get-theme) state])]
(get-in themes [(or override-theme (theme/get-theme)) state])]
[rn/view {:style {:align-items :center}}
[base-tag/base-tag
{:id id

29
src/status_im2/contexts/quo_preview/profile/profile_card.cljs
View File

@ -7,15 +7,21 @@
[status-im2.contexts.quo-preview.preview :as preview]))
(def descriptor
[{:label "Show: Sign in to this profile?"
:key :show-sign-profile?
:type :boolean}
{:label "Show: Is from key card?"
[{:label "Show: Is from key card?"
:key :key-card?
:type :boolean}
{:label "Show: Emoji hash?"
:key :show-emoji-hash?
:type :boolean}
{:label "Show: User hash?"
:key :show-user-hash?
:type :boolean}
{:label "Show: Options Button?"
:key :show-options-button?
:type :boolean}
{:label "Show: Logged In?"
:key :show-logged-in?
:type :boolean}
{:label "Customization Color"
:key :customization-color
:type :select
@ -51,22 +57,21 @@
:type :text}
{:label "Emoji hash"
:key :emoji-hash
:type :text}
{:label "Sign button label"
:key :sign-label
:type :text}])
(defn cool-preview
[]
(let [state (reagent/atom {:show-sign-profile? true
:key-card? true
(let [state (reagent/atom {:key-card? false
:name "Matt Grote"
:sign-label "Sign in to this profile"
:on-press-dots nil
:on-options-press nil
:on-card-press nil
:show-options-button? true
:show-logged-in? true
:show-user-hash? false
:on-press-sign nil
:customization-color :turquoise
:profile-picture (resources/get-mock-image :user-picture-male5)
:show-emoji-hash? true
:show-emoji-hash? false
:hash "zQ3k83euenmcikw7474hfu73t5N"
:emoji-hash "😄😂🫣🍑😇🤢😻🥷🏻🦸🏻‍♀️🦸🏻🦸🏻‍♂️🦹🏻‍♀️🧑🏻‍🎄🎅🏻"})]
(fn []

3
translations/en.json
View File

@ -1975,5 +1975,6 @@
"strength-divider-weak-label": "Weak",
"strength-divider-okay-label": "Okay",
"strength-divider-strong-label": "Strong",
"strength-divider-very-strong-label": "Very strong"
"strength-divider-very-strong-label": "Very strong",
"logged-in": "Logged in"
}