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) (pos? unread-mentions-count)
[counter/view [counter/view
{:customization-color customization-color {:customization-color customization-color
:type :default} unread-mentions-count] :type :default}
unread-mentions-count]
unread-messages? unread-messages?
[unread-grey-dot :unviewed-messages-public])) [unread-grey-dot :unviewed-messages-public]))

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

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

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

@ -110,11 +110,11 @@
timestamp]) timestamp])
(defn- activity-unread-dot (defn- activity-unread-dot
[] [customization-color]
[rn/view [rn/view
{:accessibility-label :activity-unread-indicator {:accessibility-label :activity-unread-indicator
:style style/unread-dot-container} :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))) (defmulti footer-item-view (fn [item _ _] (:type item)))
@ -161,7 +161,8 @@
timestamp timestamp
title title
replying? replying?
unread?] unread?
customization-color]
:as props}] :as props}]
[rn/view [rn/view
{:accessibility-label :activity {:accessibility-label :activity
@ -179,7 +180,7 @@
(when-not replying? (when-not replying?
[activity-timestamp timestamp])] [activity-timestamp timestamp])]
(when (and unread? (not replying?)) (when (and unread? (not replying?))
[activity-unread-dot])] [activity-unread-dot customization-color])]
(when context (when context
[activity-context context replying?])] [activity-context context replying?])]
(when message (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))) nil)))
(defn container-background-color (defn container-background-color
[pressed? theme] [customization-color pressed? theme]
(when pressed? (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 (defn container-outer
[pressed? theme] [customization-color pressed? theme]
(merge container-default (merge container-default
{:background-color (container-background-color pressed? theme)})) {:background-color (container-background-color customization-color pressed? theme)}))
(defn container-inner (defn container-inner
[pressed? blur? theme] [pressed? blur? theme]

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

@ -8,14 +8,14 @@
(defn view-internal (defn view-internal
[initial-props] [initial-props]
(let [pressed? (reagent/atom (:pressed? 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 [rn/touchable-without-feedback
{:accessibility-label :selector-filter {:accessibility-label :selector-filter
:on-press-out (fn [] :on-press-out (fn []
(swap! pressed? not) (swap! pressed? not)
(when on-press-out (when on-press-out
(on-press-out @pressed?)))} (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)} [rn/view {:style (style/container-inner @pressed? blur? theme)}
[icon/icon :i/unread [icon/icon :i/unread
{:color (style/icon-color @pressed? theme) {: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 (ns quo2.components.tabs.tab.view
(:require [quo2.components.icon :as icons] (:require [quo2.components.icon :as icons]
[quo2.components.markdown.text :as text] [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.components.tabs.tab.style :as style]
[quo2.theme :as theme] [quo2.theme :as theme]
[react-native.core :as rn] [react-native.core :as rn]
@ -60,7 +60,8 @@
theme theme
segmented? segmented?
size size
notification-dot?] notification-dot?
customization-color]
:or {size 32}} :or {size 32}}
children] children]
(let [show-notification-dot? (and notification-dot? (= size 32)) (let [show-notification-dot? (and notification-dot? (= size 32))
@ -78,8 +79,9 @@
(on-press id))})) (on-press id))}))
[rn/view {:style style/container} [rn/view {:style style/container}
(when show-notification-dot? (when show-notification-dot?
[notification-dot/notification-dot [notification-dot/view
{:style style/notification-dot}]) {:style style/notification-dot
:customization-color customization-color}])
[rn/view [rn/view
{:style (merge {:style (merge
(style/tab (style/tab

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

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

4
src/quo2/core.cljs
View File

@ -19,6 +19,7 @@
quo2.components.calendar.calendar-year.view quo2.components.calendar.calendar-year.view
quo2.components.code.snippet quo2.components.code.snippet
quo2.components.colors.color-picker.view quo2.components.colors.color-picker.view
quo2.components.common.notification-dot.view
quo2.components.common.separator.view quo2.components.common.separator.view
quo2.components.community.banner.view quo2.components.community.banner.view
quo2.components.community.channel-actions quo2.components.community.channel-actions
@ -74,7 +75,6 @@
quo2.components.notifications.activity-log.view quo2.components.notifications.activity-log.view
quo2.components.notifications.activity-logs-photos.view quo2.components.notifications.activity-logs-photos.view
quo2.components.notifications.count-down-circle quo2.components.notifications.count-down-circle
quo2.components.notifications.notification-dot
quo2.components.notifications.notification.view quo2.components.notifications.notification.view
quo2.components.notifications.toast.view quo2.components.notifications.toast.view
quo2.components.numbered-keyboard.keyboard-key.view quo2.components.numbered-keyboard.keyboard-key.view
@ -252,7 +252,7 @@
;;;; Notifications ;;;; Notifications
(def activity-log quo2.components.notifications.activity-log.view/view) (def activity-log quo2.components.notifications.activity-log.view/view)
(def activity-logs-photos quo2.components.notifications.activity-logs-photos.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 count-down-circle quo2.components.notifications.count-down-circle/circle-timer)
(def notification quo2.components.notifications.notification.view/notification) (def notification quo2.components.notifications.notification.view/notification)
(def toast quo2.components.notifications.toast.view/toast) (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]]]])) [quo/discover-card card-props]]]]))
(defn- banner-card-tabs-layer (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)} [reanimated/view {:style (style/banner-card-tabs-layer scroll-shared-value)}
^{:key (str "tabs-" selected-tab)} ^{:key (str "tabs-" selected-tab)}
[quo/tabs [quo/tabs
{:style style/banner-card-tabs {:style style/banner-card-tabs
:size 32 :customization-color customization-color
:default-active selected-tab :size 32
:data tabs :default-active selected-tab
:on-change (fn [tab] :data tabs
(reset-banner-animation scroll-shared-value) :on-change (fn [tab]
(some-> scroll-ref (reset-banner-animation scroll-shared-value)
deref (some-> scroll-ref
reset-scroll) deref
(on-tab-change tab))}]]) reset-scroll)
(on-tab-change tab))}]])
(defn animated-banner (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-blur-layer scroll-shared-value]
[:f> banner-card-hiding-layer (assoc content :scroll-shared-value scroll-shared-value)] [:f> banner-card-hiding-layer (assoc content :scroll-shared-value scroll-shared-value)]
@ -71,7 +72,8 @@
:selected-tab selected-tab :selected-tab selected-tab
:tabs tabs :tabs tabs
:on-tab-change on-tab-change :on-tab-change on-tab-change
:scroll-ref scroll-ref}]]) :scroll-ref scroll-ref
:customization-color customization-color}]])
(defn set-scroll-shared-value (defn set-scroll-shared-value
[{:keys [shared-value scroll-input]}] [{: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") {:scroll-input (oops/oget % "nativeEvent.contentOffset.y")
:shared-value scroll-shared-value})}]))) :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 (def ^:private banner-data
{:title-props {:title-props
{:label (i18n/label :t/messages) {:label (i18n/label :t/messages)
@ -131,7 +122,8 @@
(let [scroll-ref (atom nil) (let [scroll-ref (atom nil)
set-scroll-ref #(reset! scroll-ref %)] set-scroll-ref #(reset! scroll-ref %)]
(fn [] (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) selected-tab (or (rf/sub [:messages-home/selected-tab]) :tab/recent)
scroll-shared-value (reanimated/use-shared-value 0)] scroll-shared-value (reanimated/use-shared-value 0)]
[:<> [:<>
@ -146,8 +138,18 @@
:scroll-shared-value scroll-shared-value}]) :scroll-shared-value scroll-shared-value}])
[:f> common.home.banner/animated-banner [:f> common.home.banner/animated-banner
{:content banner-data {:content banner-data
:customization-color customization-color
:scroll-ref scroll-ref :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 :selected-tab selected-tab
:on-tab-change (fn [tab] (rf/dispatch [:messages-home/select-tab tab])) :on-tab-change (fn [tab] (rf/dispatch [:messages-home/select-tab tab]))
:scroll-shared-value scroll-shared-value}]])))) :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) (let [flat-list-ref (atom nil)
set-flat-list-ref #(reset! flat-list-ref %)] set-flat-list-ref #(reset! flat-list-ref %)]
(fn [] (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]) {:keys [joined pending opened]} (rf/sub [:communities/grouped-by-status])
selected-items (case selected-tab selected-items (case selected-tab
:joined joined :joined joined
@ -102,6 +103,7 @@
:shared-value scroll-shared-value})}]) :shared-value scroll-shared-value})}])
[:f> common.home.banner/animated-banner [:f> common.home.banner/animated-banner
{:content banner-data {:content banner-data
:customization-color customization-color
:scroll-ref flat-list-ref :scroll-ref flat-list-ref
:tabs tabs-data :tabs tabs-data
:selected-tab selected-tab :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 (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 [quo/filter
{:pressed? unread-filter-enabled? {:pressed? unread-filter-enabled?
:blur? true :customization-color customization-color
:on-press-out #(rf/dispatch [:activity-center.notifications/fetch-first-page :blur? true
{:filter-status (if unread-filter-enabled? :on-press-out #(rf/dispatch [:activity-center.notifications/fetch-first-page
:all {:filter-status (if unread-filter-enabled?
:unread)}])}])) :all
:unread)}])}]))
(defn header (defn header
[] []

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

@ -52,7 +52,7 @@
child))) child)))
(defn view (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 (let [{:keys [author community-id id membership-status
read timestamp]} notification read timestamp]} notification
community (rf/sub [:communities/community community-id]) community (rf/sub [:communities/community community-id])
@ -60,48 +60,50 @@
community-image (get-in community [:images :thumbnail :uri])] community-image (get-in community [:images :thumbnail :uri])]
[swipeable props [swipeable props
[quo/activity-log [quo/activity-log
{:title (i18n/label :t/join-request) {:title (i18n/label :t/join-request)
:icon :i/add-user :customization-color customization-color
:timestamp (datetime/timestamp->relative timestamp) :icon :i/add-user
:unread? (not read) :timestamp (datetime/timestamp->relative timestamp)
:on-layout set-swipeable-height :unread? (not read)
:context [[common/user-avatar-tag author] :on-layout set-swipeable-height
(i18n/label :t/wants-to-join) :context [[common/user-avatar-tag author]
[quo/context-tag (i18n/label :t/wants-to-join)
common/tag-params [quo/context-tag
community-image community-name]] common/tag-params
:items (case membership-status community-image community-name]]
constants/activity-center-membership-status-accepted :items (case membership-status
[{:type :status constants/activity-center-membership-status-accepted
:subtype :positive [{:type :status
:key :status-accepted :subtype :positive
:blur? true :key :status-accepted
:label (i18n/label :t/accepted)}] :blur? true
:label (i18n/label :t/accepted)}]
constants/activity-center-membership-status-declined constants/activity-center-membership-status-declined
[{:type :status [{:type :status
:subtype :negative :subtype :negative
:key :status-declined :key :status-declined
:blur? true :blur? true
:label (i18n/label :t/declined)}] :label (i18n/label :t/declined)}]
constants/activity-center-membership-status-pending constants/activity-center-membership-status-pending
[{:type :button [{:type :button
:subtype :danger :subtype :danger
:key :button-decline :key :button-decline
:label (i18n/label :t/decline) :label (i18n/label :t/decline)
:accessibility-label :decline-join-request :accessibility-label :decline-join-request
:on-press (fn [] :on-press (fn []
(rf/dispatch (rf/dispatch
[:communities.ui/decline-request-to-join-pressed [:communities.ui/decline-request-to-join-pressed
community-id id]))} community-id id]))}
{:type :button {:type :button
:subtype :positive :subtype :positive
:key :button-accept :key :button-accept
:label (i18n/label :t/accept) :label (i18n/label :t/accept)
:accessibility-label :accept-join-request :accessibility-label :accept-join-request
:on-press (fn [] :on-press (fn []
(rf/dispatch [:communities.ui/accept-request-to-join-pressed (rf/dispatch
community-id id]))}] [: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]) child])
(defn view (defn view
[{:keys [notification set-swipeable-height] :as props}] [{:keys [notification set-swipeable-height customization-color] :as props}]
(let [{:keys [community-id read (let [{:keys [community-id read
timestamp]} notification timestamp]} notification
community (rf/sub [:communities/community community-id]) community (rf/sub [:communities/community community-id])
@ -26,12 +26,13 @@
community-image (get-in community [:images :thumbnail :uri])] community-image (get-in community [:images :thumbnail :uri])]
[swipeable props [swipeable props
[quo/activity-log [quo/activity-log
{:title (i18n/label :t/community-kicked-heading) {:title (i18n/label :t/community-kicked-heading)
:icon :i/placeholder :customization-color customization-color
:on-layout set-swipeable-height :icon :i/placeholder
:timestamp (datetime/timestamp->relative timestamp) :on-layout set-swipeable-height
:unread? (not read) :timestamp (datetime/timestamp->relative timestamp)
:context [[quo/text {:style common-style/user-avatar-tag-text} :unread? (not read)
(i18n/label :t/community-kicked-body)] :context [[quo/text {:style common-style/user-avatar-tag-text}
[quo/context-tag common/tag-params community-image (i18n/label :t/community-kicked-body)]
community-name]]}]])) [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))) :else nil)))
(defn view (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 (let [{:keys [community-id membership-status read
timestamp]} notification timestamp]} notification
community (rf/sub [:communities/community community-id]) community (rf/sub [:communities/community community-id])
@ -56,9 +56,10 @@
membership-status)] membership-status)]
[swipeable props [swipeable props
[quo/activity-log [quo/activity-log
{:title header-text {:title header-text
:icon :i/communities :customization-color customization-color
:on-layout set-swipeable-height :icon :i/communities
:timestamp (datetime/timestamp->relative timestamp) :on-layout set-swipeable-height
:unread? (not read) :timestamp (datetime/timestamp->relative timestamp)
:context context}]])) :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))) child)))
(defn- outgoing-contact-request-view (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 (let [{:keys [chat-id message last-message]} notification
{:keys [contact-request-state] :as message} (or message last-message)] {:keys [contact-request-state] :as message} (or message last-message)]
(if (= contact-request-state constants/contact-request-message-state-accepted) (if (= contact-request-state constants/contact-request-message-state-accepted)
[quo/activity-log [quo/activity-log
{:title (i18n/label :t/contact-request-was-accepted) {:title (i18n/label :t/contact-request-was-accepted)
:on-layout set-swipeable-height :customization-color customization-color
:icon :i/add-user :on-layout set-swipeable-height
:timestamp (datetime/timestamp->relative (:timestamp notification)) :icon :i/add-user
:unread? (not (:read notification)) :timestamp (datetime/timestamp->relative (:timestamp notification))
:context [[common/user-avatar-tag chat-id] :unread? (not (:read notification))
(i18n/label :t/contact-request-is-now-a-contact)]} :context [[common/user-avatar-tag chat-id]
(i18n/label :t/contact-request-is-now-a-contact)]}
:message {:body (get-in message [:content :text])} :message {:body (get-in message [:content :text])}
:items []] :items []]
[quo/activity-log [quo/activity-log
{:title (i18n/label :t/contact-request) {:title (i18n/label :t/contact-request)
:on-layout set-swipeable-height :customization-color customization-color
:icon :i/add-user :on-layout set-swipeable-height
:timestamp (datetime/timestamp->relative (:timestamp notification)) :icon :i/add-user
:unread? (not (:read notification)) :timestamp (datetime/timestamp->relative (:timestamp notification))
:context [(i18n/label :t/contact-request-outgoing) :unread? (not (:read notification))
[common/user-avatar-tag chat-id]] :context [(i18n/label :t/contact-request-outgoing)
:message {:body (get-in message [:content :text])} [common/user-avatar-tag chat-id]]
:items (case contact-request-state :message {:body (get-in message [:content :text])}
constants/contact-request-message-state-pending :items (case contact-request-state
[{:type :status constants/contact-request-message-state-pending
:subtype :pending [{:type :status
:key :status-pending :subtype :pending
:blur? true :key :status-pending
:label (i18n/label :t/pending)}] :blur? true
:label (i18n/label :t/pending)}]
constants/contact-request-message-state-declined constants/contact-request-message-state-declined
[{:type :status [{:type :status
:subtype :pending :subtype :pending
:key :status-pending :key :status-pending
:blur? true :blur? true
:label (i18n/label :t/pending)}] :label (i18n/label :t/pending)}]
nil)}]))) nil)}])))
(defn- incoming-contact-request-view (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 (let [{:keys [id author message last-message]} notification
message (or message last-message)] message (or message last-message)]
[quo/activity-log [quo/activity-log
{:title (i18n/label :t/contact-request) {:title (i18n/label :t/contact-request)
:customization-color customization-color
:on-layout set-swipeable-height :on-layout set-swipeable-height
:icon :i/add-user :icon :i/add-user
:timestamp (datetime/timestamp->relative (:timestamp notification)) :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 (defn view
[_] [_]
(let [reply (atom "")] (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 (let [{:keys [id message
contact-verification-status]} notification contact-verification-status]} notification
challenger? (:outgoing message)] challenger? (:outgoing message)]
@ -169,6 +169,7 @@
(when-not replying? (when-not replying?
{:on-layout set-swipeable-height}) {:on-layout set-swipeable-height})
{:title (i18n/label :t/identity-verification-request) {:title (i18n/label :t/identity-verification-request)
:customization-color customization-color
:icon :i/friend :icon :i/friend
:timestamp (datetime/timestamp->relative (:timestamp notification)) :timestamp (datetime/timestamp->relative (:timestamp notification))
:unread? (not (:read notification)) :unread? (not (:read notification))

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

@ -53,32 +53,35 @@
child]))) child])))
(defn view (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] (let [{:keys [id accepted dismissed author read timestamp chat-name chat-id]} notification]
[swipeable props [swipeable props
[pressable {:accepted accepted :chat-id chat-id} [pressable {:accepted accepted :chat-id chat-id}
[quo/activity-log [quo/activity-log
{:title (i18n/label :t/added-to-group-chat) {:title (i18n/label :t/added-to-group-chat)
:on-layout set-swipeable-height :customization-color customization-color
:icon :i/add-user :on-layout set-swipeable-height
:timestamp (datetime/timestamp->relative timestamp) :icon :i/add-user
:unread? (not read) :timestamp (datetime/timestamp->relative timestamp)
:context [[common/user-avatar-tag author] :unread? (not read)
(i18n/label :t/added-you-to) :context [[common/user-avatar-tag author]
[quo/group-avatar-tag chat-name (i18n/label :t/added-you-to)
{:size :small [quo/group-avatar-tag chat-name
:color :purple}]] {:size :small
:items (when-not (or accepted dismissed) :color :purple}]]
[{:type :button :items (when-not (or accepted dismissed)
:subtype :positive [{:type :button
:key :button-accept :subtype :positive
:label (i18n/label :t/accept) :key :button-accept
:accessibility-label :accept-group-chat-invitation :label (i18n/label :t/accept)
:on-press #(rf/dispatch [:activity-center.notifications/accept id])} :accessibility-label :accept-group-chat-invitation
{:type :button :on-press #(rf/dispatch
:subtype :danger [:activity-center.notifications/accept id])}
:key :button-decline {:type :button
:label (i18n/label :t/decline) :subtype :danger
:accessibility-label :decline-group-chat-invitation :key :button-decline
:on-press #(rf/dispatch [:activity-center.notifications/dismiss :label (i18n/label :t/decline)
id])}])}]]])) :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]) child])
(defn view (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 (let [{:keys [author chat-name community-id chat-id
message read timestamp]} notification message read timestamp]} notification
community-chat? (not (string/blank? community-id)) community-chat? (not (string/blank? community-id))
@ -52,14 +52,16 @@
(rf/dispatch [:hide-popover]) (rf/dispatch [:hide-popover])
(rf/dispatch [:chat/navigate-to-chat chat-id]))} (rf/dispatch [:chat/navigate-to-chat chat-id]))}
[quo/activity-log [quo/activity-log
{:title (i18n/label :t/mention) {:title (i18n/label :t/mention)
:on-layout set-swipeable-height :customization-color customization-color
:icon :i/mention :on-layout set-swipeable-height
:timestamp (datetime/timestamp->relative timestamp) :icon :i/mention
:unread? (not read) :timestamp (datetime/timestamp->relative timestamp)
:context [[common/user-avatar-tag author] :unread? (not read)
[quo/text {:style style/tag-text} (string/lower-case (i18n/label :t/on))] :context [[common/user-avatar-tag author]
(if community-chat? [quo/text {:style style/tag-text} (string/lower-case (i18n/label :t/on))]
[quo/context-tag common/tag-params community-image community-name chat-name] (if community-chat?
[quo/group-avatar-tag chat-name common/tag-params])] [quo/context-tag common/tag-params community-image community-name
:message {:body (message-body message)}}]]])) 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]) child])
(defn view (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 (let [{:keys [author chat-name community-id chat-id
message read timestamp]} notification message read timestamp]} notification
community-chat? (not (string/blank? community-id)) community-chat? (not (string/blank? community-id))
@ -65,30 +65,36 @@
(rf/dispatch [:hide-popover]) (rf/dispatch [:hide-popover])
(rf/dispatch [:chat/navigate-to-chat chat-id]))} (rf/dispatch [:chat/navigate-to-chat chat-id]))}
[quo/activity-log [quo/activity-log
{:title (i18n/label :t/message-reply) {:title (i18n/label :t/message-reply)
:on-layout set-swipeable-height :customization-color customization-color
:icon :i/reply :on-layout set-swipeable-height
:timestamp (datetime/timestamp->relative timestamp) :icon :i/reply
:unread? (not read) :timestamp (datetime/timestamp->relative timestamp)
:context [[common/user-avatar-tag author] :unread? (not read)
[quo/text {:style style/lowercase-text} (i18n/label :t/on)] :context [[common/user-avatar-tag author]
(if community-chat? [quo/text {:style style/lowercase-text} (i18n/label :t/on)]
[quo/context-tag common/tag-params community-image community-name chat-name] (if community-chat?
[quo/group-avatar-tag chat-name common/tag-params])] [quo/context-tag common/tag-params community-image community-name
:message {:body-number-of-lines 1 chat-name]
:attachment (cond [quo/group-avatar-tag chat-name common/tag-params])]
(= (:content-type message) constants/content-type-text) :message {:body-number-of-lines 1
:text :attachment (cond
(= (:content-type message)
constants/content-type-text)
:text
(= (:content-type message) constants/content-type-image) (= (:content-type message)
:photo constants/content-type-image)
:photo
(= (:content-type message) constants/content-type-sticker) (= (:content-type message)
:sticker constants/content-type-sticker)
:sticker
(= (:content-type message) constants/content-type-gif) (= (:content-type message)
:gif constants/content-type-gif)
:gif
:else :else
nil) nil)
:body (get-message-content message)}}]]])) :body (get-message-content message)}}]]]))

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

