Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Jc/add channel list item #14040

Merged
merged 2 commits into from
Sep 23, 2022
Merged

Jc/add channel list item #14040

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0500b64
feat: add list item - channel component to quo2 library
J-Son89 Sep 19, 2022
e14659b
fix: adjust size and position of icon for lock in channel avatar
J-Son89 Sep 19, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
fix: adjust size and position of icon for lock in channel avatar
  • Loading branch information
@J-Son89
J-Son89 committed Sep 23, 2022
commit e14659bbd2b939eccf89b2eebad21b19f11d19fa
Binary file modified resources/images/icons/[email protected]
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified resources/images/icons/[email protected]
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added resources/images/icons/[email protected]
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added resources/images/icons/[email protected]
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
17 changes: 8 additions & 9 deletions src/quo2/components/avatars/channel_avatar.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand All @@ -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)
Expand All @@ -40,6 +39,6 @@
{:color (if dark?
colors/neutral-40
colors/neutral-50)
:container-style {:width 16
:height 16}
:container-style {:width 12
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this lock icon was not matching the Figma designs correctly so I adjusted for both sizes and it now seems correct.

:height 12}
:size 12}]])]]))
51 changes: 31 additions & 20 deletions src/quo2/components/list_items/channel.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,12 @@
[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]))

(defn list-item [{:keys [name lock-status mentions-count unread-messages? muted is-active-channel? emoji channel-color] :or {channel-color colors/primary-50}}]
[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
Expand All @@ -17,31 +19,40 @@
:width "100%"
:padding-left 12
:padding-right 12}
(when is-active-channel? {:background-color (colors/theme-alpha channel-color 0.05 0.05)}))}

(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
:lock-status lock-status
: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 (= lock-status :locked)) muted) {:color colors/neutral-40}))
:weight :medium :size :paragraph-1} (str "# " name)]]

[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 (= lock-status :locked)) muted) [quo2.icons/icon :main-icons2/muted {:size 20
:no-color true}])
(when (and (not (= lock-status :locked)) (not muted) (pos? (int mentions-count)))
(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}}

:margin-top 2}}
[quo2.counter/counter {:override-bg-color channel-color} mentions-count]])

(when (and (not (= lock-status :locked)) (not muted) (not (pos? (int mentions-count))) unread-messages?)

[quo2.icons/icon :main-icons2/channel-notification {:size 20
:no-color true}])]])
(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}])]])
17 changes: 9 additions & 8 deletions src/quo2/foundations/colors.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,14 +13,15 @@
(let [rgb (string/split value #",")]
(str (string/join "," (butlast rgb)) "," opacity ")")))))

(defn theme-alpha ([light-color light-opacity dark-color dark-opacity]
(if (theme/dark?)
(alpha light-color light-opacity)
(alpha dark-color dark-opacity)))
([color light-opacity dark-opacity]
(if (theme/dark?)
(alpha color light-opacity)
(alpha color dark-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
Expand Down
12 changes: 7 additions & 5 deletions src/quo2/screens/avatars/channel_avatar.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 []
Expand Down
26 changes: 15 additions & 11 deletions src/quo2/screens/list_items/channel.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@
[quo2.foundations.colors :as colors]
[quo2.components.list-items.channel :as quo2-channel]))

(def descriptor [{:label "Muted:"
:key :muted
(def descriptor [{:label "Muted?:"
:key :muted?
:type :boolean}
erikseppanen marked this conversation as resolved.
Show resolved Hide resolved
{:label "Name"
:key :name
Expand All @@ -20,16 +20,16 @@
{:label "Avatar emoji"
:key :emoji
:type :text}
{:label "Lock status"
:key :lock-status
{:label "is Locked?"
:key :locked?
:type :select
:options [{:key :none
:options [{:key nil
:value "None"}
{:key :unlocked
{:key false
:value "Unlocked"}
{:key :locked
{:key true
:value "Locked"}]}
{:label "Is Active Channel:"
{:label "Is Pressed Channel:"
:key :is-active-channel?
:type :boolean}
{:label "Channel color"
Expand All @@ -44,16 +44,20 @@

(defn cool-preview []
(let [state (reagent/atom {:is-active-channel? false
:muted false
:muted? false
:unread-messages? false
:emoji "🍑"
:channel-color "#4360DF"
:mentions-count "5"
:name "channel"
:lock-status :locked})]
:locked? true})]
(fn []
[rn/view {:margin-bottom 50
:padding 16}
:padding-bottom 16
:padding-right 8
:padding-left 8

:padding-top 16}
[preview/customizer state descriptor]
[rn/view {:padding-vertical 60
:align-items :center}
Expand Down
2 changes: 0 additions & 2 deletions src/quo2/screens/main.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -130,8 +130,6 @@
:wallet [{:name :token-overview
:insets {:top false}
:component token-overview/preview-token-overview}]})



(def screens (flatten (map val screens-categories)))

Expand Down