Chat user dp (#14314)

* feat: chat-user-dp
This commit is contained in:
Omar Basem 2022-11-10 18:26:57 +04:00 committed by GitHub
parent 466dfe56d7
commit 61fd5fd791
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 78 additions and 58 deletions

View File

@ -66,27 +66,40 @@
parsed-text)] parsed-text)]
(:components result))) (:components result)))
(defn verified-or-contact-icon [{:keys [ens-verified added?]}]
(if ens-verified
[rn/view {:style {:margin-left 5 :margin-top 4}}
[icons/icon :main-icons2/verified {:no-color true
:size 12
:color (colors/theme-colors colors/success-50 colors/success-60)}]]
(when added?
[rn/view {:style {:margin-left 5 :margin-top 4}}
[icons/icon :main-icons2/contact {:no-color true
:size 12
:color (colors/theme-colors colors/primary-50 colors/primary-60)}]])))
(defn display-name-view [display-name contact timestamp] (defn display-name-view [display-name contact timestamp]
[rn/view {:style {:flex-direction :row}} [rn/view {:style {:flex-direction :row}}
[text/text {:weight :semi-bold [text/text {:weight :semi-bold
:size :paragraph-1} :size :paragraph-1}
display-name] display-name]
(if (:ens-verified contact) [verified-or-contact-icon contact]
[rn/view {:style {:margin-left 5 :margin-top 4}}
[icons/icon :main-icons2/verified {:no-color true
:size 12
:color (colors/theme-colors colors/success-50 colors/success-60)}]]
(when (:added? contact)
[rn/view {:style {:margin-left 5 :margin-top 4}}
[icons/icon :main-icons2/contact {:no-color true
:size 12
:color (colors/theme-colors colors/primary-50 colors/primary-60)}]]))
[text/text {:style (style/timestamp)} [text/text {:style (style/timestamp)}
(time/to-short-str timestamp)]]) (time/to-short-str timestamp)]])
(defn display-pic-view [group-chat color display-name photo-path]
(if group-chat
[rn/view {:style (style/group-chat-icon color)}
[icons/icon :main-icons2/group {:size 16 :color colors/white-opa-70}]]
[user-avatar/user-avatar {:full-name display-name
:profile-picture photo-path
:status-indicator? true
:online? true
:size :small
:ring? false}]))
(defn messages-home-item [item] (defn messages-home-item [item]
(let [{:keys [chat-id (let [{:keys [chat-id
chat-type
color color
group-chat group-chat
last-message last-message
@ -106,17 +119,8 @@
(>evt [:search/home-filter-changed nil]) (>evt [:search/home-filter-changed nil])
(>evt [:accept-all-activity-center-notifications-from-chat chat-id])) (>evt [:accept-all-activity-center-notifications-from-chat chat-id]))
:on-long-press #(>evt [:bottom-sheet/show-sheet :on-long-press #(>evt [:bottom-sheet/show-sheet
{:content (fn [] [actions/actions chat-type chat-id])}])}) {:content (fn [] [actions/actions item])}])})
(if group-chat [display-pic-view group-chat color display-name photo-path]
[rn/view {:style (style/group-chat-icon color)}
[icons/icon :main-icons2/group {:size 16 :color colors/white-opa-70}]]
[user-avatar/user-avatar {:full-name display-name
:profile-picture photo-path
:status-indicator? true
:online? true
:size :small
:ring? false}])
[rn/view {:style {:margin-left 8}} [rn/view {:style {:margin-left 8}}
[display-name-view display-name contact timestamp] [display-name-view display-name contact timestamp]
(if (string/blank? (get-in last-message [:content :parsed-text])) (if (string/blank? (get-in last-message [:content :parsed-text]))

View File

@ -27,7 +27,6 @@
[status-im.ui.screens.chat.message.link-preview :as link-preview] [status-im.ui.screens.chat.message.link-preview :as link-preview]
[status-im.ui.screens.chat.message.reactions :as reactions] [status-im.ui.screens.chat.message.reactions :as reactions]
[status-im.ui.screens.chat.message.reactions-row :as reaction-row] [status-im.ui.screens.chat.message.reactions-row :as reaction-row]
[status-im.ui.screens.chat.photos :as photos]
[status-im.ui.screens.chat.sheets :as sheets] [status-im.ui.screens.chat.sheets :as sheets]
[status-im.ui.screens.chat.styles.message.message :as style] [status-im.ui.screens.chat.styles.message.message :as style]
[status-im.ui.screens.chat.styles.photos :as photos.style] [status-im.ui.screens.chat.styles.photos :as photos.style]
@ -35,10 +34,14 @@
[status-im.ui.screens.communities.icon :as communities.icon] [status-im.ui.screens.communities.icon :as communities.icon]
[status-im.ui2.screens.chat.components.reply :as components.reply] [status-im.ui2.screens.chat.components.reply :as components.reply]
[status-im.utils.config :as config] [status-im.utils.config :as config]
[status-im.utils.handlers :refer [<sub >evt]] [status-im.utils.re-frame :as rf]
[status-im.utils.security :as security] [status-im.utils.security :as security]
[quo2.components.icon :as icons] [quo2.components.icon :as icons]
[status-im.utils.datetime :as time]) [status-im.utils.datetime :as time]
[status-im.ui2.screens.chat.components.message-home-item.view :as message-home-item]
[quo2.components.avatars.user-avatar :as user-avatar]
[quo2.components.markdown.text :as text]
[status-im.utils.utils :as utils])
(:require-macros [status-im.utils.views :refer [defview letsubs]])) (:require-macros [status-im.utils.views :refer [defview letsubs]]))
(defview mention-element [from] (defview mention-element [from]
@ -130,7 +133,7 @@
{:style (merge {:color (if (system-text? content-type) quo.colors/black colors/primary-50)} {:style (merge {:color (if (system-text? content-type) quo.colors/black colors/primary-50)}
(if (system-text? content-type) typography/font-regular typography/font-medium)) (if (system-text? content-type) typography/font-regular typography/font-medium))
:on-press (when-not (system-text? content-type) :on-press (when-not (system-text? content-type)
#(>evt [:chat.ui/show-profile literal]))} #(rf/dispatch [:chat.ui/show-profile literal]))}
[mention-element literal]]]) [mention-element literal]]])
"status-tag" "status-tag"
(conj acc [rn/text (conj acc [rn/text
@ -236,6 +239,7 @@
(= outgoing-status :not-sent)) (= outgoing-status :not-sent))
[message-not-sent-text chat-id message-id])) [message-not-sent-text chat-id message-id]))
;; TODO (Omar): a reminder to clean these defviews
(defview message-author-name [from opts max-length] (defview message-author-name [from opts max-length]
(letsubs [contact-with-names [:contacts/contact-by-identity from]] (letsubs [contact-with-names [:contacts/contact-by-identity from]]
(chat.utils/format-author contact-with-names opts max-length))) (chat.utils/format-author contact-with-names opts max-length)))
@ -275,12 +279,30 @@
[rn/text {:style {:text-align :center [rn/text {:style {:text-align :center
:color quo.colors/blue}} (i18n/label :t/view)]]]]))) :color quo.colors/blue}} (i18n/label :t/view)]]]])))
(defn display-name-view [display-name contact timestamp show-key?]
[rn/view {:style {:flex-direction :row}}
[text/text {:weight :semi-bold
:size :paragraph-2
:number-of-lines 1
:style {:width "45%"}}
display-name]
[message-home-item/verified-or-contact-icon contact]
(when show-key?
[text/text {:size :label
:style {:color (colors/theme-colors colors/neutral-50 colors/neutral-40)
:margin-left 8
:margin-top 2}}
(str (utils/get-shortened-address (:public-key contact)) " • " (time/to-short-str timestamp))])])
(defn message-content-wrapper (defn message-content-wrapper
"Author, userpic and delivery wrapper" "Author, userpic and delivery wrapper"
[{:keys [last-in-group? identicon from in-popover? timestamp-str [{:keys [last-in-group? timestamp-str timestamp
deleted-for-me? deleted-for-me-undoable-till pinned] deleted-for-me? deleted-for-me-undoable-till pinned from]
:as message} content {:keys [modal close-modal]}] :as message} content]
(let [response-to (:response-to (:content message))] (let [response-to (:response-to (:content message))
display-name (first (rf/sub [:contacts/contact-two-names-by-identity from]))
contact (rf/sub [:contacts/contact-by-address from])
photo-path (when-not (empty? (:images contact)) (rf/sub [:chats/photo-path from]))]
(if deleted-for-me? (if deleted-for-me?
[system-message/system-message [system-message/system-message
{:type :deleted {:type :deleted
@ -298,30 +320,17 @@
[quoted-message response-to (:quoted-message message)]) [quoted-message response-to (:quoted-message message)])
[rn/view {:style (style/message-body) [rn/view {:style (style/message-body)
:pointer-events :box-none} :pointer-events :box-none}
[rn/view (style/message-author-userpic) [rn/view {:style {:width 40}}
(when (or (and (seq response-to) (:quoted-message message)) last-in-group? pinned) (when (or (and (seq response-to) (:quoted-message message)) last-in-group? pinned)
[rn/touchable-opacity {:active-opacity 1 [user-avatar/user-avatar {:full-name display-name
:on-press #(do (when modal (close-modal)) :profile-picture photo-path
(>evt [:bottom-sheet/hide]) :status-indicator? true
(re-frame/dispatch [:chat.ui/show-profile from]))} :online? true
[photos/member-photo from identicon]])] :size :small
:ring? false}])]
[rn/view {:style (style/message-author-wrapper)} [rn/view {:style (style/message-author-wrapper)}
(when (or (and (seq response-to) (:quoted-message message)) last-in-group? pinned) (when (or (and (seq response-to) (:quoted-message message)) last-in-group? pinned)
[rn/view {:style {:flex-direction :row :align-items :center}} [display-name-view display-name contact timestamp true])
[rn/touchable-opacity {:style style/message-author-touchable
:disabled in-popover?
:on-press #(do (when modal (close-modal))
(>evt [:bottom-sheet/hide])
(re-frame/dispatch [:chat.ui/show-profile from]))}
[message-author-name from {:modal modal}]]
[rn/text
{:style (merge
{:padding-left 5
:margin-top 2}
(style/message-timestamp-text))
:accessibility-label :message-timestamp}
timestamp-str]])
;; MESSAGE CONTENT ;; MESSAGE CONTENT
content content
[link-preview/link-preview-wrapper (:links (:content message)) false false]]] [link-preview/link-preview-wrapper (:links (:content message)) false false]]]
@ -752,9 +761,9 @@
(def list-key-fn #(or (:message-id %) (:value %))) (def list-key-fn #(or (:message-id %) (:value %)))
(defn pinned-messages-list [chat-id] (defn pinned-messages-list [chat-id]
(let [pinned-messages (vec (vals (<sub [:chats/pinned chat-id]))) (let [pinned-messages (vec (vals (rf/sub [:chats/pinned chat-id])))
current-chat (<sub [:chats/current-chat]) current-chat (rf/sub [:chats/current-chat])
community (<sub [:communities/community (:community-id current-chat)])] community (rf/sub [:communities/community (:community-id current-chat)])]
[rn/view {:accessibility-label :pinned-messages-list} [rn/view {:accessibility-label :pinned-messages-list}
[rn/text {:style (merge typography/heading-1 typography/font-semi-bold {:margin-horizontal 20 [rn/text {:style (merge typography/heading-1 typography/font-semi-bold {:margin-horizontal 20
:color (colors/theme-colors colors/neutral-100 colors/white)})} :color (colors/theme-colors colors/neutral-100 colors/white)})}
@ -800,7 +809,7 @@
(defn pin-system-message [{:keys [from in-popover? timestamp-str chat-id] :as message} {:keys [modal close-modal]}] (defn pin-system-message [{:keys [from in-popover? timestamp-str chat-id] :as message} {:keys [modal close-modal]}]
(let [response-to (:response-to (:content message))] (let [response-to (:response-to (:content message))]
[rn/touchable-opacity {:on-press (fn [] [rn/touchable-opacity {:on-press (fn []
(>evt [:bottom-sheet/show-sheet (rf/dispatch [:bottom-sheet/show-sheet
{:content #(pinned-messages-list chat-id)}])) {:content #(pinned-messages-list chat-id)}]))
:active-opacity 1 :active-opacity 1
:style (merge {:flex-direction :row :margin-vertical 8} (style/message-wrapper message))} :style (merge {:flex-direction :row :margin-vertical 8} (style/message-wrapper message))}
@ -840,7 +849,7 @@
[render-parsed-text message (:parsed-text content)]]]]])) [render-parsed-text message (:parsed-text content)]]]]]))
(defn pinned-banner [chat-id] (defn pinned-banner [chat-id]
(let [pinned-messages (<sub [:chats/pinned chat-id]) (let [pinned-messages (rf/sub [:chats/pinned chat-id])
latest-pin-text (get-in (last (vals pinned-messages)) [:content :text]) latest-pin-text (get-in (last (vals pinned-messages)) [:content :text])
pins-count (count (seq pinned-messages))] pins-count (count (seq pinned-messages))]
(when (> pins-count 0) (when (> pins-count 0)

View File

@ -0,0 +1,7 @@
(ns status-im.utils.re-frame
(:require [re-frame.core :as re-frame]))
(def sub (comp deref re-frame/subscribe))
(def dispatch re-frame/dispatch)