on screen controls selection

3 files changed, 131 insertions, 2 deletions

diff --git a/components/icons.tsx b/components/icons.tsx
index cf60f54..cd0d0ff 100644
--- a/components/icons.tsx
+++ b/components/icons.tsx
@@ -197,3 +197,27 @@ export function SlideKeyframeOutline(props: {
 		}[props.type]}
 	</svg>;
 }
+
+export function FullScreenControlsRoundedIcon() {
+	return <svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
+		<path
+			d='M2 7C2 6.44772 2.44772 6 3 6H8C8.55228 6 9 6.44772 9 7V17C9 17.5523 8.55228 18 8 18H3C2.44772 18 2 17.5523 2 17V7Z'
+		/>
+		<path
+			d='M10 7C10 6.44772 10.4477 6 11 6H13C13.5523 6 14 6.44772 14 7V17C14 17.5523 13.5523 18 13 18H11C10.4477 18 10 17.5523 10 17V7Z'
+		/>
+		<path
+			d='M15 7C15 6.44772 15.4477 6 16 6H21C21.5523 6 22 6.44772 22 7V17C22 17.5523 21.5523 18 21 18H16C15.4477 18 15 17.5523 15 17V7Z'
+		/>
+	</svg>;
+}
+
+export function MenuBarControlsRoundedIcon() {
+	return <svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
+		<path
+			fillRule='evenodd'
+			clipRule='evenodd'
+			d='M2 17V7C2 6.44772 2.44772 6 3 6H21C21.5523 6 22 6.44772 22 7V17C22 17.5523 21.5523 18 21 18H3C2.44772 18 2 17.5523 2 17ZM8 15C7.44772 15 7 15.4477 7 16C7 16.5523 7.44772 17 8 17H16C16.5523 17 17 16.5523 17 16C17 15.4477 16.5523 15 16 15H8Z'
+		/>
+	</svg>;
+}
diff --git a/pages/editor.tsx b/pages/editor.tsx
index 0ab0307..6273dc6 100644
--- a/pages/editor.tsx
+++ b/pages/editor.tsx
@@ -4,7 +4,12 @@ import { animated, useSpring } from 'react-spring';
 import { useDrag } from 'react-use-gesture';
 import create from 'zustand';
 
-import { PressureIcon, SlideKeyframe } from '../components/icons';
+import {
+	FullScreenControlsRoundedIcon,
+	MenuBarControlsRoundedIcon,
+	PressureIcon,
+	SlideKeyframe,
+} from '../components/icons';
 import PlaySkipIconAni from '../components/play-skip';
 import Selection from '../components/selection';
 import { anySlide, loopBeginSlide, loopSlide, slide, slideTypes, toolToSlide } from '../timeline';
@@ -13,6 +18,10 @@ import { TimedVideoPlayer } from './present';
 import AppBar from '@material-ui/core/AppBar';
 import Button from '@material-ui/core/Button';
 import Fab from '@material-ui/core/Fab';
+import FormControl from '@material-ui/core/FormControl';
+import InputLabel from '@material-ui/core/InputLabel';
+import MenuItem from '@material-ui/core/MenuItem';
+import Select from '@material-ui/core/Select';
 import Slider from '@material-ui/core/Slider';
 import Switch from '@material-ui/core/Switch';
 import Toolbar from '@material-ui/core/Toolbar';
@@ -22,6 +31,7 @@ import ToggleButton from '@material-ui/lab/ToggleButton';
 import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup';
 import Icon from '@mdi/react';
 
+import ArrowDropDownRoundedIcon from '@material-ui/icons/ArrowDropDownRounded';
 import FullscreenRoundedIcon from '@material-ui/icons/FullscreenRounded';
 import NavigateBeforeRoundedIcon from '@material-ui/icons/NavigateBeforeRounded';
 import NavigateNextRoundedIcon from '@material-ui/icons/NavigateNextRounded';
