diff --git a/src/quo2/components/notifications/activity_log/view.cljs b/src/quo2/components/notifications/activity_log/view.cljs index f7e9cdc674..0247abbbe0 100644 --- a/src/quo2/components/notifications/activity_log/view.cljs +++ b/src/quo2/components/notifications/activity_log/view.cljs @@ -81,19 +81,21 @@ context)))) (defn- activity-message - [{:keys [title body]}] + [{:keys [title body title-number-of-lines body-number-of-lines]}] [rn/view {:style style/message-container} (when title [text/text {:size :paragraph-2 :accessibility-label :activity-message-title - :style style/message-title} + :style style/message-title + :number-of-lines title-number-of-lines} title]) (if (string? body) [text/text {:style style/message-body :accessibility-label :activity-message-body - :size :paragraph-1} + :size :paragraph-1 + :number-of-lines body-number-of-lines} body] body)]) diff --git a/src/status_im2/contexts/activity_center/notification/contact_request/view.cljs b/src/status_im2/contexts/activity_center/notification/contact_request/view.cljs index 77c5a1601e..deef292242 100644 --- a/src/status_im2/contexts/activity_center/notification/contact_request/view.cljs +++ b/src/status_im2/contexts/activity_center/notification/contact_request/view.cljs @@ -17,7 +17,7 @@ ;; `:chat.ui/navigate-to-chat`, otherwise the chat screen ;; looks completely broken if it has never been opened ;; before for the accepted contact. - [rn/touchable-without-feedback + [rn/touchable-opacity {:on-press (fn [] (rf/dispatch [:hide-popover]) (rf/dispatch [:contact.ui/send-message-pressed diff --git a/src/status_im2/contexts/activity_center/notification/mentions/view.cljs b/src/status_im2/contexts/activity_center/notification/mentions/view.cljs index e7fb8f045f..27a08da1d8 100644 --- a/src/status_im2/contexts/activity_center/notification/mentions/view.cljs +++ b/src/status_im2/contexts/activity_center/notification/mentions/view.cljs @@ -9,12 +9,19 @@ [status-im2.contexts.activity-center.notification.mentions.style :as style] [utils.re-frame :as rf])) +(def tag-params + {:size :small + :override-theme :dark + :color colors/primary-50 + :style style/tag + :text-style style/tag-text}) + (defn message-body [message] (let [parsed-text (get-in message [:content :parsed-text]) parsed-text-children (:children (first parsed-text))] (into [quo/text - {:number-of-lines 2 + {:number-of-lines 1 :style style/tag-text :accessibility-label :activity-message-body :size :paragraph-1}] @@ -29,25 +36,25 @@ parsed-text-children)))) (defn view - [{:keys [author chat-name chat-id message] :as notification}] - [rn/touchable-without-feedback - {:on-press (fn [] - (rf/dispatch [:hide-popover]) - (rf/dispatch [:chat.ui/navigate-to-chat chat-id]))} - [quo/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] - [quo/text {:style style/tag-text} (string/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. - [quo/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)}}]]) + [{:keys [author chat-name chat-id message read timestamp]}] + (let [chat (rf/sub [:chats/chat chat-id]) + community-id (:community-id chat) + is-chat-from-community? (not (nil? community-id)) + community (rf/sub [:communities/community community-id]) + community-name (:name community) + community-image (get-in community [:images :thumbnail :uri])] + [rn/touchable-opacity + {:on-press (fn [] + (rf/dispatch [:hide-popover]) + (rf/dispatch [:chat.ui/navigate-to-chat chat-id]))} + [quo/activity-log + {:title (i18n/label :t/mention) + :icon :i/mention + :timestamp (datetime/timestamp->relative timestamp) + :unread? (not read) + :context [[common/user-avatar-tag author] + [quo/text {:style style/tag-text} (string/lower-case (i18n/label :t/on))] + (if is-chat-from-community? + [quo/context-tag tag-params {:uri community-image} community-name chat-name] + [quo/group-avatar-tag chat-name tag-params])] + :message {:body (message-body message)}}]])) diff --git a/src/status_im2/contexts/activity_center/notification/reply/style.cljs b/src/status_im2/contexts/activity_center/notification/reply/style.cljs new file mode 100644 index 0000000000..2a5fa39078 --- /dev/null +++ b/src/status_im2/contexts/activity_center/notification/reply/style.cljs @@ -0,0 +1,12 @@ +(ns status-im2.contexts.activity-center.notification.reply.style + (:require [quo2.foundations.colors :as colors])) + +(def tag + {:background-color colors/white-opa-10}) + +(def tag-text + {:color colors/white}) + +(def lowercase-text + {:color colors/white + :text-transform :lowercase}) diff --git a/src/status_im2/contexts/activity_center/notification/reply/view.cljs b/src/status_im2/contexts/activity_center/notification/reply/view.cljs new file mode 100644 index 0000000000..b6d32369a6 --- /dev/null +++ b/src/status_im2/contexts/activity_center/notification/reply/view.cljs @@ -0,0 +1,53 @@ +(ns status-im2.contexts.activity-center.notification.reply.view + (:require [i18n.i18n :as i18n] + [quo2.core :as quo] + [quo2.foundations.colors :as colors] + [react-native.core :as rn] + [status-im.ui2.screens.chat.messages.message :as old-message] + [status-im2.common.constants :as constants] + [status-im2.contexts.activity-center.notification.common.view :as common] + [status-im2.contexts.activity-center.notification.reply.style :as style] + [utils.datetime :as datetime] + [utils.re-frame :as rf])) + +(def tag-params + {:size :small + :override-theme :dark + :color colors/primary-50 + :style style/tag + :text-style style/tag-text}) + +;; NOTE: Replies support text, image and stickers only. +(defn get-message-content + [{:keys [content-type] :as message}] + (case content-type + constants/content-type-text (get-in message [:content :text]) + + constants/content-type-image [old-message/message-content-image message] + + constants/content-type-sticker [old-message/sticker message])) + +(defn view + [{:keys [author chat-name chat-id message read timestamp]}] + (let [chat (rf/sub [:chats/chat chat-id]) + community-id (:community-id chat) + is-chat-from-community? (not (nil? community-id)) + community (rf/sub [:communities/community community-id]) + community-name (:name community) + community-image (get-in community [:images :thumbnail :uri])] + [rn/touchable-opacity + {:on-press (fn [] + (rf/dispatch [:hide-popover]) + (rf/dispatch [:chat.ui/navigate-to-chat chat-id]))} + [quo/activity-log + {:title (i18n/label :t/message-reply) + :icon :i/reply + :timestamp (datetime/timestamp->relative timestamp) + :unread? (not read) + :context [[common/user-avatar-tag author] + [quo/text {:style style/lowercase-text} (i18n/label :t/on)] + (if is-chat-from-community? + [quo/context-tag tag-params {:uri community-image} community-name chat-name] + [quo/group-avatar-tag chat-name tag-params])] + :message {:body-number-of-lines 1 + :body (get-message-content message)}}]])) diff --git a/src/status_im2/contexts/activity_center/view.cljs b/src/status_im2/contexts/activity_center/view.cljs index 2b0e2790cd..8566abb841 100644 --- a/src/status_im2/contexts/activity_center/view.cljs +++ b/src/status_im2/contexts/activity_center/view.cljs @@ -9,6 +9,7 @@ [status-im2.contexts.activity-center.notification.contact-verification.view :as contact-verification] [status-im2.contexts.activity-center.notification.mentions.view :as mentions] + [status-im2.contexts.activity-center.notification.reply.view :as reply] [status-im2.contexts.activity-center.style :as style] [utils.re-frame :as rf])) @@ -107,6 +108,9 @@ types/mention [mentions/view notification] + types/reply + [reply/view notification] + nil)]) (defn view diff --git a/src/utils/datetime.cljs b/src/utils/datetime.cljs index 054c5c6833..c6360e87a9 100644 --- a/src/utils/datetime.cljs +++ b/src/utils/datetime.cljs @@ -57,6 +57,7 @@ ;;;; Date formats (defn- short-date-format [_] "dd MMM") +(defn- short-date-format-with-time [_] "dd MMM h:mm a") (defn- datetime-within-one-week-format [^js locsym] @@ -86,6 +87,7 @@ (def date-fmt (get-formatter-fn medium-date-format)) (def time-fmt (get-formatter-fn short-time-format)) (def short-date-fmt (get-formatter-fn short-date-format)) +(def short-date-with-time-fmt (get-formatter-fn short-date-format-with-time)) (def datetime-within-one-week-fmt (get-formatter-fn datetime-within-one-week-format)) ;;;; Utilities @@ -142,10 +144,14 @@ (defn timestamp->relative [ms] - (let [datetime (t.coerce/from-long ms)] + (let [datetime (-> ms + t.coerce/from-long + (t/plus time-zone-offset))] (cond (today? datetime) - (.format ^js (time-fmt) datetime) + (str (string/capitalize (i18n/label :t/datetime-today)) + " " + (.format ^js (time-fmt) datetime)) (within-last-n-days? datetime 1) (str (string/capitalize (i18n/label :t/datetime-yesterday)) @@ -156,7 +162,7 @@ (.format ^js (datetime-within-one-week-fmt) datetime) (current-year? datetime) - (.format ^js (short-date-fmt) datetime) + (.format ^js (short-date-with-time-fmt) datetime) (previous-years? datetime) (.format ^js (date-fmt) datetime)))) diff --git a/src/utils/datetime_test.cljs b/src/utils/datetime_test.cljs index baf2a57a8b..eb8d6c4b7e 100644 --- a/src/utils/datetime_test.cljs +++ b/src/utils/datetime_test.cljs @@ -152,9 +152,9 @@ (is (= "Jan 1, 1973" (datetime/timestamp->relative 94694400000)))) (testing "formats 7 days ago or older, but in the current year" - (is (= "03 Mar" (datetime/timestamp->relative 163091745000))) - (is (= "02 Mar" (datetime/timestamp->relative 163004400000))) - (is (= "01 Jan" (datetime/timestamp->relative 157820400000)))) + (is (= "03 Mar 3:15 PM" (datetime/timestamp->relative 163091745000))) + (is (= "02 Mar 3:00 PM" (datetime/timestamp->relative 163004400000))) + (is (= "01 Jan 3:00 PM" (datetime/timestamp->relative 157820400000)))) (testing "formats dates within the last 6 days" (is (= "Sat 3:15 PM" (datetime/timestamp->relative 163523745000))) @@ -168,9 +168,9 @@ (is (= "Yesterday 11:59 PM" (datetime/timestamp->relative 163641599000)))) (testing "formats today, at various timestamps" - (is (= "3:15 PM" (datetime/timestamp->relative 163696545000))) - (is (= "12:00 PM" (datetime/timestamp->relative 163684800000))) - (is (= "12:00 AM" (datetime/timestamp->relative 163641600000)))))) + (is (= "Today 3:15 PM" (datetime/timestamp->relative 163696545000))) + (is (= "Today 12:00 PM" (datetime/timestamp->relative 163684800000))) + (is (= "Today 12:00 AM" (datetime/timestamp->relative 163641600000)))))) #_((deftest day-relative-before-yesterday-force-24H-test (with-redefs [t/*ms-fn* (constantly epoch-plus-3d)