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

Use `customization-color` to inherit custom colour for notification dots / counter (#16947) 

* Inherit custom colour for unread notification dots

* Code style update; notification-dot as a separate component

* Code style update; notification-dot as a separate component

* Removed leftovers

* Updates

* Lint fix
This commit is contained in:
Alexander 2023-08-14 16:27:36 +02:00 committed by GitHub
parent 961150ac30
commit da22f4a809
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
25 changed files with 303 additions and 241 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/quo2/components/common/notification_dot/style.cljs Normal file
View File

@ -0,0 +1,22 @@
(ns quo2.components.common.notification-dot.style
(:require [quo2.foundations.colors :as colors]))
(def ^:const size 8)
(defn dot-background-color
[customization-color theme]
(if customization-color
(colors/theme-colors
(colors/custom-color customization-color 50)
(colors/custom-color customization-color 60)
theme)
(colors/theme-colors colors/primary-50 colors/primary-60 theme)))
(defn notification-dot
[customization-color theme]
{:background-color (dot-background-color customization-color theme)
:width size
:height size
:border-radius (/ size 2)
:position :absolute
:z-index 1})

14
src/quo2/components/common/notification_dot/view.cljs Normal file
View File

@ -0,0 +1,14 @@
(ns quo2.components.common.notification-dot.view
(:require [react-native.core :as rn]
[quo2.components.common.notification-dot.style :as style]
[quo2.theme :as quo.theme]))
(defn view-internal
[{:keys [customization-color style theme]}]
[rn/view
{:accessibility-label :notification-dot
:style (merge
(style/notification-dot customization-color theme)
style)}])
(def view (quo.theme/with-theme view-internal))

3
src/quo2/components/community/community_list_view.cljs
View File

@ -30,7 +30,8 @@
(pos? unread-mentions-count)
[counter/view
{:customization-color customization-color
:type :default} unread-mentions-count]
:type :default}
unread-mentions-count]
unread-messages?
[unread-grey-dot :unviewed-messages-public]))

5
src/quo2/components/notifications/activity_log/style.cljs
View File

