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:
parent
feb875310e
commit
dd7795a8b8
|
@ -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]
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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]
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Reference in New Issue