From e7e4302100db8e4170b395f183aac7be85ab652d Mon Sep 17 00:00:00 2001 From: Carlos Valente Date: Tue, 14 Jul 2026 11:45:05 +0200 Subject: [PATCH] refactor(shortcuts): improve readability of info element --- .../src/common/components/kbd/Kbd.module.scss | 14 + apps/client/src/common/components/kbd/Kbd.tsx | 7 + .../entry-editor/EventEditorEmpty.module.scss | 106 ++++-- .../rundown/entry-editor/EventEditorEmpty.tsx | 319 +++++++----------- 4 files changed, 206 insertions(+), 240 deletions(-) create mode 100644 apps/client/src/common/components/kbd/Kbd.module.scss create mode 100644 apps/client/src/common/components/kbd/Kbd.tsx diff --git a/apps/client/src/common/components/kbd/Kbd.module.scss b/apps/client/src/common/components/kbd/Kbd.module.scss new file mode 100644 index 000000000..7538bce7d --- /dev/null +++ b/apps/client/src/common/components/kbd/Kbd.module.scss @@ -0,0 +1,14 @@ +.kbd { + display: inline-block; + min-width: 1.5rem; + padding: 0.0625rem 0.375rem; + border-radius: 2px; + background-color: $gray-1100; + color: $ui-white; + box-shadow: 0 0 3px rgba(0, 0, 0, 0.4); + font-family: monospace; + font-size: calc(1rem - 4px); + line-height: 1.5; + text-align: center; + white-space: nowrap; +} diff --git a/apps/client/src/common/components/kbd/Kbd.tsx b/apps/client/src/common/components/kbd/Kbd.tsx new file mode 100644 index 000000000..a784ec94f --- /dev/null +++ b/apps/client/src/common/components/kbd/Kbd.tsx @@ -0,0 +1,7 @@ +import { PropsWithChildren } from 'react'; + +import style from './Kbd.module.scss'; + +export default function Kbd({ children }: PropsWithChildren) { + return {children}; +} diff --git a/apps/client/src/features/rundown/entry-editor/EventEditorEmpty.module.scss b/apps/client/src/features/rundown/entry-editor/EventEditorEmpty.module.scss index b8eb8b312..47ef5fb36 100644 --- a/apps/client/src/features/rundown/entry-editor/EventEditorEmpty.module.scss +++ b/apps/client/src/features/rundown/entry-editor/EventEditorEmpty.module.scss @@ -3,58 +3,94 @@ height: 100%; max-height: 100%; overflow-y: auto; - padding: 0.5rem; + padding: 1rem 1.5rem; display: flex; flex-direction: column; - overflow-x: auto; } .shortcutSection { flex: 1; - margin-top: 15vh; + width: min(100%, 48rem); + margin-top: clamp(1.5rem, 8vh, 5rem); margin-inline: auto; - gap: 1rem; } .shortcuts { - font-size: calc(1rem - 3px); - border-collapse: separate; - border-spacing: 4rem 0; + display: grid; + gap: 0.875rem; + margin-top: 0.875rem; +} - tr { - white-space: nowrap; - td:nth-child(odd) { - text-align: left; - } - td:nth-child(even) { - text-align: right; - } +.shortcutGroup { + h3 { + margin: 0 0 0.375rem; + color: $ui-white; + font-size: calc(1rem - 3px); + font-weight: 600; + text-transform: uppercase; } } -.spacer { - height: 1rem; +.shortcutList { + display: grid; + gap: 0.25rem; +} + +.shortcutRow { + min-height: 1.625rem; + display: grid; + grid-template-columns: minmax(10rem, 1fr) minmax(0, auto); + align-items: center; + gap: 0.75rem; + font-size: calc(1rem - 3px); +} + +.shortcutLabel { + min-width: 0; + line-height: 1.2; +} + +.shortcutKeys { + display: inline-flex; + align-items: center; + flex-wrap: wrap; + justify-content: flex-end; + gap: 0.25rem 0.5rem; + min-width: 0; +} + +.keyCombo { + display: inline-flex; + align-items: center; + flex-wrap: nowrap; + gap: 0.25rem 0; +} + +.separator { + color: $gray-500; + font-size: calc(1rem - 5px); } .prompt { - margin-left: 4rem; -} - -.divider { - display: inline-block; - text-align: center; - width: 1em; -} - -.kbd { - font-family: monospace; - white-space: nowrap; - font-size: calc(1rem - 2px); - padding: 0.125rem 0.5rem; - background-color: $gray-1200; color: $ui-white; - border-radius: 2px; - font-weight: 400; - box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.4); +} + +@media (max-width: 680px) { + .entryEditor { + padding: 0.75rem 1rem; + } + + .shortcutSection { + margin-top: 1rem; + } + + .shortcutRow { + grid-template-columns: 1fr; + gap: 0.25rem; + } + + .shortcutKeys { + justify-content: flex-start; + } } diff --git a/apps/client/src/features/rundown/entry-editor/EventEditorEmpty.tsx b/apps/client/src/features/rundown/entry-editor/EventEditorEmpty.tsx index 0097de080..994a588b0 100644 --- a/apps/client/src/features/rundown/entry-editor/EventEditorEmpty.tsx +++ b/apps/client/src/features/rundown/entry-editor/EventEditorEmpty.tsx @@ -1,6 +1,7 @@ import { PropsWithChildren, memo } from 'react'; import * as Editor from '../../../common/components/editor-utils/EditorUtils'; +import Kbd from '../../../common/components/kbd/Kbd'; import { deviceAlt, deviceMod } from '../../../common/utils/deviceUtils'; import style from './EventEditorEmpty.module.scss'; @@ -12,216 +13,124 @@ function EventEditorEmpty() {
Rundown shortcuts - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Find in rundown - {deviceMod} - + - F -
Open Settings - {deviceMod} - + - , -
Select entry - {deviceAlt} - + - ↑ - / - ↓ -
Select group - {deviceAlt} - + - Shift - + - ↑ - / - ↓ -
Jump to top / bottom - Home - / - End -
Page up / down - PgUp - / - PgDn -
Deselect entry - Esc -
Reorder selected entry - {deviceAlt} - + - {deviceMod} - + - ↑ - / - ↓ -
Copy selected entry - {deviceMod} - + - C -
Cut selected entry - {deviceMod} - + - X -
Paste above - {deviceMod} - + - Shift - + - V -
Paste below - {deviceMod} - + - V -
Clone selected entry - {deviceMod} - + - D -
Delete selected entry - {deviceAlt} - + - Backspace -
Add event below - {deviceAlt} - + - E -
Add event above - {deviceAlt} - + - Shift - + - E -
Add group below - {deviceAlt} - + - G -
Add group above - {deviceAlt} - + - Shift - + - G -
Add milestone below - {deviceAlt} - + - M -
Add milestone above - {deviceAlt} - + - Shift - + - M -
Add delay below - {deviceAlt} - + - D -
Add delay above - {deviceAlt} - + - Shift - + - D -
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
); } -function AuxKey({ children }: PropsWithChildren) { - return {children}; +function ShortcutGroup({ title, children }: PropsWithChildren<{ title: string }>) { + return ( +
+

{title}

+
{children}
+
+ ); } -function Kbd({ children }: PropsWithChildren) { - return {children}; +function Shortcut({ label, children }: PropsWithChildren<{ label: string }>) { + return ( +
+ {label} + {children} +
+ ); +} + +function Combo({ keys }: { keys: string[] }) { + return ( + + {keys.map((key) => ( + {key} + ))} + + ); +} + +function Separator() { + return /; }