@ -46,8 +46,9 @@
:margin-left 8
:color colors/neutral-40})
(def unread-dot
{:background-color colors/primary-50
(defn unread-dot
[customization-color]
{:background-color (colors/custom-color (or customization-color :blue) 60)
:border-radius 4
:width 8
:height 8})

9
src/quo2/components/notifications/activity_log/view.cljs
View File

@ -110,11 +110,11 @@
timestamp])
(defn- activity-unread-dot
[]
[customization-color]
[rn/view
{:accessibility-label :activity-unread-indicator
:style style/unread-dot-container}
[rn/view {:style style/unread-dot}]])
[rn/view {:style (style/unread-dot customization-color)}]])
(defmulti footer-item-view (fn [item _ _] (:type item)))
@ -161,7 +161,8 @@
timestamp
title
replying?
unread?]
unread?
customization-color]
:as props}]
[rn/view
{:accessibility-label :activity
@ -179,7 +180,7 @@
(when-not replying?
[activity-timestamp timestamp])]
(when (and unread? (not replying?))
[activity-unread-dot])]
[activity-unread-dot customization-color])]
(when context
[activity-context context replying?])]
(when message

18
src/quo2/components/notifications/notification_dot.cljs
View File

@ -1,18 +0,0 @@
(ns quo2.components.notifications.notification-dot
(:require [quo2.foundations.colors :as colors]
[react-native.core :as rn]))
(def ^:const size 8)
(defn notification-dot
[{:keys [style]}]
[rn/view
{:accessibility-label :notification-dot
:style (merge
{:background-color (colors/theme-colors colors/primary-50 colors/primary-60)
:width size
:height size
:border-radius (/ size 2)
:position :absolute
:z-index 1}
style)}])

10
src/quo2/components/selectors/filter/style.cljs
View File

@ -35,14 +35,16 @@
nil)))
(defn container-background-color
[pressed? theme]
[customization-color pressed? theme]
(when pressed?
(colors/theme-colors colors/primary-50 colors/primary-60 theme)))
(if customization-color
(colors/custom-color-by-theme customization-color 50 60)
(colors/theme-colors colors/primary-50 colors/primary-60 theme))))
(defn container-outer
[pressed? theme]
[customization-color pressed? theme]
(merge container-default
{:background-color (container-background-color pressed? theme)}))
{:background-color (container-background-color customization-color pressed? theme)}))
(defn container-inner
[pressed? blur? theme]

4
src/quo2/components/selectors/filter/view.cljs
View File

@ -8,14 +8,14 @@
(defn view-internal
[initial-props]
(let [pressed? (reagent/atom (:pressed? initial-props))]
(fn [{:keys [blur? theme on-press-out]}]
(fn [{:keys [blur? customization-color theme on-press-out]}]
[rn/touchable-without-feedback
{:accessibility-label :selector-filter
:on-press-out (fn []
(swap! pressed? not)
(when on-press-out
(on-press-out @pressed?)))}
[rn/view {:style (style/container-outer @pressed? theme)}
[rn/view {:style (style/container-outer customization-color @pressed? theme)}
[rn/view {:style (style/container-inner @pressed? blur? theme)}
[icon/icon :i/unread
{:color (style/icon-color @pressed? theme)

10
src/quo2/components/tabs/tab/view.cljs
View File

@ -1,7 +1,7 @@
(ns quo2.components.tabs.tab.view
(:require [quo2.components.icon :as icons]
[quo2.components.markdown.text :as text]
[quo2.components.notifications.notification-dot :as notification-dot]
[quo2.components.common.notification-dot.view :as notification-dot]
[quo2.components.tabs.tab.style :as style]
[quo2.theme :as theme]
[react-native.core :as rn]
@ -60,7 +60,8 @@
theme
segmented?
size
notification-dot?]
notification-dot?
customization-color]
:or {size 32}}
children]
(let [show-notification-dot? (and notification-dot? (= size 32))
@ -78,8 +79,9 @@
(on-press id))}))
[rn/view {:style style/container}
(when show-notification-dot?
[notification-dot/notification-dot
{:style style/notification-dot}])
[notification-dot/view
{:style style/notification-dot
:customization-color customization-color}])
[rn/view
{:style (merge
(style/tab

35
src/quo2/components/tabs/tabs/view.cljs
View File

@ -62,6 +62,7 @@
(defn- render-tab
[{:keys [active-tab-id
blur?
customization-color
flat-list-ref
number-of-items
on-change
@ -79,6 +80,7 @@
[tab/view
{:id id
:notification-dot? notification-dot?
:customization-color customization-color
:accessibility-label accessibility-label
:size size
:blur? blur?
@ -131,7 +133,8 @@
style
size
blur?
in-scroll-view?]
in-scroll-view?
customization-color]
:or {fade-end-percentage fade-end-percentage
fade-end? false
scrollable? false
@ -176,24 +179,26 @@
:fading fading
:on-scroll on-scroll})
:render-fn (partial render-tab
{:active-tab-id active-tab-id
:blur? blur?
:flat-list-ref flat-list-ref
:number-of-items (count data)
:on-change on-change
:scroll-on-press? scroll-on-press?
:size size
:style style})})]]]
{:active-tab-id active-tab-id
:blur? blur?
:customization-color customization-color
:flat-list-ref flat-list-ref
:number-of-items (count data)
:on-change on-change
:scroll-on-press? scroll-on-press?
:size size
:style style})})]]]
[rn/view (merge style {:flex-direction :row})
(map-indexed (fn [index item]
^{:key (:id item)}
[render-tab
{:active-tab-id active-tab-id
:blur? blur?
:number-of-items (count data)
:on-change on-change
:size size
:style style}
{:active-tab-id active-tab-id
:blur? blur?
:customization-color customization-color
:number-of-items (count data)
:on-change on-change
:size size
:style style}
item
index])
data)]))))

4
src/quo2/core.cljs
View File

