From 03b3630611c614e7ee622f2bf5500c002d88c24a Mon Sep 17 00:00:00 2001 From: lebaudantoine Date: Tue, 13 Aug 2024 15:17:03 +0200 Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F(frontend)=20refactor=20optio?= =?UTF-8?q?ns=20menu?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit @manuhabitela introduced Menu and MenuTrigger components. Refactor the options menu to benefits from his components. Few details are not perfect yet. wip --- .../controls/Options/OptionsButton.tsx | 44 ++++--- .../controls/Options/OptionsMenu.tsx | 118 ------------------ .../controls/Options/OptionsMenuItems.tsx | 74 +++++++++++ src/frontend/src/primitives/menuItemRecipe.ts | 12 +- 4 files changed, 114 insertions(+), 134 deletions(-) delete mode 100644 src/frontend/src/features/rooms/livekit/components/controls/Options/OptionsMenu.tsx create mode 100644 src/frontend/src/features/rooms/livekit/components/controls/Options/OptionsMenuItems.tsx diff --git a/src/frontend/src/features/rooms/livekit/components/controls/Options/OptionsButton.tsx b/src/frontend/src/features/rooms/livekit/components/controls/Options/OptionsButton.tsx index 49ed44b7..0e2e861f 100644 --- a/src/frontend/src/features/rooms/livekit/components/controls/Options/OptionsButton.tsx +++ b/src/frontend/src/features/rooms/livekit/components/controls/Options/OptionsButton.tsx @@ -1,22 +1,38 @@ import { useTranslation } from 'react-i18next' import { RiMore2Line } from '@remixicon/react' -import { Button } from '@/primitives' -import { OptionsMenu } from '@/features/rooms/livekit/components/controls/Options/OptionsMenu.tsx' -import { MenuTrigger } from 'react-aria-components' +import { Button, Menu } from '@/primitives' + +import { useState } from 'react' +import { UsernameDialog } from '@/features/rooms/livekit/components/dialogs/UsernameDialog' +import { SettingsDialog } from '@/features/settings' +import { OptionsMenuItems } from '@/features/rooms/livekit/components/controls/Options/OptionsMenuItems' + +export type DialogState = 'username' | 'settings' | null export const OptionsButton = () => { const { t } = useTranslation('rooms') + const [dialogOpen, setDialogOpen] = useState(null) return ( - - - - + <> + + + + + !v && setDialogOpen(null)} + /> + !v && setDialogOpen(null)} + /> + ) } diff --git a/src/frontend/src/features/rooms/livekit/components/controls/Options/OptionsMenu.tsx b/src/frontend/src/features/rooms/livekit/components/controls/Options/OptionsMenu.tsx deleted file mode 100644 index 1c26b2c7..00000000 --- a/src/frontend/src/features/rooms/livekit/components/controls/Options/OptionsMenu.tsx +++ /dev/null @@ -1,118 +0,0 @@ -import { useTranslation } from 'react-i18next' -import { - RiFeedbackLine, - RiQuestionLine, - RiSettings3Line, - RiUser5Line, -} from '@remixicon/react' -import { useState } from 'react' -import { styled } from '@/styled-system/jsx' -import { - Menu as RACMenu, - MenuItem as RACMenuItem, - Popover as RACPopover, - Separator as RACSeparator, -} from 'react-aria-components' -import { SettingsDialog } from '@/features/settings' -import { UsernameDialog } from '../../dialogs/UsernameDialog' - -// Styled components to be refactored -const StyledMenu = styled(RACMenu, { - base: { - maxHeight: 'inherit', - boxSizing: 'border-box', - overflow: 'auto', - padding: '2px', - minWidth: '150px', - outline: 'none', - }, -}) - -const StyledMenuItem = styled(RACMenuItem, { - base: { - margin: '2px', - padding: '0.286rem 0.571rem', - borderRadius: '6px', - outline: 'none', - cursor: 'default', - color: 'black', - fontSize: '1.072rem', - position: 'relative', - display: 'flex', - alignItems: 'center', - gap: '20px', - forcedColorAdjust: 'none', - '&[data-focused]': { - color: 'primary.text', - backgroundColor: 'primary', - outline: 'none!', - }, - }, -}) - -const StyledPopover = styled(RACPopover, { - base: { - border: '1px solid #9ca3af', - boxShadow: '0 8px 20px rgba(0, 0, 0, 0.1)', - borderRadius: '4px', - background: 'white', - color: 'var(--text-color)', - outline: 'none', - minWidth: '112px', - width: '300px', - }, -}) - -const StyledSeparator = styled(RACSeparator, { - base: { - height: '1px', - background: '#9ca3af', - margin: '2px 4px', - }, -}) - -type DialogState = 'username' | 'settings' | null - -export const OptionsMenu = () => { - const { t } = useTranslation('rooms') - const [dialogOpen, setDialogOpen] = useState(null) - return ( - <> - - - setDialogOpen('username')}> - - {t('options.items.username')} - - - - - {t('options.items.support')} - - - - {t('options.items.feedbacks')} - - setDialogOpen('settings')}> - - {t('options.items.settings')} - - - - !v && setDialogOpen(null)} - /> - !v && setDialogOpen(null)} - /> - - ) -} diff --git a/src/frontend/src/features/rooms/livekit/components/controls/Options/OptionsMenuItems.tsx b/src/frontend/src/features/rooms/livekit/components/controls/Options/OptionsMenuItems.tsx new file mode 100644 index 00000000..8a4489ef --- /dev/null +++ b/src/frontend/src/features/rooms/livekit/components/controls/Options/OptionsMenuItems.tsx @@ -0,0 +1,74 @@ +import { menuItemRecipe } from '@/primitives/menuItemRecipe' +import { + RiFeedbackLine, + RiQuestionLine, + RiSettings3Line, + RiUser5Line, +} from '@remixicon/react' +import { styled } from '@/styled-system/jsx' +import { + MenuItem, + Menu as RACMenu, + Separator as RACSeparator, +} from 'react-aria-components' +import { useTranslation } from 'react-i18next' +import { Dispatch, SetStateAction } from 'react' +import { DialogState } from '@/features/rooms/livekit/components/controls/Options/OptionsButton' + +const StyledSeparator = styled(RACSeparator, { + base: { + height: '1px', + background: 'gray.300', + margin: '4px 0', + }, +}) + +// @todo try refactoring it to use MenuList component +export const OptionsMenuItems = ({ + onOpenDialog, +}: { + onOpenDialog: Dispatch> +}) => { + const { t } = useTranslation('rooms') + + return ( + + onOpenDialog('username')} + > + + {t('options.items.username')} + + + + + {t('options.items.support')} + + + + {t('options.items.feedbacks')} + + onOpenDialog('settings')} + > + + {t('options.items.settings')} + + + ) +} diff --git a/src/frontend/src/primitives/menuItemRecipe.ts b/src/frontend/src/primitives/menuItemRecipe.ts index 27b2f9b8..ad69a9cb 100644 --- a/src/frontend/src/primitives/menuItemRecipe.ts +++ b/src/frontend/src/primitives/menuItemRecipe.ts @@ -8,9 +8,8 @@ import { cva } from '@/styled-system/css' */ export const menuItemRecipe = cva({ base: { - paddingY: 0.125, + paddingY: '0.4rem', paddingX: 0.5, - paddingLeft: 1.5, textAlign: 'left', width: 'full', borderRadius: 4, @@ -37,4 +36,13 @@ export const menuItemRecipe = cva({ outline: 'none!', }, }, + variants: { + icon: { + true: { + display: 'flex', + alignItems: 'center', + gap: '1rem', + }, + }, + }, })