project settings dialog box

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