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, RiQuestionLine,
RiSettings3Line, RiSettings3Line,
} from '@remixicon/react' } from '@remixicon/react'
import { useState } from 'react'
import { styled } from '@/styled-system/jsx' import { styled } from '@/styled-system/jsx'
import { import {
Menu as RACMenu, Menu as RACMenu,
MenuItem as RACMenuItem, MenuItem as RACMenuItem,
Popover as RACPopover, Popover as RACPopover,
} from 'react-aria-components' } from 'react-aria-components'
import { SettingsDialog } from '@/features/settings'
// Styled components to be refactored // Styled components to be refactored
const StyledMenu = styled(RACMenu, { const StyledMenu = styled(RACMenu, {
@@ -60,29 +62,35 @@ const StyledPopover = styled(RACPopover, {
export const OptionsMenu = () => { export const OptionsMenu = () => {
const { t } = useTranslation('rooms') const { t } = useTranslation('rooms')
const [isSettingsDialogOpen, setIsSettingsDialogOpen] = useState(false)
return ( return (
<StyledPopover> <>
<StyledMenu> <StyledPopover>
<StyledMenuItem <StyledMenu>
href="https://tchap.gouv.fr/#/room/!aGImQayAgBLjSBycpm:agent.dinum.tchap.gouv.fr?via=agent.dinum.tchap.gouv.fr" <StyledMenuItem
target="_blank" 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')} <RiQuestionLine size={18} />
</StyledMenuItem> {t('options.items.support')}
<StyledMenuItem </StyledMenuItem>
href="https://grist.incubateur.net/o/docs/forms/1YrfNP1QSSy8p2gCxMFnSf/4" <StyledMenuItem
target="_blank" href="https://grist.incubateur.net/o/docs/forms/1YrfNP1QSSy8p2gCxMFnSf/4"
> target="_blank"
<RiFeedbackLine size={18} /> >
{t('options.items.feedbacks')} <RiFeedbackLine size={18} />
</StyledMenuItem> {t('options.items.feedbacks')}
<StyledMenuItem onAction={() => alert('delete')}> </StyledMenuItem>
<RiSettings3Line size={18} /> <StyledMenuItem onAction={() => setIsSettingsDialogOpen(true)}>
{t('options.items.settings')} <RiSettings3Line size={18} />
</StyledMenuItem> {t('options.items.settings')}
</StyledMenu> </StyledMenuItem>
</StyledPopover> </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 { useTranslation } from 'react-i18next'
import { useLanguageLabels } from '@/i18n/useLanguageLabels' 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 { t, i18n } = useTranslation('settings')
const { languagesList, currentLanguage } = useLanguageLabels() const { languagesList, currentLanguage } = useLanguageLabels()
return ( return (
<Dialog title={t('dialog.heading')}> <Dialog title={t('dialog.heading')} {...props}>
<H lvl={2}>{t('language.heading')}</H> <H lvl={2}>{t('language.heading')}</H>
<Field <Field
type="select" type="select"