aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--pages/_app.tsx1
-rw-r--r--pages/editor.tsx67
-rw-r--r--styles/dialog.css41
3 files changed, 109 insertions, 0 deletions
diff --git a/pages/_app.tsx b/pages/_app.tsx
index aa99319..7e34a6d 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -2,6 +2,7 @@ import Head from 'next/head';
import '../components/play-skip_60fps.css';
import '../styles/colors.css';
+import '../styles/dialog.css';
import '../styles/editor.css';
import '../styles/globals.css';
import '../styles/keybindselector.css';
diff --git a/pages/editor.tsx b/pages/editor.tsx
index 2da1b3e..67d99af 100644
--- a/pages/editor.tsx
+++ b/pages/editor.tsx
@@ -18,8 +18,11 @@ import { TimedVideoPlayer } from './present';
import AppBar from '@material-ui/core/AppBar';
import Button from '@material-ui/core/Button';
+import Dialog from '@material-ui/core/Dialog';
+import MuiDialogTitle from '@material-ui/core/DialogTitle';
import Fab from '@material-ui/core/Fab';
import FormControl from '@material-ui/core/FormControl';
+import IconButton from '@material-ui/core/IconButton';
import InputLabel from '@material-ui/core/InputLabel';
import MenuItem from '@material-ui/core/MenuItem';
import Select from '@material-ui/core/Select';
@@ -32,10 +35,13 @@ import ToggleButton from '@material-ui/lab/ToggleButton';
import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup';
import Icon from '@mdi/react';
+import AddRoundedIcon from '@material-ui/icons/AddRounded';
import ArrowDropDownRoundedIcon from '@material-ui/icons/ArrowDropDownRounded';
+import CloseIcon from '@material-ui/icons/Close';
import FullscreenRoundedIcon from '@material-ui/icons/FullscreenRounded';
import NavigateBeforeRoundedIcon from '@material-ui/icons/NavigateBeforeRounded';
import NavigateNextRoundedIcon from '@material-ui/icons/NavigateNextRounded';
+import SettingsRoundedIcon from '@material-ui/icons/SettingsRounded';
import SkipPreviousRoundedIcon from '@material-ui/icons/SkipPreviousRounded';
import { mdiCursorDefault } from '@mdi/js';
@@ -720,7 +726,51 @@ function TimelineEditor() {
</div>;
}
+function DialogBox(props: {
+ open?: boolean;
+ close: () => any;
+ children: ReactNode;
+ title: string;
+}) {
+ return <Dialog open={props.open} onClose={props.close}>
+ <MuiDialogTitle>
+ <span className='title'>{props.title}</span>
+ <IconButton onClick={props.close} children={<CloseIcon />} />
+ </MuiDialogTitle>
+ <div className='inner'>
+ {props.children}
+ </div>
+ </Dialog>;
+}
+
+function ProjectSettings(props: {
+ close: () => any;
+ open?: boolean;
+}) {
+ return <DialogBox {...props} title='Project settings'>
+ <div className='body'>
+ Lorem ipsum dolor, sit amet consectetur adipisicing elit. Deserunt blanditiis accusamus, fugiat vel, dolor
+ nesciunt asperiores reiciendis iure tempore veniam corrupti earum! Ipsam, delectus. Ipsum, sed eligendi
+ facere veniam nostrum in tempora libero voluptates quam saepe culpa, minima praesentium iure explicabo aut
+ laboriosam asperiores quisquam non. Nulla, eaque, enim, vitae illo dolorem natus dolores quas quam possimus
+ iure soluta quibusdam est fuga quae autem vel totam molestiae blanditiis reiciendis ducimus. Similique
+ numquam nam quisquam corrupti enim possimus debitis repudiandae sapiente et porro. Asperiores placeat error
+ quis distinctio laboriosam cumque ex iste, natus incidunt, deserunt beatae earum laudantium nam amet quia
+ nihil nesciunt exercitationem corrupti quibusdam veritatis repellendus? Neque impedit laudantium at,
+ voluptatem iure ut sed nemo quod officiis aut ab dolore quibusdam dicta rem dolor amet quo saepe corporis.
+ Iure itaque magnam quasi dolores consequuntur praesentium quaerat odit officia consequatur illo nobis odio
+ velit mollitia eaque, placeat a. Ut voluptates, odio perspiciatis earum dolore optio excepturi laudantium
+ doloremque accusamus consequuntur qui saepe obcaecati? Dolorum harum dolores officiis perspiciatis quos
+ debitis reiciendis rerum qui laborum, sapiente ut delectus totam sit aperiam magni maiores cupiditate atque
+ cum alias. Dolorum possimus fugiat ratione laborum architecto? Tempora eos, blanditiis consequuntur fugiat
+ soluta illo beatae?
+ </div>
+ </DialogBox>;
+}
+
// https://material.io/design/navigation/navigation-transitions.html#peer-transitions
+// https://material-ui.com/components/transitions/#grow
+// https://material-ui.com/components/transitions/#fade
function DefaultSettings() {
var [nextSlideKeybinds, setNextSlideKeybinds] = useState(['Space', 'n', 'Enter']);
var [previousSlideKeybinds, setPreviousSlideKeybinds] = useState(['Backspace', 'p']);
@@ -728,7 +778,10 @@ function DefaultSettings() {
var [oscType, setOscType] = useState('FullScreen');
+ var [projectSettingsOpen, setProjectSettingsOpen] = useState(false);
+
return <>
+ <ProjectSettings open={projectSettingsOpen} close={() => setProjectSettingsOpen(false)} />
<h2 className='title posabs h0 t0'>Presentation settings</h2>
<div className='scroll posabs h0 b0'>
<div className='section'>
@@ -874,6 +927,20 @@ function DefaultSettings() {
}}
startIcon={<GetAppRoundedIcon />}
/>
+ <Button
+ variant='contained'
+ color='default'
+ children='New project'
+ onClick={() => console.log('new project')}
+ startIcon={<AddRoundedIcon />}
+ />
+ <Button
+ variant='contained'
+ color='default'
+ children='Project settings'
+ onClick={() => setProjectSettingsOpen(true)}
+ startIcon={<SettingsRoundedIcon />}
+ />
</div>
</div>
</>;
diff --git a/styles/dialog.css b/styles/dialog.css
new file mode 100644
index 0000000..0ef4640
--- /dev/null
+++ b/styles/dialog.css
@@ -0,0 +1,41 @@
+.MuiDialog-container .MuiPaper-root {
+ max-width: 400px;
+ width: 100%;
+ background-color: var(--c400);
+ color: var(--fg);
+}
+
+.MuiDialog-container .MuiPaper-root .MuiDialogTitle-root .MuiIconButton-root {
+ position: absolute;
+ right: 16px;
+ color: var(--fg);
+}
+.MuiDialog-container .MuiPaper-root .MuiDialogTitle-root .MuiIconButton-root:hover {
+ background-color: rgba(235,238,249, 0.04) !important;
+}
+
+.MuiDialog-container .MuiPaper-root .MuiDialogTitle-root .title {
+ margin: 8px 0;
+ display: inline-block;
+}
+.MuiDialog-container .MuiPaper-root .inner {
+ margin: 16px 24px;
+ margin-right: 0;
+ margin-top: 0;
+ overflow-y: scroll;
+}
+
+.MuiDialog-container .MuiPaper-root ::-webkit-scrollbar-track,
+.MuiDialog-container .MuiPaper-root ::-webkit-scrollbar-track-piece,
+.MuiDialog-container .MuiPaper-root ::-webkit-scrollbar {
+ background-color: var(--c400);
+}
+
+.MuiDialog-container .MuiPaper-root ::-webkit-scrollbar-thumb {
+ background: linear-gradient(90deg , var(--c400) 11px, var(--c700) 11px, var(--c700) 13px, var(--c400) 13px);
+}
+
+.MuiDialog-container .MuiPaper-root ::-webkit-scrollbar {
+ width: 24px;
+ height: 24px;
+}