cpvalente/ontime
1
0
Fork 0
mirror of https://github.com/cpvalente/ontime.git synced 2026-08-21 15:09:10 +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 { .prompt {
font-size: 1rem; 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> <tbody>
<tr> <tr>
<td> <td>
<Kbd>{deviceAlt}</Kbd> + <Kbd>↑</Kbd> / <Kbd>↓</Kbd> <Kbd>{deviceAlt}</Kbd>
<AuxKey>+</AuxKey>
<Kbd>↑</Kbd>
<AuxKey>/</AuxKey>
<Kbd>↓</Kbd>
</td> </td>
<td>Select entry</td> <td>Select entry</td>
</tr> </tr>
<tr> <tr>
<td> <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>
<td>Reorder selected entry</td> <td>Reorder selected entry</td>
</tr> </tr>
<tr> <tr>
<td> <td>
<Kbd>{deviceAlt}</Kbd> + <Kbd>E</Kbd> <Kbd>{deviceAlt}</Kbd>
<AuxKey>+</AuxKey>
<Kbd>E</Kbd>
</td> </td>
<td>Add event below</td> <td>Add event below</td>
</tr> </tr>
<tr> <tr>
<td> <td>
<Kbd>{deviceAlt}</Kbd> + <Kbd>↑</Kbd> + <Kbd>E</Kbd> <Kbd>{deviceAlt}</Kbd>
<AuxKey>+</AuxKey>
<Kbd>↑</Kbd>
<AuxKey>+</AuxKey>
<Kbd>E</Kbd>
</td> </td>
<td>Add event above</td> <td>Add event above</td>
</tr> </tr>
<tr> <tr>
<td> <td>
<Kbd>{deviceAlt}</Kbd> + <Kbd>B</Kbd> <Kbd>{deviceAlt}</Kbd>
<AuxKey>+</AuxKey>
<Kbd>B</Kbd>
</td> </td>
<td>Add block below</td> <td>Add block below</td>
</tr> </tr>
<tr> <tr>
<td> <td>
<Kbd>{deviceAlt}</Kbd> + <Kbd>↑</Kbd> + <Kbd>B</Kbd> <Kbd>{deviceAlt}</Kbd>
<AuxKey>+</AuxKey>
<Kbd>↑</Kbd>
<AuxKey>+</AuxKey>
<Kbd>B</Kbd>
</td> </td>
<td>Add block above</td> <td>Add block above</td>
</tr> </tr>
<tr> <tr>
<td> <td>
<Kbd>{deviceAlt}</Kbd> + <Kbd>D</Kbd> <Kbd>{deviceAlt}</Kbd>
<AuxKey>+</AuxKey>
<Kbd>D</Kbd>
</td> </td>
<td>Add delay below</td> <td>Add delay below</td>
</tr> </tr>
<tr> <tr>
<td> <td>
<Kbd>{deviceAlt}</Kbd> + <Kbd>↑</Kbd> + <Kbd>D</Kbd> <Kbd>{deviceAlt}</Kbd>
<AuxKey>+</AuxKey>
<Kbd>↑</Kbd>
<AuxKey>+</AuxKey>
<Kbd>D</Kbd>
</td> </td>
<td>Add delay above</td> <td>Add delay above</td>
</tr> </tr>
@@ -72,25 +100,35 @@ function EventEditorEmpty() {
</tr> </tr>
<tr> <tr>
<td> <td>
<Kbd>{deviceMod}</Kbd> + <Kbd>⌫</Kbd> <Kbd>{deviceMod}</Kbd>
<AuxKey>+</AuxKey>
<Kbd>⌫</Kbd>
</td> </td>
<td>Delete selected entry</td> <td>Delete selected entry</td>
</tr> </tr>
<tr> <tr>
<td> <td>
<Kbd>{deviceMod}</Kbd> + <Kbd>C</Kbd> <Kbd>{deviceMod}</Kbd>
<AuxKey>+</AuxKey>
<Kbd>C</Kbd>
</td> </td>
<td>Copy selected entry</td> <td>Copy selected entry</td>
</tr> </tr>
<tr> <tr>
<td> <td>
<Kbd>{deviceMod}</Kbd> + <Kbd>↑</Kbd> + <Kbd>V</Kbd> <Kbd>{deviceMod}</Kbd>
<AuxKey>+</AuxKey>
<Kbd>↑</Kbd>
<AuxKey>+</AuxKey>
<Kbd>V</Kbd>
</td> </td>
<td>Paste above</td> <td>Paste above</td>
</tr> </tr>
<tr> <tr>
<td> <td>
<Kbd>{deviceMod}</Kbd> + <Kbd>V</Kbd> <Kbd>{deviceMod}</Kbd>
<AuxKey>+</AuxKey>
<Kbd>V</Kbd>
</td> </td>
<td>Paste below</td> <td>Paste below</td>
</tr> </tr>
@@ -100,3 +138,7 @@ function EventEditorEmpty() {
</div> </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: { Kbd: {
baseStyle: { baseStyle: {
borderRadius: '2px', borderRadius: '2px',
border: '1px solid rgba(255, 255, 255, 0.20)', border: 'none',
background: 'rgba(255, 255, 255, 0.10)', 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: { Menu: {