cpvalente/ontime
1
0
Fork 0
mirror of https://github.com/cpvalente/ontime.git synced 2026-08-08 08:53:51 +00:00
Code Issues Packages Projects Releases 10 Wiki Activity

style: improve readability of shortcuts

Browse Source
This commit is contained in:
Carlos Valente
2024-05-10 20:22:48 +02:00
committed by Carlos Valente
parent e8cfdbe3b9
commit 7da3480dfe
3 changed files with 66 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/client/src/features/rundown/event-editor/EventEditorEmpty.module.scss
+6
View File
@@ -32,3 +32,9 @@
.prompt {
font-size: 1rem;
}
.divider {
display: inline-block;
text-align: center;
width: 1em;
}
apps/client/src/features/rundown/event-editor/EventEditorEmpty.tsx
+54 -12
View File
@@ -18,49 +18,77 @@ function EventEditorEmpty() {
<tbody>
<tr>
<td>
<Kbd>{deviceAlt}</Kbd> + <Kbd>↑</Kbd> / <Kbd>↓</Kbd>
<Kbd>{deviceAlt}</Kbd>
<AuxKey>+</AuxKey>
<Kbd>↑</Kbd>
<AuxKey>/</AuxKey>
<Kbd>↓</Kbd>
</td>
<td>Select entry</td>
</tr>
<tr>
<td>
<Kbd>{deviceAlt}</Kbd> + <Kbd>{deviceMod}</Kbd> + <Kbd>↑</Kbd> / <Kbd>↑</Kbd>
<Kbd>{deviceAlt}</Kbd>
<AuxKey>+</AuxKey>
<Kbd>{deviceMod}</Kbd>
<AuxKey>+</AuxKey>
<Kbd>↑</Kbd>
<AuxKey>/</AuxKey>
<Kbd>↑</Kbd>
</td>
<td>Reorder selected entry</td>
</tr>
<tr>
<td>
<Kbd>{deviceAlt}</Kbd> + <Kbd>E</Kbd>
<Kbd>{deviceAlt}</Kbd>
<AuxKey>+</AuxKey>
<Kbd>E</Kbd>
</td>
<td>Add event below</td>
</tr>
<tr>
<td>
<Kbd>{deviceAlt}</Kbd> + <Kbd>↑</Kbd> + <Kbd>E</Kbd>
<Kbd>{deviceAlt}</Kbd>
<AuxKey>+</AuxKey>
<Kbd>↑</Kbd>
<AuxKey>+</AuxKey>
<Kbd>E</Kbd>
</td>
<td>Add event above</td>
</tr>
<tr>
<td>
<Kbd>{deviceAlt}</Kbd> + <Kbd>B</Kbd>
<Kbd>{deviceAlt}</Kbd>
<AuxKey>+</AuxKey>
<Kbd>B</Kbd>
</td>
<td>Add block below</td>
</tr>
<tr>
<td>
<Kbd>{deviceAlt}</Kbd> + <Kbd>↑</Kbd> + <Kbd>B</Kbd>
<Kbd>{deviceAlt}</Kbd>
<AuxKey>+</AuxKey>
<Kbd>↑</Kbd>
<AuxKey>+</AuxKey>
<Kbd>B</Kbd>
</td>
<td>Add block above</td>
</tr>
<tr>
<td>
<Kbd>{deviceAlt}</Kbd> + <Kbd>D</Kbd>
<Kbd>{deviceAlt}</Kbd>
<AuxKey>+</AuxKey>
<Kbd>D</Kbd>
</td>
<td>Add delay below</td>
</tr>
<tr>
<td>
<Kbd>{deviceAlt}</Kbd> + <Kbd>↑</Kbd> + <Kbd>D</Kbd>
<Kbd>{deviceAlt}</Kbd>
<AuxKey>+</AuxKey>
<Kbd>↑</Kbd>
<AuxKey>+</AuxKey>
<Kbd>D</Kbd>
</td>
<td>Add delay above</td>
</tr>
@@ -72,25 +100,35 @@ function EventEditorEmpty() {
</tr>
<tr>
<td>
<Kbd>{deviceMod}</Kbd> + <Kbd>⌫</Kbd>
<Kbd>{deviceMod}</Kbd>
<AuxKey>+</AuxKey>
<Kbd>⌫</Kbd>
</td>
<td>Delete selected entry</td>
</tr>
<tr>
<td>
<Kbd>{deviceMod}</Kbd> + <Kbd>C</Kbd>
<Kbd>{deviceMod}</Kbd>
<AuxKey>+</AuxKey>
<Kbd>C</Kbd>
</td>
<td>Copy selected entry</td>
</tr>
<tr>
<td>
<Kbd>{deviceMod}</Kbd> + <Kbd>↑</Kbd> + <Kbd>V</Kbd>
<Kbd>{deviceMod}</Kbd>
<AuxKey>+</AuxKey>
<Kbd>↑</Kbd>
<AuxKey>+</AuxKey>
<Kbd>V</Kbd>
</td>
<td>Paste above</td>
</tr>
<tr>
<td>
<Kbd>{deviceMod}</Kbd> + <Kbd>V</Kbd>
<Kbd>{deviceMod}</Kbd>
<AuxKey>+</AuxKey>
<Kbd>V</Kbd>
</td>
<td>Paste below</td>
</tr>
@@ -100,3 +138,7 @@ function EventEditorEmpty() {
</div>
);
}
function AuxKey({ children }: { children: React.ReactNode }) {
return <span className={style.divider}>{children}</span>;
}
apps/client/src/theme/theme.ts
+6 -2
View File
@@ -83,9 +83,13 @@ const theme = extendTheme({
Kbd: {
baseStyle: {
borderRadius: '2px',
border: '1px solid rgba(255, 255, 255, 0.20)',
border: 'none',
background: 'rgba(255, 255, 255, 0.10)',
color: 'white',
padding: '0.125rem 0.5rem',
color: '#f6f6f6', // $ui-white
fontWeight: 400,
boxShadow: '0px 0px 3px 0px rgba(0,0,0,0.4)',
fontSize: 'calc(1rem - 2px)',
},
},
Menu: {