@ -19,6 +19,7 @@
quo2.components.calendar.calendar-year.view
quo2.components.code.snippet
quo2.components.colors.color-picker.view
quo2.components.common.notification-dot.view
quo2.components.common.separator.view
quo2.components.community.banner.view
quo2.components.community.channel-actions
@ -74,7 +75,6 @@
quo2.components.notifications.activity-log.view
quo2.components.notifications.activity-logs-photos.view
quo2.components.notifications.count-down-circle
quo2.components.notifications.notification-dot
quo2.components.notifications.notification.view
quo2.components.notifications.toast.view
quo2.components.numbered-keyboard.keyboard-key.view
@ -252,7 +252,7 @@
;;;; Notifications
(def activity-log quo2.components.notifications.activity-log.view/view)
(def activity-logs-photos quo2.components.notifications.activity-logs-photos.view/view)
(def notification-dot quo2.components.notifications.notification-dot/notification-dot)
(def notification-dot quo2.components.common.notification-dot.view/view)
(def count-down-circle quo2.components.notifications.count-down-circle/circle-timer)
(def notification quo2.components.notifications.notification.view/notification)
(def toast quo2.components.notifications.toast.view/toast)

28
src/status_im2/common/home/banner/view.cljs
View File

@ -46,23 +46,24 @@
[quo/discover-card card-props]]]]))
(defn- banner-card-tabs-layer
[{:keys [selected-tab tabs on-tab-change scroll-ref scroll-shared-value]}]
[{:keys [selected-tab tabs on-tab-change scroll-ref scroll-shared-value customization-color]}]
[reanimated/view {:style (style/banner-card-tabs-layer scroll-shared-value)}
^{:key (str "tabs-" selected-tab)}
[quo/tabs
{:style style/banner-card-tabs
:size 32
:default-active selected-tab
:data tabs
:on-change (fn [tab]
(reset-banner-animation scroll-shared-value)
(some-> scroll-ref
deref
reset-scroll)
(on-tab-change tab))}]])
{:style style/banner-card-tabs
:customization-color customization-color
:size 32
:default-active selected-tab
:data tabs
:on-change (fn [tab]
(reset-banner-animation scroll-shared-value)
(some-> scroll-ref
deref
reset-scroll)
(on-tab-change tab))}]])
(defn animated-banner
[{:keys [scroll-ref tabs selected-tab on-tab-change scroll-shared-value content]}]
[{:keys [scroll-ref tabs selected-tab on-tab-change scroll-shared-value content customization-color]}]
[:<>
[:f> banner-card-blur-layer scroll-shared-value]
[:f> banner-card-hiding-layer (assoc content :scroll-shared-value scroll-shared-value)]
@ -71,7 +72,8 @@
:selected-tab selected-tab
:tabs tabs
:on-tab-change on-tab-change
:scroll-ref scroll-ref}]])
:scroll-ref scroll-ref
:customization-color customization-color}]])
(defn set-scroll-shared-value
[{:keys [shared-value scroll-input]}]

24
src/status_im2/contexts/chat/home/view.cljs
View File

@ -106,15 +106,6 @@
{:scroll-input (oops/oget % "nativeEvent.contentOffset.y")
:shared-value scroll-shared-value})}])))
(defn get-tabs-data
[dot?]
[{:id :tab/recent :label (i18n/label :t/recent) :accessibility-label :tab-recent}
{:id :tab/groups :label (i18n/label :t/groups) :accessibility-label :tab-groups}
{:id :tab/contacts
:label (i18n/label :t/contacts)
:accessibility-label :tab-contacts
:notification-dot? dot?}])
(def ^:private banner-data
{:title-props
{:label (i18n/label :t/messages)
@ -131,7 +122,8 @@
(let [scroll-ref (atom nil)
set-scroll-ref #(reset! scroll-ref %)]
(fn []
(let [pending-contact-requests (rf/sub [:activity-center/pending-contact-requests])
(let [customization-color (rf/sub [:profile/customization-color])
pending-contact-requests (rf/sub [:activity-center/pending-contact-requests])
selected-tab (or (rf/sub [:messages-home/selected-tab]) :tab/recent)
scroll-shared-value (reanimated/use-shared-value 0)]
[:<>
@ -146,8 +138,18 @@
:scroll-shared-value scroll-shared-value}])
[:f> common.home.banner/animated-banner
{:content banner-data
:customization-color customization-color
:scroll-ref scroll-ref
:tabs (get-tabs-data (pos? (count pending-contact-requests)))
:tabs [{:id :tab/recent
:label (i18n/label :t/recent)
:accessibility-label :tab-recent}
{:id :tab/groups
:label (i18n/label :t/groups)
:accessibility-label :tab-groups}
{:id :tab/contacts
:label (i18n/label :t/contacts)
:accessibility-label :tab-contacts
:notification-dot? (pos? (count pending-contact-requests))}]
:selected-tab selected-tab
:on-tab-change (fn [tab] (rf/dispatch [:messages-home/select-tab tab]))
:scroll-shared-value scroll-shared-value}]]))))

4
src/status_im2/contexts/communities/home/view.cljs
View File

@ -75,7 +75,8 @@
(let [flat-list-ref (atom nil)
set-flat-list-ref #(reset! flat-list-ref %)]
(fn []
(let [selected-tab (or (rf/sub [:communities/selected-tab]) :joined)
(let [customization-color (rf/sub [:profile/customization-color])
selected-tab (or (rf/sub [:communities/selected-tab]) :joined)
{:keys [joined pending opened]} (rf/sub [:communities/grouped-by-status])
selected-items (case selected-tab
:joined joined
@ -102,6 +103,7 @@
:shared-value scroll-shared-value})}])
[:f> common.home.banner/animated-banner
{:content banner-data
:customization-color customization-color
:scroll-ref flat-list-ref
:tabs tabs-data
:selected-tab selected-tab

16
src/status_im2/contexts/shell/activity_center/header/view.cljs
View File

@ -9,14 +9,16 @@
(defn filter-selector-read-toggle
[]
(let [unread-filter-enabled? (rf/sub [:activity-center/filter-status-unread-enabled?])]
(let [customization-color (rf/sub [:profile/customization-color])
unread-filter-enabled? (rf/sub [:activity-center/filter-status-unread-enabled?])]
[quo/filter
{:pressed? unread-filter-enabled?
:blur? true
:on-press-out #(rf/dispatch [:activity-center.notifications/fetch-first-page
{:filter-status (if unread-filter-enabled?
:all
:unread)}])}]))
{:pressed? unread-filter-enabled?
:customization-color customization-color
:blur? true
:on-press-out #(rf/dispatch [:activity-center.notifications/fetch-first-page
{:filter-status (if unread-filter-enabled?
:all
:unread)}])}]))
(defn header
[]

88
src/status_im2/contexts/shell/activity_center/notification/admin/view.cljs
View File

@ -52,7 +52,7 @@
child)))
(defn view
[{:keys [notification set-swipeable-height] :as props}]
[{:keys [notification set-swipeable-height customization-color] :as props}]
(let [{:keys [author community-id id membership-status
read timestamp]} notification
community (rf/sub [:communities/community community-id])
@ -60,48 +60,50 @@
community-image (get-in community [:images :thumbnail :uri])]
[swipeable props
[quo/activity-log
{:title (i18n/label :t/join-request)
:icon :i/add-user
:timestamp (datetime/timestamp->relative timestamp)
:unread? (not read)
:on-layout set-swipeable-height
:context [[common/user-avatar-tag author]
(i18n/label :t/wants-to-join)
[quo/context-tag
common/tag-params
community-image community-name]]
:items (case membership-status
constants/activity-center-membership-status-accepted
[{:type :status
:subtype :positive
:key :status-accepted
:blur? true
:label (i18n/label :t/accepted)}]
{:title (i18n/label :t/join-request)
:customization-color customization-color
:icon :i/add-user
:timestamp (datetime/timestamp->relative timestamp)
:unread? (not read)
:on-layout set-swipeable-height
:context [[common/user-avatar-tag author]
(i18n/label :t/wants-to-join)
[quo/context-tag
common/tag-params
community-image community-name]]
:items (case membership-status
constants/activity-center-membership-status-accepted
[{:type :status
:subtype :positive
:key :status-accepted
:blur? true
:label (i18n/label :t/accepted)}]
constants/activity-center-membership-status-declined
[{:type :status
:subtype :negative
:key :status-declined
:blur? true
:label (i18n/label :t/declined)}]
constants/activity-center-membership-status-declined
[{:type :status
:subtype :negative
:key :status-declined
:blur? true
:label (i18n/label :t/declined)}]
constants/activity-center-membership-status-pending
[{:type :button
:subtype :danger
:key :button-decline
:label (i18n/label :t/decline)
:accessibility-label :decline-join-request
:on-press (fn []
(rf/dispatch
[:communities.ui/decline-request-to-join-pressed
community-id id]))}
{:type :button
:subtype :positive
:key :button-accept
:label (i18n/label :t/accept)
:accessibility-label :accept-join-request
:on-press (fn []
(rf/dispatch [:communities.ui/accept-request-to-join-pressed
community-id id]))}]
constants/activity-center-membership-status-pending
[{:type :button
:subtype :danger
:key :button-decline
:label (i18n/label :t/decline)
:accessibility-label :decline-join-request
:on-press (fn []
(rf/dispatch
[:communities.ui/decline-request-to-join-pressed
community-id id]))}
{:type :button
:subtype :positive
:key :button-accept
:label (i18n/label :t/accept)
:accessibility-label :accept-join-request
:on-press (fn []
(rf/dispatch
[:communities.ui/accept-request-to-join-pressed
community-id id]))}]
nil)}]]))
nil)}]]))

