added KeybindSelector component beginnings

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; }