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

style: tweaks to shortcut panel

Browse Source
This commit is contained in:
Carlos Valente
2024-05-17 21:11:38 +02:00
committed by Carlos Valente
parent 6bedd7ab1d
commit dade6f6692
3 changed files with 89 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/client/src/features/rundown/event-editor/EventEditorEmpty.module.scss
+12 -3
View File
@@ -14,23 +14,32 @@
flex: 1;
display: grid;
place-content: center;
font-size: calc(1rem - 2px);
gap: 1rem;
}
.shortcuts {
margin-top: 0.5rem;
font-size: calc(1rem - 3px);
border-collapse: separate;
border-spacing: 1rem 0;
border-spacing: 4rem 0;
tr {
td:nth-child(odd) {
text-align: left;
}
td:nth-child(even) {
text-align: right;
}
}
}
.spacer {
height: 1rem;
}
.prompt {
font-size: 1rem;
text-align: left;
margin-left: 4rem;
}
.divider {
apps/client/src/features/rundown/event-editor/EventEditorEmpty.tsx
+76 -76
View File
@@ -10,13 +10,12 @@ export default memo(EventEditorEmpty);
function EventEditorEmpty() {
return (
<div className={style.eventEditor} data-testid='editor-container'>
<div className={style.prompt}>Select an event to edit</div>
<div className={style.shortcutSection}>
<div className={style.prompt}>Shortcut navigation</div>
<div className={style.prompt}>Rundown shortcuts:</div>
<table className={style.shortcuts}>
<tbody>
<tr>
<td>Select entry</td>
<td>
<Kbd>{deviceAlt}</Kbd>
<AuxKey>+</AuxKey>
@@ -24,9 +23,16 @@ function EventEditorEmpty() {
<AuxKey>/</AuxKey>
<Kbd>↓</Kbd>
</td>
<td>Select entry</td>
</tr>
<tr>
<td>Deselect entry</td>
<td>
<Kbd>Esc</Kbd>
</td>
</tr>
<tr className={style.spacer} />
<tr>
<td>Reorder selected entry</td>
<td>
<Kbd>{deviceAlt}</Kbd>
<AuxKey>+</AuxKey>
@@ -36,85 +42,17 @@ function EventEditorEmpty() {
<AuxKey>/</AuxKey>
<Kbd>↑</Kbd>
</td>
<td>Reorder selected entry</td>
</tr>
<tr>
<td>
<Kbd>{deviceAlt}</Kbd>
<AuxKey>+</AuxKey>
<Kbd>E</Kbd>
</td>
<td>Add event below</td>
</tr>
<tr>
<td>
<Kbd>{deviceAlt}</Kbd>
<AuxKey>+</AuxKey>
<Kbd>↑</Kbd>
<AuxKey>+</AuxKey>
<Kbd>E</Kbd>
</td>
<td>Add event above</td>
</tr>
<tr>
<td>
<Kbd>{deviceAlt}</Kbd>
<AuxKey>+</AuxKey>
<Kbd>B</Kbd>
</td>
<td>Add block below</td>
</tr>
<tr>
<td>
<Kbd>{deviceAlt}</Kbd>
<AuxKey>+</AuxKey>
<Kbd>↑</Kbd>
<AuxKey>+</AuxKey>
<Kbd>B</Kbd>
</td>
<td>Add block above</td>
</tr>
<tr>
<td>
<Kbd>{deviceAlt}</Kbd>
<AuxKey>+</AuxKey>
<Kbd>D</Kbd>
</td>
<td>Add delay below</td>
</tr>
<tr>
<td>
<Kbd>{deviceAlt}</Kbd>
<AuxKey>+</AuxKey>
<Kbd>↑</Kbd>
<AuxKey>+</AuxKey>
<Kbd>D</Kbd>
</td>
<td>Add delay above</td>
</tr>
<tr>
<td>
<Kbd>Esc</Kbd>
</td>
<td>Deselect entry</td>
</tr>
<tr>
<td>
<Kbd>{deviceMod}</Kbd>
<AuxKey>+</AuxKey>
<Kbd>⌫</Kbd>
</td>
<td>Delete selected entry</td>
</tr>
<tr>
<td>Copy selected entry</td>
<td>
<Kbd>{deviceMod}</Kbd>
<AuxKey>+</AuxKey>
<Kbd>C</Kbd>
</td>
<td>Copy selected entry</td>
</tr>
<tr>
<td>Paste above</td>
<td>
<Kbd>{deviceMod}</Kbd>
<AuxKey>+</AuxKey>
@@ -122,15 +60,77 @@ function EventEditorEmpty() {
<AuxKey>+</AuxKey>
<Kbd>V</Kbd>
</td>
<td>Paste above</td>
</tr>
<tr>
<td>Paste below</td>
<td>
<Kbd>{deviceMod}</Kbd>
<AuxKey>+</AuxKey>
<Kbd>V</Kbd>
</td>
<td>Paste below</td>
</tr>
<tr>
<td>Delete selected entry</td>
<td>
<Kbd>{deviceMod}</Kbd>
<AuxKey>+</AuxKey>
<Kbd>⌫</Kbd>
</td>
</tr>
<tr className={style.spacer} />
<tr>
<td>Add event below</td>
<td>
<Kbd>{deviceAlt}</Kbd>
<AuxKey>+</AuxKey>
<Kbd>E</Kbd>
</td>
</tr>
<tr>
<td>Add event above</td>
<td>
<Kbd>{deviceAlt}</Kbd>
<AuxKey>+</AuxKey>
<Kbd>↑</Kbd>
<AuxKey>+</AuxKey>
<Kbd>E</Kbd>
</td>
</tr>
<tr>
<td>Add block below</td>
<td>
<Kbd>{deviceAlt}</Kbd>
<AuxKey>+</AuxKey>
<Kbd>B</Kbd>
</td>
</tr>
<tr>
<td>Add block above</td>
<td>
<Kbd>{deviceAlt}</Kbd>
<AuxKey>+</AuxKey>
<Kbd>↑</Kbd>
<AuxKey>+</AuxKey>
<Kbd>B</Kbd>
</td>
</tr>
<tr>
<td>Add delay below</td>
<td>
<Kbd>{deviceAlt}</Kbd>
<AuxKey>+</AuxKey>
<Kbd>D</Kbd>
</td>
</tr>
<tr>
<td>Add delay above</td>
<td>
<Kbd>{deviceAlt}</Kbd>
<AuxKey>+</AuxKey>
<Kbd>↑</Kbd>
<AuxKey>+</AuxKey>
<Kbd>D</Kbd>
</td>
</tr>
</tbody>
</table>
apps/client/src/theme/theme.ts
+1 -1
View File
@@ -84,7 +84,7 @@ const theme = extendTheme({
baseStyle: {
borderRadius: '2px',
border: 'none',
background: 'rgba(255, 255, 255, 0.10)',
background: '#262626', // $gray-1200
padding: '0.125rem 0.5rem',
color: '#f6f6f6', // $ui-white
fontWeight: 400,