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

Show replies on activity center 

Signed-off-by: Brian Sztamfater <brian@status.im>
This commit is contained in:
Brian Sztamfater 2021-06-22 10:35:54 -03:00
parent 944098ad84
commit 6ee9f6a409
No known key found for this signature in database
GPG Key ID: 59EB921E0706B48F
8 changed files with 117 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
resources/images/icons/tiny_reply@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 505 B

BIN
resources/images/icons/tiny_reply@3x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 701 B

1
src/status_im/constants.cljs
View File

@ -157,3 +157,4 @@
(def ^:const activity-center-notification-type-one-to-one-chat 1) (def ^:const activity-center-notification-type-one-to-one-chat 1)
(def ^:const activity-center-notification-type-private-group-chat 2) (def ^:const activity-center-notification-type-private-group-chat 2)
(def ^:const activity-center-notification-type-mention 3) (def ^:const activity-center-notification-type-mention 3)
(def ^:const activity-center-notification-type-reply 4)

7
src/status_im/data_store/activities.cljs
View File

@ -6,6 +6,11 @@
(defn rpc->type [{:keys [type name] :as chat}] (defn rpc->type [{:keys [type name] :as chat}]
(cond (cond
(= constants/activity-center-notification-type-reply type)
(assoc chat
:chat-name name
:chat-type constants/private-group-chat-type)
(= constants/activity-center-notification-type-mention type) (= constants/activity-center-notification-type-mention type)
(assoc chat (assoc chat
:chat-type constants/private-group-chat-type :chat-type constants/private-group-chat-type
@ -29,8 +34,10 @@
(-> item (-> item
rpc->type rpc->type
(clojure.set/rename-keys {:lastMessage :last-message (clojure.set/rename-keys {:lastMessage :last-message
:replyMessage :reply-message
:chatId :chat-id}) :chatId :chat-id})
(assoc :color (rand-nth colors/chat-colors)) (assoc :color (rand-nth colors/chat-colors))
(update :last-message #(when % (messages/<-rpc %))) (update :last-message #(when % (messages/<-rpc %)))
(update :message #(when % (messages/<-rpc %))) (update :message #(when % (messages/<-rpc %)))
(update :reply-message #(when % (messages/<-rpc %)))
(dissoc :chatId))) (dissoc :chatId)))

6
src/status_im/notifications_center/core.cljs
View File

@ -55,11 +55,13 @@
[{:keys [db]} chat-id] [{:keys [db]} chat-id]
(let [notifications (get-in db [:activity.center/notifications :notifications]) (let [notifications (get-in db [:activity.center/notifications :notifications])
notifications-from-chat (filter #(= chat-id (:chat-id %)) notifications) notifications-from-chat (filter #(= chat-id (:chat-id %)) notifications)
notifications-from-chat-not-read (filter #(and (= chat-id (:chat-id %))
(not (:read %))) notifications)
ids (map :id notifications-from-chat)] ids (map :id notifications-from-chat)]
{:db (-> db {:db (-> db
(update-in [:activity.center/notifications :notifications] (update-in [:activity.center/notifications :notifications]
(fn [items] (remove #(get ids (:id %)) items))) (fn [items] (filter #(not (= chat-id (:chat-id %))) items)))
(update :activity.center/notifications-count - (count ids))) (update :activity.center/notifications-count - (min (db :activity.center/notifications-count) (count notifications-from-chat-not-read))))
::json-rpc/call [{:method (json-rpc/call-ext-method "acceptActivityCenterNotifications") ::json-rpc/call [{:method (json-rpc/call-ext-method "acceptActivityCenterNotifications")
:params [ids] :params [ids]
:js-response true :js-response true

3
src/status_im/subs.cljs
View File

@ -1806,7 +1806,8 @@
(let [supported-notifications (filter (fn [{:keys [type]}] (let [supported-notifications (filter (fn [{:keys [type]}]
(or (= constants/activity-center-notification-type-mention type) (or (= constants/activity-center-notification-type-mention type)
(= constants/activity-center-notification-type-one-to-one-chat type) (= constants/activity-center-notification-type-one-to-one-chat type)
(= constants/activity-center-notification-type-private-group-chat type))) notifications)] (= constants/activity-center-notification-type-private-group-chat type)
(= constants/activity-center-notification-type-reply type))) notifications)]
(group-notifications-by-date (map #(assoc % :timestamp (or (:timestamp %) (:timestamp (or (:message %) (:last-message %))))) supported-notifications))))) (group-notifications-by-date (map #(assoc % :timestamp (or (:timestamp %) (:timestamp (or (:message %) (:last-message %))))) supported-notifications)))))
;;WALLET TRANSACTIONS ================================================================================================== ;;WALLET TRANSACTIONS ==================================================================================================

33
src/status_im/ui/screens/notifications_center/styles.cljs
View File

@ -1,13 +1,17 @@
(ns status-im.ui.screens.notifications-center.styles (ns status-im.ui.screens.notifications-center.styles
(:require [status-im.ui.components.colors :as colors] (:require [status-im.ui.components.colors :as colors]
[quo.design-system.colors :as quo-colors])) [quo.design-system.spacing :as spacing]))
(def notification-message-text (def notification-message-text
{:flex 1 {:flex 1
:align-self :stretch :align-self :stretch
:line-height 22 :line-height 22
:font-size 15 :font-size 15})
:color (:text-01 @quo-colors/theme)})
(def notification-reply-text
{:line-height 20
:font-size 13
:color colors/text-gray})
(def mention-text (def mention-text
{:color colors/blue}) {:color colors/blue})
@ -24,6 +28,7 @@
:right 16}) :right 16})
(def group-info-container (def group-info-container
(merge
{:height 22 {:height 22
:align-self :baseline :align-self :baseline
:align-items :center :align-items :center
@ -33,9 +38,22 @@
:border-width 1 :border-width 1
:margin-top 6 :margin-top 6
:margin-bottom 10 :margin-bottom 10
:padding-left 7 :flex-direction :row}
:padding-right 5 (:x-tiny spacing/padding-horizontal)))
:flex-direction :row})
(def reply-message-container
(merge
{:height 22
:align-self :baseline
:align-items :center
:border-radius 11
:border-color colors/gray-transparent-40
:border-width 1
:margin-top 6
:margin-bottom 10
:margin-right 15
:flex-direction :row}
(:x-tiny spacing/padding-horizontal)))
(defn notification-container [read] (defn notification-container [read]
{:min-height 64 {:min-height 64
@ -61,6 +79,9 @@
(def group-icon (def group-icon
{:margin-right 4}) {:margin-right 4})
(def reply-icon
{:margin-right 1})
(def community-info-container (def community-info-container
{:flex-direction :row {:flex-direction :row
:align-items :center}) :align-items :center})

70
src/status_im/ui/screens/notifications_center/views/notification.cljs
View File

@ -15,25 +15,28 @@
[status-im.ui.screens.home.views.inner-item :as home-item])) [status-im.ui.screens.home.views.inner-item :as home-item]))
(defn mention-element [from] (defn mention-element [from]
(str "@" @(re-frame/subscribe [:contacts/contact-name-by-identity from]))) (let [contact-name @(re-frame/subscribe [:contacts/contact-name-by-identity from])]
(str (when-not (= (subs contact-name 0 1) "@") "@") contact-name)))
(def max-notification-length 160) (def max-notification-length 160)
(def max-notification-lines 2) (def max-notification-lines 2)
(def max-reply-lines 1)
(defn add-parsed-to-message [acc {:keys [type destination literal children]}] (defn add-parsed-to-message [acc style text-weight {:keys [type destination literal children]}]
(let [result (case type (let [result (case type
"paragraph" "paragraph"
(reduce (reduce
(fn [{:keys [_ length] :as acc-paragraph} parsed-child] (fn [{:keys [_ length] :as acc-paragraph} parsed-child]
(if (>= length max-notification-length) (if (>= length max-notification-length)
(reduced acc-paragraph) (reduced acc-paragraph)
(add-parsed-to-message acc-paragraph parsed-child))) (add-parsed-to-message acc-paragraph style text-weight parsed-child)))
{:components [quo/text] {:components [quo/text {:style style
:weight text-weight}]
:length 0} :length 0}
children) children)
"mention" "mention"
{:components [quo/text {:style styles/mention-text} [mention-element literal]] {:components [quo/text {:style (merge style styles/mention-text)} [mention-element literal]]
:length 4} ;; we can't predict name length so take the smallest possible :length 4} ;; we can't predict name length so take the smallest possible
"status-tag" "status-tag"
@ -42,40 +45,40 @@
"link" "link"
(home-item/truncate-literal destination) (home-item/truncate-literal destination)
(home-item/truncate-literal literal))] (home-item/truncate-literal (string/replace literal #"\n" " ")))]
{:components (conj (:components acc) (:components result)) {:components (conj (:components acc) (:components result))
:length (+ (:length acc) (:length result))})) :length (+ (:length acc) (:length result))}))
(defn message-wrapper (defn message-wrapper
([] (message-wrapper 1)) ([] (message-wrapper 1 styles/notification-reply-text))
([number-of-lines] ([number-of-lines style]
[react/text-class {:style styles/notification-message-text [react/text-class {:style style
:number-of-lines number-of-lines :number-of-lines number-of-lines
:ellipsize-mode :tail :ellipsize-mode :tail
:accessibility-label :chat-message-text}])) :accessibility-label :chat-message-text}]))
(defn render-notification-message (defn render-message
"Render the preview of a notification message to a maximum of max-length characters" "Render the preview of a message with a maximum length, maximum lines, style and font weight"
([parsed-text] (render-notification-message parsed-text max-notification-length 1)) ([parsed-text] (render-message parsed-text max-notification-length max-notification-lines styles/notification-message-text :regular))
([parsed-text max-length number-of-lines] ([parsed-text max-length number-of-lines style text-weight]
(let [result (let [result
(reduce (reduce
(fn [{:keys [_ length] :as acc-text} new-text-chunk] (fn [{:keys [_ length] :as acc-text} new-text-chunk]
(if (>= length max-length) (if (>= length max-length)
(reduced acc-text) (reduced acc-text)
(add-parsed-to-message acc-text new-text-chunk))) (add-parsed-to-message acc-text style text-weight new-text-chunk)))
{:components (message-wrapper number-of-lines) {:components (message-wrapper number-of-lines style)
:length 0} :length 0}
parsed-text)] parsed-text)]
(:components result)))) (:components result))))
(defn message-content-text [{:keys [content content-type community-id]}] (defn message-content-text [{:keys [content content-type community-id]} max-number-of-lines style text-weight]
[react/view [react/view
(cond (cond
(not (and content content-type)) (not (and content content-type))
[react/text {:style (merge [react/text {:style (merge
styles/notification-message-text style
{:color colors/gray}) {:color colors/gray})
:accessibility-label :no-messages-text} :accessibility-label :no-messages-text}
(i18n/label :t/no-messages)] (i18n/label :t/no-messages)]
@ -86,31 +89,31 @@
:source {:uri (contenthash/url (-> content :sticker :hash))}}] :source {:uri (contenthash/url (-> content :sticker :hash))}}]
(= constants/content-type-image content-type) (= constants/content-type-image content-type)
[react/text {:style styles/notification-message-text [react/text {:style style
:accessibility-label :no-messages-text} :accessibility-label :no-messages-text}
(i18n/label :t/image)] (i18n/label :t/image)]
(= constants/content-type-audio content-type) (= constants/content-type-audio content-type)
[react/text {:style styles/notification-message-text [react/text {:style style
:accessibility-label :no-messages-text} :accessibility-label :no-messages-text}
(i18n/label :t/audio)] (i18n/label :t/audio)]
(= constants/content-type-community content-type) (= constants/content-type-community content-type)
(let [{:keys [name]} (let [{:keys [name]}
@(re-frame/subscribe [:communities/community community-id])] @(re-frame/subscribe [:communities/community community-id])]
[react/text {:style styles/notification-message-text [react/text {:style style
:accessibility-label :no-messages-text} :accessibility-label :no-messages-text}
(i18n/label :t/community-message-preview {:community-name name})]) (i18n/label :t/community-message-preview {:community-name name})])
(string/blank? (:text content)) (string/blank? (:text content))
[react/text {:style styles/notification-message-text} [react/text {:style style}
""] ""]
(:text content) (:text content)
(render-notification-message (:parsed-text content) max-notification-length max-notification-lines))]) (render-message (:parsed-text content) max-notification-length max-number-of-lines style text-weight))])
(defn activity-text-item [home-item opts] (defn activity-text-item [home-item opts]
(let [{:keys [chat-id chat-name message last-message muted read group-chat timestamp type]} home-item (let [{:keys [chat-id chat-name message last-message reply-message muted read group-chat timestamp type]} home-item
message (or message last-message) message (or message last-message)
{:keys [community-id]} (<sub [:chat-by-id chat-id]) {:keys [community-id]} (<sub [:chat-by-id chat-id])
{:keys [name]} @(re-frame/subscribe [:communities/community community-id]) {:keys [name]} @(re-frame/subscribe [:communities/community community-id])
@ -129,7 +132,9 @@
:ellipsize-mode :tail :ellipsize-mode :tail
:number-of-lines 1 :number-of-lines 1
:style styles/title-text} :style styles/title-text}
(if (= type constants/activity-center-notification-type-mention) (if (or
(= type constants/activity-center-notification-type-mention)
(= type constants/activity-center-notification-type-reply))
sender sender
[home-item/chat-item-title chat-id muted group-chat chat-name])] [home-item/chat-item-title chat-id muted group-chat chat-name])]
[react/text {:style styles/datetime-text [react/text {:style styles/datetime-text
@ -138,8 +143,8 @@
;;TODO (perf) move to event ;;TODO (perf) move to event
(home-item/memo-timestamp timestamp)] (home-item/memo-timestamp timestamp)]
[react/view {:style styles/notification-message-container} [react/view {:style styles/notification-message-container}
[message-content-text (select-keys message [:content :content-type :community-id])] [message-content-text (select-keys message [:content :content-type :community-id]) max-notification-lines styles/notification-message-text]
(when (= type constants/activity-center-notification-type-mention) (cond (= type constants/activity-center-notification-type-mention)
[react/view {:style styles/group-info-container [react/view {:style styles/group-info-container
:accessibility-label :chat-name-container} :accessibility-label :chat-name-container}
[icons/icon [icons/icon
@ -162,4 +167,15 @@
[quo/text {:color :secondary [quo/text {:color :secondary
:weight :medium :weight :medium
:size :small} :size :small}
(str (when community-id "#") chat-name)]])]]])) (str (when community-id "#") chat-name)]]
(= type constants/activity-center-notification-type-reply)
[react/view {:style styles/reply-message-container
:accessibility-label :reply-message-container}
[icons/icon
:main-icons/tiny-reply
{:color colors/gray
:width 18
:height 18
:container-style styles/reply-icon}]
[message-content-text (select-keys reply-message [:content :content-type :community-id]) max-reply-lines styles/notification-reply-text :medium]])]]]))