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

fix: long press & bg color animation for deleted message (#17428)

This commit is contained in:
yqrashawn 2023-10-17 13:29:47 +08:00 committed by GitHub
parent be6b02304b
commit 428d79607e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 231 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

96
src/quo2/components/messages/system_message/style.cljs Normal file
View File

@ -0,0 +1,96 @@
(ns quo2.components.messages.system-message.style
(:require
[quo2.foundations.colors :as colors]))
(defn text-color
[theme]
(colors/theme-colors colors/neutral-100 colors/white theme))
(defn time-color
[theme]
(colors/theme-colors colors/neutral-40 colors/neutral-50 theme))
(def sm-icon-wrapper {:margin-right 8})
(def sm-timestamp-wrapper {:margin-left 8})
(defn sm-timestamp-text
[theme]
{:color (time-color theme)
:text-transform :none})
(def sm-user-avatar-wrapper {:margin-right 4})
(def split-text-wrapper {:flex-direction :row :flex-shrink 0 :align-items :center})
(defn each-split-text
[theme indx label-vector]
{:color (text-color theme)
:margin-right (if (= indx (dec (count label-vector)))
0
3)})
(def system-message-base-wrapper
{:flex-direction :row
:flex 1
:align-items :center})
(def system-message-base-content-wrapper
{:align-self :center
:flex-direction :row
:flex 1})
(def system-message-deleted-wrapper
{:flex-direction :row
:align-items :center})
(defn system-message-deleted-text
[theme]
{:color (text-color theme)})
(def system-message-contact-wrapper
{:flex-direction :row
:align-items :center
:flex-shrink 1
:flex-wrap :nowrap})
(def system-message-contact-account-wrapper
{:flex-direction :row
:align-items :center
:flex-shrink 1})
(def system-message-contact-account-name
{:flex-shrink 1})
(def system-message-contact-request-wrapper
{:flex-direction :row
:align-items :center
:flex-shrink 1
:flex-wrap :nowrap})
(def system-message-contact-request-account-wrapper
{:flex-direction :row
:align-items :center
:flex-shrink 1})
(def system-message-contact-request-account-name
{:flex-shrink 1})
(def system-message-pinned-wrapper
{:flex 1})
(def system-message-pinned-content-wrapper
{:flex-direction :row
:align-items :center
:flex-wrap :nowrap})
(def system-message-pinned-content-pinned-by
{:flex-shrink 1})
(def system-message-deleted-animation-start-bg-color colors/danger-50-opa-5)
(def system-message-deleted-animation-end-bg-color colors/danger-50-opa-0)
(def system-message-wrapper
{:padding-horizontal 12
:padding-vertical 8
:flex 1})

122
src/quo2/components/messages/system_message.cljs → src/quo2/components/messages/system_message/view.cljs
View File

@ -1,26 +1,19 @@
(ns quo2.components.messages.system-message
(ns quo2.components.messages.system-message.view
(:require
[clojure.string :as string]
[quo2.components.avatars.icon-avatar :as icon-avatar]
[quo2.components.avatars.user-avatar.view :as user-avatar]
[quo2.components.markdown.text :as text]
[quo2.foundations.colors :as colors]
[quo2.components.messages.system-message.style :as style]
[quo2.theme :as quo.theme]
[react-native.core :as rn]
[react-native.reanimated :as reanimated]
[utils.i18n :as i18n]))
(defn text-color
[theme]
(colors/theme-colors colors/neutral-100 colors/white theme))
(defn time-color
[theme]
(colors/theme-colors colors/neutral-40 colors/neutral-50 theme))
(defn sm-icon
[{:keys [icon color opacity]}]
[rn/view
{:margin-right 8}
{:style style/sm-icon-wrapper}
[icon-avatar/icon-avatar
{:size :size-32
:icon icon
@ -29,16 +22,15 @@
(defn sm-timestamp
[timestamp theme]
[rn/view {:margin-left 8}
[rn/view style/sm-timestamp-wrapper
[text/text
{:size :label
:style {:color (time-color theme)
:text-transform :none}}
:style (style/sm-timestamp-text theme)}
timestamp]])
(defn sm-user-avatar
[display-name photo-path]
[rn/view {:margin-right 4}
[rn/view style/sm-user-avatar-wrapper
[user-avatar/user-avatar
{:size :xxxs
:full-name display-name
@ -48,33 +40,22 @@
(defn split-text
[label theme add-pred?]
(let [color (text-color theme)
label-vector (map-indexed vector (string/split label " "))]
[rn/view {:style {:flex-direction :row :flex-shrink 0 :align-items :center}}
(let [label-vector (map-indexed vector (string/split label " "))]
[rn/view {:style style/split-text-wrapper}
(when add-pred?
[text/text {} " "])
(for [[indx item] label-vector]
^{:key indx}
[text/text
{:size :paragraph-2
:style {:color color
:margin-right (if (= indx (dec (count label-vector)))
0
3)}}
:style (style/each-split-text theme indx label-vector)}
item])]))
(defn system-message-base
[{:keys [icon]} child]
[rn/view
{:flex-direction :row
:flex 1
:align-items :center}
[rn/view {:style style/system-message-base-wrapper}
[sm-icon icon]
[rn/view
{:align-self :center
:flex-direction :row
:flex 1}
child]])
[rn/view {:style style/system-message-base-content-wrapper} child]])
(defn system-message-deleted-internal
[{:keys [label child theme timestamp]}]
@ -82,12 +63,12 @@
{:icon {:icon :i/delete
:color :danger
:opacity 5}}
[rn/view {:style {:flex-direction :row :align-items :center}}
[rn/view {:style style/system-message-deleted-wrapper}
(if child
child
[text/text
{:size :paragraph-2
:style {:color (text-color theme)}}
:style (style/system-message-deleted-text theme)}
(or label (i18n/label :t/message-deleted))])
[sm-timestamp timestamp theme]]])
@ -100,16 +81,13 @@
:color (or customization-color :primary)
:opacity 5}}
[rn/view
{:flex-direction :row
:align-items :center
:flex-shrink 1
:flex-wrap :nowrap}
[rn/view {:flex-direction :row :align-items :center :flex-shrink 1}
{:style style/system-message-contact-wrapper}
[rn/view {:style style/system-message-contact-account-wrapper}
[sm-user-avatar display-name photo-path]
[text/text
{:weight :semi-bold
:number-of-lines 1
:style {:flex-shrink 1}
:style style/system-message-contact-account-name
:size :paragraph-2}
display-name]]
[split-text label theme true]
@ -137,17 +115,14 @@
:color (or customization-color :primary)
:opacity 5}}
[rn/view
{:flex-direction :row
:align-items :center
:flex-shrink 1
:flex-wrap :nowrap}
{:style style/system-message-contact-request-wrapper}
(when-not incoming? [split-text "Contact request sent to" theme false])
[rn/view {:flex-direction :row :align-items :center :flex-shrink 1}
[rn/view {:style style/system-message-contact-request-account-wrapper}
[sm-user-avatar display-name photo-path]
[text/text
{:weight :semi-bold
:number-of-lines 1
:style {:flex-shrink 1}
:style style/system-message-contact-request-account-name
:size :paragraph-2}
display-name]]
(when incoming? [split-text "sent you a contact request" theme true])
@ -161,15 +136,13 @@
{:icon {:icon :i/pin
:color (or customization-color :primary)
:opacity 5}}
[rn/view {:style {:flex 1}}
[rn/view {:style style/system-message-pinned-wrapper}
[rn/view
{:flex-direction :row
:align-items :center
:flex-wrap :nowrap}
{:style style/system-message-pinned-content-wrapper}
[text/text
{:weight :semi-bold
:number-of-lines 1
:style {:flex-shrink 1}
:style style/system-message-pinned-content-pinned-by
:size :paragraph-2}
pinned-by]
[split-text (i18n/label :t/pinned-a-message) theme true]
@ -178,13 +151,44 @@
(def system-message-pinned (quo.theme/with-theme system-message-pinned-internal))
(defn f-system-message
[{:keys [type animate-bg-color? bg-color-animation-duration on-long-press]
:or {bg-color-animation-duration 1000}
:as data}]
(let [animated-bg-color (reanimated/use-shared-value
(if animate-bg-color?
style/system-message-deleted-animation-start-bg-color
style/system-message-deleted-animation-end-bg-color))
wrapper (if (or on-long-press animate-bg-color?)
reanimated/touchable-opacity
rn/view)
animated-style (reanimated/apply-animations-to-style
{:background-color animated-bg-color}
(assoc style/system-message-wrapper
:background-color
animated-bg-color))]
(when animate-bg-color?
(reanimated/animate-shared-value-with-delay
animated-bg-color
style/system-message-deleted-animation-end-bg-color
0
:linear
bg-color-animation-duration))
[wrapper
{:style (if (or on-long-press animate-bg-color?)
animated-style
style/system-message-wrapper)
:on-long-press on-long-press}
(case type
:pinned [system-message-pinned data]
:deleted [system-message-deleted data]
:contact-request [system-message-contact-request data]
:added [system-message-added data]
:removed [system-message-removed data]
nil)]))
(defn system-message
[{:keys [type] :as data}]
[rn/view {:padding-horizontal 12 :padding-vertical 8 :flex 1}
(case type
:pinned [system-message-pinned data]
:deleted [system-message-deleted data]
:contact-request [system-message-contact-request data]
:added [system-message-added data]
:removed [system-message-removed data]
nil)])
[message]
[:f> f-system-message message])

4
src/quo2/core.cljs
View File

@ -84,7 +84,7 @@
quo2.components.markdown.text
quo2.components.messages.author.view
quo2.components.messages.gap
quo2.components.messages.system-message
quo2.components.messages.system-message.view
quo2.components.navigation.bottom-nav-tab.view
quo2.components.navigation.floating-shell-button.view
quo2.components.navigation.page-nav.view
@ -295,7 +295,7 @@
;;;; Messages
(def gap quo2.components.messages.gap/gap)
(def system-message quo2.components.messages.system-message/system-message)
(def system-message quo2.components.messages.system-message.view/system-message)
;;;; Notifications
(def activity-log quo2.components.notifications.activity-log.view/view)

1
src/quo2/foundations/colors.cljs
View File

@ -191,6 +191,7 @@
(def system-yellow "#FFD60A")
;;50 with transparency
(def danger-50-opa-0 (alpha danger-50 0))
(def danger-50-opa-5 (alpha danger-50 0.05))
(def danger-50-opa-10 (alpha danger-50 0.1))
(def danger-50-opa-20 (alpha danger-50 0.2))

7
src/status_im2/contexts/chat/menus/pinned_messages/view.cljs
View File

@ -7,7 +7,6 @@
[react-native.gesture :as gesture]
[react-native.safe-area :as safe-area]
[status-im2.contexts.chat.menus.pinned-messages.style :as style]
[status-im2.contexts.chat.messages.content.deleted.view :as content.deleted]
[status-im2.contexts.chat.messages.content.view :as message]
[utils.i18n :as i18n]
[utils.re-frame :as rf]))
@ -22,10 +21,8 @@
(first community-images)))))
(defn message-render-fn
[{:keys [deleted? deleted-for-me?] :as message} _ _ context]
(if (or deleted? deleted-for-me?)
[content.deleted/deleted-message message context]
[message/message message context (atom false)]))
[message _ _ context]
[message/message message context (atom false)])
(defn pinned-messages
[chat-id]

58
src/status_im2/contexts/chat/messages/content/deleted/view.cljs
View File

@ -2,6 +2,7 @@
(:require
[quo2.core :as quo]
[react-native.core :as rn]
[utils.datetime :as datetime]
[utils.i18n :as i18n]
[utils.re-frame :as rf]))
@ -33,28 +34,49 @@
(i18n/label :t/deleted-this-message)]])
(defn deleted-by-message
[{:keys [deleted-by deleted-undoable-till timestamp-str deleted-for-me-undoable-till from]}
on-long-press-fn]
[{:keys [deleted-by timestamp-str from on-long-press animation-duration]}]
(let [;; deleted message with nil deleted-by is deleted by (:from message)
display-name (first (rf/sub [:contacts/contact-two-names-by-identity (or deleted-by from)]))
display-name (first (rf/sub [:contacts/contact-two-names-by-identity
(or deleted-by from)]))
photo-path (rf/sub [:chats/photo-path (or deleted-by from)])]
[quo/system-message
{:type :deleted
:timestamp timestamp-str
:child [user-xxx-deleted-this-message
{:display-name display-name :profile-picture photo-path}]
:on-long-press on-long-press-fn
:non-pressable? (if on-long-press-fn false true)
:animate-landing? (or deleted-undoable-till deleted-for-me-undoable-till)}]))
{:type :deleted
:animate-bg-color? animation-duration
:bg-color-animation-duration animation-duration
:on-long-press on-long-press
:timestamp timestamp-str
:child [user-xxx-deleted-this-message
{:display-name display-name :profile-picture photo-path}]}]))
(defn deleted-message
[{:keys [deleted? deleted-by timestamp-str from] :as message}]
(let [pub-key (rf/sub [:multiaccount/public-key])
deleted-by-me? (= (or deleted-by from) pub-key)]
[{:keys [deleted? deleted-for-me? deleted-by pinned timestamp-str from
on-long-press deleted-undoable-till deleted-for-me-undoable-till]
:as message}
{:keys [message-pin-enabled in-pinned-view?]}]
(let [pub-key (rf/sub [:multiaccount/public-key])
deleted-by-me? (= (or deleted-by from) pub-key)
animation-duration (when-let [deleted-till (or deleted-undoable-till
deleted-for-me-undoable-till)]
(- deleted-till (datetime/timestamp)))
;; enable long press only when
;; undo delete timer timedout
;; message pinned and user has permission to unpin
on-long-press (when (and (not animation-duration)
(or (and (or in-pinned-view? pinned) message-pin-enabled)
(and (not deleted?) deleted-for-me?)))
on-long-press)]
(if (and deleted? (not deleted-by-me?))
[deleted-by-message message]
[deleted-by-message
(assoc message
:on-long-press on-long-press
:animation-duration animation-duration)]
[quo/system-message
{:type :deleted
:label (i18n/label
(if deleted? :t/message-deleted-for-everyone :t/message-deleted-for-you))
:timestamp timestamp-str}])))
{:type :deleted
:animate-bg-color? animation-duration
:bg-color-animation-duration animation-duration
:on-long-press on-long-press
:label (i18n/label
(if deleted?
:t/message-deleted-for-everyone
:t/message-deleted-for-you))
:timestamp timestamp-str}])))

