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

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:
Jamie Caprani 2022-09-23 15:55:34 +01:00 committed by GitHub
parent 1d3a44b933
commit 1fb71bdfc8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 178 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
resources/images/icons/channel-notification20@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 415 B

BIN
resources/images/icons/channel-notification20@3x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 594 B

BIN
resources/images/icons/channel-notification_dark20@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 424 B

BIN
resources/images/icons/channel-notification_dark20@3x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 637 B

BIN
resources/images/icons/muted20@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 995 B

BIN
resources/images/icons/muted20@3x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

17
src/quo2/components/avatars/channel_avatar.cljs
View File

@ -5,9 +5,8 @@
[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? (and lock-status (not= :none lock-status))
(defn channel-avatar [{:keys [big? locked? emoji-background-color emoji]}]
(let [lock-exists? (some? locked?)
dark? (theme/dark?)]
[rn/view {:style {:width (if big? 32 24)
:height (if big? 32 24)
@ -24,11 +23,11 @@
(when lock-exists?
[rn/view {:style {:position :absolute
:left (if big?
13
5)
:top (if big?
14
5)
8)
:top (if big?
15
8)
:background-color (if dark?
colors/neutral-90
colors/white)
@ -40,6 +39,6 @@
{:color (if dark?
colors/neutral-40
colors/neutral-50)
:container-style {:width 16
:height 16}
:container-style {:width 12
:height 12}
:size 12}]])]]))

58
src/quo2/components/list_items/channel.cljs Normal file
View File

@ -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
src/quo2/foundations/colors.cljs
View File

@ -13,9 +13,22 @@
(let [rgb (string/split value #",")]
(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
;;Solid
(def neutral-5 "#F5F6F8")
(def neutral-10 "#F0F2F5")
(def neutral-20 "#E7EAEE")

12
src/quo2/screens/avatars/channel_avatar.cljs
View File

@ -14,17 +14,19 @@
{:label "Avatar color"
:key :emoji
:type :text}
{:label "Lock status"
:key :lock-status
{:label "is Locked?"
:key :locked?
:type :select
:options [{:key :unlocked
:options [{:key nil
:value "None"}
{:key false
:value "Unlocked"}
{:key :locked
{:key true
:value "Locked"}]}])
(defn cool-preview []
(let [state (reagent/atom {:big? true
:lock-status :none
:locked? nil
:emoji "🍑"
:emoji-background-color :gray})]
(fn []

72
src/quo2/screens/list_items/channel.cljs Normal file
View File

@ -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}]])

36
src/quo2/screens/main.cljs
View File

@ -7,6 +7,7 @@
[quo.theme :as theme]
[quo2.components.markdown.text :as quo2-text]
[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.group-avatar :as group-avatar]
[quo2.screens.avatars.user-avatar :as user-avatar]
@ -16,12 +17,18 @@
[quo2.screens.community.community-card-view :as community-card]
[quo2.screens.dividers.divider-label :as divider-label]
[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.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.messages.gap :as messages-gap]
[quo2.screens.notifications.activity-logs :as activity-logs]
[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.tabs :as tabs]
[quo2.screens.tags.context-tags :as context-tags]
@ -30,12 +37,6 @@
[quo2.screens.tags.status-tags :as status-tags]
[quo2.screens.tags.token-tag :as token-tag]
[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]))
(def screens-categories
@ -69,6 +70,9 @@
{:name :new-messages
:insets {:top false}
:component new-messages/preview-new-messages}]
:dropdowns [{:name :dropdown
:insets {:top false}
:component dropdown/preview-dropdown}]
:info [{:name :info-message
:insets {:top false}
:component info-message/preview-info-message}
@ -78,6 +82,12 @@
{:name :lowest-price
:insets {:top false}
: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
:insets {:top false}
:component text/preview-text}]
@ -90,6 +100,9 @@
:reactions [{:name :react
:insets {:top false}
:component react/preview-react}]
:switcher [{:name :switcher-cards
:insets {:top false}
:component switcher-cards/preview-switcher-cards}]
:tabs [{:name :segmented
:insets {:top false}
:component segmented/preview-segmented}
@ -116,16 +129,7 @@
:component token-tag/preview-token-tag}]
:wallet [{:name :token-overview
:insets {:top false}
: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}]})
:component token-overview/preview-token-overview}]})
(def screens (flatten (map val screens-categories)))