diff --git a/src/status_im/subs/general.cljs b/src/status_im/subs/general.cljs index 65aa21b642..7b69da8a9d 100644 --- a/src/status_im/subs/general.cljs +++ b/src/status_im/subs/general.cljs @@ -295,4 +295,4 @@ (or (= network-type "wifi") (and (= network-type "cellular") - syncing-on-mobile-network?)))) \ No newline at end of file + syncing-on-mobile-network?)))) diff --git a/src/status_im/ui2/screens/chat/components/message_home_item/view.cljs b/src/status_im/ui2/screens/chat/components/message_home_item/view.cljs index 2e0e07b4bd..89951940c9 100644 --- a/src/status_im/ui2/screens/chat/components/message_home_item/view.cljs +++ b/src/status_im/ui2/screens/chat/components/message_home_item/view.cljs @@ -66,27 +66,40 @@ parsed-text)] (: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] [rn/view {:style {:flex-direction :row}} [text/text {:weight :semi-bold :size :paragraph-1} display-name] - (if (:ens-verified 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)}]])) + [verified-or-contact-icon contact] [text/text {:style (style/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] (let [{:keys [chat-id - chat-type color group-chat last-message @@ -106,17 +119,8 @@ (>evt [:search/home-filter-changed nil]) (>evt [:accept-all-activity-center-notifications-from-chat chat-id])) :on-long-press #(>evt [:bottom-sheet/show-sheet - {:content (fn [] [actions/actions chat-type chat-id])}])}) - (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}]) - + {:content (fn [] [actions/actions item])}])}) + [display-pic-view group-chat color display-name photo-path] [rn/view {:style {:margin-left 8}} [display-name-view display-name contact timestamp] (if (string/blank? (get-in last-message [:content :parsed-text])) diff --git a/src/status_im/ui2/screens/chat/messages/message.cljs b/src/status_im/ui2/screens/chat/messages/message.cljs index 6a7b26a7bd..eb2fe188c2 100644 --- a/src/status_im/ui2/screens/chat/messages/message.cljs +++ b/src/status_im/ui2/screens/chat/messages/message.cljs @@ -27,7 +27,6 @@ [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-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.styles.message.message :as 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.ui2.screens.chat.components.reply :as components.reply] [status-im.utils.config :as config] - [status-im.utils.handlers :refer [evt]] + [status-im.utils.re-frame :as rf] [status-im.utils.security :as security] [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]])) (defview mention-element [from] @@ -130,7 +133,7 @@ {: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)) :on-press (when-not (system-text? content-type) - #(>evt [:chat.ui/show-profile literal]))} + #(rf/dispatch [:chat.ui/show-profile literal]))} [mention-element literal]]]) "status-tag" (conj acc [rn/text @@ -236,6 +239,7 @@ (= outgoing-status :not-sent)) [message-not-sent-text chat-id message-id])) +;; TODO (Omar): a reminder to clean these defviews (defview message-author-name [from opts max-length] (letsubs [contact-with-names [:contacts/contact-by-identity from]] (chat.utils/format-author contact-with-names opts max-length))) @@ -275,12 +279,30 @@ [rn/text {:style {:text-align :center :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 "Author, userpic and delivery wrapper" - [{:keys [last-in-group? identicon from in-popover? timestamp-str - deleted-for-me? deleted-for-me-undoable-till pinned] - :as message} content {:keys [modal close-modal]}] - (let [response-to (:response-to (:content message))] + [{:keys [last-in-group? timestamp-str timestamp + deleted-for-me? deleted-for-me-undoable-till pinned from] + :as message} content] + (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? [system-message/system-message {:type :deleted @@ -298,30 +320,17 @@ [quoted-message response-to (:quoted-message message)]) [rn/view {:style (style/message-body) :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) - [rn/touchable-opacity {:active-opacity 1 - :on-press #(do (when modal (close-modal)) - (>evt [:bottom-sheet/hide]) - (re-frame/dispatch [:chat.ui/show-profile from]))} - [photos/member-photo from identicon]])] - + [user-avatar/user-avatar {:full-name display-name + :profile-picture photo-path + :status-indicator? true + :online? true + :size :small + :ring? false}])] [rn/view {:style (style/message-author-wrapper)} (when (or (and (seq response-to) (:quoted-message message)) last-in-group? pinned) - [rn/view {:style {:flex-direction :row :align-items :center}} - [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]]) + [display-name-view display-name contact timestamp true]) ;; MESSAGE CONTENT content [link-preview/link-preview-wrapper (:links (:content message)) false false]]] @@ -752,9 +761,9 @@ (def list-key-fn #(or (:message-id %) (:value %))) (defn pinned-messages-list [chat-id] - (let [pinned-messages (vec (vals (evt [:bottom-sheet/show-sheet - {:content #(pinned-messages-list chat-id)}])) + (rf/dispatch [:bottom-sheet/show-sheet + {:content #(pinned-messages-list chat-id)}])) :active-opacity 1 :style (merge {:flex-direction :row :margin-vertical 8} (style/message-wrapper message))} [rn/view {:style {:width photos.style/default-size @@ -840,7 +849,7 @@ [render-parsed-text message (:parsed-text content)]]]]])) (defn pinned-banner [chat-id] - (let [pinned-messages ( pins-count 0) diff --git a/src/status_im/utils/re_frame.cljs b/src/status_im/utils/re_frame.cljs new file mode 100644 index 0000000000..117674af2b --- /dev/null +++ b/src/status_im/utils/re_frame.cljs @@ -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) +