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

Fix chat spacings (#19015) 

* fix: chat system messages spacing

* fix: spacing between chat actions and time header

* fix: distance from last message to shell button

* fix: addressed review comment

* fix: conflict bug

* fix: chat spacings
This commit is contained in:
Lungu Cristian 2024-03-26 12:07:48 +02:00 committed by GitHub
parent 17b64ab3ba
commit fd4d64c53e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 53 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/quo/components/community/channel_action/style.cljs
View File

@ -13,6 +13,7 @@
[{:keys [color pressed? theme]}]
{:height 102
:padding 12
:padding-bottom 10
:border-radius 16
:background-color (colors/resolve-color color theme (if pressed? 20 10))
:justify-content :space-between})
@ -20,4 +21,5 @@
(def channel-action-row
{:flex-direction :row
:justify-content :space-between
:align-items :center})
:align-items :center
:padding-right 2})

7
src/quo/components/dividers/date.cljs
View File

@ -8,9 +8,10 @@
(defn date
[value]
[rn/view
{:margin-vertical 12
:padding-right 20
:padding-left 60}
{:padding-top 8
:padding-bottom 12
:padding-right 20
:padding-left 60}
[text/text
{:weight :medium
:accessibility-label :divider-date-text

16
src/status_im/contexts/chat/messenger/messages/content/style.cljs
View File

@ -5,17 +5,15 @@
(def ^:private message-padding-scaling-ratio 4.5)
(defn message-container
([]
(message-container false nil nil false))
([in-pinned-view? pinned-by mentioned last-in-group?]
(cond-> {:border-radius 16
:margin-horizontal 8}
[{:keys [in-pinned-view? pinned-by mentioned last-in-group? system-message?]}]
(cond-> {:border-radius 16
:margin-horizontal 8}
(and (not in-pinned-view?) (or mentioned pinned-by))
(assoc :background-color colors/primary-50-opa-5 :margin-bottom 4)
(and (not in-pinned-view?) (or mentioned pinned-by))
(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 4))))
(and (not in-pinned-view?) (not system-message?) (or mentioned pinned-by last-in-group?))
(assoc :margin-top 4)))
(defn user-message-content
[{:keys [outgoing outgoing-status six-reactions? window-scale small-screen?]}]

53
src/status_im/contexts/chat/messenger/messages/content/view.cljs
View File

@ -292,7 +292,7 @@
:show-user-info? false
:show-reactions? true}]]))}]))
(defn system-message?
(defn check-if-system-message?
[content-type]
(#{constants/content-type-system-text
constants/content-type-community
@ -305,28 +305,35 @@
(defn message
[{:keys [pinned-by mentioned content-type last-in-group? deleted? deleted-for-me?]
:as message-data} {:keys [in-pinned-view?] :as context} keyboard-shown?]
[rn/view
{:style (style/message-container in-pinned-view? pinned-by mentioned last-in-group?)
:accessibility-label :chat-item}
(cond
(system-message? content-type)
[system-message-content message-data]
(let [system-message? (check-if-system-message? content-type)]
[rn/view
{:style (style/message-container
{:in-pinned-view? in-pinned-view?
:pinned-by pinned-by
:mentioned mentioned
:last-in-group? last-in-group?
:system-message? system-message?})
:accessibility-label :chat-item}
(cond
system-message?
[system-message-content message-data]
(or deleted? deleted-for-me?)
[content.deleted/deleted-message
(assoc message-data
:on-long-press
#(on-long-press message-data
context
keyboard-shown?))
context]
(or deleted? deleted-for-me?)
[content.deleted/deleted-message
(assoc message-data
:on-long-press
#(on-long-press message-data
context
keyboard-shown?))
context]
(= content-type constants/content-type-bridge-message)
[bridge-message-content message-data]
:else
[user-message-content
{:message-data message-data
:context context
:keyboard-shown? keyboard-shown?
:show-reactions? true}])])
(= content-type constants/content-type-bridge-message)
[bridge-message-content message-data]
:else
[user-message-content
{:message-data message-data
:context context
:keyboard-shown? keyboard-shown?
:show-reactions? true}])]))

5
src/status_im/contexts/chat/messenger/messages/list/style.cljs
View File

@ -8,8 +8,9 @@
{:flex 1
:z-index 2})
(def list-container
{:padding-vertical 16})
(def chat-actions-container
{:margin-top 16
:padding-bottom 20})
(defn background-container
[background-color background-opacity top-margin]

10
src/status_im/contexts/chat/messenger/messages/list/view.cljs
View File

@ -23,6 +23,7 @@
[utils.re-frame :as rf]
[utils.worklets.chat.messenger.messages :as worklets]))
(defonce ^:const distance-from-last-message 4)
(defonce ^:const loading-indicator-extra-spacing 250)
(defonce ^:const loading-indicator-page-loading-height 100)
(defonce ^:const min-message-height 32)
@ -119,11 +120,11 @@
messages.constants/default-extrapolation-option)
top (reanimated/interpolate distance-from-list-top
[0 messages.constants/header-container-top-margin]
[-40 -8]
[-44 -8]
messages.constants/default-extrapolation-option)
left (reanimated/interpolate distance-from-list-top
[0 messages.constants/header-container-top-margin]
[20 -4]
[16 -4]
messages.constants/default-extrapolation-option)]
[reanimated/view
{:style (style/header-image scale top left theme)}
@ -143,7 +144,7 @@
mute-chat-label (if community-channel? :t/mute-channel :t/mute-chat)
unmute-chat-label (if community-channel? :t/unmute-channel :t/unmute-chat)]
[quo/channel-actions
{:container-style {:margin-top 16}
{:container-style style/chat-actions-container
:actions [{:accessibility-label :action-button-pinned
:big? true
:label (or latest-pin-text (i18n/label :t/no-pinned-messages))
@ -221,7 +222,7 @@
:number-of-lines 1}
display-name]
[contact-icon contact theme]]
(when bio
(when (seq bio)
[quo/text {:style style/bio}
bio])
[actions chat-id customization-color]]]))
@ -348,6 +349,7 @@
:style {:background-color (colors/theme-colors colors/white
colors/neutral-95
theme)}
:content-container-style {:padding-top distance-from-last-message}
:inverted true
:on-layout #(on-layout
{:event %