Tweak layout of quo/author component to use flex-baseline (#19489)

* tweak: re-structure layout of quo/author component to use flex-baseline for alignment

* tweak: use top on container to balance layout while using top to offset primary-name

* tidy: remove margin-bottom: 0

* tweak: add comments and fix layout glitch
This commit is contained in:
Sean Hagstrom 2024-04-05 11:33:35 +01:00 committed by GitHub
parent aead730d28
commit 59513eae65
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 106 additions and 81 deletions

View File

@ -1,18 +1,41 @@
(ns quo.components.messages.author.style
(:require
[quo.foundations.colors :as colors]))
[quo.foundations.colors :as colors]
[react-native.platform :as platform]))
(def container
{:flex-wrap :nowrap
:flex-direction :row
:align-items :flex-end})
(defn- primary-name-top-offset
[size]
(when (= size 15)
(cond platform/ios? 1
platform/android? -0.5
:else 0)))
(def name-container
{:margin-right 8
:flex-shrink 1
(defn- primary-name-margin-bottom-offset
[size]
(when (and (= size 15)
(or platform/ios? platform/android?))
-0.25))
(defn- primary-name-layout-offsets
[size]
;; NOTE(seanstrom): We need to sometimes offset the primary-name to align the baseline of the text
;; while avoiding shifting elements downward.
{:top (primary-name-top-offset size)
:margin-bottom (primary-name-margin-bottom-offset size)})
(defn container
[size]
{:flex-shrink 1
:flex-wrap :nowrap
:flex-direction :row
:align-items :flex-end
})
:align-items :baseline
;; NOTE(seanstrom): Because we're offseting the primary-name we need to inverse the offset on the
;; container to avoid shifting elements downward
:top (* -1 (primary-name-top-offset size))})
(def details-container
{:flex-direction :row
:margin-left 8})
(defn middle-dot
[theme]
@ -24,11 +47,12 @@
{:color (colors/theme-colors colors/neutral-40 colors/neutral-50 theme)})
(defn primary-name
[muted? theme]
{:color (if muted?
colors/neutral-50
(colors/theme-colors colors/neutral-100 colors/white theme))
:flex-shrink 1})
[muted? theme size]
(merge (primary-name-layout-offsets size)
{:color (if muted?
colors/neutral-50
(colors/theme-colors colors/neutral-100 colors/white theme))
:flex-shrink 1}))
(defn secondary-name
[theme]
@ -37,8 +61,12 @@
(defn icon-container
[is-first?]
{:margin-left (if is-first? 4 2)
:margin-bottom 2})
{:margin-left (if is-first? 4 2)
;; NOTE(seanstrom): Because we're using flex baseline to align elements
;; we need to offset the icon container to match the designs.
:top (cond platform/ios? 1
platform/android? 2
:else 0)})
(defn time-text
[theme]

View File

@ -14,69 +14,66 @@
muted? size theme]
:or {size 13}}]
[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
:size (if (= size 15) :paragraph-1 :paragraph-2)
:number-of-lines 1
:accessibility-label :author-primary-name
:style (style/primary-name muted? theme)}
primary-name]
(when (not (string/blank? secondary-name))
[:<>
[text/text
{:size :label
:number-of-lines 1
:style (style/middle-dot theme)}
middle-dot]
[text/text
{:weight :medium
:size :label
:number-of-lines 1
:accessibility-label :author-secondary-name
:style (style/secondary-name theme)}
secondary-name]])
(when contact?
[icons/icon :main-icons2/contact
{:size 12
:no-color true
:container-style (style/icon-container true)}])
(cond
verified?
[icons/icon :main-icons2/verified
{:size 12
:no-color true
:container-style (style/icon-container contact?)}]
untrustworthy?
[icons/icon :main-icons2/untrustworthy
{:size 12
:no-color true
:container-style (style/icon-container contact?)}])]
(when (and (not verified?) short-chat-key)
[text/text
{:weight :monospace
:size :label
:number-of-lines 1
:style (style/chat-key-text theme)}
short-chat-key])
(when (and (not verified?) time-str short-chat-key)
[text/text
{:monospace true
:size :label
:number-of-lines 1
:style (style/middle-dot theme)}
middle-dot])
(when time-str
[text/text
{:monospace true
:size :label
:accessibility-label :message-timestamp
:number-of-lines 1
:style (style/time-text theme)}
time-str])])
{:style (merge (style/container size) style)}
[text/text
{:weight :semi-bold
:size (if (= size 15) :paragraph-1 :paragraph-2)
:number-of-lines 1
:accessibility-label :author-primary-name
:style (style/primary-name muted? theme size)}
primary-name]
(when (not (string/blank? secondary-name))
[:<>
[text/text
{:size :label
:number-of-lines 1
:style (style/middle-dot theme)}
middle-dot]
[text/text
{:weight :medium
:size :label
:number-of-lines 1
:accessibility-label :author-secondary-name
:style (style/secondary-name theme)}
secondary-name]])
(when contact?
[icons/icon :main-icons2/contact
{:size 12
:no-color true
:container-style (style/icon-container true)}])
(cond
verified?
[icons/icon :main-icons2/verified
{:size 12
:no-color true
:container-style (style/icon-container contact?)}]
untrustworthy?
[icons/icon :main-icons2/untrustworthy
{:size 12
:no-color true
:container-style (style/icon-container contact?)}])
[rn/view {:style style/details-container}
(when (and (not verified?) short-chat-key)
[text/text
{:weight :monospace
:size :label
:number-of-lines 1
:style (style/chat-key-text theme)}
short-chat-key])
(when (and (not verified?) time-str short-chat-key)
[text/text
{:monospace true
:size :label
:number-of-lines 1
:style (style/middle-dot theme)}
middle-dot])
(when time-str
[text/text
{:monospace true
:size :label
:accessibility-label :message-timestamp
:number-of-lines 1
:style (style/time-text theme)}
time-str])]])
(def view (quo.theme/with-theme internal-view))