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

Jump to bottom

RE: User avatar component #13839

Merged
merged 8 commits into from
Sep 5, 2022
Merged

RE: User avatar component #13839

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
77e9de1
User avatar component
ibrkhalil Aug 22, 2022
1385ec9
clean
ibrkhalil Sep 5, 2022
16dd09d
Add icons
ibrkhalil Sep 5, 2022
d65e6b1
fix keycard account shown as regular account on theme change while lo…
Parveshdhull Sep 5, 2022
01fbd97
rebase
ibrkhalil Sep 5, 2022
db3f219
clean
ibrkhalil Sep 5, 2022
855f967
clean
ibrkhalil Sep 5, 2022
18631c1
Merge branch 'develop' into issue-13560-2
ibrkhalil Sep 5, 2022
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
Prev Previous commit
Next Next commit
clean
  • Loading branch information
@ibrkhalil
ibrkhalil committed Sep 5, 2022
commit 1385ec95f32b79bae8e72016e3afd6865a5005ff
59 changes: 32 additions & 27 deletions src/quo2/components/user_avatar.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
(ns quo2.components.user-avatar
(:require [quo.react-native :as rn]
[quo2.components.text :as text]
[quo2.foundations.colors :as colors]
[status-im.ui.components.icons.icons :as icons]
[quo2.components.icon :as icons]
[clojure.string :refer [upper-case split blank?]]
[quo.theme :refer [dark?]]
[status-im.ui.components.react :as react]))
Expand All @@ -10,32 +11,32 @@
:inner 72
:status-indicator 20
:status-indicator-border 4
:font-size 27}
:font-size :heading-1}
:medium {:outer 48
:inner 44
:status-indicator 16
:status-indicator 12
:status-indicator-border 2
:font-size 15}
:font-size :paragraph-1}
:small {:outer 32
:inner 28
:status-indicator 12
:status-indicator-border 2
:font-size 13}
:font-size :paragraph-2}
:xs {:outer 24
:inner 24
:status-indicator 0
:status-indicator-border 0
:font-size 13}
:font-size :paragraph-2}
:xxs {:outer 20
:inner 20
:status-indicator 0
:status-indicator-border 0
:font-size 11}
:font-size :label}
:xxxs {:outer 16
:inner 16
:status-indicator 0
:status-indicator-border 0
:font-size 11}})
:font-size :label}})

(defn dot-indicator
[size status-indicator? online? ring? dark?]
Expand All @@ -45,17 +46,17 @@
right (case size
:big 2
:medium 0
:small 0
:small -2
0)
bottom (case size
:big (if ring?
4
-1
2)
:medium (if ring?
0
-2)
:small (if ring?
0
-2
-2)
0)]
[rn/view {:style {:background-color (if online?
Expand Down Expand Up @@ -90,14 +91,17 @@
(container-styling inner-dimensions outer-dimensions))}
children]))

(def small-sizes #{:xs :xxs :xxxs})
(def identicon-sizes #{:big :medium :small})

(defn user-avatar
[{:keys [ring?
online?
size
status-indicator?
profile-picture
full-name]
:or {full-name "john doe"
:or {full-name "empty name"
status-indicator? true
online? true
size :big
Expand All @@ -106,10 +110,8 @@
(reduce str (map first (split full-name " ")))
ibrkhalil marked this conversation as resolved.
Show resolved Hide resolved
"")
first-initial-letter (if full-name
(first full-name)
(or (first full-name) "")
"")
small-sizes #{:small :xs :xxs :xxxs}
identicon-sizes #{:big :medium :small}
identicon? (contains? identicon-sizes size)
small? (contains? small-sizes size)
using-profile-picture? (-> profile-picture
Expand All @@ -119,24 +121,27 @@
inner-dimensions (get-in sizes [size (if ring?
:inner
:outer)])
font-size (get-in sizes [size :font-size])]
font-size (get-in sizes [size :font-size])
icon-text (if-not (or (blank? first-initial-letter)
(blank? initials))
(if small?
first-initial-letter
initials)
"")]
[rn/view {:style {:width outer-dimensions
:height outer-dimensions
:border-radius outer-dimensions}}
(when (and ring? identicon?)
[icons/icon :main-icons/identicon-ring32 {:width outer-dimensions
:height outer-dimensions
:no-color true}])
[icons/icon :main-icons/identicon-ring {:width outer-dimensions
:height outer-dimensions
:size outer-dimensions
:no-color true}])
(if using-profile-picture?
[react/image {:style (container-styling inner-dimensions outer-dimensions)
:source {:uri profile-picture}}]
[container inner-dimensions outer-dimensions
[rn/text {:style {:color colors/white-opa-70
:font-size font-size}}
(upper-case (if-not (or (blank? first-initial-letter)
(blank? initials))
(if small?
first-initial-letter
initials)
""))]])
[text/text {:weight :semi-bold
:size font-size
:style {:color colors/white-opa-70}}
(upper-case icon-text)]])
[dot-indicator size status-indicator? online? ring? (dark?)]]))
4 changes: 2 additions & 2 deletions src/quo2/screens/user_avatar.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,10 +37,10 @@
:type :text}])

(defn cool-preview []
(let [state (reagent/atom {:full-name "john doe"
(let [state (reagent/atom {:full-name "A Y"
:status-indicator? true
:online? true
:size :big
:size :medium
:ring? true})]
(fn []
[rn/view {:margin-bottom 50
Expand Down