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

Notification Centre - add Empty Content screen #16715

Merged
merged 1 commit into from
Jul 25, 2023
Merged

Notification Centre - add Empty Content screen #16715

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
23 changes: 23 additions & 0 deletions src/status_im2/contexts/shell/activity_center/drawer/view.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 changes: 53 additions & 0 deletions src/status_im2/contexts/shell/activity_center/header/view.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 changes: 4 additions & 4 deletions src/status_im2/contexts/shell/activity_center/style.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
30 changes: 30 additions & 0 deletions src/status_im2/contexts/shell/activity_center/tabs/empty_tab/view.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 changes: 68 additions & 0 deletions src/status_im2/contexts/shell/activity_center/tabs/view.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 changes: 6 additions & 150 deletions src/status_im2/contexts/shell/activity_center/view.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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]
Expand All @@ -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
[]
Expand Down Expand Up @@ -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])
Expand Down
9 changes: 9 additions & 0 deletions translations/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down