fix: message content text alignment and spacing (#17606)
This commit is contained in:
parent
569036c1d8
commit
742c451000
|
@ -5,23 +5,22 @@
|
|||
(def container
|
||||
{:flex-wrap :nowrap
|
||||
:flex-direction :row
|
||||
:align-items :center})
|
||||
:align-items :flex-end})
|
||||
|
||||
(defn middle-dot-nickname
|
||||
(def name-container
|
||||
{:margin-right 8
|
||||
:flex-direction :row
|
||||
:align-items :flex-end
|
||||
})
|
||||
|
||||
(defn middle-dot
|
||||
[theme]
|
||||
{:color (colors/theme-colors colors/neutral-40 colors/neutral-50 theme)
|
||||
:margin-horizontal 4})
|
||||
:margin-horizontal 2})
|
||||
|
||||
(defn chat-key-text
|
||||
[theme]
|
||||
{:color (colors/theme-colors colors/neutral-40 colors/neutral-50 theme)
|
||||
:margin-left 8
|
||||
:padding-top 1})
|
||||
|
||||
(defn middle-dot-chat-key
|
||||
[theme]
|
||||
{:color (colors/theme-colors colors/neutral-40 colors/neutral-50 theme)
|
||||
:margin-left 4})
|
||||
{:color (colors/theme-colors colors/neutral-40 colors/neutral-50 theme)})
|
||||
|
||||
(defn primary-name
|
||||
[muted? theme]
|
||||
|
@ -34,14 +33,13 @@
|
|||
[theme]
|
||||
{:padding-top 1
|
||||
:flex-shrink 999999
|
||||
:min-width 40
|
||||
:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)})
|
||||
|
||||
(def icon-container
|
||||
{:margin-left 4})
|
||||
(defn icon-container
|
||||
[is-first?]
|
||||
{:margin-left (if is-first? 4 2)
|
||||
:margin-bottom 2})
|
||||
|
||||
(defn time-text
|
||||
[theme]
|
||||
{:color (colors/theme-colors colors/neutral-40 colors/neutral-50 theme)
|
||||
:padding-top 1
|
||||
:margin-left 8})
|
||||
{:color (colors/theme-colors colors/neutral-40 colors/neutral-50 theme)})
|
||||
|
|
|
@ -14,46 +14,48 @@
|
|||
muted? size theme]
|
||||
:or {size 13}}]
|
||||
[rn/view {:style (merge style/container style {:height (if (= size 15) 21.75 18.2)})}
|
||||
[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-nickname 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}])
|
||||
(cond
|
||||
verified?
|
||||
[icons/icon :main-icons2/verified
|
||||
{:size 12
|
||||
:no-color true
|
||||
:container-style style/icon-container}]
|
||||
untrustworthy?
|
||||
[icons/icon :main-icons2/untrustworthy
|
||||
{:size 12
|
||||
:no-color true
|
||||
:container-style style/icon-container}])
|
||||
[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
|
||||
{:monospace true
|
||||
{:weight :monospace
|
||||
:size :label
|
||||
:number-of-lines 1
|
||||
:style (style/chat-key-text theme)}
|
||||
|
@ -63,7 +65,7 @@
|
|||
{:monospace true
|
||||
:size :label
|
||||
:number-of-lines 1
|
||||
:style (style/middle-dot-chat-key theme)}
|
||||
:style (style/middle-dot theme)}
|
||||
middle-dot])
|
||||
(when time-str
|
||||
[text/text
|
||||
|
|
|
@ -13,7 +13,7 @@
|
|||
(assoc :background-color colors/primary-50-opa-5 :margin-bottom 4)
|
||||
|
||||
(and (not in-pinned-view?) (or mentioned pinned-by last-in-group?))
|
||||
(assoc :margin-top 8))))
|
||||
(assoc :margin-top 4))))
|
||||
|
||||
(defn user-message-content
|
||||
[{:keys [first-in-group? outgoing outgoing-status]}]
|
||||
|
|
|
@ -26,8 +26,7 @@
|
|||
{:color (colors/theme-colors colors/primary-50
|
||||
colors/primary-60)
|
||||
:selection-color :transparent
|
||||
:suppress-highlighting true
|
||||
:line-height 21})
|
||||
:suppress-highlighting true})
|
||||
|
||||
(defn code
|
||||
[]
|
||||
|
|
|
@ -104,10 +104,11 @@
|
|||
(fn [acc e]
|
||||
(render-inline acc e chat-id style-override mention-first))
|
||||
[quo/text
|
||||
{:style {:size :paragraph-1
|
||||
:margin-bottom (if mention-first (if platform/ios? 4 0) 2)
|
||||
{:size :paragraph-1
|
||||
:style {:margin-bottom (if mention-first (if platform/ios? 4 0) 2)
|
||||
:margin-top (if mention-first (if platform/ios? -4 0) -1)
|
||||
:color (when (seq style-override) colors/white)}}]
|
||||
:color (when (seq style-override) colors/white)
|
||||
:line-height 22.75}}]
|
||||
children)])
|
||||
|
||||
:edited-block
|
||||
|
|
|
@ -81,8 +81,8 @@
|
|||
(and (not composer-active?)
|
||||
more-than-eight-messages?
|
||||
(= :initial-render @big-name-visible?))
|
||||
;; Keyboard height increasing is different between iOS and Android, That's why we have two
|
||||
;; values.
|
||||
;; Keyboard height increasing is different between iOS and Android, That's why we have
|
||||
;; two values.
|
||||
(and (if platform/ios? more-than-two-messages? more-than-four-messages?)
|
||||
(< title-opacity-interpolation-start (reanimated/get-shared-value scroll-y))
|
||||
composer-active?)
|
||||
|
|
Loading…
Reference in New Issue