[#9657] system messages ui changes in group chat

Signed-off-by: Andrea Maria Piana <andrea.maria.piana@gmail.com>
2020-03-21 15:35:24 +01:00 · 2020-03-21 15:35:24 +01:00 · cda7564bbe
parent 81070f07b0
commit cda7564bbe
5 changed files with 109 additions and 65 deletions
--- 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)
--- 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,31 @@
   [react/view (style/delivery-status outgoing)
    [message-delivery-status message]]])

+(defn system-message-content-wrapper
+  [message child]
+  [react/view {:style (style/message-wrapper-base message)
+               :accessibility-label :chat-item}
+   [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)]]))))]]))
+    (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)]]))))]])))
--- 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
--- 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 <tag>' instead",
    "owner": "status-im",
    "repo": "status-go",
-    "version": "v0.49.0",
-    "commit-sha1": "d7bb02540a4356fb507a08ed73491c659b076fb1",
-    "src-sha256": "0i6s085qq67aiyzjs2lrjfnaqvbh1v1jxdsi84c176y150lwb8lw"
+    "version": "v0.50.0",
+    "commit-sha1": "a5874fdb21ab2d18e97945307332788b66ea8439",
+    "src-sha256": "02fp45fmy51dkdcrdnl5wvsz2kjibvhq7m171f0rjk7rjkyk6lz2"
 }
--- a/test/appium/tests/atomic/chats/test_group_chat.py
+++ b/test/appium/tests/atomic/chats/test_group_chat.py
@ -5,19 +5,19 @@ from views.sign_in_view import SignInView


 def return_left_chat_system_message(username):
-    return "@%s left the group" % username
+    return "%s left the group" % username


 def return_created_chat_system_message(username, chat_name):
-    return "@%s created the group %s" % (username, chat_name)
+    return "%s created the group %s" % (username, chat_name)


 def return_joined_chat_system_message(username):
-    return "@%s joined the group" % username
+    return "%s joined the group" % username


 def return_made_admin_system_message(username):
-    return "@%s has been made admin" % username
+    return "%s has been made admin" % username


 def create_users(driver_1, driver_2):