Truncate secondary names in username and author components (#19468)

* fix: allow name-container inside message content to shrink so secondary-name can be truncated

* fix: responsively truncate contact profile secondary-name

* fix: ensure home chat-list-items use full available width in layout

* fix: adjust layout of home chat-list-item shrinking with notification counter

* fix: adjust layout of home chat-list-item when displaying notification counter

* tidy: simplify alignment

* tweak: adjust alignment of quo/author component for different text sizes

* tidy: extract styles and reformat notification-layout
This commit is contained in:
Sean Hagstrom 2024-04-02 08:14:08 +01:00 committed by GitHub
parent feb875310e
commit dd7795a8b8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 63 additions and 37 deletions

View File

@ -9,6 +9,7 @@
(def name-container
{:margin-right 8
:flex-shrink 1
:flex-direction :row
:align-items :flex-end
})
@ -31,14 +32,13 @@
(defn secondary-name
[theme]
{:padding-top 1
:flex-shrink 999999
{:flex-shrink 999999
:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)})
(defn icon-container
[is-first?]
{:margin-left (if is-first? 4 2)
:margin-bottom 4})
:margin-bottom 2})
(defn time-text
[theme]

View File

@ -13,7 +13,11 @@
[{:keys [primary-name secondary-name style short-chat-key time-str contact? verified? untrustworthy?
muted? size theme]
:or {size 13}}]
[rn/view {:style (merge style/container style {:height (if (= size 15) 21.75 18.2)})}
[rn/view
{:style (merge style/container
style
{:height (if (= size 15) 21.75 18.2)
:padding-bottom (if (= size 15) 2 0.5)})}
[rn/view {:style style/name-container}
[text/text
{:weight :semi-bold

View File

@ -2,22 +2,27 @@
(:require [quo.foundations.colors :as colors]))
(def container
{:flex-direction :row
:height 32})
{:flex-direction :row
:justify-content :flex-start
:height 32})
(def username-text-container
{:flex-direction :row
:align-items :flex-end})
:align-items :flex-end
:flex-shrink 1})
(defn real-name-text
[theme blur?]
{:color (if blur?
(colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-40 theme)
(colors/theme-colors colors/neutral-60 colors/neutral-40 theme))})
{:color (if blur?
(colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-40 theme)
(colors/theme-colors colors/neutral-60 colors/neutral-40 theme))
:flex-shrink 1})
(defn real-name-dot
[theme blur?]
(assoc (real-name-text theme blur?) :margin-horizontal 6))
(merge (real-name-text theme blur?)
{:margin-horizontal 6
:flex-shrink 0}))
(defn status-icon-container
[name-type status]

View File

@ -26,7 +26,8 @@
{:style (style/real-name-text theme blur?)
:size :paragraph-1
:accessibility-label :real-name
:weight :medium}
:weight :medium
:number-of-lines 1}
real-name]])])
(defn- icon-20

View File

@ -11,9 +11,8 @@
:align-items :center})
(def chat-data-container
{:flex 1
:margin-left 8
:margin-right 16})
{:flex 1
:margin-left 8})
(def notification-container
{:margin-left :auto
@ -22,6 +21,11 @@
:justify-content :center
:align-items :center})
(def notification-container-layout
{:flex-grow 1
:justify-content :center
:margin-left 8})
;; TODO: duplicate of `quo.components.common.unread-grey-dot.style`
;; Replace it when this component is defined as part of `quo.components`
(defn grey-dot

View File

@ -184,35 +184,45 @@
{:customization-color color
:size :size-32}]))
(defn- notification-layout
[child]
[rn/view
{:style style/notification-container-layout}
[rn/view {:style style/notification-container}
child]])
(defn notification
[{:keys [muted group-chat unviewed-messages-count unviewed-mentions-count]}]
(let [customization-color (rf/sub [:profile/customization-color])
unread-messages? (pos? unviewed-messages-count)
unread-mentions? (pos? unviewed-mentions-count)]
[rn/view {:style style/notification-container}
(cond
muted
[quo/icon :i/muted {:color colors/neutral-40}]
(cond
muted
[notification-layout
[quo/icon :i/muted {:color colors/neutral-40}]]
(and group-chat unread-mentions?)
(and group-chat unread-mentions?)
[notification-layout
[quo/counter
{:container-style {:position :relative :right 0}
:customization-color customization-color
:accessibility-label :new-message-counter}
unviewed-mentions-count]
unviewed-mentions-count]]
;; TODO: use the grey-dot component when chat-list-item is moved to quo.components
(and group-chat unread-messages?)
;; TODO: use the grey-dot component when chat-list-item is moved to quo.components
(and group-chat unread-messages?)
[notification-layout
[rn/view
{:style (style/grey-dot)
:accessibility-label :unviewed-messages-public}]
:accessibility-label :unviewed-messages-public}]]
unread-messages?
unread-messages?
[notification-layout
[quo/counter
{:container-style {:position :relative :right 0}
:customization-color customization-color
:accessibility-label :new-message-counter}
unviewed-messages-count])]))
unviewed-messages-count]])))
(defn chat-item
[{:keys [chat-id group-chat color name last-message timestamp muted]
@ -223,23 +233,25 @@
(rf/sub [:contacts/contact-two-names-by-identity chat-id]))
{:keys [ens-verified added?] :as contact} (when-not group-chat
(rf/sub [:contacts/contact-by-address chat-id]))]
[:<>
[rn/view {:style {:flex-direction :row}}
[avatar-view
{:contact contact
:chat-id chat-id
:full-name primary-name
:color color
:muted? muted}]
[rn/view {:style style/chat-data-container}
[quo/author
{:primary-name primary-name
:secondary-name secondary-name
:size 15
:verified? ens-verified
:contact? added?
:muted? muted
:time-str (datetime/to-short-str timestamp)}]
[last-message-preview group-chat last-message muted]]
[rn/view {:style {:flex-shrink 1}}
[rn/view {:style style/chat-data-container}
[quo/author
{:primary-name primary-name
:secondary-name secondary-name
:size 15
:verified? ens-verified
:contact? added?
:muted? muted
:time-str (datetime/to-short-str timestamp)
:style {:flex-shrink 1}}]
[last-message-preview group-chat last-message muted]]]
[notification item]]))
(defn chat-user