studio/meet
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

♻️(frontend) allow opening Settings dialog in a controlled way

Browse Source 
I am not hundred percent sure it respects @manuhabitela's guidelines,
but for the options menu, I would need to trigger a dialog in a controlled way.

I tried to have the minimal impact on the existing settings dialog.
This commit is contained in:
lebaudantoine
2024-08-06 17:25:22 +02:00
committed by aleb_the_flash
parent 1715ec10dd
commit f8fff3dbdf
2 changed files with 36 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
src/frontend/src/features/rooms/livekit/components/controls/Options/OptionsMenu.tsx
View File

@@ -4,12 +4,14 @@ import {
RiQuestionLine,
RiSettings3Line,
} from '@remixicon/react'
import { useState } from 'react'
import { styled } from '@/styled-system/jsx'
import {
Menu as RACMenu,
MenuItem as RACMenuItem,
Popover as RACPopover,
} from 'react-aria-components'
import { SettingsDialog } from '@/features/settings'
// Styled components to be refactored
const StyledMenu = styled(RACMenu, {
@@ -60,29 +62,35 @@ const StyledPopover = styled(RACPopover, {
export const OptionsMenu = () => {
const { t } = useTranslation('rooms')
const [isSettingsDialogOpen, setIsSettingsDialogOpen] = useState(false)
return (
<StyledPopover>
<StyledMenu>
<StyledMenuItem
href="https://tchap.gouv.fr/#/room/!aGImQayAgBLjSBycpm:agent.dinum.tchap.gouv.fr?via=agent.dinum.tchap.gouv.fr"
target="_blank"
>
<RiQuestionLine size={18} />
{t('options.items.support')}
</StyledMenuItem>
<StyledMenuItem
href="https://grist.incubateur.net/o/docs/forms/1YrfNP1QSSy8p2gCxMFnSf/4"
target="_blank"
>
<RiFeedbackLine size={18} />
{t('options.items.feedbacks')}
</StyledMenuItem>
<StyledMenuItem onAction={() => alert('delete')}>
<RiSettings3Line size={18} />
{t('options.items.settings')}
</StyledMenuItem>
</StyledMenu>
</StyledPopover>
<>
<StyledPopover>
<StyledMenu>
<StyledMenuItem
href="https://tchap.gouv.fr/#/room/!aGImQayAgBLjSBycpm:agent.dinum.tchap.gouv.fr?via=agent.dinum.tchap.gouv.fr"
target="_blank"
>
<RiQuestionLine size={18} />
{t('options.items.support')}
</StyledMenuItem>
<StyledMenuItem
href="https://grist.incubateur.net/o/docs/forms/1YrfNP1QSSy8p2gCxMFnSf/4"
target="_blank"
>
<RiFeedbackLine size={18} />
{t('options.items.feedbacks')}
</StyledMenuItem>
<StyledMenuItem onAction={() => setIsSettingsDialogOpen(true)}>
<RiSettings3Line size={18} />
{t('options.items.settings')}
</StyledMenuItem>
</StyledMenu>
</StyledPopover>
<SettingsDialog
isOpen={isSettingsDialogOpen}
onOpenChange={(v) => setIsSettingsDialogOpen(v)}
/>
</>
)
}

8
src/frontend/src/features/settings/components/SettingsDialog.tsx
View File

@@ -1,12 +1,14 @@
import { useTranslation } from 'react-i18next'
import { useLanguageLabels } from '@/i18n/useLanguageLabels'
import { Dialog, Field, H } from '@/primitives'
import { Dialog, type DialogProps, Field, H } from '@/primitives'
export const SettingsDialog = () => {
export type SettingsDialogProps = Pick<DialogProps, 'isOpen' | 'onOpenChange'>
export const SettingsDialog = (props: SettingsDialogProps) => {
const { t, i18n } = useTranslation('settings')
const { languagesList, currentLanguage } = useLanguageLabels()
return (
<Dialog title={t('dialog.heading')}>
<Dialog title={t('dialog.heading')} {...props}>
<H lvl={2}>{t('language.heading')}</H>
<Field
type="select"