@@ -629,6 +639,50 @@ function DefaultSettings() {
 					<span className='body'>Allow remote control during presentation</span>
 					<Switch />
 				</div>
+				<FormControl variant='filled'>
+					<InputLabel>On-screen controls</InputLabel>
+					<Select
+						labelId='demo-simple-select-filled-label'
+						id='demo-simple-select-filled'
+						onChange={console.log}
+						IconComponent={ArrowDropDownRoundedIcon}
+					>
+						<MenuItem value='FullScreen'>
+							<div className='posrel os-controls-type fullscreen'>
+								<div className='sidebyside'>
+									<div className='posrel icon'>
+										<div className='posabs abscenterv'>
+											<FullScreenControlsRoundedIcon />
+										</div>
+									</div>
+									<div className='description'>
+										<span className='title'>Full screen</span>
+										<span className='body'>
+											Full screen columns to click through slides. Press center to show menu
+										</span>
+									</div>
+								</div>
+							</div>
+						</MenuItem>
+						<MenuItem value='MenuBar'>
+							<div className='posrel os-controls-type menubar'>
+								<div className='sidebyside'>
+									<div className='posrel icon'>
+										<div className='posabs abscenterv'>
+											<MenuBarControlsRoundedIcon />
+										</div>
+									</div>
+									<div className='description'>
+										<span className='title'>Menu bar</span>
+										<span className='body'>
+											Floating controls that snap to the screen edge
+										</span>
+									</div>
+								</div>
+							</div>
+						</MenuItem>
+					</Select>
+				</FormControl>
 			</div>
 			<div className='section'>
 				<span className='title'>Cool temporary buttons</span>
diff --git a/styles/editor.css b/styles/editor.css
index 7c7bd86..23c132e 100644
--- a/styles/editor.css
+++ b/styles/editor.css
@@ -51,7 +51,6 @@
 	margin-right: -8px;
 }
 .settings .inner button {
-	width: 100%;
 	background-color: var(--piss);
 	color: var(--bg);
 }
@@ -60,6 +59,10 @@
 	font-weight: 500;
 }
 
+.settings .inner button,
+.settings .inner .MuiFormControl-root
+{ width: 100%; }
+
 .MuiSwitch-root .MuiSwitch-thumb { color: var(--c700); }
 .MuiSwitch-root .MuiSwitch-track { background-color: var(--c700); }
 .MuiSwitch-root .Mui-checked .MuiSwitch-thumb { color: var(--gruble); }
@@ -67,6 +70,54 @@
 .MuiSwitch-root .Mui-checked { color: var(--gruble) !important; }
 .MuiSwitch-root .Mui-checked:hover { background-color: rgba(93, 233, 174, 0.04) !important; }
 
+.MuiFormControl-root {
+	border-radius: 4px;
+	overflow: hidden;
+}
+.MuiSelect-icon,
+.MuiFormLabel-root
+{ color: var(--c800) !important; }
+.MuiFormLabel-root.Mui-focused { color: var(--gruble) !important; }
+.MuiFilledInput-root {
+	background-color: var(--c300) !important;
+	color: var(--fg) !important;
+}
+.MuiFilledInput-underline:after { border-color: var(--gruble) !important; }
+.MuiFilledInput-underline:before { border-bottom: none !important; }
+
+.MuiMenu-paper {
+	background-color: var(--c200) !important;
+	color: var(--fg) !important;
+}
+.MuiListItem-root.Mui-selected, .MuiListItem-root.Mui-selected:hover { background-color: transparent !important; }
+
+.os-controls-type { width: 192px; }
+.os-controls-type svg {
+	fill: var(--piss);
+	width: 48px;
+	height: 48px;
+}
+.os-controls-type .description {
+	overflow: hidden;
+	line-height: 1.1;
+}
+.os-controls-type .description .title {
+	font-weight: 700;
+	margin-bottom: 4px;
+	font-size: 1.125rem;
+}
+
+.os-controls-type .description .title,
+.os-controls-type .description .body {
+	display: block;
+	white-space: normal !important;
+}
+
+.os-controls-type .icon {
+	width: 48px;
+	padding-right: 4px;
+}
+
 .settings ::-webkit-scrollbar-track,
 .settings ::-webkit-scrollbar-track-piece,
 .settings ::-webkit-scrollbar {