moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix offset of chat reaction wrapper

This commit is contained in:
Alex Gleason 2023-03-20 13:57:29 -05:00
parent f8b20858a3
commit ea4f707413
No known key found for this signature in database
GPG Key ID: 7211D1F99744FBB7
2 changed files with 5 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/soapbox/components/ui/emoji-selector/emoji-selector.tsx
View File

@ -1,4 +1,4 @@
import { shift, useFloating, Placement } from '@floating-ui/react'; import { shift, useFloating, Placement, offset, OffsetOptions } from '@floating-ui/react';
import clsx from 'clsx'; import clsx from 'clsx';
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
@ -44,6 +44,7 @@ interface IEmojiSelector {
placement?: Placement placement?: Placement
/** Whether the selector should be visible. */ /** Whether the selector should be visible. */
visible?: boolean visible?: boolean
offsetOptions?: OffsetOptions
/** Whether to allow any emoji to be chosen. */ /** Whether to allow any emoji to be chosen. */
all?: boolean all?: boolean
} }
@ -55,6 +56,7 @@ const EmojiSelector: React.FC<IEmojiSelector> = ({
onReact, onReact,
placement = 'top', placement = 'top',
visible = false, visible = false,
offsetOptions,
all = true, all = true,
}): JSX.Element => { }): JSX.Element => {
const soapboxConfig = useSoapboxConfig(); const soapboxConfig = useSoapboxConfig();
@ -64,7 +66,7 @@ const EmojiSelector: React.FC<IEmojiSelector> = ({
const { x, y, strategy, refs, update } = useFloating<HTMLElement>({ const { x, y, strategy, refs, update } = useFloating<HTMLElement>({
placement, placement,
middleware: [shift()], middleware: [offset(offsetOptions), shift()],
}); });
const handleExpand: React.MouseEventHandler = () => { const handleExpand: React.MouseEventHandler = () => {

1
app/soapbox/features/chats/components/chat-message-reaction-wrapper/chat-message-reaction-wrapper.tsx
View File

@ -44,6 +44,7 @@ function ChatMessageReactionWrapper(props: IChatMessageReactionWrapper) {
referenceElement={referenceElement} referenceElement={referenceElement}
onReact={handleSelect} onReact={handleSelect}
onClose={() => setIsOpen(false)} onClose={() => setIsOpen(false)}
offsetOptions={{ mainAxis: 12, crossAxis: -10 }}
all={false} all={false}
/> />
</Portal> </Portal>