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

Collection avatar component (#17462) 

* Collection avatar component
This commit is contained in:
Volodymyr Kozieiev 2023-10-02 21:46:47 +01:00 committed by GitHub
parent ee85d6d596
commit 9fb37d3a48
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 75 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
resources/images/mock2/bored-ape.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 781 B

16
src/quo2/components/avatars/collection_avatar/component_spec.cljs Normal file
View File

@ -0,0 +1,16 @@
(ns quo2.components.avatars.collection-avatar.component-spec
(:require [quo2.components.avatars.collection-avatar.view :as collection-avatar]
[quo2.foundations.resources :as resources]
[test-helpers.component :as h]))
(h/describe "collection avatar"
(h/describe "Profile picture"
(h/test "Doesn't crash without image"
(h/render
[collection-avatar/view])
(h/is-truthy (h/get-by-label-text :collection-avatar)))
(h/test "Renders with image"
(h/render
[collection-avatar/view {:image (resources/get-image :bored-ape)}])
(h/is-truthy (h/get-by-label-text :collection-avatar)))))

10
src/quo2/components/avatars/collection_avatar/style.cljs Normal file
View File

@ -0,0 +1,10 @@
(ns quo2.components.avatars.collection-avatar.style
(:require [quo2.foundations.colors :as colors]))
(defn collection-avatar
[theme]
{:width 24
:height 24
:border-width 1
:border-color (colors/theme-colors colors/neutral-80-opa-10 colors/white-opa-10 theme)
:border-radius 6})

17
src/quo2/components/avatars/collection_avatar/view.cljs Normal file
View File

@ -0,0 +1,17 @@
(ns quo2.components.avatars.collection-avatar.view
(:require [quo2.components.avatars.collection-avatar.style :as style]
[quo2.theme :as quo.theme]
[react-native.fast-image :as fast-image]))
(defn- view-internal
"Opts:
:image - collection image
:theme - keyword -> :light/:dark"
[{:keys [image theme]}]
[fast-image/fast-image
{:accessibility-label :collection-avatar
:source image
:style (style/collection-avatar theme)}])
(def view (quo.theme/with-theme view-internal))

2
src/quo2/core.cljs
View File

@ -3,6 +3,7 @@
(:require
quo2.components.avatars.account-avatar.view
quo2.components.avatars.channel-avatar.view
quo2.components.avatars.collection-avatar.view
quo2.components.avatars.group-avatar.view
quo2.components.avatars.icon-avatar
quo2.components.avatars.user-avatar.view
@ -146,6 +147,7 @@
;;;; Avatar
(def account-avatar quo2.components.avatars.account-avatar.view/view)
(def channel-avatar quo2.components.avatars.channel-avatar.view/view)
(def collection-avatar quo2.components.avatars.collection-avatar.view/view)
(def group-avatar quo2.components.avatars.group-avatar.view/view)
(def icon-avatar quo2.components.avatars.icon-avatar/icon-avatar)
(def user-avatar quo2.components.avatars.user-avatar.view/user-avatar)

3
src/quo2/foundations/resources.cljs
View File

@ -4,7 +4,8 @@
{:keycard-logo (js/require "../resources/images/ui2/keycard-logo.png")
:keycard-chip-light (js/require "../resources/images/ui2/keycard-chip-light.png")
:keycard-chip-dark (js/require "../resources/images/ui2/keycard-chip-dark.png")
:keycard-watermark (js/require "../resources/images/ui2/keycard-watermark.png")})
:keycard-watermark (js/require "../resources/images/ui2/keycard-watermark.png")
:bored-ape (js/require "../resources/images/mock2/bored-ape.png")})
(defn get-image
[k]

1
src/status_im2/common/resources.cljs
View File

@ -82,6 +82,7 @@
(def mock-images
{:diamond (js/require "../resources/images/mock2/diamond.png")
:bored-ape (js/require "../resources/images/mock2/bored-ape.png")
:coinbase (js/require "../resources/images/mock2/coinbase.png")
:collectible (js/require "../resources/images/mock2/collectible.png")
:contact (js/require "../resources/images/mock2/contact.png")

24
src/status_im2/contexts/quo_preview/avatars/collection_avatar.cljs Normal file
View File

@ -0,0 +1,24 @@
(ns status-im2.contexts.quo-preview.avatars.collection-avatar
(:require [quo2.core :as quo]
[reagent.core :as reagent]
[status-im2.contexts.quo-preview.preview :as preview]
[status-im2.common.resources :as resources]))
(def descriptor
[{:key :image
:type :select
:options [{:key (resources/get-mock-image :bored-ape)
:value "Bored ape"}
{:key (resources/get-mock-image :ring)
:value "Circle"}]}])
(defn view
[]
(let [state (reagent/atom {:image (resources/get-mock-image :bored-ape)})]
(fn []
[preview/preview-container
{:state state
:descriptor descriptor
:component-container-style {:align-items :center}}
[quo/collection-avatar @state]])))

3
src/status_im2/contexts/quo_preview/main.cljs
View File

@ -10,6 +10,7 @@
:as animated-header-list]
[status-im2.contexts.quo-preview.avatars.account-avatar :as account-avatar]
[status-im2.contexts.quo-preview.avatars.channel-avatar :as channel-avatar]
[status-im2.contexts.quo-preview.avatars.collection-avatar :as collection-avatar]
[status-im2.contexts.quo-preview.avatars.group-avatar :as group-avatar]
[status-im2.contexts.quo-preview.avatars.icon-avatar :as icon-avatar]
[status-im2.contexts.quo-preview.avatars.user-avatar :as user-avatar]
@ -183,6 +184,8 @@
:component wallet-user-avatar/view}
{:name :channel-avatar
:component channel-avatar/view}
{:name :collection-avatar
:component collection-avatar/view}
{:name :account-avatar
:component account-avatar/view}]
:banner [{:name :banner