[#16481] Fix unread badge in group chats (#16610)

* Small refactor & add customization color to `info-count` component
* Fix notification mark in group chats for no mentions, also notification alignment styles in the component
* Code style: `change > 0` for `pos?`
This commit is contained in:
Ulises Manuel Cárdenas 2023-07-28 13:33:07 -06:00 committed by GitHub
parent c4b142ea68
commit 82645f5df4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 78 additions and 40 deletions

View File

@ -3,22 +3,27 @@
[quo2.foundations.typography :as typography]
[react-native.core :as rn]))
(defn info-count
([amount]
(info-count {} amount))
([props amount]
(when (> amount 0)
[rn/view
(merge props
{:style (merge {:width 16
(defn- counter-style
[customization-color overwritten-styles]
(merge {:width 16
:height 16
:position :absolute
:right 22
:border-radius 6
:justify-content :center
:align-items :center
:background-color (colors/theme-colors colors/primary-50 colors/primary-60)}
(:style props))})
:background-color (colors/custom-color-by-theme customization-color 50 60)}
overwritten-styles))
(defn info-count
([amount]
(info-count {} amount))
([{:keys [customization-color style]
:or {customization-color :blue}
:as props}
amount]
(when (pos? amount)
[rn/view (assoc props :style (counter-style customization-color style))
[rn/text
{:style (merge typography/font-medium
typography/label

View File

@ -21,15 +21,31 @@
:top 16
:background-color (colors/theme-colors colors/neutral-40 colors/neutral-60)})
(def muted-icon
{:position :absolute
:right 19
:top 16})
(defn timestamp
[muted?]
{:color (or (when muted?
colors/neutral-50)
{:color (if muted?
colors/neutral-50
(colors/theme-colors colors/neutral-50 colors/neutral-40))
:margin-top 3
:margin-left 8})
(def chat-data-container
{:flex 1
:margin-left 8
:margin-right 16})
(def notification-container
{:margin-left :auto
:height 20
:width 20
:justify-content :center
:align-items :center})
;; TODO: duplicate of `quo2.components.common.unread-grey-dot.style`
;; Replace it when this component is defined as part of `quo2.components`
(defn grey-dot
[]
{:width 8
:height 8
:border-radius 4
:background-color (colors/theme-colors colors/neutral-40 colors/neutral-60)})

View File

@ -208,16 +208,42 @@
{:color color
:size :medium}]))
(defn notification
[{:keys [muted group-chat unviewed-messages-count unviewed-mentions-count]}]
(let [customization-color (rf/sub [:profile/customization-color])
unread-messages? (pos? unviewed-messages-count)
unread-mentions? (pos? unviewed-mentions-count)]
[rn/view {:style style/notification-container}
(cond
muted
[icons/icon :i/muted {:color colors/neutral-40}]
(and group-chat unread-mentions?)
[quo/info-count
{:style {:position :relative :right 0}
:customization-color customization-color
:accessibility-label :new-message-counter}
unviewed-mentions-count]
;; TODO: use the grey-dot component when chat-list-item is moved to quo2.components
(and group-chat unread-messages?)
[rn/view {:style (style/grey-dot)}]
unread-messages?
[quo/info-count
{:style {:position :relative :right 0}
:customization-color customization-color
:accessibility-label :new-message-counter}
unviewed-messages-count])]))
(defn chat-list-item
[{:keys [chat-id group-chat color name unviewed-messages-count
timestamp last-message muted]
[{:keys [chat-id group-chat color name timestamp last-message muted]
:as item}]
(let [display-name (if group-chat
name
(first (rf/sub [:contacts/contact-two-names-by-identity chat-id])))
contact (when-not group-chat
(rf/sub [:contacts/contact-by-address chat-id]))
show-unread-badge? (and (not muted) (> unviewed-messages-count 0))]
(rf/sub [:contacts/contact-by-address chat-id]))]
[rn/touchable-opacity
{:style (style/container)
:on-press (open-chat chat-id)
@ -229,16 +255,7 @@
:full-name display-name
:color color
:muted? muted}]
[rn/view {:style {:margin-left 8}}
[rn/view {:style style/chat-data-container}
[name-view display-name contact timestamp muted]
[last-message-preview group-chat last-message muted]]
(if-not muted
(when show-unread-badge?
[quo/info-count
{:style {:top 16
:right 16}
:accessibility-label :new-message-counter}
unviewed-messages-count])
[icons/icon :i/muted
{:color colors/neutral-40
:container-style style/muted-icon}])]))
[notification item]]))