diff --git a/src/status_im2/contexts/chat/messages/content/text/style.cljs b/src/status_im2/contexts/chat/messages/content/text/style.cljs index 6a31c0713e..68fe3e81fe 100644 --- a/src/status_im2/contexts/chat/messages/content/text/style.cljs +++ b/src/status_im2/contexts/chat/messages/content/text/style.cljs @@ -1,6 +1,5 @@ (ns status-im2.contexts.chat.messages.content.text.style - (:require - [quo2.foundations.colors :as colors])) + (:require [quo2.foundations.colors :as colors])) (def block {:border-radius 6 diff --git a/src/status_im2/contexts/chat/messages/content/text/view.cljs b/src/status_im2/contexts/chat/messages/content/text/view.cljs index 4c033f0755..dd4293e9db 100644 --- a/src/status_im2/contexts/chat/messages/content/text/view.cljs +++ b/src/status_im2/contexts/chat/messages/content/text/view.cljs @@ -5,7 +5,8 @@ [react-native.core :as rn] [status-im2.contexts.chat.messages.content.text.style :as style] [status-im2.contexts.chat.messages.link-preview.view :as link-preview] - [utils.re-frame :as rf])) + [utils.re-frame :as rf] + [utils.i18n :as i18n])) (defn render-inline @@ -48,11 +49,22 @@ :style {:color (colors/theme-colors colors/primary-50 colors/primary-60)}} (rf/sub [:messages/resolve-mention literal])]]) + :edited + (conj units + + [quo/text + {:weight :medium + :style {:font-size 11 ; Font-size must be used instead of props or the + ; styles will clash with original message text + :color (colors/theme-colors colors/neutral-40 + colors/neutral-50)}} + literal]) + (conj units literal))) (defn render-block - [blocks {:keys [type ^js literal children]}] + [blocks {:keys [type ^js literal children]} edited-at] (case (keyword type) :paragraph (conj blocks @@ -64,19 +76,46 @@ :blockquote (conj blocks [rn/view {:style style/quote} - [quo/text literal]]) + [quo/text literal]] + (when edited-at + [quo/text + {:weight :medium + :style {:font-size 11 + :margin-top 4 + :color (colors/theme-colors colors/neutral-40 colors/neutral-50)}} + (str " (" (i18n/label :t/edited) ")")])) :codeblock (conj blocks [rn/view {:style (merge style/block (style/code))} - [quo/text (subs literal 0 (dec (count literal)))]]) + [quo/text (subs literal 0 (dec (count literal)))]] + (when edited-at + [quo/text + {:weight :medium + :style {:font-size 11 + :margin-top 4 + :color (colors/theme-colors colors/neutral-40 colors/neutral-50)}} + (str " (" (i18n/label :t/edited) ")")])) blocks)) +(defn add-edited-tag + [parsed-text] + (update parsed-text + (dec (count parsed-text)) + (fn [last-literal] + (update last-literal + :children + conj + {:literal (str " (" (i18n/label :t/edited) ")") + :type :edited})))) + (defn render-parsed-text - [{:keys [content]}] - (reduce render-block + [{:keys [content edited-at]}] + (reduce (fn [acc e] + (render-block acc e edited-at)) [:<>] - (:parsed-text content))) + (cond-> (:parsed-text content) + edited-at add-edited-tag))) (defn text-content [message-data context] diff --git a/src/status_im2/contexts/chat/messages/content/view.cljs b/src/status_im2/contexts/chat/messages/content/view.cljs index 9e6585fde1..a14c28e8b5 100644 --- a/src/status_im2/contexts/chat/messages/content/view.cljs +++ b/src/status_im2/contexts/chat/messages/content/view.cljs @@ -84,68 +84,67 @@ context)}])) (defn user-message-content - [{:keys [content-type quoted-message content outgoing outgoing-status] :as message-data} - {:keys [chat-id] :as context}] - [:f> - (let [show-delivery-state? (reagent/atom false)] - (fn [] - (let [first-image (first (:album message-data)) - outgoing-status (if (= content-type constants/content-type-album) - (:outgoing-status first-image) - outgoing-status) - outgoing (if (= content-type constants/content-type-album) - (:outgoing first-image) - outgoing) - context (assoc context :on-long-press #(on-long-press message-data context)) - response-to (:response-to content)] - [rn/touchable-highlight - {:accessibility-label (if (and outgoing (= outgoing-status :sending)) - :message-sending - :message-sent) - :underlay-color (colors/theme-colors colors/neutral-5 colors/neutral-90) - :style {:border-radius 16 - :opacity (if (and outgoing (= outgoing-status :sending)) 0.5 1)} - :on-press (fn [] - (when (and outgoing - (not (= outgoing-status :sending)) - (not @show-delivery-state?)) - (reset! show-delivery-state? true) - (js/setTimeout #(reset! show-delivery-state? false) - delivery-state-showing-time-ms))) - :on-long-press #(on-long-press message-data context)} - [rn/view {:style {:padding-vertical 8}} - (when (and (seq response-to) quoted-message) - [old-message/quoted-message {:message-id response-to :chat-id chat-id}]) + [] + (let [show-delivery-state? (reagent/atom false)] + (fn [{:keys [content-type quoted-message content outgoing outgoing-status] :as message-data} + {:keys [chat-id] :as context}] + (let [first-image (first (:album message-data)) + outgoing-status (if (= content-type constants/content-type-album) + (:outgoing-status first-image) + outgoing-status) + outgoing (if (= content-type constants/content-type-album) + (:outgoing first-image) + outgoing) + context (assoc context :on-long-press #(on-long-press message-data context)) + response-to (:response-to content)] + [rn/touchable-highlight + {:accessibility-label (if (and outgoing (= outgoing-status :sending)) + :message-sending + :message-sent) + :underlay-color (colors/theme-colors colors/neutral-5 colors/neutral-90) + :style {:border-radius 16 + :opacity (if (and outgoing (= outgoing-status :sending)) 0.5 1)} + :on-press (fn [] + (when (and outgoing + (not= outgoing-status :sending) + (not @show-delivery-state?)) + (reset! show-delivery-state? true) + (js/setTimeout #(reset! show-delivery-state? false) + delivery-state-showing-time-ms))) + :on-long-press #(on-long-press message-data context)} + [rn/view {:style {:padding-vertical 8}} + (when (and (seq response-to) quoted-message) + [old-message/quoted-message {:message-id response-to :chat-id chat-id}]) + [rn/view + {:style {:padding-horizontal 12 + :flex-direction :row}} + [avatar message-data] [rn/view - {:style {:padding-horizontal 12 - :flex-direction :row}} - [avatar message-data] - [rn/view - {:style {:margin-left 8 - :flex 1}} - [author message-data] - (case content-type + {:style {:margin-left 8 + :flex 1}} + [author message-data] + (case content-type - constants/content-type-text [content.text/text-content message-data context] + constants/content-type-text [content.text/text-content message-data context] - constants/content-type-emoji - [not-implemented/not-implemented [old-message/emoji message-data]] + constants/content-type-emoji + [not-implemented/not-implemented [old-message/emoji message-data]] - constants/content-type-sticker - [not-implemented/not-implemented [old-message/sticker message-data]] + constants/content-type-sticker + [not-implemented/not-implemented [old-message/sticker message-data]] - constants/content-type-audio - [not-implemented/not-implemented [old-message/audio message-data]] + constants/content-type-audio + [not-implemented/not-implemented [old-message/audio message-data]] - constants/content-type-image - [image/image-message 0 message-data context on-long-press] + constants/content-type-image + [image/image-message 0 message-data context on-long-press] - constants/content-type-album - [album/album-message message-data context on-long-press] + constants/content-type-album + [album/album-message message-data context on-long-press] - [not-implemented/not-implemented [content.unknown/unknown-content message-data]]) - (when @show-delivery-state? - [status/status outgoing-status])]]]])))]) + [not-implemented/not-implemented [content.unknown/unknown-content message-data]]) + (when @show-delivery-state? + [status/status outgoing-status])]]]])))) (defn message-with-reactions [{:keys [pinned-by mentioned in-pinned-view? content-type last-in-group? message-id] :as message-data} diff --git a/src/status_im2/contexts/chat/messages/link_preview/view.cljs b/src/status_im2/contexts/chat/messages/link_preview/view.cljs index 0ca14c6c8b..1d995480ad 100644 --- a/src/status_im2/contexts/chat/messages/link_preview/view.cljs +++ b/src/status_im2/contexts/chat/messages/link_preview/view.cljs @@ -87,13 +87,19 @@ [community-preview cached-preview-data]))}))) (defn link-preview-loader - [link {:keys [on-long-press]}] + [link _] (reagent/create-class {:component-did-mount (fn [] (rf/dispatch [:chat.ui/load-link-preview-data link])) + :component-did-update + (fn [this [_ previous-props]] + (let [[_ props] (.-argv (.-props ^js this)) + refresh-photo? (not= previous-props props)] + (when refresh-photo? + (rf/dispatch [:chat.ui/load-link-preview-data props])))) :reagent-render - (fn [] + (fn [link {:keys [on-long-press]}] (let [cached-preview-data (rf/sub [:link-preview/cache link])] (when-let [{:keys [site title thumbnail-url error] :as preview-data} cached-preview-data] (when (and (not error) site title) @@ -141,8 +147,8 @@ (i18n/label :t/dont-ask)]]) (defn link-preview - [{:keys [content]} context] - (let [links (:links content) + [{:keys [message-id chat-id]} context] + (let [links (get-in (rf/sub [:chats/chat-messages chat-id]) [message-id :content :links]) ask-user? (rf/sub [:link-preview/link-preview-request-enabled]) enabled-sites (rf/sub [:link-preview/enabled-sites]) whitelist (rf/sub [:link-previews-whitelist])]