From 06dbb20370f779af0d7be35c3f7cdfdf96c2e691 Mon Sep 17 00:00:00 2001 From: Artur Zabeyvorota Date: Sat, 21 Mar 2020 15:35:24 +0100 Subject: [PATCH] [#9657] system messages ui changes in group chat --- src/status_im/constants.cljs | 1 + .../ui/screens/chat/message/message.cljs | 118 ++++++++++-------- .../screens/chat/styles/message/message.cljs | 40 ++++-- status-go-version.json | 6 +- 4 files changed, 104 insertions(+), 61 deletions(-) diff --git a/src/status_im/constants.cljs b/src/status_im/constants.cljs index 91c6837ca10..7d522ba822c 100644 --- a/src/status_im/constants.cljs +++ b/src/status_im/constants.cljs @@ -12,6 +12,7 @@ (def ^:const content-type-status 3) (def ^:const content-type-emoji 4) (def ^:const content-type-command 5) +(def ^:const content-type-system-text 6) (def ^:const message-type-one-to-one 1) (def ^:const message-type-public-group 2) diff --git a/src/status_im/ui/screens/chat/message/message.cljs b/src/status_im/ui/screens/chat/message/message.cljs index ff5138f818a..6ec1429a80d 100644 --- a/src/status_im/ui/screens/chat/message/message.cljs +++ b/src/status_im/ui/screens/chat/message/message.cljs @@ -19,23 +19,24 @@ (defview mention-element [from] (letsubs [{:keys [ens-name alias]} [:contacts/contact-name-by-identity from]] - (str "@" (or ens-name alias)))) + (if ens-name (str "@" ens-name) alias))) (defn message-timestamp - [t justify-timestamp? outgoing content content-type] - [react/text {:style (style/message-timestamp-text - justify-timestamp? - outgoing - (:rtl? content) - (= content-type constants/content-type-emoji))} t]) + ([message] + [message-timestamp message false]) + ([{:keys [timestamp-str outgoing content content-type]} justify-timestamp?] + [react/text {:style (style/message-timestamp-text + justify-timestamp? + outgoing + (:rtl? content) + (= content-type constants/content-type-emoji))} timestamp-str])) (defn message-bubble-wrapper - [{:keys [timestamp-str outgoing content content-type] :as message} - message-content {:keys [justify-timestamp?]}] - [react/view (style/message-view message) + [message message-content appender] + [react/view + (style/message-view message) message-content - [message-timestamp timestamp-str justify-timestamp? outgoing - content content-type]]) + appender]) (defview quoted-message [message-id {:keys [from text]} outgoing current-public-key] @@ -53,7 +54,7 @@ :number-of-lines 5} (or text (:text quote))]]))) -(defn render-inline [message-text outgoing acc {:keys [type literal destination]}] +(defn render-inline [message-text outgoing content-type acc {:keys [type literal destination]}] (case type "" (conj acc literal) @@ -84,13 +85,13 @@ "mention" (conj acc [react/text-class - {:style {:color (if outgoing colors/mention-outgoing colors/mention-incoming)} - :on-press - #(re-frame/dispatch - [:chat.ui/start-chat literal {:navigation-reset? true}])} - [mention-element literal]]) - - "status-tag" + {:style {:color (cond + (= content-type constants/content-type-system-text) colors/black + outgoing colors/mention-outgoing + :else colors/mention-incoming)} + :on-press (when-not (= content-type constants/content-type-system-text) + #(re-frame/dispatch [:chat.ui/start-chat literal {:navigation-reset? true}]))} + [mention-element literal]]) "status-tag" (conj acc [react/text-class {:style {:color (if outgoing colors/white colors/blue) :text-decoration-line :underline} @@ -102,22 +103,22 @@ (conj acc literal))) -(defview message-content-status [{:keys [content]}] +(defview message-content-status [{:keys [content content-type]}] [react/view style/status-container [react/text {:style style/status-text} (reduce - (fn [acc e] (render-inline (:text content) false acc e)) + (fn [acc e] (render-inline (:text content) false content-type acc e)) [react/text-class {:style style/status-text}] (-> content :parsed-text peek :children))]]) -(defn render-block [{:keys [content outgoing]} acc +(defn render-block [{:keys [content outgoing content-type]} acc {:keys [type literal children]}] (case type "paragraph" (conj acc (reduce - (fn [acc e] (render-inline (:text content) outgoing acc e)) - [react/text-class (style/text-style outgoing)] + (fn [acc e] (render-inline (:text content) outgoing content-type acc e)) + [react/text-class (style/text-style outgoing content-type)] children)) "blockquote" @@ -132,15 +133,17 @@ acc)) -(defn render-parsed-text [{:keys [timestamp-str outgoing] :as message} tree] - (let [elements (reduce (fn [acc e] (render-block message acc e)) [react/view {}] tree) +(defn render-parsed-text [message tree] + (reduce (fn [acc e] (render-block message acc e)) [react/view {}] tree)) + +(defn render-parsed-text-with-timestamp [{:keys [timestamp-str outgoing] :as message} tree] + (let [elements (render-parsed-text message tree) timestamp [react/text {:style (style/message-timestamp-placeholder outgoing)} (str " " timestamp-str)] last-element (peek elements)] - ;; TODO (perf) - ;; Using `nth` here as slightly faster than `first`, roughly 30% - ;; It's worth considering pure js structures for this code path as - ;; it's perfomance critical + ;; Using `nth` here as slightly faster than `first`, roughly 30% + ;; It's worth considering pure js structures for this code path as + ;; it's perfomance critical (if (= react/text-class (nth last-element 0)) ;; Append timestamp to last text (conj (pop elements) (conj last-element timestamp)) @@ -154,8 +157,14 @@ [react/view (when (seq response-to) [quoted-message response-to (:quoted-message message) outgoing current-public-key]) - [render-parsed-text message (:parsed-text content)]]) - {:justify-timestamp? true}]) + [render-parsed-text-with-timestamp message (:parsed-text content)]]) + [message-timestamp message true]]) + +(defn system-text-message + [{:keys [content] :as message}] + [message-bubble-wrapper message + [react/view + [render-parsed-text message (:parsed-text content)]]]) (defn emoji-message [{:keys [content current-public-key alias outgoing] :as message}] @@ -165,7 +174,8 @@ (when response-to [quoted-message response-to (:quoted-message message) alias outgoing current-public-key]) [react/text {:style (style/emoji-message message)} - (:text content)]]])) + (:text content)]] + [message-timestamp message]])) (defn message-activity-indicator [] @@ -254,22 +264,30 @@ [react/view (style/delivery-status outgoing) [message-delivery-status message]]]) +(defn system-message-content-wrapper + [message child] + [react/view (style/message-wrapper-base message) + [react/view (style/system-message-body message) + [react/view child]]]) + (defn chat-message [{:keys [content content-type] :as message}] (if (= content-type constants/content-type-command) [message.command/comand-content message-content-wrapper message] - [react/touchable-highlight (message-press-handlers message) - [message-content-wrapper - message - (if (= content-type constants/content-type-text) - ; text message - [text-message message] - (if (= content-type constants/content-type-status) - [message-content-status message] - (if (= content-type constants/content-type-emoji) - [emoji-message message] - (if (= content-type constants/content-type-sticker) - [react/image {:style {:margin 10 :width 140 :height 140} - ;;TODO (perf) move to event - :source {:uri (contenthash/url (-> content :sticker :hash))}}] - [message-bubble-wrapper message - [react/text (str "Unhandled content-type " content-type)]]))))]])) \ No newline at end of file + (if (= content-type constants/content-type-system-text) + [system-message-content-wrapper message [system-text-message message]] + [react/touchable-highlight (message-press-handlers message) + [message-content-wrapper + message + (if (= content-type constants/content-type-text) + ; text message + [text-message message] + (if (= content-type constants/content-type-status) + [message-content-status message] + (if (= content-type constants/content-type-emoji) + [emoji-message message] + (if (= content-type constants/content-type-sticker) + [react/image {:style {:margin 10 :width 140 :height 140} + ;;TODO (perf) move to event + :source {:uri (contenthash/url (-> content :sticker :hash))}}] + [message-bubble-wrapper message + [react/text (str "Unhandled content-type " content-type)]]))))]]))) diff --git a/src/status_im/ui/screens/chat/styles/message/message.cljs b/src/status_im/ui/screens/chat/styles/message/message.cljs index 5a78480632f..1b92e56d056 100644 --- a/src/status_im/ui/screens/chat/styles/message/message.cljs +++ b/src/status_im/ui/screens/chat/styles/message/message.cljs @@ -16,6 +16,14 @@ (when (and first? (not typing)) {:padding-bottom 16})) +(defn system-message-body + [_] + {:margin-top 4 + :margin-left 8 + :margin-right 8 + :align-self :center + :align-items :center}) + (defn message-body [{:keys [outgoing] :as message}] (let [align (if outgoing :flex-end :flex-start) @@ -53,12 +61,15 @@ :font-size 12 :color colors/text-gray}) -(defn message-wrapper [{:keys [outgoing] :as message}] +(defn message-wrapper-base [message] (merge {:flex-direction :column} + (last-message-padding message))) + +(defn message-wrapper [{:keys [outgoing] :as message}] + (merge (message-wrapper-base message) (if outgoing {:margin-left 96} - {:margin-right 52}) - (last-message-padding message))) + {:margin-right 52}))) (defn message-author-wrapper [outgoing display-photo?] @@ -146,7 +157,11 @@ {:border-bottom-right-radius 4} {:border-bottom-left-radius 4}) - {:background-color (if outgoing colors/blue colors/blue-light)} + (cond + (= content-type constants/content-type-system-text) nil + outgoing {:background-color colors/blue} + :else {:background-color colors/blue-light}) + (when (= content-type constants/content-type-emoji) {:flex-direction :row}))) @@ -223,10 +238,19 @@ (update default-text-style :style assoc :color colors/white)) -(defn text-style [outgoing] - (if outgoing - outgoing-text-style - default-text-style)) +(def system-text-style + (update default-text-style :style assoc + :color colors/gray + :line-height 20 + :font-size 14 + :text-align :center + :font-weight "400")) + +(defn text-style [outgoing content-type] + (cond + (= content-type constants/content-type-system-text) system-text-style + outgoing outgoing-text-style + :else default-text-style)) (def emph-text-style (update default-text-style :style diff --git a/status-go-version.json b/status-go-version.json index 4bead052910..d8ab11d2757 100644 --- a/status-go-version.json +++ b/status-go-version.json @@ -2,7 +2,7 @@ "_comment": "DO NOT EDIT THIS FILE BY HAND. USE 'scripts/update-status-go.sh ' instead", "owner": "status-im", "repo": "status-go", - "version": "v0.49.0", - "commit-sha1": "d7bb02540a4356fb507a08ed73491c659b076fb1", - "src-sha256": "0i6s085qq67aiyzjs2lrjfnaqvbh1v1jxdsi84c176y150lwb8lw" + "version": "feature/add-content-type-group-chat", + "commit-sha1": "20fbf30581734e6d0ccb696c764ec4afc02de5fa", + "src-sha256": "0fgbiw49f33j4rx6c52cp73vaiv67kpqvm59983n4mhqnapjfj1k" }