21
src/status_im2/contexts/shell/activity_center/notification/community_kicked/view.cljs
View File

@ -18,7 +18,7 @@
child])
(defn view
[{:keys [notification set-swipeable-height] :as props}]
[{:keys [notification set-swipeable-height customization-color] :as props}]
(let [{:keys [community-id read
timestamp]} notification
community (rf/sub [:communities/community community-id])
@ -26,12 +26,13 @@
community-image (get-in community [:images :thumbnail :uri])]
[swipeable props
[quo/activity-log
{:title (i18n/label :t/community-kicked-heading)
:icon :i/placeholder
:on-layout set-swipeable-height
:timestamp (datetime/timestamp->relative timestamp)
:unread? (not read)
:context [[quo/text {:style common-style/user-avatar-tag-text}
(i18n/label :t/community-kicked-body)]
[quo/context-tag common/tag-params community-image
community-name]]}]]))
{:title (i18n/label :t/community-kicked-heading)
:customization-color customization-color
:icon :i/placeholder
:on-layout set-swipeable-height
:timestamp (datetime/timestamp->relative timestamp)
:unread? (not read)
:context [[quo/text {:style common-style/user-avatar-tag-text}
(i18n/label :t/community-kicked-body)]
[quo/context-tag common/tag-params community-image
community-name]]}]]))

