status-im
/
status-react
mirror of https://github.com/status-im/status-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Handle long names in pinned messages (#17078) 

Handle long names in all system messages variations
This commit is contained in:
Ajay Sivan 2023-09-06 08:17:31 -07:00 committed by GitHub
parent 7609a07cc2
commit e9d76c2a0b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 70 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

107
src/quo2/components/messages/system_message.cljs
View File

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

15
src/status_im2/contexts/chat/messages/content/deleted/view.cljs
View File

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