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 new file mode 100644 index 00000000..49ed44b7 --- /dev/null +++ b/src/frontend/src/features/rooms/livekit/components/controls/Options/OptionsButton.tsx @@ -0,0 +1,22 @@ +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' + +export const OptionsButton = () => { + const { t } = useTranslation('rooms') + return ( + + + + + ) +} 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 new file mode 100644 index 00000000..0fb6dc40 --- /dev/null +++ b/src/frontend/src/features/rooms/livekit/components/controls/Options/OptionsMenu.tsx @@ -0,0 +1,88 @@ +import { useTranslation } from 'react-i18next' +import { + RiFeedbackLine, + RiQuestionLine, + RiSettings3Line, +} from '@remixicon/react' +import { styled } from '@/styled-system/jsx' +import { + Menu as RACMenu, + MenuItem as RACMenuItem, + Popover as RACPopover, +} from 'react-aria-components' + +// 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', + }, +}) + +export const OptionsMenu = () => { + const { t } = useTranslation('rooms') + + return ( + + + + + {t('options.items.support')} + + + + {t('options.items.feedbacks')} + + alert('delete')}> + + {t('options.items.settings')} + + + + ) +} diff --git a/src/frontend/src/features/rooms/livekit/components/controls/SettingsMenuToggle.tsx b/src/frontend/src/features/rooms/livekit/components/controls/SettingsMenuToggle.tsx deleted file mode 100644 index 1cd1fa77..00000000 --- a/src/frontend/src/features/rooms/livekit/components/controls/SettingsMenuToggle.tsx +++ /dev/null @@ -1,58 +0,0 @@ -import * as React from 'react' -import { useLayoutContext } from '@livekit/components-react' -import { mergeProps } from '@/utils/mergeProps' - -/** @alpha */ -export interface UseSettingsToggleProps { - props: React.ButtonHTMLAttributes -} - -/** - * The `useSettingsToggle` hook provides state and functions for toggling the settings menu. - * @remarks - * Depends on the `LayoutContext` to work properly. - * @see {@link SettingsMenu} - * @alpha - */ -export function useSettingsToggle({ props }: UseSettingsToggleProps) { - const { dispatch, state } = useLayoutContext().widget - const className = 'lk-button lk-settings-toggle' - - const mergedProps = React.useMemo(() => { - return mergeProps(props, { - className, - onClick: () => { - if (dispatch) dispatch({ msg: 'toggle_settings' }) - }, - 'aria-pressed': state?.showSettings ? 'true' : 'false', - }) - }, [props, className, dispatch, state]) - - return { mergedProps } -} - -/** @alpha */ -export interface SettingsMenuToggleProps - extends React.ButtonHTMLAttributes {} - -/** - * The `SettingsMenuToggle` component is a button that toggles the visibility of the `SettingsMenu` component. - * @remarks - * For the component to have any effect it has to live inside a `LayoutContext` context. - * - * @alpha - */ -export const SettingsMenuToggle: ( - props: SettingsMenuToggleProps & React.RefAttributes -) => React.ReactNode = /* @__PURE__ */ React.forwardRef< - HTMLButtonElement, - SettingsMenuToggleProps ->(function SettingsMenuToggle(props: SettingsMenuToggleProps, ref) { - const { mergedProps } = useSettingsToggle({ props }) - - return ( - - ) -}) diff --git a/src/frontend/src/features/rooms/livekit/prefabs/ControlBar.tsx b/src/frontend/src/features/rooms/livekit/prefabs/ControlBar.tsx index a8036867..e34b3209 100644 --- a/src/frontend/src/features/rooms/livekit/prefabs/ControlBar.tsx +++ b/src/frontend/src/features/rooms/livekit/prefabs/ControlBar.tsx @@ -7,7 +7,6 @@ import { ChatIcon, ChatToggle, DisconnectButton, - GearIcon, LeaveIcon, MediaDeviceMenu, TrackToggle, @@ -15,12 +14,11 @@ import { usePersistentUserChoices, } from '@livekit/components-react' -import { SettingsMenuToggle } from '../components/controls/SettingsMenuToggle' import { mergeProps } from '@/utils/mergeProps.ts' import { StartMediaButton } from '../components/controls/StartMediaButton' import { useMediaQuery } from '../hooks/useMediaQuery' import { useTranslation } from 'react-i18next' -import { SettingsButton } from '@/features/settings' +import { OptionsButton } from '../components/controls/Options/OptionsButton' /** @public */ export type ControlBarControls = { @@ -189,10 +187,7 @@ export function ControlBar({ {showIcon && } {showText && t('controls.chat')} - - {showIcon && } - {showText && t('controls.settings')} - + {showIcon && } {showText && t('controls.leave')} diff --git a/src/frontend/src/features/rooms/livekit/prefabs/VideoConference.tsx b/src/frontend/src/features/rooms/livekit/prefabs/VideoConference.tsx index 28afb91e..1b4660e1 100644 --- a/src/frontend/src/features/rooms/livekit/prefabs/VideoConference.tsx +++ b/src/frontend/src/features/rooms/livekit/prefabs/VideoConference.tsx @@ -187,14 +187,6 @@ export function VideoConference({ messageEncoder={chatMessageEncoder} messageDecoder={chatMessageDecoder} /> - {SettingsComponent && ( -
- -
- )} )} diff --git a/src/frontend/src/locales/de/rooms.json b/src/frontend/src/locales/de/rooms.json index fe64376c..2822472d 100644 --- a/src/frontend/src/locales/de/rooms.json +++ b/src/frontend/src/locales/de/rooms.json @@ -29,7 +29,14 @@ "shareScreen": "", "stopScreenShare": "", "chat": "", - "settings": "", "leave": "" + }, + "options": { + "buttonLabel": "", + "items": { + "feedbacks": "", + "support": "", + "settings": "" + } } } diff --git a/src/frontend/src/locales/en/rooms.json b/src/frontend/src/locales/en/rooms.json index b2822464..c5fdc06b 100644 --- a/src/frontend/src/locales/en/rooms.json +++ b/src/frontend/src/locales/en/rooms.json @@ -29,7 +29,14 @@ "shareScreen": "Share screen", "stopScreenShare": "Stop screen share", "chat": "Chat", - "settings": "Settings", "leave": "Leave" + }, + "options": { + "buttonLabel": "More Options", + "items": { + "feedbacks": "Give us feedbacks", + "support": "Get Help on Tchap", + "settings": "Settings" + } } } diff --git a/src/frontend/src/locales/fr/rooms.json b/src/frontend/src/locales/fr/rooms.json index 8a38cc48..b7746682 100644 --- a/src/frontend/src/locales/fr/rooms.json +++ b/src/frontend/src/locales/fr/rooms.json @@ -29,7 +29,14 @@ "shareScreen": "Partager l'écran", "stopScreenShare": "Arrêter le partage", "chat": "Chat", - "settings": "Paramètres", "leave": "Quitter" + }, + "options": { + "buttonLabel": "Plus d'options", + "items": { + "feedbacks": "Partager votre avis", + "support": "Obtenir de l'aide sur Tchap", + "settings": "Paramètres" + } } } diff --git a/src/frontend/src/primitives/Button.tsx b/src/frontend/src/primitives/Button.tsx index b93b6a34..fad77e61 100644 --- a/src/frontend/src/primitives/Button.tsx +++ b/src/frontend/src/primitives/Button.tsx @@ -103,6 +103,17 @@ const button = cva({ width: 'full', }, }, + legacyStyle: { + true: { + borderColor: 'gray.400', + '&[data-hovered]': { + borderColor: 'gray.500', + }, + '&[data-pressed]': { + borderColor: 'gray.500', + }, + }, + }, }, defaultVariants: { size: 'default',