Page MenuHomePhorge
Files F32618722

D6632.1767461495.diff
No OneTemporary
Actions

Size
4 KB
Referenced Files
None
Subscribers
None

D6632.1767461495.diff
View Options

diff --git a/web/chat/reaction-message-utils.js b/web/chat/reaction-message-utils.js
--- a/web/chat/reaction-message-utils.js
+++ b/web/chat/reaction-message-utils.js
@@ -18,6 +18,11 @@
import Alert from '../modals/alert.react';
import { useSelector } from '../redux/redux-utils';
+import {
+ appContainerPositionInfo,
+ type TooltipSize,
+ type TooltipPositionStyle,
+} from '../utils/tooltip-utils';
function useSendReaction(
messageID: ?string,
@@ -101,4 +106,91 @@
);
}
-export { useSendReaction };
+type EmojiKeyboardPosition = {
+ +bottom: number,
+ +left: number,
+};
+
+function getEmojiKeyboardPosition(
+ tooltipPositionStyle: TooltipPositionStyle,
+ tooltipSize: TooltipSize,
+): EmojiKeyboardPosition {
+ const { alignment, anchorPoint } = tooltipPositionStyle;
+ const tooltipAnchorX = anchorPoint.x;
+ const tooltipAnchorY = anchorPoint.y;
+
+ const tooltipWidth = tooltipSize.width;
+ const tooltipHeight = tooltipSize.height;
+
+ const {
+ top: containerTop,
+ left: containerLeft,
+ right: containerRight,
+ bottom: containerBottom,
+ } = appContainerPositionInfo;
+
+ const emojiKeyboardWidth = 352;
+ const emojiKeyboardHeight = 435;
+
+ const padding = 16;
+
+ const canBeDisplayedOnRight =
+ tooltipAnchorX + tooltipWidth + emojiKeyboardWidth <= containerRight;
+
+ const canBeDisplayedOnLeft =
+ tooltipAnchorX - emojiKeyboardWidth >= containerLeft;
+
+ const canBeDisplayedOnTop =
+ tooltipAnchorY - emojiKeyboardHeight - padding >= containerTop;
+
+ const canBeDisplayedOnBottom =
+ tooltipAnchorY + tooltipHeight + emojiKeyboardHeight + padding <=
+ containerBottom;
+
+ const emojiKeyboardOverflowTop =
+ containerTop - (tooltipAnchorY + tooltipHeight - emojiKeyboardHeight);
+
+ const emojiKeyboardOverflowTopCorrection =
+ emojiKeyboardOverflowTop > 0 ? -emojiKeyboardOverflowTop - padding : 0;
+
+ const emojiKeyboardOverflowRight =
+ tooltipAnchorX + emojiKeyboardWidth - containerRight;
+
+ const emojiKeyboardOverflowRightCorrection =
+ emojiKeyboardOverflowRight > 0 ? -emojiKeyboardOverflowRight - padding : 0;
+
+ if (alignment === 'left' && canBeDisplayedOnRight) {
+ return {
+ left: tooltipWidth,
+ bottom: emojiKeyboardOverflowTopCorrection,
+ };
+ }
+
+ if (alignment === 'right' && canBeDisplayedOnLeft) {
+ return {
+ left: -emojiKeyboardWidth,
+ bottom: emojiKeyboardOverflowTopCorrection,
+ };
+ }
+
+ if (canBeDisplayedOnTop) {
+ return {
+ bottom: tooltipHeight + padding,
+ left: emojiKeyboardOverflowRightCorrection,
+ };
+ }
+
+ if (canBeDisplayedOnBottom) {
+ return {
+ bottom: -emojiKeyboardHeight - padding,
+ left: emojiKeyboardOverflowRightCorrection,
+ };
+ }
+
+ return {
+ left: alignment === 'left' ? -emojiKeyboardWidth : tooltipWidth,
+ bottom: emojiKeyboardOverflowTopCorrection,
+ };
+}
+
+export { useSendReaction, getEmojiKeyboardPosition };
diff --git a/web/utils/tooltip-utils.js b/web/utils/tooltip-utils.js
--- a/web/utils/tooltip-utils.js
+++ b/web/utils/tooltip-utils.js
@@ -43,7 +43,18 @@
BOTTOM: 'bottom',
});
-type TooltipSize = {
+const appTopBarHeight = 65;
+
+export const appContainerPositionInfo: PositionInfo = Object.freeze({
+ height: window.innerHeight - appTopBarHeight,
+ width: window.innerWidth,
+ top: appTopBarHeight,
+ bottom: window.innerHeight,
+ left: 0,
+ right: window.innerWidth,
+});
+
+export type TooltipSize = {
+height: number,
+width: number,
};
@@ -66,8 +77,6 @@
+actionButtonContent: React.Node,
};
-const appTopBarHeight = 65;
-
const font =
'14px "Inter", -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", ' +
'"Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", ui-sans-serif';
@@ -90,14 +99,6 @@
if (!window) {
return defaultPosition;
}
- const appContainerPositionInfo: PositionInfo = {
- height: window.innerHeight - appTopBarHeight,
- width: window.innerWidth,
- top: appTopBarHeight,
- bottom: window.innerHeight,
- left: 0,
- right: window.innerWidth,
- };
const pointingTo = sourcePositionInfo;
const {

File Metadata

Mime Type
text/plain
Expires
Sat, Jan 3, 5:31 PM (5 h, 24 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
5889993
Default Alt Text
D6632.1767461495.diff (4 KB)

Event Timeline