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
|
(ns quo.components.messages.author.style
|
||||||
(:require
|
(:require
|
||||||
[quo.foundations.colors :as colors]))
|
[quo.foundations.colors :as colors]
|
||||||
|
[react-native.platform :as platform]))
|
||||||
|
|
||||||
(def container
|
(defn- primary-name-top-offset
|
||||||
{:flex-wrap :nowrap
|
[size]
|
||||||
:flex-direction :row
|
(when (= size 15)
|
||||||
:align-items :flex-end})
|
(cond platform/ios? 1
|
||||||
|
platform/android? -0.5
|
||||||
|
:else 0)))
|
||||||
|
|
||||||
(def name-container
|
(defn- primary-name-margin-bottom-offset
|
||||||
{:margin-right 8
|
[size]
|
||||||
:flex-shrink 1
|
(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
|
: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
|
(defn middle-dot
|
||||||
[theme]
|
[theme]
|
||||||
|
|
@ -24,11 +47,12 @@
|
||||||
{:color (colors/theme-colors colors/neutral-40 colors/neutral-50 theme)})
|
{:color (colors/theme-colors colors/neutral-40 colors/neutral-50 theme)})
|
||||||
|
|
||||||
(defn primary-name
|
(defn primary-name
|
||||||
[muted? theme]
|
[muted? theme size]
|
||||||
{:color (if muted?
|
(merge (primary-name-layout-offsets size)
|
||||||
colors/neutral-50
|
{:color (if muted?
|
||||||
(colors/theme-colors colors/neutral-100 colors/white theme))
|
colors/neutral-50
|
||||||
:flex-shrink 1})
|
(colors/theme-colors colors/neutral-100 colors/white theme))
|
||||||
|
:flex-shrink 1}))
|
||||||
|
|
||||||
(defn secondary-name
|
(defn secondary-name
|
||||||
[theme]
|
[theme]
|
||||||
|
|
@ -37,8 +61,12 @@
|
||||||
|
|
||||||
(defn icon-container
|
(defn icon-container
|
||||||
[is-first?]
|
[is-first?]
|
||||||
{:margin-left (if is-first? 4 2)
|
{:margin-left (if is-first? 4 2)
|
||||||
:margin-bottom 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
|
(defn time-text
|
||||||
[theme]
|
[theme]
|
||||||
|
|
|
||||||
|
|
@ -14,69 +14,66 @@
|
||||||
muted? size theme]
|
muted? size theme]
|
||||||
:or {size 13}}]
|
:or {size 13}}]
|
||||||
[rn/view
|
[rn/view
|
||||||
{:style (merge style/container
|
{:style (merge (style/container size) style)}
|
||||||
style
|
[text/text
|
||||||
{:height (if (= size 15) 21.75 18.2)
|
{:weight :semi-bold
|
||||||
:padding-bottom (if (= size 15) 2 0.5)})}
|
:size (if (= size 15) :paragraph-1 :paragraph-2)
|
||||||
[rn/view {:style style/name-container}
|
:number-of-lines 1
|
||||||
[text/text
|
:accessibility-label :author-primary-name
|
||||||
{:weight :semi-bold
|
:style (style/primary-name muted? theme size)}
|
||||||
:size (if (= size 15) :paragraph-1 :paragraph-2)
|
primary-name]
|
||||||
:number-of-lines 1
|
(when (not (string/blank? secondary-name))
|
||||||
:accessibility-label :author-primary-name
|
[:<>
|
||||||
:style (style/primary-name muted? theme)}
|
[text/text
|
||||||
primary-name]
|
{:size :label
|
||||||
(when (not (string/blank? secondary-name))
|
:number-of-lines 1
|
||||||
[:<>
|
:style (style/middle-dot theme)}
|
||||||
[text/text
|
middle-dot]
|
||||||
{:size :label
|
[text/text
|
||||||
:number-of-lines 1
|
{:weight :medium
|
||||||
:style (style/middle-dot theme)}
|
:size :label
|
||||||
middle-dot]
|
:number-of-lines 1
|
||||||
[text/text
|
:accessibility-label :author-secondary-name
|
||||||
{:weight :medium
|
:style (style/secondary-name theme)}
|
||||||
:size :label
|
secondary-name]])
|
||||||
:number-of-lines 1
|
(when contact?
|
||||||
:accessibility-label :author-secondary-name
|
[icons/icon :main-icons2/contact
|
||||||
:style (style/secondary-name theme)}
|
{:size 12
|
||||||
secondary-name]])
|
:no-color true
|
||||||
(when contact?
|
:container-style (style/icon-container true)}])
|
||||||
[icons/icon :main-icons2/contact
|
(cond
|
||||||
{:size 12
|
verified?
|
||||||
:no-color true
|
[icons/icon :main-icons2/verified
|
||||||
:container-style (style/icon-container true)}])
|
{:size 12
|
||||||
(cond
|
:no-color true
|
||||||
verified?
|
:container-style (style/icon-container contact?)}]
|
||||||
[icons/icon :main-icons2/verified
|
untrustworthy?
|
||||||
{:size 12
|
[icons/icon :main-icons2/untrustworthy
|
||||||
:no-color true
|
{:size 12
|
||||||
:container-style (style/icon-container contact?)}]
|
:no-color true
|
||||||
untrustworthy?
|
:container-style (style/icon-container contact?)}])
|
||||||
[icons/icon :main-icons2/untrustworthy
|
[rn/view {:style style/details-container}
|
||||||
{:size 12
|
(when (and (not verified?) short-chat-key)
|
||||||
:no-color true
|
[text/text
|
||||||
:container-style (style/icon-container contact?)}])]
|
{:weight :monospace
|
||||||
(when (and (not verified?) short-chat-key)
|
:size :label
|
||||||
[text/text
|
:number-of-lines 1
|
||||||
{:weight :monospace
|
:style (style/chat-key-text theme)}
|
||||||
:size :label
|
short-chat-key])
|
||||||
:number-of-lines 1
|
(when (and (not verified?) time-str short-chat-key)
|
||||||
:style (style/chat-key-text theme)}
|
[text/text
|
||||||
short-chat-key])
|
{:monospace true
|
||||||
(when (and (not verified?) time-str short-chat-key)
|
:size :label
|
||||||
[text/text
|
:number-of-lines 1
|
||||||
{:monospace true
|
:style (style/middle-dot theme)}
|
||||||
:size :label
|
middle-dot])
|
||||||
:number-of-lines 1
|
(when time-str
|
||||||
:style (style/middle-dot theme)}
|
[text/text
|
||||||
middle-dot])
|
{:monospace true
|
||||||
(when time-str
|
:size :label
|
||||||
[text/text
|
:accessibility-label :message-timestamp
|
||||||
{:monospace true
|
:number-of-lines 1
|
||||||
:size :label
|
:style (style/time-text theme)}
|
||||||
:accessibility-label :message-timestamp
|
time-str])]])
|
||||||
:number-of-lines 1
|
|
||||||
:style (style/time-text theme)}
|
|
||||||
time-str])])
|
|
||||||
|
|
||||||
(def view (quo.theme/with-theme internal-view))
|
(def view (quo.theme/with-theme internal-view))
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue