From bc7578ae853ec74a15eccb07175c834a0ed5c5c1 Mon Sep 17 00:00:00 2001 From: Mohamed Javid <19339952+smohamedjavid@users.noreply.github.com> Date: Tue, 29 Nov 2022 19:25:33 +0530 Subject: [PATCH] [Feature] Added Mentions in Activity Center (#14451) * [Feature][#14352] Added mentions in Activity Center * [Update][#14352] Update in namespace * [Update][#14352] Code Style * [Update][#14352] Created commons for AC and fix warning on text --- src/quo2/core.cljs | 1 + .../notification/common/style.cljs | 8 ++++ .../notification/common/view.cljs | 17 +++++++ .../notification/mentions/style.cljs | 14 ++++++ .../notification/mentions/view.cljs | 48 +++++++++++++++++++ .../ui/screens/activity_center/views.cljs | 15 ++++-- translations/en.json | 1 + 7 files changed, 99 insertions(+), 5 deletions(-) create mode 100644 src/status_im/ui/screens/activity_center/notification/common/style.cljs create mode 100644 src/status_im/ui/screens/activity_center/notification/common/view.cljs create mode 100644 src/status_im/ui/screens/activity_center/notification/mentions/style.cljs create mode 100644 src/status_im/ui/screens/activity_center/notification/mentions/view.cljs diff --git a/src/quo2/core.cljs b/src/quo2/core.cljs index cd49700fa1..947a4e6dd7 100644 --- a/src/quo2/core.cljs +++ b/src/quo2/core.cljs @@ -58,6 +58,7 @@ (def tags quo2.components.tags.tags/tags) (def user-avatar-tag quo2.components.tags.context-tags/user-avatar-tag) (def context-tag quo2.components.tags.context-tags/context-tag) +(def group-avatar-tag quo2.components.tags.context-tags/group-avatar-tag) (def tabs quo2.components.tabs.tabs/tabs) (def scrollable-tabs quo2.components.tabs.tabs/scrollable-tabs) (def account-selector quo2.components.tabs.account-selector/account-selector) diff --git a/src/status_im/ui/screens/activity_center/notification/common/style.cljs b/src/status_im/ui/screens/activity_center/notification/common/style.cljs new file mode 100644 index 0000000000..75c2c96dcc --- /dev/null +++ b/src/status_im/ui/screens/activity_center/notification/common/style.cljs @@ -0,0 +1,8 @@ +(ns status-im.ui.screens.activity-center.notification.common.style + (:require [quo2.foundations.colors :as colors])) + +(def user-avatar-tag + {:background-color colors/white-opa-10}) + +(def user-avatar-tag-text + {:color colors/white}) \ No newline at end of file diff --git a/src/status_im/ui/screens/activity_center/notification/common/view.cljs b/src/status_im/ui/screens/activity_center/notification/common/view.cljs new file mode 100644 index 0000000000..4f5ab4d6e1 --- /dev/null +++ b/src/status_im/ui/screens/activity_center/notification/common/view.cljs @@ -0,0 +1,17 @@ +(ns status-im.ui.screens.activity-center.notification.common.view + (:require [utils.re-frame :as rf] + [quo2.core :as quo2] + [status-im.multiaccounts.core :as multiaccounts] + [status-im.ui.screens.activity-center.notification.common.style :as style] + [status-im.ui.screens.activity-center.utils :as activity-center.utils])) + +(defn user-avatar-tag [user] + (let [contact (rf/sub [:contacts/contact-by-identity user])] + [quo2/user-avatar-tag + {:color :purple + :override-theme :dark + :size :small + :style style/user-avatar-tag + :text-style style/user-avatar-tag-text} + (activity-center.utils/contact-name contact) + (multiaccounts/displayed-photo contact)])) \ No newline at end of file diff --git a/src/status_im/ui/screens/activity_center/notification/mentions/style.cljs b/src/status_im/ui/screens/activity_center/notification/mentions/style.cljs new file mode 100644 index 0000000000..cea3b9a042 --- /dev/null +++ b/src/status_im/ui/screens/activity_center/notification/mentions/style.cljs @@ -0,0 +1,14 @@ +(ns status-im.ui.screens.activity-center.notification.mentions.style + (:require [quo2.foundations.colors :as colors])) + +(def tag + {:background-color colors/white-opa-10}) + +(def tag-text + {:color colors/white}) + +(def mention-text + {:color colors/white + :border-radius 6 + :padding-horizontal 3 + :background-color colors/white-opa-10}) \ No newline at end of file diff --git a/src/status_im/ui/screens/activity_center/notification/mentions/view.cljs b/src/status_im/ui/screens/activity_center/notification/mentions/view.cljs new file mode 100644 index 0000000000..5dd9b0cbf4 --- /dev/null +++ b/src/status_im/ui/screens/activity_center/notification/mentions/view.cljs @@ -0,0 +1,48 @@ +(ns status-im.ui.screens.activity-center.notification.mentions.view + (:require [quo.components.animated.pressable :as animation] + [quo2.core :as quo2] + [quo2.foundations.colors :as colors] + [status-im.i18n.i18n :as i18n] + [status-im.ui.screens.activity-center.notification.common.view :as common] + [status-im.ui.screens.activity-center.notification.mentions.style :as style] + [status-im.utils.datetime :as datetime] + [utils.re-frame :as rf] + [clojure.string :as str])) + +(defn message-body [message] + (let [parsed-text (get-in message [:content :parsed-text]) + parsed-text-children (:children (first parsed-text))] + (into [quo2/text {:number-of-lines 2 + :style style/tag-text + :accessibility-label :activity-message-body + :size :paragraph-1}] + (map-indexed (fn [index {:keys [type literal]}] + ^{:key index} + (case type + "mention" [quo2/text {:style style/mention-text + :size :paragraph-1} + (str "@" (rf/sub [:contacts/contact-name-by-identity literal]))] + literal)) parsed-text-children)))) + +(defn view + [{:keys [author chat-name chat-id message] :as notification}] + [animation/pressable + {:on-press (fn [] + (rf/dispatch [:hide-popover]) + (rf/dispatch [:chat.ui/navigate-to-chat chat-id]))} + [quo2/activity-log + {:title (i18n/label :t/mention) + :icon :i/mention + :timestamp (datetime/timestamp->relative (:timestamp notification)) + :unread? (not (:read notification)) + :context [[common/user-avatar-tag author] + [quo2/text {:style style/tag-text} (str/lower-case (i18n/label :t/on))] + ;; TODO (@smohamedjavid): The `group-avatar-tag` component + ;; does NOT support displaying channel name along with community/chat name. + ;; Need to update the component to support it. + [quo2/group-avatar-tag chat-name {:size :small + :override-theme :dark + :color colors/primary-50 + :style style/tag + :text-style style/tag-text}]] + :message {:body (message-body message)}}]]) \ No newline at end of file diff --git a/src/status_im/ui/screens/activity_center/views.cljs b/src/status_im/ui/screens/activity_center/views.cljs index 300538626b..014dbb81ee 100644 --- a/src/status_im/ui/screens/activity_center/views.cljs +++ b/src/status_im/ui/screens/activity_center/views.cljs @@ -8,6 +8,7 @@ [status-im.i18n.i18n :as i18n] [status-im.ui.screens.activity-center.notification.contact-request.view :as contact-request] [status-im.ui.screens.activity-center.notification.contact-verification.view :as contact-verification] + [status-im.ui.screens.activity-center.notification.mentions.view :as mentions] [status-im.ui.screens.activity-center.style :as style] [utils.re-frame :as rf])) @@ -112,6 +113,9 @@ types/contact-request [contact-request/view notification] + types/mention + [mentions/view notification] + nil)]) (defn activity-center @@ -124,8 +128,9 @@ (react/effect! #(rf/dispatch [:activity-center.notifications/fetch-first-page])) [rn/view {:style (style/screen-container window-width top bottom)} [header] - [rn/flat-list {:data notifications - :empty-component [empty-tab] - :key-fn :id - :on-end-reached #(rf/dispatch [:activity-center.notifications/fetch-next-page]) - :render-fn render-notification}]]))]) + [rn/flat-list {:data notifications + :empty-component [empty-tab] + :key-fn :id + :on-scroll-to-index-failed identity + :on-end-reached #(rf/dispatch [:activity-center.notifications/fetch-next-page]) + :render-fn render-notification}]]))]) diff --git a/translations/en.json b/translations/en.json index 1cd3a3b2f4..a346c50c6f 100644 --- a/translations/en.json +++ b/translations/en.json @@ -1827,6 +1827,7 @@ "share-image": "Share image", "see-sticker-set": "See the full sticker set", "mentions": "Mentions", + "mention": "Mention", "admin": "Admin", "replies": "Replies", "replied": "Replied",