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

Notification Centre - add Empty Content screen (#16715) 

* Notification Centre - add Empty Content screen (#16715)
This commit is contained in:
mmilad75 2023-07-25 18:06:00 +03:30 committed by GitHub
parent 15add24cd7
commit ec6800216b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 193 additions and 154 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/status_im2/contexts/shell/activity_center/drawer/view.cljs Normal file
View File

@ -0,0 +1,23 @@
(ns status-im2.contexts.shell.activity-center.drawer.view
(:require [utils.re-frame :as rf]
[quo2.core :as quo]
[utils.i18n :as i18n]
[quo2.foundations.colors :as colors]))
(defn options
[]
(let [unread-count (rf/sub [:activity-center/unread-count])]
[quo/action-drawer
[[{:icon :i/mark-as-read
:override-theme :dark
:label (i18n/label :t/mark-all-notifications-as-read)
:disabled? (zero? unread-count)
:on-press (fn []
(rf/dispatch [:activity-center.notifications/mark-all-as-read-locally
(fn []
{:icon :up-to-date
:icon-color colors/success-50
:text (i18n/label :t/notifications-marked-as-read
{:count unread-count})
:override-theme :dark})])
(rf/dispatch [:hide-bottom-sheet]))}]]]))

53
src/status_im2/contexts/shell/activity_center/header/view.cljs Normal file
View File

@ -0,0 +1,53 @@
(ns status-im2.contexts.shell.activity-center.header.view
(:require [react-native.core :as rn]
[status-im2.contexts.shell.activity-center.style :as style]
[quo2.core :as quo]
[utils.re-frame :as rf]
[utils.i18n :as i18n]
[status-im2.contexts.shell.activity-center.tabs.view :as tabs]
[status-im2.contexts.shell.activity-center.drawer.view :as drawer]))
(defn filter-selector-read-toggle
[]
(let [unread-filter-enabled? (rf/sub [:activity-center/filter-status-unread-enabled?])]
[quo/filter
{:pressed? unread-filter-enabled?
:blur? true
:override-theme :dark
:on-press-out #(rf/dispatch [:activity-center.notifications/fetch-first-page
{:filter-status (if unread-filter-enabled?
:all
:unread)}])}]))
(defn header
[]
[rn/view
[rn/view {:style style/header-container}
[quo/button
{:icon true
:type :blur-bg
:size 32
:accessibility-label :close-activity-center
:override-theme :dark
:on-press #(rf/dispatch [:navigate-back])}
:i/close]
[quo/button
{:icon true
:type :blur-bg
:size 32
:accessibility-label :activity-center-open-more
:override-theme :dark
:on-press #(rf/dispatch [:show-bottom-sheet
{:content drawer/options
:override-theme :dark}])}
:i/options]]
[quo/text
{:size :heading-1
:weight :semi-bold
:style style/header-heading}
(i18n/label :t/notifications)]
[rn/view {:style style/tabs-and-filter-container}
[rn/view {:style style/tabs-container}
[tabs/tabs]]
[rn/view {:style style/filter-toggle-container}
[filter-selector-read-toggle]]]])

8
src/status_im2/contexts/shell/activity_center/style.cljs
View File

