aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--components/icons.tsx24
-rw-r--r--pages/editor.tsx56
-rw-r--r--styles/editor.css53
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 {