diff options
| -rw-r--r-- | components/keybindselector.tsx | 32 | ||||
| -rw-r--r-- | pages/_app.tsx | 1 | ||||
| -rw-r--r-- | pages/editor.tsx | 7 | ||||
| -rw-r--r-- | styles/keybindselector.css | 18 |
4 files changed, 58 insertions, 0 deletions
diff --git a/components/keybindselector.tsx b/components/keybindselector.tsx new file mode 100644 index 0000000..084d748 --- /dev/null +++ b/components/keybindselector.tsx @@ -0,0 +1,32 @@ +import FilledInput from '@material-ui/core/FilledInput'; +import FormControl from '@material-ui/core/FormControl'; +import InputLabel from '@material-ui/core/InputLabel'; +import { useState } from 'react'; +import { v4 as uuid } from 'uuid'; + +function Keybind(props: { + keyName: string; +}) { + return <span className='keybind'>{props.keyName}</span>; +} + +function KeybindSelectorInner(props: { + value: string[]; +}) { + return <div className='keybind-selector-inner'> + {props.value.map(s => <Keybind keyName={s} />)} + </div>; +} + +export default function KeybindSelector(props: { + label: string; + value: string[]; + onChange?: (newValue: string[]) => any; +}) { + var [tempID, _setTempID] = useState(uuid()); + + return <FormControl variant='filled' className='keybind-selector' tabIndex={0}> + <InputLabel htmlFor={tempID} shrink>{props.label}</InputLabel> + <FilledInput id={tempID} inputComponent={() => <KeybindSelectorInner value={props.value} />} /> + </FormControl>; +} diff --git a/pages/_app.tsx b/pages/_app.tsx index 9dc0a1e..20708b3 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -4,6 +4,7 @@ import '../components/play-skip_60fps.css'; import '../styles/colors.css'; import '../styles/editor.css'; import '../styles/globals.css'; +import '../styles/keybindselector.css'; import '../styles/keyframes.css'; import '../styles/paper.css'; import '../styles/presentation.css'; diff --git a/pages/editor.tsx b/pages/editor.tsx index ff85c87..73bcd93 100644 --- a/pages/editor.tsx +++ b/pages/editor.tsx @@ -10,6 +10,7 @@ import { PressureIcon, SlideKeyframe, } from '../components/icons'; +import KeybindSelector from '../components/keybindselector'; import PlaySkipIconAni from '../components/play-skip'; import Selection from '../components/selection'; import { anySlide, loopBeginSlide, loopSlide, slide, slideTypes, toolToSlide } from '../timeline'; @@ -691,6 +692,12 @@ function DefaultSettings() { </FormControl> </div> <div className='section'> + <span className='title'>Keybindings</span> + <KeybindSelector label='Next slide' value={['Space', 'n', 'Enter']} /> + <KeybindSelector label='Previous slide' value={['Backspace', 'p']} /> + <KeybindSelector label='Show menu' value={['Escape', 'm']} /> + </div> + <div className='section'> <span className='title'>Cool temporary buttons</span> <input type='file' diff --git a/styles/keybindselector.css b/styles/keybindselector.css new file mode 100644 index 0000000..b510dee --- /dev/null +++ b/styles/keybindselector.css @@ -0,0 +1,18 @@ +.keybind-selector-inner { padding: 27px 12px 10px; } + +.keybind-selector-inner .keybind { + padding: 2px 4px 1px; + margin-right: 3px; + border-radius: 4px; + user-select: none; + + transition-property: background-color; + transition-duration: 100ms; + background-color: var(--c800); + color: var(--c100); +} + +.keybind-selector:focus .keybind-selector-inner .keybind { background-color: var(--gruble); } +.keybind-selector:focus label { color: var(--gruble) !important; } +.keybind-selector:focus .MuiFilledInput-underline:after { transform: scaleX(1); } +.keybind-selector:focus { outline: none; } |