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
GitHub
parent
aead730d28
commit
59513eae65
|
|
@ -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]
|
||||
|
|
|
|||
|
|
@ -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))
|
||||
|
|
|
|||
Loading…
Reference in New Issue