mirror of
https://github.com/cpvalente/ontime.git
synced 2026-08-19 14:14:17 +00:00
shortcuts using useHotkeys from mantine/hooks (#907)
--------- Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> Co-authored-by: Carlos Valente <34649812+cpvalente@users.noreply.github.com> Co-authored-by: Carlos Valente <carlosvalente@pm.me>
This commit is contained in:
Alex Christoffer Rasmussen
committed by
GitHub
GitHub
parent
0c3c08ac98
commit
9e04a1dcfa
@@ -13,6 +13,7 @@ import { useEventSelection } from '../useEventSelection';
|
||||
import EventEditorTimes from './composite/EventEditorTimes';
|
||||
import EventEditorTitles from './composite/EventEditorTitles';
|
||||
import EventTextArea from './composite/EventTextArea';
|
||||
import EventEditorEmpty from './EventEditorEmpty';
|
||||
|
||||
import style from './EventEditor.module.scss';
|
||||
|
||||
@@ -67,11 +68,7 @@ export default function EventEditor() {
|
||||
};
|
||||
|
||||
if (!event) {
|
||||
return (
|
||||
<div className={style.eventEditor} data-testid='editor-container'>
|
||||
Select an event to edit
|
||||
</div>
|
||||
);
|
||||
return <EventEditorEmpty />;
|
||||
}
|
||||
|
||||
return (
|
||||
|
||||
@@ -0,0 +1,34 @@
|
||||
.eventEditor {
|
||||
color: $label-gray;
|
||||
height: 100%;
|
||||
max-height: 100%;
|
||||
overflow-y: auto;
|
||||
padding: 0.5rem;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.shortcutSection {
|
||||
flex: 1;
|
||||
display: grid;
|
||||
place-content: center;
|
||||
font-size: calc(1rem - 2px);
|
||||
}
|
||||
|
||||
.shortcuts {
|
||||
margin-top: 0.5rem;
|
||||
border-collapse: separate;
|
||||
border-spacing: 1rem 0;
|
||||
|
||||
tr {
|
||||
td:nth-child(odd) {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.prompt {
|
||||
font-size: 1rem;
|
||||
}
|
||||
@@ -0,0 +1,102 @@
|
||||
import { memo } from 'react';
|
||||
import { Kbd } from '@chakra-ui/react';
|
||||
|
||||
import { deviceAlt, deviceMod } from '../../../common/utils/deviceUtils';
|
||||
|
||||
import style from './EventEditorEmpty.module.scss';
|
||||
|
||||
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>
|
||||
|
||||
<table className={style.shortcuts}>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<Kbd>{deviceAlt}</Kbd> + <Kbd>↑</Kbd> / <Kbd>↓</Kbd>
|
||||
</td>
|
||||
<td>Select entry</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<Kbd>{deviceAlt}</Kbd> + <Kbd>{deviceMod}</Kbd> + <Kbd>↑</Kbd> / <Kbd>↑</Kbd>
|
||||
</td>
|
||||
<td>Reorder selected entry</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<Kbd>{deviceAlt}</Kbd> + <Kbd>E</Kbd>
|
||||
</td>
|
||||
<td>Add event below</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<Kbd>{deviceAlt}</Kbd> + <Kbd>↑</Kbd> + <Kbd>E</Kbd>
|
||||
</td>
|
||||
<td>Add event above</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<Kbd>{deviceAlt}</Kbd> + <Kbd>B</Kbd>
|
||||
</td>
|
||||
<td>Add block below</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<Kbd>{deviceAlt}</Kbd> + <Kbd>↑</Kbd> + <Kbd>B</Kbd>
|
||||
</td>
|
||||
<td>Add block above</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<Kbd>{deviceAlt}</Kbd> + <Kbd>D</Kbd>
|
||||
</td>
|
||||
<td>Add delay below</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<Kbd>{deviceAlt}</Kbd> + <Kbd>↑</Kbd> + <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> + <Kbd>⌫</Kbd>
|
||||
</td>
|
||||
<td>Delete selected entry</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<Kbd>{deviceMod}</Kbd> + <Kbd>C</Kbd>
|
||||
</td>
|
||||
<td>Copy selected entry</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<Kbd>{deviceMod}</Kbd> + <Kbd>↑</Kbd> + <Kbd>V</Kbd>
|
||||
</td>
|
||||
<td>Paste above</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<Kbd>{deviceMod}</Kbd> + <Kbd>V</Kbd>
|
||||
</td>
|
||||
<td>Paste below</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,4 +1,4 @@
|
||||
import { CSSProperties, useCallback } from 'react';
|
||||
import { CSSProperties, useCallback, useRef } from 'react';
|
||||
|
||||
import { AutoTextArea } from '../../../../common/components/input/auto-text-area/AutoTextArea';
|
||||
import useReactiveTextInput from '../../../../common/components/input/text-input/useReactiveTextInput';
|
||||
@@ -18,10 +18,12 @@ interface CountedTextAreaProps {
|
||||
|
||||
export default function EventTextArea(props: CountedTextAreaProps) {
|
||||
const { className, field, label, initialValue, style: givenStyles, submitHandler } = props;
|
||||
|
||||
const ref = useRef<HTMLInputElement | null>(null);
|
||||
const submitCallback = useCallback((newValue: string) => submitHandler(field, newValue), [field, submitHandler]);
|
||||
|
||||
const { value, onChange, onBlur, onKeyDown } = useReactiveTextInput(initialValue, submitCallback);
|
||||
const { value, onChange, onBlur, onKeyDown } = useReactiveTextInput(initialValue, submitCallback, ref, {
|
||||
submitOnCtrlEnter: true,
|
||||
});
|
||||
const classes = cx([style.inputLabel, className]);
|
||||
|
||||
return (
|
||||
@@ -31,6 +33,7 @@ export default function EventTextArea(props: CountedTextAreaProps) {
|
||||
</label>
|
||||
<AutoTextArea
|
||||
id={field}
|
||||
inputref={ref}
|
||||
rows={1}
|
||||
size='sm'
|
||||
resize='none'
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { useCallback } from 'react';
|
||||
import { useCallback, useRef } from 'react';
|
||||
import { Input, InputProps } from '@chakra-ui/react';
|
||||
|
||||
import useReactiveTextInput from '../../../../common/components/input/text-input/useReactiveTextInput';
|
||||
@@ -15,10 +15,10 @@ interface CountedTextInputProps extends InputProps {
|
||||
|
||||
export default function EventTextInput(props: CountedTextInputProps) {
|
||||
const { field, label, initialValue, submitHandler, maxLength } = props;
|
||||
|
||||
const ref = useRef<HTMLInputElement | null>(null);
|
||||
const submitCallback = useCallback((newValue: string) => submitHandler(field, newValue), [field, submitHandler]);
|
||||
|
||||
const { value, onChange, onBlur, onKeyDown } = useReactiveTextInput(initialValue, submitCallback, {
|
||||
const { value, onChange, onBlur, onKeyDown } = useReactiveTextInput(initialValue, submitCallback, ref, {
|
||||
submitOnEnter: true,
|
||||
});
|
||||
|
||||
@@ -29,6 +29,7 @@ export default function EventTextInput(props: CountedTextInputProps) {
|
||||
</label>
|
||||
<Input
|
||||
id={field}
|
||||
ref={ref}
|
||||
size='sm'
|
||||
variant='ontime-filled'
|
||||
data-testid='input-textfield'
|
||||
|
||||
Reference in New Issue
Block a user