@ -35,10 +35,10 @@
:padding-vertical 12})
(def empty-container
{:align-items :center
:flex 1
:justify-content :center
:padding-vertical 12})
{:align-items :center
:flex 1
:justify-content :center
:padding-bottom 20})
(def empty-title
{:padding-bottom 2

30
src/status_im2/contexts/shell/activity_center/tabs/empty_tab/view.cljs Normal file
View File

@ -0,0 +1,30 @@
(ns status-im2.contexts.shell.activity-center.tabs.empty-tab.view
(:require [utils.re-frame :as rf]
[react-native.core :as rn]
[quo2.core :as quo]
[status-im2.contexts.shell.activity-center.style :as style]
[utils.i18n :as i18n]
[status-im2.contexts.shell.activity-center.notification-types :as types]
[status-im2.common.resources :as resources]))
(def empty-tab-description
{types/no-type (i18n/label :t/empty-notifications-all-tab)
types/admin (i18n/label :t/empty-notifications-admin-tab)
types/mention (i18n/label :t/empty-notifications-mentions-tab)
types/reply (i18n/label :t/empty-notifications-replies-tab)
types/contact-request (i18n/label :t/empty-notifications-contact-requests-tab)
types/contact-verification (i18n/label :t/empty-notifications-identity-verification-tab)
types/tx (i18n/label :t/empty-notifications-transactions-tab)
types/membership (i18n/label :t/empty-notifications-membership-tab)
types/system (i18n/label :t/empty-notifications-system-tab)})
(defn empty-tab
[]
(let [filter-type (rf/sub [:activity-center/filter-type])
description (get empty-tab-description filter-type nil)]
[rn/view {:style style/empty-container}
[quo/empty-state
{:blur? true
:image (resources/get-image :no-notifications-dark)
:title (i18n/label :t/empty-notifications-title-unread)
:description description}]]))

68
src/status_im2/contexts/shell/activity_center/tabs/view.cljs Normal file
View File

@ -0,0 +1,68 @@
(ns status-im2.contexts.shell.activity-center.tabs.view
(:require [utils.re-frame :as rf]
[quo2.core :as quo]
[status-im2.contexts.shell.activity-center.style :as style]
[status-im2.contexts.shell.activity-center.notification-types :as types]
[clojure.set :as set]
[utils.i18n :as i18n]))
(defn tabs
[]
(let [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
:blur? true
:style style/tabs
:fade-end-percentage 0.79
:scroll-on-press? true
:fade-end? true
:on-change #(rf/dispatch [:activity-center.notifications/fetch-first-page
{:filter-type %}])
:default-active filter-type
:data [{:id types/no-type
:label (i18n/label :t/all)}
{:id types/admin
:label (i18n/label :t/admin)
:accessibility-label :tab-admin
:notification-dot? (when-not is-mark-all-as-read-undoable?
(contains? types-with-unread types/admin))}
{:id types/mention
:label (i18n/label :t/mentions)
:accessibility-label :tab-mention
:notification-dot? (when-not is-mark-all-as-read-undoable?
(contains? types-with-unread types/mention))}
{:id types/reply
:label (i18n/label :t/replies)
:accessibility-label :tab-reply
:notification-dot? (when-not is-mark-all-as-read-undoable?
(contains? types-with-unread types/reply))}
{:id types/contact-request
:label (i18n/label :t/contact-requests)
:accessibility-label :tab-contact-request
:notification-dot? (when-not is-mark-all-as-read-undoable?
(contains? types-with-unread types/contact-request))}
{:id types/contact-verification
:label (i18n/label :t/identity-verification)
:accessibility-label :tab-contact-verification
:notification-dot? (when-not is-mark-all-as-read-undoable?
(contains? types-with-unread
types/contact-verification))}
{:id types/tx
:label (i18n/label :t/transactions)
:accessibility-label :tab-tx
:notification-dot? (when-not is-mark-all-as-read-undoable?
(contains? types-with-unread types/tx))}
{:id types/membership
:label (i18n/label :t/membership)
:accessibility-label :tab-membership
:notification-dot? (when-not is-mark-all-as-read-undoable?
(set/subset? types/membership types-with-unread))}
{:id types/system
:label (i18n/label :t/system)
:accessibility-label :tab-system
:notification-dot? (when-not is-mark-all-as-read-undoable?
(contains? types-with-unread types/system))}]}]))

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