@ -8,13 +8,15 @@
(defn tabs (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]) types-with-unread (rf/sub [:activity-center/notification-types-with-unread])
is-mark-all-as-read-undoable? (boolean (rf/sub is-mark-all-as-read-undoable? (boolean (rf/sub
[:activity-center/mark-all-as-read-undoable-till]))] [:activity-center/mark-all-as-read-undoable-till]))]
[quo/tabs [quo/tabs
{:size 32 {:size 32
:scrollable? true :scrollable? true
:customization-color customization-color
:blur? true :blur? true
:style style/tabs :style style/tabs
:fade-end-percentage 0.79 :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) (let [height (atom 0)
set-swipeable-height #(reset! height (oops/oget % "nativeEvent.layout.height"))] 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 (let [props {:height height
:customization-color customization-color
:active-swipeable active-swipeable :active-swipeable active-swipeable
:set-swipeable-height set-swipeable-height :set-swipeable-height set-swipeable-height
:notification notification :notification notification
@ -66,13 +67,15 @@
(let [active-swipeable (atom nil)] (let [active-swipeable (atom nil)]
(rf/dispatch [:activity-center.notifications/fetch-first-page]) (rf/dispatch [:activity-center.notifications/fetch-first-page])
(fn [] (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)} [rn/view {:flex 1 :padding-top (navigation/status-bar-height)}
[blur/view style/blur] [blur/view style/blur]
[header/header] [header/header]
[rn/flat-list [rn/flat-list
{:data notifications {:data notifications
:render-data active-swipeable :render-data {:active-swipeable active-swipeable
:customization-color customization-color}
:content-container-style {:flex-grow 1} :content-container-style {:flex-grow 1}
:empty-component [empty-tab/empty-tab] :empty-component [empty-tab/empty-tab]
:key-fn :id :key-fn :id