cpvalente/ontime
1
0
Fork 0
mirror of https://github.com/cpvalente/ontime.git synced 2026-08-18 13:44:12 +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; flex: 1;
display: grid; display: grid;
place-content: center; place-content: center;
font-size: calc(1rem - 2px); gap: 1rem;
} }
.shortcuts { .shortcuts {
margin-top: 0.5rem; font-size: calc(1rem - 3px);
border-collapse: separate; border-collapse: separate;
border-spacing: 1rem 0; border-spacing: 4rem 0;
tr { tr {
td:nth-child(odd) { td:nth-child(odd) {
text-align: left;
}
td:nth-child(even) {
text-align: right; text-align: right;
} }
} }
} }
.spacer {
height: 1rem;
}
.prompt { .prompt {
font-size: 1rem; font-size: 1rem;
text-align: left;
margin-left: 4rem;
} }
.divider { .divider {
apps/client/src/features/rundown/event-editor/EventEditorEmpty.tsx
+76 -76
View File
@@ -10,13 +10,12 @@ export default memo(EventEditorEmpty);
function EventEditorEmpty() { function EventEditorEmpty() {
return ( return (
<div className={style.eventEditor} data-testid='editor-container'> <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.shortcutSection}>
<div className={style.prompt}>Shortcut navigation</div> <div className={style.prompt}>Rundown shortcuts:</div>
<table className={style.shortcuts}> <table className={style.shortcuts}>
<tbody> <tbody>
<tr> <tr>
<td>Select entry</td>
<td> <td>
<Kbd>{deviceAlt}</Kbd> <Kbd>{deviceAlt}</Kbd>
<AuxKey>+</AuxKey> <AuxKey>+</AuxKey>
@@ -24,9 +23,16 @@ function EventEditorEmpty() {
<AuxKey>/</AuxKey> <AuxKey>/</AuxKey>
<Kbd>↓</Kbd> <Kbd>↓</Kbd>
</td> </td>
<td>Select entry</td>
</tr> </tr>
<tr> <tr>
<td>Deselect entry</td>
<td>
<Kbd>Esc</Kbd>
</td>
</tr>
<tr className={style.spacer} />
<tr>
<td>Reorder selected entry</td>
<td> <td>
<Kbd>{deviceAlt}</Kbd> <Kbd>{deviceAlt}</Kbd>
<AuxKey>+</AuxKey> <AuxKey>+</AuxKey>
@@ -36,85 +42,17 @@ function EventEditorEmpty() {
<AuxKey>/</AuxKey> <AuxKey>/</AuxKey>
<Kbd>↑</Kbd> <Kbd>↑</Kbd>
</td> </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>
<tr> <tr>
<td>Copy selected entry</td>
<td> <td>
<Kbd>{deviceMod}</Kbd> <Kbd>{deviceMod}</Kbd>
<AuxKey>+</AuxKey> <AuxKey>+</AuxKey>
<Kbd>C</Kbd> <Kbd>C</Kbd>
</td> </td>
<td>Copy selected entry</td>
</tr> </tr>
<tr> <tr>
<td>Paste above</td>
<td> <td>
<Kbd>{deviceMod}</Kbd> <Kbd>{deviceMod}</Kbd>
<AuxKey>+</AuxKey> <AuxKey>+</AuxKey>
@@ -122,15 +60,77 @@ function EventEditorEmpty() {
<AuxKey>+</AuxKey> <AuxKey>+</AuxKey>
<Kbd>V</Kbd> <Kbd>V</Kbd>
</td> </td>
<td>Paste above</td>
</tr> </tr>
<tr> <tr>
<td>Paste below</td>
<td> <td>
<Kbd>{deviceMod}</Kbd> <Kbd>{deviceMod}</Kbd>
<AuxKey>+</AuxKey> <AuxKey>+</AuxKey>
<Kbd>V</Kbd> <Kbd>V</Kbd>
</td> </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> </tr>
</tbody> </tbody>
</table> </table>
apps/client/src/theme/theme.ts
+1 -1
View File
@@ -84,7 +84,7 @@ const theme = extendTheme({
baseStyle: { baseStyle: {
borderRadius: '2px', borderRadius: '2px',
border: 'none', border: 'none',
background: 'rgba(255, 255, 255, 0.10)', background: '#262626', // $gray-1200
padding: '0.125rem 0.5rem', padding: '0.125rem 0.5rem',
color: '#f6f6f6', // $ui-white color: '#f6f6f6', // $ui-white
fontWeight: 400, fontWeight: 400,