Jc/add channel list item (#14040)
* feat: add list item - channel component to quo2 library * fix: adjust size and position of icon for lock in channel avatar
This commit is contained in:
parent
1d3a44b933
commit
1fb71bdfc8
Binary file not shown.
After Width: | Height: | Size: 415 B |
Binary file not shown.
After Width: | Height: | Size: 594 B |
Binary file not shown.
After Width: | Height: | Size: 424 B |
Binary file not shown.
After Width: | Height: | Size: 637 B |
Binary file not shown.
After Width: | Height: | Size: 995 B |
Binary file not shown.
After Width: | Height: | Size: 1.6 KiB |
|
@ -5,9 +5,8 @@
|
||||||
[quo2.components.markdown.text :as text]
|
[quo2.components.markdown.text :as text]
|
||||||
[quo.theme :as theme]))
|
[quo.theme :as theme]))
|
||||||
|
|
||||||
(defn channel-avatar [{:keys [big? lock-status emoji-background-color emoji]}]
|
(defn channel-avatar [{:keys [big? locked? emoji-background-color emoji]}]
|
||||||
(let [locked? (= :locked lock-status)
|
(let [lock-exists? (some? locked?)
|
||||||
lock-exists? (and lock-status (not= :none lock-status))
|
|
||||||
dark? (theme/dark?)]
|
dark? (theme/dark?)]
|
||||||
[rn/view {:style {:width (if big? 32 24)
|
[rn/view {:style {:width (if big? 32 24)
|
||||||
:height (if big? 32 24)
|
:height (if big? 32 24)
|
||||||
|
@ -24,11 +23,11 @@
|
||||||
(when lock-exists?
|
(when lock-exists?
|
||||||
[rn/view {:style {:position :absolute
|
[rn/view {:style {:position :absolute
|
||||||
:left (if big?
|
:left (if big?
|
||||||
13
|
|
||||||
5)
|
|
||||||
:top (if big?
|
|
||||||
14
|
14
|
||||||
5)
|
8)
|
||||||
|
:top (if big?
|
||||||
|
15
|
||||||
|
8)
|
||||||
:background-color (if dark?
|
:background-color (if dark?
|
||||||
colors/neutral-90
|
colors/neutral-90
|
||||||
colors/white)
|
colors/white)
|
||||||
|
@ -40,6 +39,6 @@
|
||||||
{:color (if dark?
|
{:color (if dark?
|
||||||
colors/neutral-40
|
colors/neutral-40
|
||||||
colors/neutral-50)
|
colors/neutral-50)
|
||||||
:container-style {:width 16
|
:container-style {:width 12
|
||||||
:height 16}
|
:height 12}
|
||||||
:size 12}]])]]))
|
:size 12}]])]]))
|
||||||
|
|
|
@ -0,0 +1,58 @@
|
||||||
|
(ns quo2.components.list-items.channel
|
||||||
|
(:require [quo.react-native :as rn]
|
||||||
|
[quo2.foundations.colors :as colors]
|
||||||
|
[quo2.components.counter.counter :as quo2.counter]
|
||||||
|
[quo2.components.icon :as quo2.icons]
|
||||||
|
[quo2.components.avatars.channel-avatar :as channel-avatar]
|
||||||
|
[quo2.components.markdown.text :as quo2.text]
|
||||||
|
[quo.theme :as theme]))
|
||||||
|
|
||||||
|
(defn list-item [{:keys [name locked? mentions-count unread-messages?
|
||||||
|
muted? is-active-channel? emoji channel-color]
|
||||||
|
:or {channel-color colors/primary-50}}]
|
||||||
|
[rn/view {:style (merge {:height 48
|
||||||
|
:display :flex
|
||||||
|
:border-radius 12
|
||||||
|
:flex-direction :row
|
||||||
|
:justify-content :space-between
|
||||||
|
:align-items :center
|
||||||
|
:width "100%"
|
||||||
|
:padding-left 12
|
||||||
|
:padding-right 12}
|
||||||
|
(when is-active-channel?
|
||||||
|
{:background-color (colors/theme-alpha channel-color 0.05 0.05)}))}
|
||||||
|
[rn/view {:display :flex
|
||||||
|
:flex-direction :row
|
||||||
|
:justify-content :flex-start
|
||||||
|
:align-items :center}
|
||||||
|
[channel-avatar/channel-avatar
|
||||||
|
{:big? true
|
||||||
|
:locked? locked?
|
||||||
|
:emoji-background-color (colors/theme-alpha channel-color 0.1 0.1)
|
||||||
|
:emoji emoji}]
|
||||||
|
[quo2.text/text
|
||||||
|
{:style (merge {:margin-left 12}
|
||||||
|
(when
|
||||||
|
(and (not locked?)
|
||||||
|
muted?)
|
||||||
|
{:color (if (theme/dark?) colors/neutral-60 colors/neutral-40)}))
|
||||||
|
:weight :medium :size :paragraph-1} (str "# " name)]]
|
||||||
|
[rn/view {:style {:height 20}}
|
||||||
|
(when (and (not locked?)
|
||||||
|
muted?)
|
||||||
|
[quo2.icons/icon :main-icons2/muted?
|
||||||
|
{:size 20
|
||||||
|
:no-color true}])
|
||||||
|
(when (and (not locked?)
|
||||||
|
(not muted?)
|
||||||
|
(pos? (int mentions-count)))
|
||||||
|
[rn/view {:style {:margin-right 2
|
||||||
|
:margin-top 2}}
|
||||||
|
[quo2.counter/counter {:override-bg-color channel-color} mentions-count]])
|
||||||
|
(when (and (not locked?)
|
||||||
|
(not muted?)
|
||||||
|
(not (pos? (int mentions-count)))
|
||||||
|
unread-messages?)
|
||||||
|
[quo2.icons/theme-icon :main-icons2/channel-notification
|
||||||
|
{:size 20
|
||||||
|
:no-color true}])]])
|
|
@ -13,9 +13,22 @@
|
||||||
(let [rgb (string/split value #",")]
|
(let [rgb (string/split value #",")]
|
||||||
(str (string/join "," (butlast rgb)) "," opacity ")")))))
|
(str (string/join "," (butlast rgb)) "," opacity ")")))))
|
||||||
|
|
||||||
|
(def theme-alpha
|
||||||
|
(memoize
|
||||||
|
(fn
|
||||||
|
([color light-opacity dark-opacity]
|
||||||
|
(theme-alpha color light-opacity color dark-opacity))
|
||||||
|
([light-color light-opacity dark-color dark-opacity]
|
||||||
|
(if (theme/dark?)
|
||||||
|
(alpha light-color light-opacity)
|
||||||
|
(alpha dark-color dark-opacity))))))
|
||||||
|
|
||||||
|
|
||||||
;;;;Neutral
|
;;;;Neutral
|
||||||
|
|
||||||
;;Solid
|
;;Solid
|
||||||
|
|
||||||
|
|
||||||
(def neutral-5 "#F5F6F8")
|
(def neutral-5 "#F5F6F8")
|
||||||
(def neutral-10 "#F0F2F5")
|
(def neutral-10 "#F0F2F5")
|
||||||
(def neutral-20 "#E7EAEE")
|
(def neutral-20 "#E7EAEE")
|
||||||
|
|
|
@ -14,17 +14,19 @@
|
||||||
{:label "Avatar color"
|
{:label "Avatar color"
|
||||||
:key :emoji
|
:key :emoji
|
||||||
:type :text}
|
:type :text}
|
||||||
{:label "Lock status"
|
{:label "is Locked?"
|
||||||
:key :lock-status
|
:key :locked?
|
||||||
:type :select
|
:type :select
|
||||||
:options [{:key :unlocked
|
:options [{:key nil
|
||||||
|
:value "None"}
|
||||||
|
{:key false
|
||||||
:value "Unlocked"}
|
:value "Unlocked"}
|
||||||
{:key :locked
|
{:key true
|
||||||
:value "Locked"}]}])
|
:value "Locked"}]}])
|
||||||
|
|
||||||
(defn cool-preview []
|
(defn cool-preview []
|
||||||
(let [state (reagent/atom {:big? true
|
(let [state (reagent/atom {:big? true
|
||||||
:lock-status :none
|
:locked? nil
|
||||||
:emoji "🍑"
|
:emoji "🍑"
|
||||||
:emoji-background-color :gray})]
|
:emoji-background-color :gray})]
|
||||||
(fn []
|
(fn []
|
||||||
|
|
|
@ -0,0 +1,72 @@
|
||||||
|
(ns quo2.screens.list-items.channel
|
||||||
|
(:require [quo.react-native :as rn]
|
||||||
|
[reagent.core :as reagent]
|
||||||
|
[quo.previews.preview :as preview]
|
||||||
|
[quo2.foundations.colors :as colors]
|
||||||
|
[quo2.components.list-items.channel :as quo2-channel]))
|
||||||
|
|
||||||
|
(def descriptor [{:label "Muted?:"
|
||||||
|
:key :muted?
|
||||||
|
:type :boolean}
|
||||||
|
{:label "Name"
|
||||||
|
:key :name
|
||||||
|
:type :text}
|
||||||
|
{:label "Number of mentions"
|
||||||
|
:key :mentions-count
|
||||||
|
:type :text}
|
||||||
|
{:label "Unread Messages:"
|
||||||
|
:key :unread-messages?
|
||||||
|
:type :boolean}
|
||||||
|
{:label "Avatar emoji"
|
||||||
|
:key :emoji
|
||||||
|
:type :text}
|
||||||
|
{:label "is Locked?"
|
||||||
|
:key :locked?
|
||||||
|
:type :select
|
||||||
|
:options [{:key nil
|
||||||
|
:value "None"}
|
||||||
|
{:key false
|
||||||
|
:value "Unlocked"}
|
||||||
|
{:key true
|
||||||
|
:value "Locked"}]}
|
||||||
|
{:label "Is Pressed Channel:"
|
||||||
|
:key :is-active-channel?
|
||||||
|
:type :boolean}
|
||||||
|
{:label "Channel color"
|
||||||
|
:key :channel-color
|
||||||
|
:type :select
|
||||||
|
:options [{:key "#00FFFF"
|
||||||
|
:value "Blue"}
|
||||||
|
{:key "#FF00FF"
|
||||||
|
:value "Pink"}
|
||||||
|
{:key "#FFFF00"
|
||||||
|
:value "Yellow"}]}])
|
||||||
|
|
||||||
|
(defn cool-preview []
|
||||||
|
(let [state (reagent/atom {:is-active-channel? false
|
||||||
|
:muted? false
|
||||||
|
:unread-messages? false
|
||||||
|
:emoji "🍑"
|
||||||
|
:channel-color "#4360DF"
|
||||||
|
:mentions-count "5"
|
||||||
|
:name "channel"
|
||||||
|
:locked? true})]
|
||||||
|
(fn []
|
||||||
|
[rn/view {:margin-bottom 50
|
||||||
|
:padding-bottom 16
|
||||||
|
:padding-right 8
|
||||||
|
:padding-left 8
|
||||||
|
|
||||||
|
:padding-top 16}
|
||||||
|
[preview/customizer state descriptor]
|
||||||
|
[rn/view {:padding-vertical 60
|
||||||
|
:align-items :center}
|
||||||
|
[quo2-channel/list-item @state]]])))
|
||||||
|
|
||||||
|
(defn preview-channel []
|
||||||
|
[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}]])
|
|
@ -7,6 +7,7 @@
|
||||||
[quo.theme :as theme]
|
[quo.theme :as theme]
|
||||||
[quo2.components.markdown.text :as quo2-text]
|
[quo2.components.markdown.text :as quo2-text]
|
||||||
[quo2.components.buttons.button :as quo2-button]
|
[quo2.components.buttons.button :as quo2-button]
|
||||||
|
[quo2.screens.avatars.channel-avatar :as channel-avatar]
|
||||||
[quo2.screens.avatars.icon-avatar :as icon-avatar]
|
[quo2.screens.avatars.icon-avatar :as icon-avatar]
|
||||||
[quo2.screens.avatars.group-avatar :as group-avatar]
|
[quo2.screens.avatars.group-avatar :as group-avatar]
|
||||||
[quo2.screens.avatars.user-avatar :as user-avatar]
|
[quo2.screens.avatars.user-avatar :as user-avatar]
|
||||||
|
@ -16,12 +17,18 @@
|
||||||
[quo2.screens.community.community-card-view :as community-card]
|
[quo2.screens.community.community-card-view :as community-card]
|
||||||
[quo2.screens.dividers.divider-label :as divider-label]
|
[quo2.screens.dividers.divider-label :as divider-label]
|
||||||
[quo2.screens.dividers.new-messages :as new-messages]
|
[quo2.screens.dividers.new-messages :as new-messages]
|
||||||
|
[quo2.screens.list-items.dropdown :as dropdown]
|
||||||
[quo2.screens.info.info-message :as info-message]
|
[quo2.screens.info.info-message :as info-message]
|
||||||
[quo2.screens.info.information-box :as information-box]
|
[quo2.screens.info.information-box :as information-box]
|
||||||
|
[quo2.screens.info.lowest-price :as lowest-price]
|
||||||
|
[quo2.screens.list-items.preview-lists :as preview-lists]
|
||||||
|
[quo2.screens.list-items.channel :as channel]
|
||||||
[quo2.screens.markdown.text :as text]
|
[quo2.screens.markdown.text :as text]
|
||||||
[quo2.screens.messages.gap :as messages-gap]
|
[quo2.screens.messages.gap :as messages-gap]
|
||||||
[quo2.screens.notifications.activity-logs :as activity-logs]
|
[quo2.screens.notifications.activity-logs :as activity-logs]
|
||||||
[quo2.screens.reactions.react :as react]
|
[quo2.screens.reactions.react :as react]
|
||||||
|
[quo2.screens.switcher.switcher-cards :as switcher-cards]
|
||||||
|
[quo2.screens.tabs.account-selector :as account-selector]
|
||||||
[quo2.screens.tabs.segmented-tab :as segmented]
|
[quo2.screens.tabs.segmented-tab :as segmented]
|
||||||
[quo2.screens.tabs.tabs :as tabs]
|
[quo2.screens.tabs.tabs :as tabs]
|
||||||
[quo2.screens.tags.context-tags :as context-tags]
|
[quo2.screens.tags.context-tags :as context-tags]
|
||||||
|
@ -30,12 +37,6 @@
|
||||||
[quo2.screens.tags.status-tags :as status-tags]
|
[quo2.screens.tags.status-tags :as status-tags]
|
||||||
[quo2.screens.tags.token-tag :as token-tag]
|
[quo2.screens.tags.token-tag :as token-tag]
|
||||||
[quo2.screens.wallet.token-overview :as token-overview]
|
[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]
|
|
||||||
[quo2.screens.switcher.switcher-cards :as switcher-cards]
|
|
||||||
[quo2.screens.tabs.account-selector :as account-selector]
|
|
||||||
[quo2.screens.list-items.dropdown :as dropdown]
|
|
||||||
[re-frame.core :as re-frame]))
|
[re-frame.core :as re-frame]))
|
||||||
|
|
||||||
(def screens-categories
|
(def screens-categories
|
||||||
|
@ -69,6 +70,9 @@
|
||||||
{:name :new-messages
|
{:name :new-messages
|
||||||
:insets {:top false}
|
:insets {:top false}
|
||||||
:component new-messages/preview-new-messages}]
|
:component new-messages/preview-new-messages}]
|
||||||
|
:dropdowns [{:name :dropdown
|
||||||
|
:insets {:top false}
|
||||||
|
:component dropdown/preview-dropdown}]
|
||||||
:info [{:name :info-message
|
:info [{:name :info-message
|
||||||
:insets {:top false}
|
:insets {:top false}
|
||||||
:component info-message/preview-info-message}
|
:component info-message/preview-info-message}
|
||||||
|
@ -78,6 +82,12 @@
|
||||||
{:name :lowest-price
|
{:name :lowest-price
|
||||||
:insets {:top false}
|
:insets {:top false}
|
||||||
:component lowest-price/preview-lowest-price}]
|
:component lowest-price/preview-lowest-price}]
|
||||||
|
:list-items [{:name :channel
|
||||||
|
:insets {:top false}
|
||||||
|
:component channel/preview-channel}
|
||||||
|
{:name :preview-lists
|
||||||
|
:insets {:top false}
|
||||||
|
:component preview-lists/preview-preview-lists}]
|
||||||
:markdown [{:name :texts
|
:markdown [{:name :texts
|
||||||
:insets {:top false}
|
:insets {:top false}
|
||||||
:component text/preview-text}]
|
:component text/preview-text}]
|
||||||
|
@ -90,6 +100,9 @@
|
||||||
:reactions [{:name :react
|
:reactions [{:name :react
|
||||||
:insets {:top false}
|
:insets {:top false}
|
||||||
:component react/preview-react}]
|
:component react/preview-react}]
|
||||||
|
:switcher [{:name :switcher-cards
|
||||||
|
:insets {:top false}
|
||||||
|
:component switcher-cards/preview-switcher-cards}]
|
||||||
:tabs [{:name :segmented
|
:tabs [{:name :segmented
|
||||||
:insets {:top false}
|
:insets {:top false}
|
||||||
:component segmented/preview-segmented}
|
:component segmented/preview-segmented}
|
||||||
|
@ -116,16 +129,7 @@
|
||||||
:component token-tag/preview-token-tag}]
|
:component token-tag/preview-token-tag}]
|
||||||
:wallet [{:name :token-overview
|
:wallet [{:name :token-overview
|
||||||
:insets {:top false}
|
:insets {:top false}
|
||||||
:component token-overview/preview-token-overview}]
|
:component token-overview/preview-token-overview}]})
|
||||||
:dropdowns [{:name :dropdown
|
|
||||||
:insets {:top false}
|
|
||||||
:component dropdown/preview-dropdown}]
|
|
||||||
:list-items [{:name :preview-lists
|
|
||||||
:insets {:top false}
|
|
||||||
:component preview-lists/preview-preview-lists}]
|
|
||||||
:switcher [{:name :switcher-cards
|
|
||||||
:insets {:top false}
|
|
||||||
:component switcher-cards/preview-switcher-cards}]})
|
|
||||||
|
|
||||||
(def screens (flatten (map val screens-categories)))
|
(def screens (flatten (map val screens-categories)))
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue