411e4f52c6
* WIP - add room settings dialog * join rule setting - WIP * show emojis & stickers in room settings - WIP * restyle join rule switcher * Merge branch 'dev' into new-room-settings * add join rule hook * open room settings from global state * open new room settings from all places * rearrange settings menu item * add option for creating new image pack * room devtools - WIP * render room state events as list * add option to open state event * add option to edit state event * refactor text area code editor into hook * add option to send message and state event * add cutout card component * add hook for room account data * display room account data - WIP * refactor global account data editor component * add account data editor in room * fix font style in devtool * show state events in compact form * add option to delete room image pack * add server badge component * add member tile component * render members in room settings * add search in room settings member * add option to reset member search * add filter in room members * fix member virtual item key * remove color from serve badge in room members * show room in settings * fix loading indicator position * power level tags in room setting - WIP * generate fallback tag in backward compatible way * add color picker * add powers editor - WIP * add props to stop adding emoji to recent usage * add beta feature notice badge * add types for power level tag icon * refactor image pack rooms code to hook * option for adding new power levels tags * remove console log * refactor power icon * add option to edit power level tags * remove power level from powers pill * fix power level labels * add option to delete power levels * fix long power level name shrinks power integer * room permissions - WIP * add power level selector component * add room permissions * move user default permission setting to other group * add power permission peek menu * fix weigh of power switch text * hide above for max power in permission switcher * improve beta badge description * render room profile in room settings * add option to edit room profile * make room topic input text area * add option to enable room encryption in room settings * add option to change message history visibility * add option to change join rule * add option for addresses in room settings * close encryption dialog after enabling
59 lines
1.7 KiB
TypeScript
59 lines
1.7 KiB
TypeScript
import FocusTrap from 'focus-trap-react';
|
|
import { Box, Button, config, Menu, PopOut, RectCords, Text } from 'folds';
|
|
import React, { MouseEventHandler, ReactNode, useState } from 'react';
|
|
import { stopPropagation } from '../utils/keyboard';
|
|
|
|
type HexColorPickerPopOutProps = {
|
|
children: (onOpen: MouseEventHandler<HTMLElement>, opened: boolean) => ReactNode;
|
|
picker: ReactNode;
|
|
onRemove?: () => void;
|
|
};
|
|
export function HexColorPickerPopOut({ picker, onRemove, children }: HexColorPickerPopOutProps) {
|
|
const [cords, setCords] = useState<RectCords>();
|
|
|
|
const handleOpen: MouseEventHandler<HTMLElement> = (evt) => {
|
|
setCords(evt.currentTarget.getBoundingClientRect());
|
|
};
|
|
|
|
return (
|
|
<PopOut
|
|
anchor={cords}
|
|
position="Bottom"
|
|
align="Center"
|
|
content={
|
|
<FocusTrap
|
|
focusTrapOptions={{
|
|
onDeactivate: () => setCords(undefined),
|
|
clickOutsideDeactivates: true,
|
|
escapeDeactivates: stopPropagation,
|
|
}}
|
|
>
|
|
<Menu
|
|
style={{
|
|
padding: config.space.S100,
|
|
borderRadius: config.radii.R500,
|
|
overflow: 'initial',
|
|
}}
|
|
>
|
|
<Box direction="Column" gap="200">
|
|
{picker}
|
|
{onRemove && (
|
|
<Button
|
|
size="300"
|
|
variant="Secondary"
|
|
fill="Soft"
|
|
radii="400"
|
|
onClick={() => onRemove()}
|
|
>
|
|
<Text size="B300">Remove</Text>
|
|
</Button>
|
|
)}
|
|
</Box>
|
|
</Menu>
|
|
</FocusTrap>
|
|
}
|
|
>
|
|
{children(handleOpen, !!cords)}
|
|
</PopOut>
|
|
);
|
|
}
|