15
src/status_im2/contexts/shell/activity_center/notification/community_request/view.cljs
View File

@ -48,7 +48,7 @@
:else nil)))
(defn view
[{:keys [notification set-swipeable-height] :as props}]
[{:keys [notification set-swipeable-height customization-color] :as props}]
(let [{:keys [community-id membership-status read
timestamp]} notification
community (rf/sub [:communities/community community-id])
@ -56,9 +56,10 @@
membership-status)]
[swipeable props
[quo/activity-log
{:title header-text
:icon :i/communities
:on-layout set-swipeable-height
:timestamp (datetime/timestamp->relative timestamp)
:unread? (not read)
:context context}]]))
{:title header-text
:customization-color customization-color
:icon :i/communities
:on-layout set-swipeable-height
:timestamp (datetime/timestamp->relative timestamp)
:unread? (not read)
:context context}]]))

65
src/status_im2/contexts/shell/activity_center/notification/contact_requests/view.cljs
View File

@ -58,52 +58,55 @@
child)))
(defn- outgoing-contact-request-view
[{:keys [notification set-swipeable-height]}]
[{:keys [notification set-swipeable-height customization-color]}]
(let [{:keys [chat-id message last-message]} notification
{:keys [contact-request-state] :as message} (or message last-message)]
(if (= contact-request-state constants/contact-request-message-state-accepted)
[quo/activity-log
{:title (i18n/label :t/contact-request-was-accepted)
:on-layout set-swipeable-height
:icon :i/add-user
:timestamp (datetime/timestamp->relative (:timestamp notification))
:unread? (not (:read notification))
:context [[common/user-avatar-tag chat-id]
(i18n/label :t/contact-request-is-now-a-contact)]}
{:title (i18n/label :t/contact-request-was-accepted)
:customization-color customization-color
:on-layout set-swipeable-height
:icon :i/add-user
:timestamp (datetime/timestamp->relative (:timestamp notification))
:unread? (not (:read notification))
:context [[common/user-avatar-tag chat-id]
(i18n/label :t/contact-request-is-now-a-contact)]}
:message {:body (get-in message [:content :text])}
:items []]
[quo/activity-log
{:title (i18n/label :t/contact-request)
:on-layout set-swipeable-height
:icon :i/add-user
:timestamp (datetime/timestamp->relative (:timestamp notification))
:unread? (not (:read notification))
:context [(i18n/label :t/contact-request-outgoing)
[common/user-avatar-tag chat-id]]
:message {:body (get-in message [:content :text])}
:items (case contact-request-state
constants/contact-request-message-state-pending
[{:type :status
:subtype :pending
:key :status-pending
:blur? true
:label (i18n/label :t/pending)}]
{:title (i18n/label :t/contact-request)
:customization-color customization-color
:on-layout set-swipeable-height
:icon :i/add-user
:timestamp (datetime/timestamp->relative (:timestamp notification))
:unread? (not (:read notification))
:context [(i18n/label :t/contact-request-outgoing)
[common/user-avatar-tag chat-id]]
:message {:body (get-in message [:content :text])}
:items (case contact-request-state
constants/contact-request-message-state-pending
[{:type :status
:subtype :pending
:key :status-pending
:blur? true
:label (i18n/label :t/pending)}]
constants/contact-request-message-state-declined
[{:type :status
:subtype :pending
:key :status-pending
:blur? true
:label (i18n/label :t/pending)}]
constants/contact-request-message-state-declined
[{:type :status
:subtype :pending
:key :status-pending
:blur? true
:label (i18n/label :t/pending)}]
nil)}])))
nil)}])))
(defn- incoming-contact-request-view
[{:keys [notification set-swipeable-height]}]
[{:keys [notification set-swipeable-height customization-color]}]
(let [{:keys [id author message last-message]} notification
message (or message last-message)]
[quo/activity-log
{:title (i18n/label :t/contact-request)
:customization-color customization-color
:on-layout set-swipeable-height
:icon :i/add-user
:timestamp (datetime/timestamp->relative (:timestamp notification))

3
src/status_im2/contexts/shell/activity_center/notification/contact_verification/view.cljs
View File

@ -153,7 +153,7 @@
(defn view
[_]
(let [reply (atom "")]
(fn [{:keys [notification set-swipeable-height replying?] :as props}]
(fn [{:keys [notification set-swipeable-height replying? customization-color] :as props}]
(let [{:keys [id message
contact-verification-status]} notification
challenger? (:outgoing message)]
@ -169,6 +169,7 @@
(when-not replying?
{:on-layout set-swipeable-height})
{:title (i18n/label :t/identity-verification-request)
:customization-color customization-color
:icon :i/friend
:timestamp (datetime/timestamp->relative (:timestamp notification))
:unread? (not (:read notification))

53
src/status_im2/contexts/shell/activity_center/notification/membership/view.cljs
View File

@ -53,32 +53,35 @@
child])))
(defn view
[{:keys [notification set-swipeable-height] :as props}]
[{:keys [notification set-swipeable-height customization-color] :as props}]
(let [{:keys [id accepted dismissed author read timestamp chat-name chat-id]} notification]
[swipeable props
[pressable {:accepted accepted :chat-id chat-id}
[quo/activity-log
{:title (i18n/label :t/added-to-group-chat)
:on-layout set-swipeable-height
:icon :i/add-user
:timestamp (datetime/timestamp->relative timestamp)
:unread? (not read)
:context [[common/user-avatar-tag author]
(i18n/label :t/added-you-to)
[quo/group-avatar-tag chat-name
{:size :small
:color :purple}]]
:items (when-not (or accepted dismissed)
[{:type :button
:subtype :positive
:key :button-accept
:label (i18n/label :t/accept)
:accessibility-label :accept-group-chat-invitation
:on-press #(rf/dispatch [:activity-center.notifications/accept id])}
{:type :button
:subtype :danger
:key :button-decline
:label (i18n/label :t/decline)
:accessibility-label :decline-group-chat-invitation
:on-press #(rf/dispatch [:activity-center.notifications/dismiss
id])}])}]]]))
{:title (i18n/label :t/added-to-group-chat)
:customization-color customization-color
:on-layout set-swipeable-height
:icon :i/add-user
:timestamp (datetime/timestamp->relative timestamp)
:unread? (not read)
:context [[common/user-avatar-tag author]
(i18n/label :t/added-you-to)
[quo/group-avatar-tag chat-name
{:size :small
:color :purple}]]
:items (when-not (or accepted dismissed)
[{:type :button
:subtype :positive
:key :button-accept
:label (i18n/label :t/accept)
:accessibility-label :accept-group-chat-invitation
:on-press #(rf/dispatch
[:activity-center.notifications/accept id])}
{:type :button
:subtype :danger
:key :button-decline
:label (i18n/label :t/decline)
:accessibility-label :decline-group-chat-invitation
:on-press #(rf/dispatch
[:activity-center.notifications/dismiss
id])}])}]]]))

