Channel avatar component (#13658)

This commit is contained in:
Ibrahem Khalil 2022-09-13 17:00:08 +02:00 committed by GitHub
parent 3e8ac1939e
commit aa0d9ba41f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 97 additions and 1 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 340 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 488 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 352 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 491 B

View File

@ -0,0 +1,45 @@
(ns quo2.components.avatars.channel-avatar
(:require [quo2.foundations.colors :as colors]
[quo.react-native :as rn]
[quo2.components.icon :as icons]
[quo2.components.markdown.text :as text]
[quo.theme :as theme]))
(defn channel-avatar [{:keys [big? lock-status emoji-background-color emoji]}]
(let [locked? (= :locked lock-status)
lock-exists? (not= :none lock-status)
dark? (theme/dark?)]
[rn/view {:style {:width (if big? 32 24)
:height (if big? 32 24)
:border-radius (if big? 32 24)
:justify-content :center
:align-items :center
:background-color emoji-background-color}}
[rn/view {:style {:display :flex
:justify-content :center
:align-items :center}}
[text/text {:size (if big?
:paragraph-1
:label)} emoji]
(when lock-exists?
[rn/view {:style {:position :absolute
:left (if big?
13
5)
:top (if big?
14
5)
:background-color (if dark?
colors/neutral-90
colors/white)
:border-radius 15
:padding 2}}
[icons/icon (if locked?
:main-icons/locked
:main-icons/unlocked)
{:color (if dark?
colors/neutral-40
colors/neutral-50)
:container-style {:width 16
:height 16}
:size 12}]])]]))

View File

@ -0,0 +1,47 @@
(ns quo2.screens.avatars.channel-avatar
(:require [reagent.core :as reagent]
[quo.react-native :as rn]
[quo.previews.preview :as preview]
[quo2.foundations.colors :as colors]
[quo2.components.avatars.channel-avatar :as quo2]))
(def descriptor [{:label "Big?"
:key :big?
:type :boolean}
{:label "Avatar color"
:key :emoji-background-color
:type :text}
{:label "Avatar color"
:key :emoji
:type :text}
{:label "Lock status"
:key :lock-status
:type :select
:options [{:key :unlocked
:value "Unlocked"}
{:key :locked
:value "Locked"}]}])
(defn cool-preview []
(let [state (reagent/atom {:big? true
:lock-status :none
:emoji "🍑"
:emoji-background-color :gray})]
(fn []
[rn/view {:margin-bottom 50
:padding 16}
[rn/view {:flex 1}
[preview/customizer state descriptor]]
[rn/view {:padding-vertical 60
:flex-direction :row
:justify-content :center}
[quo2/channel-avatar @state]]])))
(defn preview-channel-avatar []
[rn/view {:background-color (colors/theme-colors colors/white
colors/neutral-90)
:flex 1}
[rn/flat-list {:flex 1
:keyboardShouldPersistTaps :always
:header [cool-preview]
:key-fn str}]])

View File

@ -29,6 +29,7 @@
[quo2.screens.wallet.token-overview :as token-overview]
[quo2.screens.list-items.preview-lists :as preview-lists]
[quo2.screens.info.lowest-price :as lowest-price]
[quo2.screens.avatars.channel-avatar :as channel-avatar]
[re-frame.core :as re-frame]))
(def screens-categories
@ -43,7 +44,10 @@
:component user-avatar/preview-user-avatar}
{:name :wallet-user-avatar
:insets {:top false}
:component wallet-user-avatar/preview-wallet-user-avatar}]
:component wallet-user-avatar/preview-wallet-user-avatar}
{:name :channel-avatar
:insets {:top false}
:component channel-avatar/preview-channel-avatar}]
:buttons [{:name :button
:insets {:top false}
:component button/preview-button}]