From df73b5dd33d049aa7cb7bcefa70107f834d45817 Mon Sep 17 00:00:00 2001
From: William Grant <willmgrant@gmail.com>
Date: Thu, 1 Sep 2022 16:29:17 +1000
Subject: [PATCH] fix: improved reaction popup positioning for tooltip and box
---
.../message/message-content/MessageReactions.tsx | 2 +-
ts/components/conversation/message/reactions/Reaction.tsx | 6 +++---
.../conversation/message/reactions/ReactionPopup.tsx | 8 +++++---
3 files changed, 9 insertions(+), 7 deletions(-)
diff --git a/ts/components/conversation/message/message-content/MessageReactions.tsx b/ts/components/conversation/message/message-content/MessageReactions.tsx
index eb65e2cbf..8a1d512b4 100644
--- a/ts/components/conversation/message/message-content/MessageReactions.tsx
+++ b/ts/components/conversation/message/message-content/MessageReactions.tsx
@@ -10,7 +10,7 @@ import { Reaction, ReactionProps } from '../reactions/Reaction';
import { SessionIcon } from '../../../icon';
import { useMessageReactsPropsById } from '../../../../hooks/useParamSelector';
-export const popupXDefault = -101;
+export const popupXDefault = -81;
export const popupYDefault = -90;
const StyledMessageReactionsContainer = styled(Flex)<{ x: number; y: number }>`
diff --git a/ts/components/conversation/message/reactions/Reaction.tsx b/ts/components/conversation/message/reactions/Reaction.tsx
index 483362ea6..540d3a591 100644
--- a/ts/components/conversation/message/reactions/Reaction.tsx
+++ b/ts/components/conversation/message/reactions/Reaction.tsx
@@ -5,7 +5,7 @@ import { abbreviateNumber } from '../../../../util/abbreviateNumber';
import { nativeEmojiData } from '../../../../util/emoji';
import styled from 'styled-components';
import { useMouse } from 'react-use';
-import { ReactionPopup, TipPosition } from './ReactionPopup';
+import { POPUP_WIDTH, ReactionPopup, TipPosition } from './ReactionPopup';
import { popupXDefault, popupYDefault } from '../message-content/MessageReactions';
import { isUsAnySogsFromCache } from '../../../../session/apis/open_group_api/sogsv3/knownBlindedkeys';
@@ -77,7 +77,7 @@ export const Reaction = (props: ReactionProps): ReactElement => {
const { docX, elW } = useMouse(reactionRef);
const gutterWidth = 380;
- const tooltipMidPoint = 108; // width is 216px;
+ const tooltipMidPoint = POPUP_WIDTH / 2; // px
const [tooltipPosition, setTooltipPosition] = useState<TipPosition>('center');
const me = UserUtils.getOurPubKeyStrFromCache();
@@ -108,7 +108,7 @@ export const Reaction = (props: ReactionProps): ReactElement => {
const { innerWidth: windowWidth } = window;
if (handlePopupReaction) {
// overflow on far right means we shift left
- if (docX + tooltipMidPoint > windowWidth) {
+ if (docX + elW + tooltipMidPoint > windowWidth) {
handlePopupX(Math.abs(popupXDefault) * 1.5 * -1);
setTooltipPosition('right');
// overflow onto conversations means we lock to the right
diff --git a/ts/components/conversation/message/reactions/ReactionPopup.tsx b/ts/components/conversation/message/reactions/ReactionPopup.tsx
index 19157ce82..ca62def1e 100644
--- a/ts/components/conversation/message/reactions/ReactionPopup.tsx
+++ b/ts/components/conversation/message/reactions/ReactionPopup.tsx
@@ -8,11 +8,13 @@ import { nativeEmojiData } from '../../../../util/emoji';
export type TipPosition = 'center' | 'left' | 'right';
+export const POPUP_WIDTH = 216; // px
+
export const StyledPopupContainer = styled.div<{ tooltipPosition: TipPosition }>`
display: flex;
justify-content: space-between;
align-items: center;
- width: 244px;
+ width: ${POPUP_WIDTH}px;
height: 72px;
z-index: 5;
@@ -35,10 +37,10 @@ export const StyledPopupContainer = styled.div<{ tooltipPosition: TipPosition }>
case 'left':
return '24px';
case 'right':
- return 'calc(100% - 48px)';
+ return 'calc(100% - 78px)';
case 'center':
default:
- return 'calc(100% - 100px)';
+ return 'calc(100% - 118px)';
}
}};
width: 22px;