Handle long names in pinned messages (#17078)

Handle long names in all system messages variations

src/quo2/components/messages/system_message.cljs

@@ -2,7 +2,6 @@
   (:require [quo2.components.avatars.icon-avatar :as icon-avatar]
             [quo2.components.avatars.user-avatar.view :as user-avatar]
             [quo2.components.markdown.text :as text]
-            [quo2.components.messages.author.view :as author]
             [quo2.foundations.colors :as colors]
             [react-native.core :as rn]
             [utils.i18n :as i18n]
@@ -29,7 +28,7 @@
 
 (defn sm-timestamp
   [timestamp theme]
-  [rn/view {:margin-left 8 :margin-top 2}
+  [rn/view {:margin-left 8}
    [text/text
     {:size  :label
      :style {:color          (time-color theme)
@@ -48,20 +47,23 @@
 
 (defn split-text
   [label theme add-pred?]
-  (let [color (text-color theme)]
+  (let [color        (text-color theme)
-    [:<>
+        label-vector (map-indexed vector (string/split label " "))]
+    [rn/view {:style {:flex-direction :row :flex-shrink 0 :align-items :center}}
      (when add-pred?
        [text/text {} " "])
-     (for [[indx item] (map-indexed vector (string/split label " "))]
+     (for [[indx item] label-vector]
        ^{:key indx}
        [text/text
         {:size  :paragraph-2
          :style {:color        color
-                 :margin-right 3}}
+                 :margin-right (if (= indx (dec (count label-vector)))
+                                 0
+                                 3)}}
         item])]))
 
 (defn system-message-base
-  [{:keys [icon timestamp theme]} child]
+  [{:keys [icon]} child]
   [rn/view
    {:flex-direction :row
     :flex           1
@@ -70,25 +72,23 @@
    [rn/view
     {:align-self     :center
      :flex-direction :row
-     :margin-right   40 ;; dirty hack, flexbox won't work as expected
      :flex           1}
-    child
+    child]])
-    [sm-timestamp timestamp theme]]])
 
 (defn system-message-deleted-internal
   [{:keys [label child theme timestamp]}]
   [system-message-base
    {:icon {:icon    :i/delete
            :color   :danger
-                :opacity 5}
+           :opacity 5}}
-    :timestamp timestamp
+   [rn/view {:style {:flex-direction :row :align-items :center}}
-    :theme     theme}
     (if child
       child
       [text/text
        {:size  :paragraph-2
         :style {:color (text-color theme)}}
-      (or label (i18n/label :t/message-deleted))])])
+       (or label (i18n/label :t/message-deleted))])
+    [sm-timestamp timestamp theme]]])
 
 (def system-message-deleted (quo.theme/with-theme system-message-deleted-internal))
 
@@ -97,19 +97,22 @@
   [system-message-base
    {:icon {:icon    icon
            :color   (or customization-color :primary)
-                :opacity 5}
+           :opacity 5}}
-    :timestamp timestamp}
    [rn/view
     {:flex-direction :row
      :align-items    :center
-     :flex-wrap      :wrap}
+     :flex-shrink    1
-    [rn/view {:flex-direction :row :align-items :center}
+     :flex-wrap      :nowrap}
+    [rn/view {:flex-direction :row :align-items :center :flex-shrink 1}
      [sm-user-avatar display-name photo-path]
      [text/text
       {:weight          :semi-bold
+       :number-of-lines 1
+       :style           {:flex-shrink 1}
        :size            :paragraph-2}
       display-name]]
-    [split-text label theme true]]])
+    [split-text label theme true]
+    [sm-timestamp timestamp theme]]])
 
 (def system-message-contact (quo.theme/with-theme system-message-contact-internal))
 
@@ -131,20 +134,23 @@
   [system-message-base
    {:icon {:icon    :i/add-user
            :color   (or customization-color :primary)
-                :opacity 5}
+           :opacity 5}}
-    :timestamp timestamp}
    [rn/view
     {:flex-direction :row
      :align-items    :center
-     :flex-wrap      :wrap}
+     :flex-shrink    1
+     :flex-wrap      :nowrap}
     (when-not incoming? [split-text "Contact request sent to" theme false])
-    [rn/view {:flex-direction :row :align-items :center}
+    [rn/view {:flex-direction :row :align-items :center :flex-shrink 1}
      [sm-user-avatar display-name photo-path]
      [text/text
       {:weight          :semi-bold
+       :number-of-lines 1
+       :style           {:flex-shrink 1}
        :size            :paragraph-2}
       display-name]]
-    (when incoming? [split-text "sent you a contact request" theme true])]])
+    (when incoming? [split-text "sent you a contact request" theme true])
+    [sm-timestamp timestamp theme]]])
 
 (def system-message-contact-request (quo.theme/with-theme system-message-contact-request-internal))
 
@@ -153,15 +159,20 @@
   [system-message-base
    {:icon {:icon    :i/pin
            :color   (or customization-color :primary)
-                :opacity 5}
+           :opacity 5}}
-    :timestamp timestamp}
+   [rn/view {:style {:flex 1}}
-   [rn/view
     [rn/view
      {:flex-direction :row
-      :flex-wrap      :wrap
+      :align-items    :center
-      :height         18.2}
+      :flex-wrap      :nowrap}
-     [author/author {:primary-name pinned-by}]
+     [text/text
-     [split-text (i18n/label :pinned-a-message) theme true]]
+      {:weight          :semi-bold
+       :number-of-lines 1
+       :style           {:flex-shrink 1}
+       :size            :paragraph-2}
+      pinned-by]
+     [split-text (i18n/label :pinned-a-message) theme true]
+     [sm-timestamp timestamp theme]]
     (when child child)]])
 
 (def system-message-pinned (quo.theme/with-theme system-message-pinned-internal))

src/status_im2/contexts/chat/messages/content/deleted/view.cljs

@@ -6,7 +6,10 @@
 
 (defn user-xxx-deleted-this-message
   [{:keys [display-name profile-picture]}]
-  [:<>
+  [rn/view
+   {:style {:flex-direction :row
+            :align-items    :center
+            :flex-shrink    1}}
    [rn/view
     {:style {:margin-right 4
              :align-self   :center}}
@@ -15,11 +18,15 @@
       :profile-picture   profile-picture
       :status-indicator? false
       :size              :xxxs}]]
-   [quo/author
+   [quo/text
-    {:primary-name display-name
+    {:weight          :semi-bold
-     :style        {:margin-right 4}}]
+     :number-of-lines 1
+     :style           {:flex-shrink 1 :margin-right 4}
+     :size            :paragraph-2}
+    display-name]
    [quo/text
     {:size            :paragraph-2
+     :flex-shrink     0
      :number-of-lines 1}
     (i18n/label :t/deleted-this-message)]])