From de2a15a6916431e5f1a09dfeabc0720b455cc7ab Mon Sep 17 00:00:00 2001
From: William Grant <willmgrant@gmail.com>
Date: Wed, 4 Oct 2023 10:30:48 +1100
Subject: [PATCH] fix: dont load container if there are no reactions
now message elements are the correct height from what we see visually
---
.../message/message-content/MessageReactions.tsx | 11 +++++++----
ts/session/constants.ts | 1 +
ts/themes/globals.tsx | 6 +++++-
3 files changed, 13 insertions(+), 5 deletions(-)
diff --git a/ts/components/conversation/message/message-content/MessageReactions.tsx b/ts/components/conversation/message/message-content/MessageReactions.tsx
index 8a417c9bc..b7567d70e 100644
--- a/ts/components/conversation/message/message-content/MessageReactions.tsx
+++ b/ts/components/conversation/message/message-content/MessageReactions.tsx
@@ -10,6 +10,7 @@ import { Flex } from '../../../basic/Flex';
import { SessionIcon } from '../../../icon';
import { Reaction, ReactionProps } from '../reactions/Reaction';
import { StyledPopupContainer } from '../reactions/ReactionPopup';
+import { REACT_LIMIT } from '../../../../session/constants';
export const popupXDefault = -81;
export const popupYDefault = -90;
@@ -148,7 +149,7 @@ type Props = {
noAvatar: boolean;
};
-export const MessageReactions = (props: Props): ReactElement => {
+export const MessageReactions = (props: Props) => {
const {
messageId,
hasReactLimit = true,
@@ -185,12 +186,14 @@ export const MessageReactions = (props: Props): ReactElement => {
}, [msgProps?.sortedReacts, reactions]);
if (!msgProps) {
- return <></>;
+ return null;
}
const { sortedReacts } = msgProps;
- const reactLimit = 6;
+ if (!sortedReacts || !sortedReacts.length) {
+ return null;
+ }
const reactionsProps = {
messageId,
@@ -220,7 +223,7 @@ export const MessageReactions = (props: Props): ReactElement => {
>
{sortedReacts &&
sortedReacts?.length !== 0 &&
- (!hasReactLimit || sortedReacts.length <= reactLimit ? (
+ (!hasReactLimit || sortedReacts.length <= REACT_LIMIT ? (
<Reactions {...reactionsProps} />
) : (
<ExtendedReactions handleExpand={handleExpand} {...reactionsProps} />
diff --git a/ts/session/constants.ts b/ts/session/constants.ts
index ef4aa107b..5190be6d8 100644
--- a/ts/session/constants.ts
+++ b/ts/session/constants.ts
@@ -71,6 +71,7 @@ export const UI = {
};
export const DEFAULT_RECENT_REACTS = ['😂', '🥰', '😢', '😡', '😮', '😈'];
+export const REACT_LIMIT = 6;
export const MAX_USERNAME_BYTES = 64;
diff --git a/ts/themes/globals.tsx b/ts/themes/globals.tsx
index a5d1d1339..b886c9973 100644
--- a/ts/themes/globals.tsx
+++ b/ts/themes/globals.tsx
@@ -25,6 +25,8 @@ export type ThemeGlobals = {
'--margins-xl': string;
/* Padding */
+ '--padding-message-content-x': string;
+ '--padding-message-content-y': string;
'--padding-message-content': string;
'--padding-link-preview': string;
@@ -106,7 +108,9 @@ export const THEME_GLOBALS: ThemeGlobals = {
'--margins-lg': '20px',
'--margins-xl': '25px',
- '--padding-message-content': '7px 13px',
+ '--padding-message-content-x': '13px',
+ '--padding-message-content-y': '7px',
+ '--padding-message-content': 'var(--padding-message-content-y) var(--padding-message-content-x)',
'--padding-link-preview': '-7px -13px 7px -13px', // bottom has positive value because a link preview has always a body below
'--border-radius': '5px',