mirrors/cinny
1
0
Fork 0
mirror of https://github.com/cinnyapp/cinny.git synced 2025-02-23 13:43:07 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

update folds

Browse source
This commit is contained in:
Ajay Bura 2024-04-14 11:21:36 +05:30
parent e4c6f455ef
commit fb642087f7
13 changed files with 393 additions and 322 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
package-lock.json generated
View file

@ -31,7 +31,7 @@
"file-saver": "2.0.5",
"flux": "4.0.3",
"focus-trap-react": "10.0.2",
"folds": "1.7.0",
"folds": "2.0.0",
"formik": "2.2.9",
"html-dom-parser": "4.0.0",
"html-react-parser": "4.2.0",
@ -5247,9 +5247,9 @@
}
},
"node_modules/folds": {
"version": "1.7.0",
"resolved": "https://registry.npmjs.org/folds/-/folds-1.7.0.tgz",
"integrity": "sha512-Uz8RIsABKbWT/mBRCaiScxuYhmA3v6HrJ0UdiRSM/mG7ssCaAIMRP3aBa5zQwdiCvqsHgZqhFZT1AFgY6PGA7Q==",
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/folds/-/folds-2.0.0.tgz",
"integrity": "sha512-lKv31vij4GEpEzGKWk5c3ar78fMZ9Di5n1XFR14Z2wnnpqhiiM5JTIzr127Gk5dOfy4mJkjnv/ZfMZvM2k+OQg==",
"peerDependencies": {
"@vanilla-extract/css": "^1.9.2",
"@vanilla-extract/recipes": "^0.3.0",

2
package.json
View file

@ -41,7 +41,7 @@
"file-saver": "2.0.5",
"flux": "4.0.3",
"focus-trap-react": "10.0.2",
"folds": "1.7.0",
"folds": "2.0.0",
"formik": "2.2.9",
"html-dom-parser": "4.0.0",
"html-react-parser": "4.2.0",

34
src/app/components/Pdf-viewer/PdfViewer.tsx
View file

@ -1,6 +1,6 @@
/* eslint-disable no-param-reassign */
/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
import React, { FormEventHandler, useEffect, useRef, useState } from 'react';
import React, { FormEventHandler, MouseEventHandler, useEffect, useRef, useState } from 'react';
import classNames from 'classnames';
import {
Box,
@ -13,6 +13,7 @@ import {
Input,
Menu,
PopOut,
RectCords,
Scroll,
Spinner,
Text,
@ -48,7 +49,7 @@ export const PdfViewer = as<'div', PdfViewerProps>(
const isError =
pdfJSState.status === AsyncStatus.Error || docState.status === AsyncStatus.Error;
const [pageNo, setPageNo] = useState(1);
const [openJump, setOpenJump] = useState(false);
const [jumpAnchor, setJumpAnchor] = useState<RectCords>();
useEffect(() => {
loadPdfJS();
@ -86,7 +87,7 @@ export const PdfViewer = as<'div', PdfViewerProps>(
if (!jumpInput) return;
const jumpTo = parseInt(jumpInput.value, 10);
setPageNo(Math.max(1, Math.min(docState.data.numPages, jumpTo)));
setOpenJump(false);
setJumpAnchor(undefined);
};
const handlePrevPage = () => {
@ -98,6 +99,10 @@ export const PdfViewer = as<'div', PdfViewerProps>(
setPageNo((n) => Math.min(n + 1, docState.data.numPages));
};
const handleOpenJump: MouseEventHandler<HTMLButtonElement> = (evt) => {
setJumpAnchor(evt.currentTarget.getBoundingClientRect());
};
return (
<Box className={classNames(css.PdfViewer, className)} direction="Column" {...props} ref={ref}>
<Header className={css.PdfViewerHeader} size="400">
@ -187,14 +192,14 @@ export const PdfViewer = as<'div', PdfViewerProps>(
</Chip>
<Box grow="Yes" justifyContent="Center" alignItems="Center" gap="200">
<PopOut
open={openJump}
anchor={jumpAnchor}
align="Center"
position="Top"
content={
<FocusTrap
focusTrapOptions={{
initialFocus: false,
onDeactivate: () => setOpenJump(false),
onDeactivate: () => setJumpAnchor(undefined),
clickOutsideDeactivates: true,
}}
>
@ -227,17 +232,14 @@ export const PdfViewer = as<'div', PdfViewerProps>(
</FocusTrap>
}
>
{(anchorRef) => (
<Chip
onClick={() => setOpenJump(!openJump)}
ref={anchorRef}
variant="SurfaceVariant"
radii="300"
aria-pressed={openJump}
>
<Text size="B300">{`${pageNo}/${docState.data.numPages}`}</Text>
</Chip>
)}
<Chip
onClick={handleOpenJump}
variant="SurfaceVariant"
radii="300"
aria-pressed={jumpAnchor !== undefined}
>
<Text size="B300">{`${pageNo}/${docState.data.numPages}`}</Text>
</Chip>
</PopOut>
</Box>
<Chip

43
src/app/components/editor/Toolbar.tsx
View file

@ -10,13 +10,14 @@ import {
Line,
Menu,
PopOut,
RectCords,
Scroll,
Text,
Tooltip,
TooltipProvider,
toRem,
} from 'folds';
import React, { ReactNode, useState } from 'react';
import React, { MouseEventHandler, ReactNode, useState } from 'react';
import { ReactEditor, useSlate } from 'slate-react';
import {
headingLevel,
@ -119,26 +120,33 @@ export function BlockButton({ format, icon, tooltip }: BlockButtonProps) {
export function HeadingBlockButton() {
const editor = useSlate();
const level = headingLevel(editor);
const [open, setOpen] = useState(false);
const [anchor, setAnchor] = useState<RectCords>();
const isActive = isBlockActive(editor, BlockType.Heading);
const modKey = isMacOS() ? KeySymbol.Command : 'Ctrl';
const handleMenuSelect = (selectedLevel: HeadingLevel) => {
setOpen(false);
setAnchor(undefined);
toggleBlock(editor, BlockType.Heading, { level: selectedLevel });
ReactEditor.focus(editor);
};
const handleMenuOpen: MouseEventHandler<HTMLButtonElement> = (evt) => {
if (isActive) {
toggleBlock(editor, BlockType.Heading);
return;
}
setAnchor(evt.currentTarget.getBoundingClientRect());
};
return (
<PopOut
open={open}
anchor={anchor}
offset={5}
position="Top"
content={
<FocusTrap
focusTrapOptions={{
initialFocus: false,
onDeactivate: () => setOpen(false),
onDeactivate: () => setAnchor(undefined),
clickOutsideDeactivates: true,
isKeyForward: (evt: KeyboardEvent) =>
evt.key === 'ArrowDown' || evt.key === 'ArrowRight',
@ -197,20 +205,17 @@ export function HeadingBlockButton() {
</FocusTrap>
}
>
{(ref) => (
<IconButton
style={{ width: 'unset' }}
ref={ref}
variant="SurfaceVariant"
onClick={() => (isActive ? toggleBlock(editor, BlockType.Heading) : setOpen(!open))}
aria-pressed={isActive}
size="400"
radii="300"
>
<Icon size="200" src={level ? Icons[`Heading${level}`] : Icons.Heading1} />
<Icon size="200" src={isActive ? Icons.Cross : Icons.ChevronBottom} />
</IconButton>
)}
<IconButton
style={{ width: 'unset' }}
variant="SurfaceVariant"
onClick={handleMenuOpen}
aria-pressed={isActive}
size="400"
radii="300"
>
<Icon size="200" src={level ? Icons[`Heading${level}`] : Icons.Heading1} />
<Icon size="200" src={isActive ? Icons.Cross : Icons.ChevronBottom} />
</IconButton>
</PopOut>
);
}

66
src/app/features/message-search/SearchFilters.tsx
View file

@ -23,6 +23,7 @@ import {
Button,
Input,
Badge,
RectCords,
} from 'folds';
import { SearchOrderBy } from 'matrix-js-sdk';
import FocusTrap from 'focus-trap-react';
@ -43,24 +44,27 @@ type OrderButtonProps = {
onChange: (order?: string) => void;
};
function OrderButton({ order, onChange }: OrderButtonProps) {
const [menu, setMenu] = useState(false);
const [menuAnchor, setMenuAnchor] = useState<RectCords>();
const rankOrder = order === SearchOrderBy.Rank;
const setOrder = (o?: string) => {
setMenu(false);
setMenuAnchor(undefined);
onChange(o);
};
const handleOpenMenu: MouseEventHandler<HTMLButtonElement> = (evt) => {
setMenuAnchor(evt.currentTarget.getBoundingClientRect());
};
return (
<PopOut
open={menu}
anchor={menuAnchor}
align="End"
position="Bottom"
content={
<FocusTrap
focusTrapOptions={{
initialFocus: false,
onDeactivate: () => setMenu(false),
onDeactivate: () => setMenuAnchor(undefined),
clickOutsideDeactivates: true,
}}
>
@ -93,17 +97,14 @@ function OrderButton({ order, onChange }: OrderButtonProps) {
</FocusTrap>
}
>
{(anchorRef) => (
<Chip
ref={anchorRef}
variant="SurfaceVariant"
radii="Pill"
after={<Icon size="50" src={Icons.Sort} />}
onClick={() => setMenu(true)}
>
{rankOrder ? <Text size="T200">Relevance</Text> : <Text size="T200">Recent</Text>}
</Chip>
)}
<Chip
variant="SurfaceVariant"
radii="Pill"
after={<Icon size="50" src={Icons.Sort} />}
onClick={handleOpenMenu}
>
{rankOrder ? <Text size="T200">Relevance</Text> : <Text size="T200">Recent</Text>}
</Chip>
</PopOut>
);
}
@ -126,7 +127,7 @@ type SelectRoomButtonProps = {
function SelectRoomButton({ roomList, selectedRooms, onChange }: SelectRoomButtonProps) {
const mx = useMatrixClient();
const scrollRef = useRef<HTMLDivElement>(null);
const [menu, setMenu] = useState(false);
const [menuAnchor, setMenuAnchor] = useState<RectCords>();
const [localSelected, setLocalSelected] = useState(selectedRooms);
const getRoomNameStr: SearchItemStrGetter<string> = useCallback(
@ -172,30 +173,34 @@ function SelectRoomButton({ roomList, selectedRooms, onChange }: SelectRoomButto
};
const handleSave = () => {
setMenu(false);
setMenuAnchor(undefined);
onChange(localSelected);
};
const handleDeselectAll = () => {
setMenu(false);
setMenuAnchor(undefined);
onChange(undefined);
};
useEffect(() => {
setLocalSelected(selectedRooms);
resetSearch();
}, [menu, selectedRooms, resetSearch]);
}, [menuAnchor, selectedRooms, resetSearch]);
const handleOpenMenu: MouseEventHandler<HTMLButtonElement> = (evt) => {
setMenuAnchor(evt.currentTarget.getBoundingClientRect());
};
return (
<PopOut
open={menu}
anchor={menuAnchor}
align="Center"
position="Bottom"
content={
<FocusTrap
focusTrapOptions={{
initialFocus: false,
onDeactivate: () => setMenu(false),
onDeactivate: () => setMenuAnchor(undefined),
clickOutsideDeactivates: true,
}}
>
@ -307,17 +312,14 @@ function SelectRoomButton({ roomList, selectedRooms, onChange }: SelectRoomButto
</FocusTrap>
}
>
{(anchorRef) => (
<Chip
onClick={() => setMenu(true)}
ref={anchorRef}
variant="SurfaceVariant"
radii="Pill"
before={<Icon size="100" src={Icons.PlusCircle} />}
>
<Text size="T200">Select Rooms</Text>
</Chip>
)}
<Chip
onClick={handleOpenMenu}
variant="SurfaceVariant"
radii="Pill"
before={<Icon size="100" src={Icons.PlusCircle} />}
>
<Text size="T200">Select Rooms</Text>
</Chip>
</PopOut>
);
}

52
src/app/features/room-nav/RoomNavItem.tsx
View file

@ -13,6 +13,7 @@ import {
PopOut,
toRem,
Line,
RectCords,
} from 'folds';
import { useFocusWithin, useHover } from 'react-aria';
import FocusTrap from 'focus-trap-react';
@ -150,15 +151,24 @@ export function RoomNavItem({ room, selected, showAvatar, muted, linkPath }: Roo
const [hover, setHover] = useState(false);
const { hoverProps } = useHover({ onHoverChange: setHover });
const { focusWithinProps } = useFocusWithin({ onFocusWithinChange: setHover });
const [menu, setMenu] = useState(false);
const [menuAnchor, setMenuAnchor] = useState<RectCords>();
const unread = useRoomUnread(room.roomId, roomToUnreadAtom);
const handleContextMenu: MouseEventHandler<HTMLElement> = (evt) => {
evt.preventDefault();
setMenu(true);
setMenuAnchor({
x: evt.clientX,
y: evt.clientY,
width: 0,
height: 0,
});
};
const optionsVisible = hover || menu;
const handleOpenMenu: MouseEventHandler<HTMLButtonElement> = (evt) => {
setMenuAnchor(evt.currentTarget.getBoundingClientRect());
};
const optionsVisible = hover || !!menuAnchor;
return (
<NavItem
@ -166,7 +176,7 @@ export function RoomNavItem({ room, selected, showAvatar, muted, linkPath }: Roo
radii="400"
highlight={unread !== undefined || selected}
aria-selected={selected}
data-hover={menu}
data-hover={!!menuAnchor}
onContextMenu={handleContextMenu}
{...hoverProps}
{...focusWithinProps}
@ -208,16 +218,17 @@ export function RoomNavItem({ room, selected, showAvatar, muted, linkPath }: Roo
{optionsVisible && (
<NavItemOptions>
<PopOut
open={menu}
alignOffset={-5}
anchor={menuAnchor}
offset={menuAnchor?.width === 0 ? 0 : undefined}
alignOffset={menuAnchor?.width === 0 ? 0 : -5}
position="Bottom"
align="End"
align={menuAnchor?.width === 0 ? 'Start' : 'End'}
content={
<FocusTrap
focusTrapOptions={{
initialFocus: false,
returnFocusOnDeactivate: false,
onDeactivate: () => setMenu(false),
onDeactivate: () => setMenuAnchor(undefined),
clickOutsideDeactivates: true,
isKeyForward: (evt: KeyboardEvent) => evt.key === 'ArrowDown',
isKeyBackward: (evt: KeyboardEvent) => evt.key === 'ArrowUp',
@ -226,24 +237,21 @@ export function RoomNavItem({ room, selected, showAvatar, muted, linkPath }: Roo
<RoomNavItemMenu
room={room}
linkPath={linkPath}
requestClose={() => setMenu(false)}
requestClose={() => setMenuAnchor(undefined)}
/>
</FocusTrap>
}
>
{(anchorRef) => (
<IconButton
ref={anchorRef}
onClick={() => setMenu(true)}
aria-pressed={menu}
variant="Background"
fill="None"
size="300"
radii="300"
>
<Icon size="50" src={Icons.VerticalDots} />
</IconButton>
)}
<IconButton
onClick={handleOpenMenu}
aria-pressed={!!menuAnchor}
variant="Background"
fill="None"
size="300"
radii="300"
>
<Icon size="50" src={Icons.VerticalDots} />
</IconButton>
</PopOut>
</NavItemOptions>
)}

73
src/app/features/room/MembersDrawer.tsx
View file

@ -22,6 +22,7 @@ import {
Menu,
MenuItem,
PopOut,
RectCords,
Scroll,
Spinner,
Text,
@ -289,10 +290,10 @@ export function MembersDrawer({ room }: MembersDrawerProps) {
<Box className={css.MemberDrawerContent} direction="Column" gap="200">
<Box ref={scrollTopAnchorRef} className={css.DrawerGroup} direction="Column" gap="200">
<Box alignItems="Center" justifyContent="SpaceBetween" gap="200">
<UseStateProvider initial={false}>
{(open, setOpen) => (
<UseStateProvider initial={undefined}>
{(anchor: RectCords | undefined, setAnchor) => (
<PopOut
open={open}
anchor={anchor}
position="Bottom"
align="Start"
offset={4}
@ -300,7 +301,7 @@ export function MembersDrawer({ room }: MembersDrawerProps) {
<FocusTrap
focusTrapOptions={{
initialFocus: false,
onDeactivate: () => setOpen(false),
onDeactivate: () => setAnchor(undefined),
clickOutsideDeactivates: true,
isKeyForward: (evt: KeyboardEvent) => evt.key === 'ArrowDown',
isKeyBackward: (evt: KeyboardEvent) => evt.key === 'ArrowUp',
@ -319,7 +320,7 @@ export function MembersDrawer({ room }: MembersDrawerProps) {
radii="300"
onClick={() => {
setMembershipFilterIndex(index);
setOpen(false);
setAnchor(undefined);
}}
>
<Text>{menuItem.name}</Text>
@ -329,25 +330,27 @@ export function MembersDrawer({ room }: MembersDrawerProps) {
</FocusTrap>
}
>
{(anchorRef) => (
<Chip
ref={anchorRef}
onClick={() => setOpen(!open)}
variant={membershipFilter.color}
size="400"
radii="300"
before={<Icon src={Icons.Filter} size="50" />}
>
<Text size="T200">{membershipFilter.name}</Text>
</Chip>
)}
<Chip
onClick={
((evt) =>
setAnchor(
evt.currentTarget.getBoundingClientRect()
)) as MouseEventHandler<HTMLButtonElement>
}
variant={membershipFilter.color}
size="400"
radii="300"
before={<Icon src={Icons.Filter} size="50" />}
>
<Text size="T200">{membershipFilter.name}</Text>
</Chip>
</PopOut>
)}
</UseStateProvider>
<UseStateProvider initial={false}>
{(open, setOpen) => (
<UseStateProvider initial={undefined}>
{(anchor: RectCords | undefined, setAnchor) => (
<PopOut
open={open}
anchor={anchor}
position="Bottom"
align="End"
offset={4}
@ -355,7 +358,7 @@ export function MembersDrawer({ room }: MembersDrawerProps) {
<FocusTrap
focusTrapOptions={{
initialFocus: false,
onDeactivate: () => setOpen(false),
onDeactivate: () => setAnchor(undefined),
clickOutsideDeactivates: true,
isKeyForward: (evt: KeyboardEvent) => evt.key === 'ArrowDown',
isKeyBackward: (evt: KeyboardEvent) => evt.key === 'ArrowUp',
@ -370,7 +373,7 @@ export function MembersDrawer({ room }: MembersDrawerProps) {
radii="300"
onClick={() => {
setSortFilterIndex(index);
setOpen(false);
setAnchor(undefined);
}}
>
<Text>{menuItem.name}</Text>
@ -380,18 +383,20 @@ export function MembersDrawer({ room }: MembersDrawerProps) {
</FocusTrap>
}
>
{(anchorRef) => (
<Chip
ref={anchorRef}
onClick={() => setOpen(!open)}
variant="Background"
size="400"
radii="300"
after={<Icon src={Icons.Sort} size="50" />}
>
<Text size="T200">{sortFilter.name}</Text>
</Chip>
)}
<Chip
onClick={
((evt) =>
setAnchor(
evt.currentTarget.getBoundingClientRect()
)) as MouseEventHandler<HTMLButtonElement>
}
variant="Background"
size="400"
radii="300"
after={<Icon src={Icons.Sort} size="50" />}
>
<Text size="T200">{sortFilter.name}</Text>
</Chip>
</PopOut>
)}
</UseStateProvider>

73
src/app/features/room/RoomInput.tsx
View file

@ -119,6 +119,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
const [enterForNewline] = useSetting(settingsAtom, 'enterForNewline');
const [isMarkdown] = useSetting(settingsAtom, 'isMarkdown');
const commands = useCommands(mx, room);
const emojiBtnRef = useRef<HTMLButtonElement>(null);
const [msgDraft, setMsgDraft] = useAtom(roomIdToMsgDraftAtomFamily(roomId));
const [replyDraft, setReplyDraft] = useAtom(roomIdToReplyDraftAtomFamily(roomId));
@ -521,7 +522,11 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
alignOffset={-44}
position="Top"
align="End"
open={!!emojiBoardTab}
anchor={
emojiBoardTab === undefined
? undefined
: emojiBtnRef.current?.getBoundingClientRect() ?? undefined
}
content={
<EmojiBoard
tab={emojiBoardTab}
@ -538,43 +543,37 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
/>
}
>
{(anchorRef) => (
<>
{!hideStickerBtn && (
<IconButton
aria-pressed={emojiBoardTab === EmojiBoardTab.Sticker}
onClick={() => setEmojiBoardTab(EmojiBoardTab.Sticker)}
variant="SurfaceVariant"
size="300"
radii="300"
>
<Icon
src={Icons.Sticker}
filled={emojiBoardTab === EmojiBoardTab.Sticker}
/>
</IconButton>
)}
<IconButton
ref={anchorRef}
aria-pressed={
hideStickerBtn ? !!emojiBoardTab : emojiBoardTab === EmojiBoardTab.Emoji
}
onClick={() => setEmojiBoardTab(EmojiBoardTab.Emoji)}
variant="SurfaceVariant"
size="300"
radii="300"
>
<Icon
src={Icons.Smile}
filled={
hideStickerBtn
? !!emojiBoardTab
: emojiBoardTab === EmojiBoardTab.Emoji
}
/>
</IconButton>
</>
{!hideStickerBtn && (
<IconButton
aria-pressed={emojiBoardTab === EmojiBoardTab.Sticker}
onClick={() => setEmojiBoardTab(EmojiBoardTab.Sticker)}
variant="SurfaceVariant"
size="300"
radii="300"
>
<Icon
src={Icons.Sticker}
filled={emojiBoardTab === EmojiBoardTab.Sticker}
/>
</IconButton>
)}
<IconButton
ref={emojiBtnRef}
aria-pressed={
hideStickerBtn ? !!emojiBoardTab : emojiBoardTab === EmojiBoardTab.Emoji
}
onClick={() => setEmojiBoardTab(EmojiBoardTab.Emoji)}
variant="SurfaceVariant"
size="300"
radii="300"
>
<Icon
src={Icons.Smile}
filled={
hideStickerBtn ? !!emojiBoardTab : emojiBoardTab === EmojiBoardTab.Emoji
}
/>
</IconButton>
</PopOut>
)}
</UseStateProvider>

156
src/app/features/room/message/Message.tsx
View file

@ -18,6 +18,7 @@ import {
OverlayBackdrop,
OverlayCenter,
PopOut,
RectCords,
Spinner,
Text,
as,
@ -610,8 +611,8 @@ export const Message = as<'div', MessageProps>(
const [hover, setHover] = useState(false);
const { hoverProps } = useHover({ onHoverChange: setHover });
const { focusWithinProps } = useFocusWithin({ onFocusWithinChange: setHover });
const [menu, setMenu] = useState(false);
const [emojiBoard, setEmojiBoard] = useState(false);
const [menuAnchor, setMenuAnchor] = useState<RectCords>();
const [emojiBoardAnchor, setEmojiBoardAnchor] = useState<RectCords>();
const senderDisplayName =
getMemberDisplayName(room, senderId) ?? getMxIdLocalPart(senderId) ?? senderId;
@ -706,11 +707,36 @@ export const Message = as<'div', MessageProps>(
const tag = (evt.target as any).tagName;
if (typeof tag === 'string' && tag.toLowerCase() === 'a') return;
evt.preventDefault();
setMenu(true);
setMenuAnchor({
x: evt.clientX,
y: evt.clientY,
width: 0,
height: 0,
});
};
const handleOpenMenu: MouseEventHandler<HTMLButtonElement> = (evt) => {
const target = evt.currentTarget.parentElement?.parentElement ?? evt.currentTarget;
setMenuAnchor(target.getBoundingClientRect());
};
const closeMenu = () => {
setMenu(false);
setMenuAnchor(undefined);
};
const handleOpenEmojiBoard: MouseEventHandler<HTMLButtonElement> = (evt) => {
const target = evt.currentTarget.parentElement?.parentElement ?? evt.currentTarget;
setEmojiBoardAnchor(target.getBoundingClientRect());
};
const handleAddReactions: MouseEventHandler<HTMLButtonElement> = () => {
const rect = menuAnchor;
closeMenu();
// open it with timeout because closeMenu
// FocusTrap will return focus from emojiBoard
setTimeout(() => {
setEmojiBoardAnchor(rect);
}, 100);
};
return (
@ -720,22 +746,22 @@ export const Message = as<'div', MessageProps>(
space={messageSpacing}
collapse={collapse}
highlight={highlight}
selected={menu || emojiBoard}
selected={!!menuAnchor || !!emojiBoardAnchor}
{...props}
{...hoverProps}
{...focusWithinProps}
ref={ref}
>
{!edit && (hover || menu || emojiBoard) && (
{!edit && (hover || !!menuAnchor || !!emojiBoardAnchor) && (
<div className={css.MessageOptionsBase}>
<Menu className={css.MessageOptionsBar} variant="SurfaceVariant">
<Box gap="100">
{canSendReaction && (
<PopOut
alignOffset={-65}
position="Bottom"
align="End"
open={emojiBoard}
align={emojiBoardAnchor?.width === 0 ? 'Start' : 'End'}
offset={emojiBoardAnchor?.width === 0 ? 0 : undefined}
anchor={emojiBoardAnchor}
content={
<EmojiBoard
imagePackRooms={imagePackRooms ?? []}
@ -743,30 +769,27 @@ export const Message = as<'div', MessageProps>(
allowTextCustomEmoji
onEmojiSelect={(key) => {
onReactionToggle(mEvent.getId()!, key);
setEmojiBoard(false);
setEmojiBoardAnchor(undefined);
}}
onCustomEmojiSelect={(mxc, shortcode) => {
onReactionToggle(mEvent.getId()!, mxc, shortcode);
setEmojiBoard(false);
setEmojiBoardAnchor(undefined);
}}
requestClose={() => {
setEmojiBoard(false);
setEmojiBoardAnchor(undefined);
}}
/>
}
>
{(anchorRef) => (
<IconButton
ref={anchorRef}
onClick={() => setEmojiBoard(true)}
variant="SurfaceVariant"
size="300"
radii="300"
aria-pressed={emojiBoard}
>
<Icon src={Icons.SmilePlus} size="100" />
</IconButton>
)}
<IconButton
onClick={handleOpenEmojiBoard}
variant="SurfaceVariant"
size="300"
radii="300"
aria-pressed={!!emojiBoardAnchor}
>
<Icon src={Icons.SmilePlus} size="100" />
</IconButton>
</PopOut>
)}
<IconButton
@ -789,15 +812,15 @@ export const Message = as<'div', MessageProps>(
</IconButton>
)}
<PopOut
open={menu}
alignOffset={-5}
anchor={menuAnchor}
position="Bottom"
align="End"
align={menuAnchor?.width === 0 ? 'Start' : 'End'}
offset={menuAnchor?.width === 0 ? 0 : undefined}
content={
<FocusTrap
focusTrapOptions={{
initialFocus: false,
onDeactivate: () => setMenu(false),
onDeactivate: () => setMenuAnchor(undefined),
clickOutsideDeactivates: true,
isKeyForward: (evt: KeyboardEvent) => evt.key === 'ArrowDown',
isKeyBackward: (evt: KeyboardEvent) => evt.key === 'ArrowUp',
@ -818,12 +841,7 @@ export const Message = as<'div', MessageProps>(
size="300"
after={<Icon size="100" src={Icons.SmilePlus} />}
radii="300"
onClick={() => {
closeMenu();
// open it with timeout because closeMenu
// FocusTrap will return focus from emojiBoard
setTimeout(() => setEmojiBoard(true), 100);
}}
onClick={handleAddReactions}
>
<Text
className={css.MessageMenuItemText}
@ -915,18 +933,15 @@ export const Message = as<'div', MessageProps>(
</FocusTrap>
}
>
{(targetRef) => (
<IconButton
ref={targetRef}
variant="SurfaceVariant"
size="300"
radii="300"
onClick={() => setMenu((v) => !v)}
aria-pressed={menu}
>
<Icon src={Icons.VerticalDots} size="100" />
</IconButton>
)}
<IconButton
variant="SurfaceVariant"
size="300"
radii="300"
onClick={handleOpenMenu}
aria-pressed={!!menuAnchor}
>
<Icon src={Icons.VerticalDots} size="100" />
</IconButton>
</PopOut>
</Box>
</Menu>
@ -967,7 +982,7 @@ export const Event = as<'div', EventProps>(
const [hover, setHover] = useState(false);
const { hoverProps } = useHover({ onHoverChange: setHover });
const { focusWithinProps } = useFocusWithin({ onFocusWithinChange: setHover });
const [menu, setMenu] = useState(false);
const [menuAnchor, setMenuAnchor] = useState<RectCords>();
const stateEvent = typeof mEvent.getStateKey() === 'string';
const handleContextMenu: MouseEventHandler<HTMLDivElement> = (evt) => {
@ -975,11 +990,21 @@ export const Event = as<'div', EventProps>(
const tag = (evt.target as any).tagName;
if (typeof tag === 'string' && tag.toLowerCase() === 'a') return;
evt.preventDefault();
setMenu(true);
setMenuAnchor({
x: evt.clientX,
y: evt.clientY,
width: 0,
height: 0,
});
};
const handleOpenMenu: MouseEventHandler<HTMLButtonElement> = (evt) => {
const target = evt.currentTarget.parentElement?.parentElement ?? evt.currentTarget;
setMenuAnchor(target.getBoundingClientRect());
};
const closeMenu = () => {
setMenu(false);
setMenuAnchor(undefined);
};
return (
@ -989,26 +1014,26 @@ export const Event = as<'div', EventProps>(
space={messageSpacing}
autoCollapse
highlight={highlight}
selected={menu}
selected={!!menuAnchor}
{...props}
{...hoverProps}
{...focusWithinProps}
ref={ref}
>
{(hover || menu) && (
{(hover || !!menuAnchor) && (
<div className={css.MessageOptionsBase}>
<Menu className={css.MessageOptionsBar} variant="SurfaceVariant">
<Box gap="100">
<PopOut
open={menu}
alignOffset={-5}
anchor={menuAnchor}
position="Bottom"
align="End"
align={menuAnchor?.width === 0 ? 'Start' : 'End'}
offset={menuAnchor?.width === 0 ? 0 : undefined}
content={
<FocusTrap
focusTrapOptions={{
initialFocus: false,
onDeactivate: () => setMenu(false),
onDeactivate: () => setMenuAnchor(undefined),
clickOutsideDeactivates: true,
isKeyForward: (evt: KeyboardEvent) => evt.key === 'ArrowDown',
isKeyBackward: (evt: KeyboardEvent) => evt.key === 'ArrowUp',
@ -1049,18 +1074,15 @@ export const Event = as<'div', EventProps>(
</FocusTrap>
}
>
{(targetRef) => (
<IconButton
ref={targetRef}
variant="SurfaceVariant"
size="300"
radii="300"
onClick={() => setMenu((v) => !v)}
aria-pressed={menu}
>
<Icon src={Icons.VerticalDots} size="100" />
</IconButton>
)}
<IconButton
variant="SurfaceVariant"
size="300"
radii="300"
onClick={handleOpenMenu}
aria-pressed={!!menuAnchor}
>
<Icon src={Icons.VerticalDots} size="100" />
</IconButton>
</PopOut>
</Box>
</Menu>

57
src/app/features/room/message/MessageEditor.tsx
View file

@ -1,5 +1,24 @@
import React, { KeyboardEventHandler, useCallback, useEffect, useState } from 'react';
import { Box, Chip, Icon, IconButton, Icons, Line, PopOut, Spinner, Text, as, config } from 'folds';
import React, {
KeyboardEventHandler,
MouseEventHandler,
useCallback,
useEffect,
useState,
} from 'react';
import {
Box,
Chip,
Icon,
IconButton,
Icons,
Line,
PopOut,
RectCords,
Spinner,
Text,
as,
config,
} from 'folds';
import { Editor, Transforms } from 'slate';
import { ReactEditor } from 'slate-react';
import { IContent, MatrixEvent, RelationType, Room } from 'matrix-js-sdk';
@ -258,13 +277,13 @@ export const MessageEditor = as<'div', MessageEditorProps>(
>
<Icon size="400" src={toolbar ? Icons.AlphabetUnderline : Icons.Alphabet} />
</IconButton>
<UseStateProvider initial={false}>
{(emojiBoard: boolean, setEmojiBoard) => (
<UseStateProvider initial={undefined}>
{(anchor: RectCords | undefined, setAnchor) => (
<PopOut
anchor={anchor}
alignOffset={-8}
position="Top"
align="End"
open={!!emojiBoard}
content={
<EmojiBoard
imagePackRooms={imagePackRooms ?? []}
@ -272,24 +291,26 @@ export const MessageEditor = as<'div', MessageEditorProps>(
onEmojiSelect={handleEmoticonSelect}
onCustomEmojiSelect={handleEmoticonSelect}
requestClose={() => {
setEmojiBoard(false);
setAnchor(undefined);
if (!mobileOrTablet()) ReactEditor.focus(editor);
}}
/>
}
>
{(anchorRef) => (
<IconButton
ref={anchorRef}
aria-pressed={emojiBoard}
onClick={() => setEmojiBoard(true)}
variant="SurfaceVariant"
size="300"
radii="300"
>
<Icon size="400" src={Icons.Smile} filled={emojiBoard} />
</IconButton>
)}
<IconButton
aria-pressed={anchor !== undefined}
onClick={
((evt) =>
setAnchor(
evt.currentTarget.getBoundingClientRect()
)) as MouseEventHandler<HTMLButtonElement>
}
variant="SurfaceVariant"
size="300"
radii="300"
>
<Icon size="400" src={Icons.Smile} filled={anchor !== undefined} />
</IconButton>
</PopOut>
)}
</UseStateProvider>

39
src/app/pages/auth/ServerPicker.tsx
View file

@ -15,6 +15,7 @@ import {
Menu,
MenuItem,
PopOut,
RectCords,
Text,
config,
} from 'folds';
@ -33,7 +34,7 @@ export function ServerPicker({
allowCustomServer?: boolean;
onServerChange: (server: string) => void;
}) {
const [serverMenu, setServerMenu] = useState(false);
const [serverMenuAnchor, setServerMenuAnchor] = useState<RectCords>();
const serverInputRef = useRef<HTMLInputElement>(null);
useEffect(() => {
@ -53,7 +54,7 @@ export function ServerPicker({
const handleKeyDown: KeyboardEventHandler<HTMLInputElement> = (evt) => {
if (evt.key === 'ArrowDown') {
evt.preventDefault();
setServerMenu(true);
setServerMenuAnchor(undefined);
}
if (evt.key === 'Enter') {
evt.preventDefault();
@ -67,7 +68,12 @@ export function ServerPicker({
if (selectedServer) {
onServerChange(selectedServer);
}
setServerMenu(false);
setServerMenuAnchor(undefined);
};
const handleOpenServerMenu: MouseEventHandler<HTMLElement> = (evt) => {
const target = evt.currentTarget.parentElement ?? evt.currentTarget;
setServerMenuAnchor(target.getBoundingClientRect());
};
return (
@ -81,11 +87,11 @@ export function ServerPicker({
onKeyDown={handleKeyDown}
size="500"
readOnly={!allowCustomServer}
onClick={allowCustomServer ? undefined : () => setServerMenu(true)}
onClick={allowCustomServer ? undefined : handleOpenServerMenu}
after={
serverList.length === 0 || (serverList.length === 1 && !allowCustomServer) ? undefined : (
<PopOut
open={serverMenu}
anchor={serverMenuAnchor}
position="Bottom"
align="End"
offset={4}
@ -93,7 +99,7 @@ export function ServerPicker({
<FocusTrap
focusTrapOptions={{
initialFocus: false,
onDeactivate: () => setServerMenu(false),
onDeactivate: () => setServerMenuAnchor(undefined),
clickOutsideDeactivates: true,
isKeyForward: (evt: KeyboardEvent) => evt.key === 'ArrowDown',
isKeyBackward: (evt: KeyboardEvent) => evt.key === 'ArrowUp',
@ -120,18 +126,15 @@ export function ServerPicker({
</FocusTrap>
}
>
{(anchorRef) => (
<IconButton
ref={anchorRef}
onClick={() => setServerMenu(true)}
variant={allowCustomServer ? 'Background' : 'Surface'}
size="300"
aria-pressed={serverMenu}
radii="300"
>
<Icon src={Icons.ChevronBottom} />
</IconButton>
)}
<IconButton
onClick={handleOpenServerMenu}
variant={allowCustomServer ? 'Background' : 'Surface'}
size="300"
aria-pressed={!!serverMenuAnchor}
radii="300"
>
<Icon src={Icons.ChevronBottom} />
</IconButton>
</PopOut>
)
}

38
src/app/pages/auth/login/PasswordLoginForm.tsx
View file

@ -1,4 +1,4 @@
import React, { FormEventHandler, useCallback, useState } from 'react';
import React, { FormEventHandler, MouseEventHandler, useCallback, useState } from 'react';
import {
Box,
Button,
@ -12,6 +12,7 @@ import {
OverlayBackdrop,
OverlayCenter,
PopOut,
RectCords,
Spinner,
Text,
config,
@ -37,17 +38,21 @@ import { FieldError } from '../FiledError';
import { getResetPasswordPath } from '../../pathUtils';
function UsernameHint({ server }: { server: string }) {
const [open, setOpen] = useState(false);
const [anchor, setAnchor] = useState<RectCords>();
const handleOpenMenu: MouseEventHandler<HTMLElement> = (evt) => {
setAnchor(evt.currentTarget.getBoundingClientRect());
};
return (
<PopOut
open={open}
anchor={anchor}
position="Top"
align="End"
content={
<FocusTrap
focusTrapOptions={{
initialFocus: false,
onDeactivate: () => setOpen(false),
onDeactivate: () => setAnchor(undefined),
clickOutsideDeactivates: true,
}}
>
@ -84,20 +89,17 @@ function UsernameHint({ server }: { server: string }) {
</FocusTrap>
}
>
{(targetRef) => (
<IconButton
tabIndex={-1}
onClick={() => setOpen(true)}
ref={targetRef}
type="button"
variant="Background"
size="300"
radii="300"
aria-pressed={open}
>
<Icon style={{ opacity: config.opacity.P300 }} size="100" src={Icons.Info} />
</IconButton>
)}
<IconButton
tabIndex={-1}
onClick={handleOpenMenu}
type="button"
variant="Background"
size="300"
radii="300"
aria-pressed={!!anchor}
>
<Icon style={{ opacity: config.opacity.P300 }} size="100" src={Icons.Info} />
</IconButton>
</PopOut>
);
}

74
src/app/pages/client/explore/Server.tsx
View file

@ -19,6 +19,7 @@ import {
Menu,
MenuItem,
PopOut,
RectCords,
Scroll,
Spinner,
Text,
@ -149,7 +150,7 @@ function ThirdPartyProtocolsSelector({
onChange: (instanceId?: string) => void;
}) {
const mx = useMatrixClient();
const [menu, setMenu] = useState(false);
const [menuAnchor, setMenuAnchor] = useState<RectCords>();
const { data } = useQuery({
queryKey: ['thirdparty', 'protocols'],
@ -159,7 +160,11 @@ function ThirdPartyProtocolsSelector({
const handleInstanceSelect: MouseEventHandler<HTMLButtonElement> = (evt): void => {
const insId = evt.currentTarget.getAttribute('data-instance-id') ?? undefined;
onChange(insId);
setMenu(false);
setMenuAnchor(undefined);
};
const handleOpenMenu: MouseEventHandler<HTMLElement> = (evt) => {
setMenuAnchor(evt.currentTarget.getBoundingClientRect());
};
const instances = data && Object.keys(data).flatMap((protocol) => data[protocol].instances);
@ -168,14 +173,14 @@ function ThirdPartyProtocolsSelector({
return (
<PopOut
open={menu}
anchor={menuAnchor}
align="End"
position="Bottom"
content={
<FocusTrap
focusTrapOptions={{
initialFocus: false,
onDeactivate: () => setMenu(false),
onDeactivate: () => setMenuAnchor(undefined),
clickOutsideDeactivates: true,
}}
>
@ -221,21 +226,18 @@ function ThirdPartyProtocolsSelector({
</FocusTrap>
}
>
{(anchorRef) => (
<Chip
ref={anchorRef}
onClick={() => setMenu(!menu)}
aria-pressed={menu}
radii="Pill"
size="400"
variant={instanceId ? 'Success' : 'SurfaceVariant'}
after={<Icon size="100" src={Icons.ChevronBottom} />}
>
<Text size="T200" truncate>
{selectedInstance?.desc ?? DEFAULT_INSTANCE_NAME}
</Text>
</Chip>
)}
<Chip
onClick={handleOpenMenu}
aria-pressed={!!menuAnchor}
radii="Pill"
size="400"
variant={instanceId ? 'Success' : 'SurfaceVariant'}
after={<Icon size="100" src={Icons.ChevronBottom} />}
>
<Text size="T200" truncate>
{selectedInstance?.desc ?? DEFAULT_INSTANCE_NAME}
</Text>
</Chip>
</PopOut>
);
}
@ -245,7 +247,7 @@ type LimitButtonProps = {
onLimitChange: (limit: string) => void;
};
function LimitButton({ limit, onLimitChange }: LimitButtonProps) {
const [openLimit, setOpenLimit] = useState(false);
const [menuAnchor, setMenuAnchor] = useState<RectCords>();
const handleLimitSubmit: FormEventHandler<HTMLFormElement> = (evt) => {
evt.preventDefault();
@ -257,20 +259,23 @@ function LimitButton({ limit, onLimitChange }: LimitButtonProps) {
};
const setLimit = (l: string) => {
setOpenLimit(false);
setMenuAnchor(undefined);
onLimitChange(l);
};
const handleOpenMenu: MouseEventHandler<HTMLElement> = (evt) => {
setMenuAnchor(evt.currentTarget.getBoundingClientRect());
};
return (
<PopOut
open={openLimit}
anchor={menuAnchor}
align="End"
position="Bottom"
content={
<FocusTrap
focusTrapOptions={{
initialFocus: false,
onDeactivate: () => setOpenLimit(false),
onDeactivate: () => setMenuAnchor(undefined),
clickOutsideDeactivates: true,
}}
>
@ -315,19 +320,16 @@ function LimitButton({ limit, onLimitChange }: LimitButtonProps) {
</FocusTrap>
}
>
{(anchorRef) => (
<Chip
ref={anchorRef}
onClick={() => setOpenLimit(!openLimit)}
aria-pressed={openLimit}
radii="Pill"
size="400"
variant="SurfaceVariant"
after={<Icon size="100" src={Icons.ChevronBottom} />}
>
<Text size="T200" truncate>{`Page Limit: ${limit}`}</Text>
</Chip>
)}
<Chip
onClick={handleOpenMenu}
aria-pressed={!!menuAnchor}
radii="Pill"
size="400"
variant="SurfaceVariant"
after={<Icon size="100" src={Icons.ChevronBottom} />}
>
<Text size="T200" truncate>{`Page Limit: ${limit}`}</Text>
</Chip>
</PopOut>
);
}