26
src/status_im2/contexts/shell/activity_center/notification/mentions/view.cljs
View File

@ -39,7 +39,7 @@
child])
(defn view
[{:keys [notification set-swipeable-height] :as props}]
[{:keys [notification set-swipeable-height customization-color] :as props}]
(let [{:keys [author chat-name community-id chat-id
message read timestamp]} notification
community-chat? (not (string/blank? community-id))
@ -52,14 +52,16 @@
(rf/dispatch [:hide-popover])
(rf/dispatch [:chat/navigate-to-chat chat-id]))}
[quo/activity-log
{:title (i18n/label :t/mention)
:on-layout set-swipeable-height
:icon :i/mention
:timestamp (datetime/timestamp->relative timestamp)
:unread? (not read)
:context [[common/user-avatar-tag author]
[quo/text {:style style/tag-text} (string/lower-case (i18n/label :t/on))]
(if community-chat?
[quo/context-tag common/tag-params community-image community-name chat-name]
[quo/group-avatar-tag chat-name common/tag-params])]
:message {:body (message-body message)}}]]]))
{:title (i18n/label :t/mention)
:customization-color customization-color
:on-layout set-swipeable-height
:icon :i/mention
:timestamp (datetime/timestamp->relative timestamp)
:unread? (not read)
:context [[common/user-avatar-tag author]
[quo/text {:style style/tag-text} (string/lower-case (i18n/label :t/on))]
(if community-chat?
[quo/context-tag common/tag-params community-image community-name
chat-name]
[quo/group-avatar-tag chat-name common/tag-params])]
:message {:body (message-body message)}}]]]))

