From bf28c5cb84887dc2c66c422426b70a5b41595861 Mon Sep 17 00:00:00 2001 From: lebaudantoine Date: Wed, 22 Jan 2025 21:12:03 +0100 Subject: [PATCH] =?UTF-8?q?=F0=9F=93=B1(frontend)=20enhance=20control=20ba?= =?UTF-8?q?r=20responsiveness=20for=20better=20UX?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Implemented collapsible advanced options to maintain usability on narrow screens following GMeet's UX pattern. Dialog and popover components were chosen based on GMeet choices, though this introduces potential accessibility concerns that should be addressed in future iterations. Current implementation uses JS for breakpoint handling due to challenges with Panda CSS's pure CSS approach. This workaround was necessary to resolve a persistent issue where the popover remained open after window expansion beyond 750px, even after the lateral menu trigger was removed from view. Technical debt note: Code needs refinement, particularly around breakpoint management and component architecture. Prioritized shipping over perfection to meet immediate responsive design needs. --- .../components/controls/TranscriptToggle.tsx | 2 +- .../prefabs/ControlBar/DesktopControlBar.tsx | 24 ++--- .../prefabs/ControlBar/MoreOptions.tsx | 87 +++++++++++++++++++ src/frontend/src/locales/de/rooms.json | 3 +- src/frontend/src/locales/en/rooms.json | 3 +- src/frontend/src/locales/fr/rooms.json | 3 +- src/frontend/src/primitives/buttonRecipe.ts | 15 ++++ 7 files changed, 114 insertions(+), 23 deletions(-) create mode 100644 src/frontend/src/features/rooms/livekit/prefabs/ControlBar/MoreOptions.tsx diff --git a/src/frontend/src/features/rooms/livekit/components/controls/TranscriptToggle.tsx b/src/frontend/src/features/rooms/livekit/components/controls/TranscriptToggle.tsx index 24c6d520..a1e78012 100644 --- a/src/frontend/src/features/rooms/livekit/components/controls/TranscriptToggle.tsx +++ b/src/frontend/src/features/rooms/livekit/components/controls/TranscriptToggle.tsx @@ -7,7 +7,7 @@ import { css } from '@/styled-system/css' import { ToggleButtonProps } from '@/primitives/ToggleButton' export const TranscriptToggle = ({ - variant = 'primaryDark', + variant = 'primaryTextDark', onPress, ...props }: ToggleButtonProps) => { diff --git a/src/frontend/src/features/rooms/livekit/prefabs/ControlBar/DesktopControlBar.tsx b/src/frontend/src/features/rooms/livekit/prefabs/ControlBar/DesktopControlBar.tsx index 9cb1da10..83465194 100644 --- a/src/frontend/src/features/rooms/livekit/prefabs/ControlBar/DesktopControlBar.tsx +++ b/src/frontend/src/features/rooms/livekit/prefabs/ControlBar/DesktopControlBar.tsx @@ -8,10 +8,8 @@ import { HandToggle } from '../../components/controls/HandToggle' import { ScreenShareToggle } from '../../components/controls/ScreenShareToggle' import { OptionsButton } from '../../components/controls/Options/OptionsButton' import { StartMediaButton } from '../../components/controls/StartMediaButton' -import { ChatToggle } from '../../components/controls/ChatToggle' -import { ParticipantsToggle } from '../../components/controls/Participants/ParticipantsToggle' -import { SupportToggle } from '../../components/controls/SupportToggle' -import { TranscriptToggle } from '../../components/controls/TranscriptToggle' +import { MoreOptions } from './MoreOptions' +import { useRef } from 'react' export function DesktopControlBar({ onDeviceError, @@ -21,9 +19,11 @@ export function DesktopControlBar({ saveVideoInputDeviceId, }: ControlBarAuxProps) { const browserSupportsScreenSharing = supportsScreenSharing() + const desktopControlBarEl = useRef(null) return ( <>
-
- - - - -
+ ) diff --git a/src/frontend/src/features/rooms/livekit/prefabs/ControlBar/MoreOptions.tsx b/src/frontend/src/features/rooms/livekit/prefabs/ControlBar/MoreOptions.tsx new file mode 100644 index 00000000..c22dc51e --- /dev/null +++ b/src/frontend/src/features/rooms/livekit/prefabs/ControlBar/MoreOptions.tsx @@ -0,0 +1,87 @@ +import { css } from '@/styled-system/css' +import { ChatToggle } from '../../components/controls/ChatToggle' +import { ParticipantsToggle } from '../../components/controls/Participants/ParticipantsToggle' +import { SupportToggle } from '../../components/controls/SupportToggle' +import { TranscriptToggle } from '../../components/controls/TranscriptToggle' +import { useSize } from '../../hooks/useResizeObserver' +import { useState, RefObject } from 'react' +import { Dialog, DialogTrigger, Popover } from 'react-aria-components' +import { Button } from '@/primitives' +import { ToggleButtonProps } from '@/primitives/ToggleButton' +import { RiArrowDownSLine, RiArrowUpSLine } from '@remixicon/react' +import { useTranslation } from 'react-i18next' + +const CONTROL_BAR_BREAKPOINT = 750 + +const NavigationControls = ({ onPress }: Partial) => ( + <> + + + + + +) + +export const LateralMenu = () => { + const { t } = useTranslation('rooms') + const [isOpen, setIsOpen] = useState(false) + + const handlePress = () => setIsOpen(!isOpen) + const handleClose = () => setIsOpen(false) + + return ( + + + + + + + + + ) +} + +export const MoreOptions = ({ + parentElement, +}: { + parentElement: RefObject +}) => { + const { width: parentWidth } = useSize(parentElement) + return ( +
+ {parentWidth > CONTROL_BAR_BREAKPOINT ? ( + + ) : ( + + )} +
+ ) +} diff --git a/src/frontend/src/locales/de/rooms.json b/src/frontend/src/locales/de/rooms.json index b7e8837d..961271d9 100644 --- a/src/frontend/src/locales/de/rooms.json +++ b/src/frontend/src/locales/de/rooms.json @@ -78,7 +78,8 @@ "open": "", "closed": "" }, - "support": "" + "support": "", + "moreOptions": "" }, "options": { "buttonLabel": "", diff --git a/src/frontend/src/locales/en/rooms.json b/src/frontend/src/locales/en/rooms.json index c579f25f..cd7a3a4e 100644 --- a/src/frontend/src/locales/en/rooms.json +++ b/src/frontend/src/locales/en/rooms.json @@ -77,7 +77,8 @@ "open": "Hide AI assistant", "closed": "Show AI assistant" }, - "support": "Support" + "support": "Support", + "moreOptions": "More options" }, "options": { "buttonLabel": "More Options", diff --git a/src/frontend/src/locales/fr/rooms.json b/src/frontend/src/locales/fr/rooms.json index c783b054..7b6bf917 100644 --- a/src/frontend/src/locales/fr/rooms.json +++ b/src/frontend/src/locales/fr/rooms.json @@ -77,7 +77,8 @@ "open": "Masquer l'assistant IA", "closed": "Afficher l'assistant IA" }, - "support": "Support" + "support": "Support", + "moreOptions": "Plus d'options" }, "options": { "buttonLabel": "Plus d'options", diff --git a/src/frontend/src/primitives/buttonRecipe.ts b/src/frontend/src/primitives/buttonRecipe.ts index e89483af..7f294980 100644 --- a/src/frontend/src/primitives/buttonRecipe.ts +++ b/src/frontend/src/primitives/buttonRecipe.ts @@ -109,6 +109,21 @@ export const buttonRecipe = cva({ color: 'primaryDark.100 !important', }, }, + secondaryDark: { + backgroundColor: 'primaryDark.50', + color: 'white', + '&[data-pressed]': { + backgroundColor: 'primaryDark.200', + }, + '&[data-hovered]': { + backgroundColor: 'primaryDark.100', + color: 'white', + }, + '&[data-selected]': { + backgroundColor: 'primaryDark.700 !important', + color: 'primaryDark.100 !important', + }, + }, primaryTextDark: { backgroundColor: 'transparent', color: 'white',