diff --git a/CHANGELOG.md b/CHANGELOG.md index 07c79b8c..9829ec21 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -41,6 +41,7 @@ and this project adheres to - ♿️(frontend) improve accessibility of the IntroSlider carousel #1026 - ♿️(frontend) add skip link component for keyboard navigation #1019 - ♿️(frontend) announce mic/camera state to SR on shortcut toggle #1052 +- ✨(frontend) add Ctrl+Shift+/ to open shortcuts settings #1050 ### Fixed diff --git a/src/frontend/src/features/rooms/livekit/prefabs/VideoConference.tsx b/src/frontend/src/features/rooms/livekit/prefabs/VideoConference.tsx index 47da7730..d03fe15f 100644 --- a/src/frontend/src/features/rooms/livekit/prefabs/VideoConference.tsx +++ b/src/frontend/src/features/rooms/livekit/prefabs/VideoConference.tsx @@ -32,7 +32,7 @@ import { ScreenShareErrorModal } from '../components/ScreenShareErrorModal' import { useConnectionObserver } from '../hooks/useConnectionObserver' import { useNoiseReduction } from '../hooks/useNoiseReduction' import { useRegisterKeyboardShortcut } from '@/features/shortcuts/useRegisterKeyboardShortcut' -import { settingsStore } from '@/stores/settings' +import { useSettingsDialog } from '@/features/settings' import { SettingsDialogExtendedKey } from '@/features/settings/type' import { useVideoResolutionSubscription } from '../hooks/useVideoResolutionSubscription' import { SettingsDialogProvider } from '@/features/settings/components/SettingsDialogProvider' @@ -100,6 +100,7 @@ export function VideoConference({ ...props }: VideoConferenceProps) { const { t: tRooms } = useTranslation('rooms') const room = useRoomContext() const announce = useScreenReaderAnnounce() + const { toggleSettingsDialog } = useSettingsDialog() const getAnnouncementName = useCallback( (participant?: Participant | null) => { @@ -117,9 +118,8 @@ export function VideoConference({ ...props }: VideoConferenceProps) { useRegisterKeyboardShortcut({ id: 'open-shortcuts', handler: useCallback(() => { - settingsStore.defaultSelectedTab = SettingsDialogExtendedKey.SHORTCUTS - settingsStore.areSettingsOpen = true - }, []), + toggleSettingsDialog(SettingsDialogExtendedKey.SHORTCUTS) + }, [toggleSettingsDialog]), }) const tracks = useTracks( diff --git a/src/frontend/src/features/settings/components/tabs/ShortcutTab.tsx b/src/frontend/src/features/settings/components/tabs/ShortcutTab.tsx index 0fe54975..a5c9ffe7 100644 --- a/src/frontend/src/features/settings/components/tabs/ShortcutTab.tsx +++ b/src/frontend/src/features/settings/components/tabs/ShortcutTab.tsx @@ -3,15 +3,20 @@ import { ShortcutRow } from '@/features/shortcuts/components/ShortcutRow' import { css } from '@/styled-system/css' import { useTranslation } from 'react-i18next' import { TabPanel, type TabPanelProps } from '@/primitives/Tabs' -import { H } from '@/primitives' const tableStyle = css({ width: '100%', borderCollapse: 'collapse', overflowY: 'auto', + '& caption': { + fontWeight: 'bold', + marginBottom: '0.75rem', + textAlign: 'left', + }, '& th, & td': { padding: '0.65rem 0', textAlign: 'left', + fontWeight: 'normal', }, '& tbody tr': { borderBottom: '1px solid rgba(255,255,255,0.08)', @@ -29,12 +34,11 @@ export const ShortcutTab = ({ id }: Pick) => { className={css({ display: 'flex', flexDirection: 'column', - gap: '0.75rem', })} > - {t('shortcuts.listLabel')} - + + diff --git a/src/frontend/src/features/settings/hook/useSettingsDialog.ts b/src/frontend/src/features/settings/hook/useSettingsDialog.ts index 702bccf7..94fbd97d 100644 --- a/src/frontend/src/features/settings/hook/useSettingsDialog.ts +++ b/src/frontend/src/features/settings/hook/useSettingsDialog.ts @@ -14,7 +14,25 @@ export const useSettingsDialog = () => { settingsStore.areSettingsOpen = true } + const closeSettingsDialog = () => { + settingsStore.areSettingsOpen = false + } + + const toggleSettingsDialog = ( + defaultSelectedTab?: SettingsDialogExtendedKey + ) => { + if (areSettingsOpen) { + closeSettingsDialog() + } else { + if (defaultSelectedTab) + settingsStore.defaultSelectedTab = defaultSelectedTab + settingsStore.areSettingsOpen = true + } + } + return { openSettingsDialog, + closeSettingsDialog, + toggleSettingsDialog, } } diff --git a/src/frontend/src/features/shortcuts/components/ShortcutBadge.tsx b/src/frontend/src/features/shortcuts/components/ShortcutBadge.tsx index ce2d6002..22e815b4 100644 --- a/src/frontend/src/features/shortcuts/components/ShortcutBadge.tsx +++ b/src/frontend/src/features/shortcuts/components/ShortcutBadge.tsx @@ -25,9 +25,9 @@ export const ShortcutBadge: React.FC = ({ }) => { return ( <> - + {srLabel && {srLabel}} ) diff --git a/src/frontend/src/features/shortcuts/components/ShortcutRow.tsx b/src/frontend/src/features/shortcuts/components/ShortcutRow.tsx index c046e968..962b044d 100644 --- a/src/frontend/src/features/shortcuts/components/ShortcutRow.tsx +++ b/src/frontend/src/features/shortcuts/components/ShortcutRow.tsx @@ -31,9 +31,9 @@ export const ShortcutRow: React.FC = ({ descriptor }) => { return ( -
{t('shortcuts.listLabel')}
{t('shortcuts.columnAction')} {t('shortcuts.columnShortcut')}
+ {t(`actions.${descriptor.id}`)} - +