54
src/status_im2/contexts/shell/activity_center/notification/reply/view.cljs
View File

@ -52,7 +52,7 @@
child])
(defn view
[{:keys [notification set-swipeable-height] :as props}]
[{:keys [notification set-swipeable-height customization-color] :as props}]
(let [{:keys [author chat-name community-id chat-id
message read timestamp]} notification
community-chat? (not (string/blank? community-id))
@ -65,30 +65,36 @@
(rf/dispatch [:hide-popover])
(rf/dispatch [:chat/navigate-to-chat chat-id]))}
[quo/activity-log
{:title (i18n/label :t/message-reply)
:on-layout set-swipeable-height
:icon :i/reply
:timestamp (datetime/timestamp->relative timestamp)
:unread? (not read)
:context [[common/user-avatar-tag author]
[quo/text {:style style/lowercase-text} (i18n/label :t/on)]
(if community-chat?
[quo/context-tag common/tag-params community-image community-name chat-name]
[quo/group-avatar-tag chat-name common/tag-params])]
:message {:body-number-of-lines 1
:attachment (cond
(= (:content-type message) constants/content-type-text)
:text
{:title (i18n/label :t/message-reply)
:customization-color customization-color
:on-layout set-swipeable-height
:icon :i/reply
:timestamp (datetime/timestamp->relative timestamp)
:unread? (not read)
:context [[common/user-avatar-tag author]
[quo/text {:style style/lowercase-text} (i18n/label :t/on)]
(if community-chat?
[quo/context-tag common/tag-params community-image community-name
chat-name]
[quo/group-avatar-tag chat-name common/tag-params])]
:message {:body-number-of-lines 1
:attachment (cond
(= (:content-type message)
constants/content-type-text)
:text
(= (:content-type message) constants/content-type-image)
:photo
(= (:content-type message)
constants/content-type-image)
:photo
(= (:content-type message) constants/content-type-sticker)
:sticker
(= (:content-type message)
constants/content-type-sticker)
:sticker
(= (:content-type message) constants/content-type-gif)
:gif
(= (:content-type message)
constants/content-type-gif)
:gif
:else
nil)
:body (get-message-content message)}}]]]))
:else
nil)
:body (get-message-content message)}}]]]))