@ -1,8 +1,5 @@
(ns status-im2.contexts.shell.activity-center.view
(:require [clojure.set :as set]
[oops.core :as oops]
[quo2.core :as quo]
[quo2.foundations.colors :as colors]
(:require [oops.core :as oops]
[react-native.core :as rn]
[status-im2.contexts.shell.activity-center.notification-types :as types]
[status-im2.contexts.shell.activity-center.notification.admin.view :as admin]
@ -18,152 +15,11 @@
[status-im2.contexts.shell.activity-center.notification.community-kicked.view :as
community-kicked]
[status-im2.contexts.shell.activity-center.style :as style]
[utils.i18n :as i18n]
[utils.re-frame :as rf]
[react-native.blur :as blur]
[react-native.navigation :as navigation]))
(defn filter-selector-read-toggle
[]
(let [unread-filter-enabled? (rf/sub [:activity-center/filter-status-unread-enabled?])]
[quo/filter
{:pressed? unread-filter-enabled?
:blur? true
:override-theme :dark
:on-press-out #(rf/dispatch [:activity-center.notifications/fetch-first-page
{:filter-status (if unread-filter-enabled?
:all
:unread)}])}]))
(defn options-bottom-sheet-content
[]
(let [unread-count (rf/sub [:activity-center/unread-count])]
[quo/action-drawer
[[{:icon :i/mark-as-read
:label (i18n/label :t/mark-all-notifications-as-read)
:disabled? (zero? unread-count)
:on-press (fn []
(rf/dispatch [:activity-center.notifications/mark-all-as-read-locally
(fn []
{:icon :up-to-date
:icon-color colors/success-50
:text (i18n/label :t/notifications-marked-as-read
{:count unread-count})
:override-theme :dark})])
(rf/dispatch [:hide-bottom-sheet]))}]]]))
(defn empty-tab
[]
(let [filter-status (rf/sub [:activity-center/filter-status])]
[rn/view
{:style style/empty-container
:accessibility-label :empty-notifications}
[rn/view {:style style/empty-rectangle-placeholder}]
[quo/text
{:size :paragraph-1
:style style/empty-title
:weight :semi-bold}
(i18n/label (if (= :unread filter-status)
:t/empty-notifications-title-unread
:t/empty-notifications-title-read))]
[quo/text
{:size :paragraph-2
:style style/empty-subtitle}
(i18n/label (if (= :unread filter-status)
:t/empty-notifications-subtitle-unread
:t/empty-notifications-subtitle-read))]]))
(defn tabs
[]
(let [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
:blur? true
:style style/tabs
:fade-end-percentage 0.79
:scroll-on-press? true
:fade-end? true
:on-change #(rf/dispatch [:activity-center.notifications/fetch-first-page
{:filter-type %}])
:default-active filter-type
:data [{:id types/no-type
:label (i18n/label :t/all)}
{:id types/admin
:label (i18n/label :t/admin)
:accessibility-label :tab-admin
:notification-dot? (when-not is-mark-all-as-read-undoable?
(contains? types-with-unread types/admin))}
{:id types/mention
:label (i18n/label :t/mentions)
:accessibility-label :tab-mention
:notification-dot? (when-not is-mark-all-as-read-undoable?
(contains? types-with-unread types/mention))}
{:id types/reply
:label (i18n/label :t/replies)
:accessibility-label :tab-reply
:notification-dot? (when-not is-mark-all-as-read-undoable?
(contains? types-with-unread types/reply))}
{:id types/contact-request
:label (i18n/label :t/contact-requests)
:accessibility-label :tab-contact-request
:notification-dot? (when-not is-mark-all-as-read-undoable?
(contains? types-with-unread types/contact-request))}
{:id types/contact-verification
:label (i18n/label :t/identity-verification)
:accessibility-label :tab-contact-verification
:notification-dot? (when-not is-mark-all-as-read-undoable?
(contains? types-with-unread
types/contact-verification))}
{:id types/tx
:label (i18n/label :t/transactions)
:accessibility-label :tab-tx
:notification-dot? (when-not is-mark-all-as-read-undoable?
(contains? types-with-unread types/tx))}
{:id types/membership
:label (i18n/label :t/membership)
:accessibility-label :tab-membership
:notification-dot? (when-not is-mark-all-as-read-undoable?
(set/subset? types/membership types-with-unread))}
{:id types/system
:label (i18n/label :t/system)
:accessibility-label :tab-system
:notification-dot? (when-not is-mark-all-as-read-undoable?
(contains? types-with-unread types/system))}]}]))
(defn header
[]
[rn/view
[rn/view {:style style/header-container}
[quo/button
{:icon true
:type :blur-bg
:size 32
:accessibility-label :close-activity-center
:on-press #(rf/dispatch [:navigate-back])}
:i/close]
[quo/button
{:icon true
:type :blur-bg
:size 32
:accessibility-label :activity-center-open-more
:on-press #(rf/dispatch [:show-bottom-sheet
{:content options-bottom-sheet-content
:theme :dark}])}
:i/options]]
[quo/text
{:size :heading-1
:weight :semi-bold
:style style/header-heading}
(i18n/label :t/notifications)]
[rn/view {:style style/tabs-and-filter-container}
[rn/view {:style style/tabs-container}
[tabs]]
[rn/view {:style style/filter-toggle-container}
[filter-selector-read-toggle]]]])
[react-native.navigation :as navigation]
[status-im2.contexts.shell.activity-center.header.view :as header]
[status-im2.contexts.shell.activity-center.tabs.empty-tab.view :as empty-tab]))
(defn notification-component
[]
@ -213,12 +69,12 @@
(let [notifications (rf/sub [:activity-center/notifications])]
[rn/view {:flex 1 :padding-top (navigation/status-bar-height)}
[blur/view style/blur]
[header]
[header/header]
[rn/flat-list
{:data notifications
:render-data active-swipeable
:content-container-style {:flex-grow 1}
:empty-component [empty-tab]
:empty-component [empty-tab/empty-tab]
:key-fn :id
:on-scroll-to-index-failed identity
:on-end-reached #(rf/dispatch [:activity-center.notifications/fetch-next-page])

9
translations/en.json
View File

@ -2019,6 +2019,15 @@
"bold": "Bold",
"italic": "Italic",
"strikethrough": "Strikethrough",
"empty-notifications-all-tab": "No unread notifications",
"empty-notifications-admin-tab": "No unread admin notifications",
"empty-notifications-mentions-tab": "No unread mention notifications",
"empty-notifications-replies-tab": "No unread reply notifications to your messages",
"empty-notifications-contact-requests-tab": "No contact requests notifications",
"empty-notifications-identity-verification-tab": "No identity verification requests",
"empty-notifications-transactions-tab": "No transaction notifications",
"empty-notifications-membership-tab": "No membership notifications",
"empty-notifications-system-tab": "No system notifications",
"empty-notifications-title-unread": "You're up to date",
"empty-notifications-subtitle-unread": "Unread notifications will be here",
"empty-notifications-title-read": "No notifications",