41
src/status_im2/contexts/chat/messages/content/view.cljs
View File

@ -216,19 +216,22 @@
(def user-message-content (quo.theme/with-theme user-message-content-internal))
(defn on-long-press
[message-data context keyboard-shown?]
[{:keys [deleted? deleted-for-me?] :as message-data} context keyboard-shown?]
(rf/dispatch [:dismiss-keyboard])
(rf/dispatch [:show-bottom-sheet
{:content (drawers/reactions-and-actions message-data context)
{:content (drawers/reactions-and-actions message-data context)
:border-radius 16
:selected-item (fn []
[rn/view {:pointer-events :none}
[user-message-content
{:message-data message-data
:context context
:keyboard-shown? keyboard-shown?
:show-reactions? true
:in-reaction-and-action-menu? true}]])}]))
:selected-item
(if (or deleted? deleted-for-me?)
(fn [] [content.deleted/deleted-message message-data])
(fn []
[rn/view {:pointer-events :none}
[user-message-content
{:message-data message-data
:context context
:keyboard-shown? keyboard-shown?
:show-reactions? true
:show-user-info? true}]]))}]))
(defn system-message?
[content-type]
@ -246,10 +249,20 @@
[rn/view
{:style (style/message-container in-pinned-view? pinned-by mentioned last-in-group?)
:accessibility-label :chat-item}
(if (or (system-message? content-type) deleted? deleted-for-me?)
(if (or deleted? deleted-for-me?)
[content.deleted/deleted-message message-data]
[system-message-content message-data])
(cond
(system-message? content-type)
[system-message-content message-data]
(or deleted? deleted-for-me?)
[content.deleted/deleted-message
(assoc message-data
:on-long-press
#(on-long-press message-data
context
keyboard-shown?))
context]
:else
[user-message-content
{:message-data message-data
:context context