4
src/status_im2/contexts/shell/activity_center/tabs/view.cljs
View File

@ -8,13 +8,15 @@
(defn tabs
[]
(let [filter-type (rf/sub [:activity-center/filter-type])
(let [customization-color (rf/sub [:profile/customization-color])
filter-type (rf/sub [:activity-center/filter-type])
types-with-unread (rf/sub [:activity-center/notification-types-with-unread])
is-mark-all-as-read-undoable? (boolean (rf/sub
[:activity-center/mark-all-as-read-undoable-till]))]
[quo/tabs
{:size 32
:scrollable? true
:customization-color customization-color
:blur? true
:style style/tabs
:fade-end-percentage 0.79

9
src/status_im2/contexts/shell/activity_center/view.cljs
View File

@ -25,8 +25,9 @@
[]
(let [height (atom 0)
set-swipeable-height #(reset! height (oops/oget % "nativeEvent.layout.height"))]
(fn [{:keys [type] :as notification} index _ active-swipeable]
(fn [{:keys [type] :as notification} index _ {:keys [active-swipeable customization-color]}]
(let [props {:height height
:customization-color customization-color
:active-swipeable active-swipeable
:set-swipeable-height set-swipeable-height
:notification notification
@ -66,13 +67,15 @@
(let [active-swipeable (atom nil)]
(rf/dispatch [:activity-center.notifications/fetch-first-page])
(fn []
(let [notifications (rf/sub [:activity-center/notifications])]
(let [notifications (rf/sub [:activity-center/notifications])
customization-color (rf/sub [:profile/customization-color])]
[rn/view {:flex 1 :padding-top (navigation/status-bar-height)}
[blur/view style/blur]
[header/header]
[rn/flat-list
{:data notifications
:render-data active-swipeable
:render-data {:active-swipeable active-swipeable
:customization-color customization-color}
:content-container-style {:flex-grow 1}
:empty-component [empty-tab/empty-tab]
:key-fn :id