diff --git a/src/status_im2/contexts/shell/activity_center/drawer/view.cljs b/src/status_im2/contexts/shell/activity_center/drawer/view.cljs new file mode 100644 index 0000000000..2de22373fa --- /dev/null +++ b/src/status_im2/contexts/shell/activity_center/drawer/view.cljs @@ -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]))}]]])) diff --git a/src/status_im2/contexts/shell/activity_center/header/view.cljs b/src/status_im2/contexts/shell/activity_center/header/view.cljs new file mode 100644 index 0000000000..cc91921f67 --- /dev/null +++ b/src/status_im2/contexts/shell/activity_center/header/view.cljs @@ -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]]]]) diff --git a/src/status_im2/contexts/shell/activity_center/style.cljs b/src/status_im2/contexts/shell/activity_center/style.cljs index e57e2b0843..b6d9382b17 100644 --- a/src/status_im2/contexts/shell/activity_center/style.cljs +++ b/src/status_im2/contexts/shell/activity_center/style.cljs @@ -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 diff --git a/src/status_im2/contexts/shell/activity_center/tabs/empty_tab/view.cljs b/src/status_im2/contexts/shell/activity_center/tabs/empty_tab/view.cljs new file mode 100644 index 0000000000..388bef4189 --- /dev/null +++ b/src/status_im2/contexts/shell/activity_center/tabs/empty_tab/view.cljs @@ -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}]])) diff --git a/src/status_im2/contexts/shell/activity_center/tabs/view.cljs b/src/status_im2/contexts/shell/activity_center/tabs/view.cljs new file mode 100644 index 0000000000..7bba0c311c --- /dev/null +++ b/src/status_im2/contexts/shell/activity_center/tabs/view.cljs @@ -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))}]}])) diff --git a/src/status_im2/contexts/shell/activity_center/view.cljs b/src/status_im2/contexts/shell/activity_center/view.cljs index 6a9230ef92..3faf1770c3 100644 --- a/src/status_im2/contexts/shell/activity_center/view.cljs +++ b/src/status_im2/contexts/shell/activity_center/view.cljs @@ -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]) diff --git a/translations/en.json b/translations/en.json index 9fca77bf26..a4802911e5 100644 --- a/translations/en.json +++ b/translations/en.json @@ -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",