Channel avatar component (#13658)
This commit is contained in:
parent
3e8ac1939e
commit
aa0d9ba41f
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 |
|
@ -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}]])]]))
|
|
@ -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}]])
|
|
@ -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}]
|
||||
|
|
Loading…
Reference in New Issue