status-im
/
status-mobile
mirror of https://github.com/status-im/status-mobile.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix: message content text alignment and spacing (#17606)

This commit is contained in:
codemaster 2023-11-08 07:40:26 -06:00 committed by GitHub
parent 569036c1d8
commit 742c451000
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 64 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/quo/components/messages/author/style.cljs
View File

@ -5,23 +5,22 @@
(def container (def container
{:flex-wrap :nowrap {:flex-wrap :nowrap
:flex-direction :row :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] [theme]
{:color (colors/theme-colors colors/neutral-40 colors/neutral-50 theme) {:color (colors/theme-colors colors/neutral-40 colors/neutral-50 theme)
:margin-horizontal 4}) :margin-horizontal 2})
(defn chat-key-text (defn chat-key-text
[theme] [theme]
{:color (colors/theme-colors colors/neutral-40 colors/neutral-50 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})
(defn primary-name (defn primary-name
[muted? theme] [muted? theme]
@ -34,14 +33,13 @@
[theme] [theme]
{:padding-top 1 {:padding-top 1
:flex-shrink 999999 :flex-shrink 999999
:min-width 40
:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}) :color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)})
(def icon-container (defn icon-container
{:margin-left 4}) [is-first?]
{:margin-left (if is-first? 4 2)
:margin-bottom 2})
(defn time-text (defn time-text
[theme] [theme]
{:color (colors/theme-colors colors/neutral-40 colors/neutral-50 theme) {:color (colors/theme-colors colors/neutral-40 colors/neutral-50 theme)})
:padding-top 1
:margin-left 8})

80
src/quo/components/messages/author/view.cljs
View File

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

2
src/status_im2/contexts/chat/messages/content/style.cljs
View File

@ -13,7 +13,7 @@
(assoc :background-color colors/primary-50-opa-5 :margin-bottom 4) (assoc :background-color colors/primary-50-opa-5 :margin-bottom 4)
(and (not in-pinned-view?) (or mentioned pinned-by last-in-group?)) (and (not in-pinned-view?) (or mentioned pinned-by last-in-group?))
(assoc :margin-top 8)))) (assoc :margin-top 4))))
(defn user-message-content (defn user-message-content
[{:keys [first-in-group? outgoing outgoing-status]}] [{:keys [first-in-group? outgoing outgoing-status]}]

3
src/status_im2/contexts/chat/messages/content/text/style.cljs
View File

@ -26,8 +26,7 @@
{:color (colors/theme-colors colors/primary-50 {:color (colors/theme-colors colors/primary-50
colors/primary-60) colors/primary-60)
:selection-color :transparent :selection-color :transparent
:suppress-highlighting true :suppress-highlighting true})
:line-height 21})
(defn code (defn code
[] []

7
src/status_im2/contexts/chat/messages/content/text/view.cljs
View File

@ -104,10 +104,11 @@
(fn [acc e] (fn [acc e]
(render-inline acc e chat-id style-override mention-first)) (render-inline acc e chat-id style-override mention-first))
[quo/text [quo/text
{:style {:size :paragraph-1 {:size :paragraph-1
:margin-bottom (if mention-first (if platform/ios? 4 0) 2) :style {:margin-bottom (if mention-first (if platform/ios? 4 0) 2)
:margin-top (if mention-first (if platform/ios? -4 0) -1) :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)]) children)])
:edited-block :edited-block

4
src/status_im2/contexts/chat/messages/navigation/view.cljs
View File

@ -81,8 +81,8 @@
(and (not composer-active?) (and (not composer-active?)
more-than-eight-messages? more-than-eight-messages?
(= :initial-render @big-name-visible?)) (= :initial-render @big-name-visible?))
;; Keyboard height increasing is different between iOS and Android, That's why we have two ;; Keyboard height increasing is different between iOS and Android, That's why we have
;; values. ;; two values.
(and (if platform/ios? more-than-two-messages? more-than-four-messages?) (and (if platform/ios? more-than-two-messages? more-than-four-messages?)
(< title-opacity-interpolation-start (reanimated/get-shared-value scroll-y)) (< title-opacity-interpolation-start (reanimated/get-shared-value scroll-y))
composer-active?) composer-active?)