project name edit

3 files changed, 65 insertions, 0 deletions

diff --git a/components/icons.tsx b/components/icons.tsx
index 15632f0..5e06bf8 100644
--- a/components/icons.tsx
+++ b/components/icons.tsx
@@ -266,3 +266,13 @@ export function BracketsRoundedIcon() {
 		/>
 	</svg>;
 }
+
+export function SlashIconRounded() {
+	return <svg width='24' height='24' viewBox='0 0 24 24' fill='currentColor' xmlns='http://www.w3.org/2000/svg'>
+		<path
+			fill-rule='evenodd'
+			clip-rule='evenodd'
+			d='M9.31623 20C8.6687 20 8.21146 19.3656 8.41623 18.7513L13.7838 2.64868C13.9129 2.2613 14.2754 2 14.6838 2C15.3313 2 15.7885 2.63438 15.5838 3.24868L10.2162 19.3513C10.0871 19.7387 9.72457 20 9.31623 20Z'
+		/>
+	</svg>;
+}
diff --git a/pages/editor.tsx b/pages/editor.tsx
index 02c69f0..c7835c8 100644
--- a/pages/editor.tsx
+++ b/pages/editor.tsx
@@ -12,6 +12,7 @@ import {
 	FullScreenControlsRoundedIcon,
 	MenuBarControlsRoundedIcon,
 	PressureIcon,
+	SlashIconRounded,
 	SlideKeyframe,
 } from '../components/icons';
 import KeybindSelector from '../components/keybindselector';
@@ -55,6 +56,7 @@ 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 KeyboardArrowDownRoundedIcon from '@material-ui/icons/KeyboardArrowDownRounded';
 import NavigateBeforeRoundedIcon from '@material-ui/icons/NavigateBeforeRounded';
 import NavigateNextRoundedIcon from '@material-ui/icons/NavigateNextRounded';
 import SettingsRoundedIcon from '@material-ui/icons/SettingsRounded';
@@ -1532,10 +1534,28 @@ function Player() {
 }
 
 function TitleBar() {
+	var ready = useHookstate(global).ready;
+	var proj = useHookstate(project).timeline;
+
+	var nameRef = useRef(null);
+
 	return <AppBar position='static' color='transparent' elevation={0}>
 		<Toolbar>
 			<PressureIcon />
 			<h1>pressure</h1>
+			<div className={'posabs abscenter projarea ' + (ready.timeline.get() ? '' : 'disabled')}>
+				<span className='projfolder'>My presentations</span>
+				<SlashIconRounded />
+				<span
+					className='projname'
+					contentEditable
+					spellCheck={false}
+					ref={nameRef}
+					onBlur={() => proj.name.set((nameRef.current as HTMLSpanElement).textContent.trim())}
+					children={proj.name.get()}
+				/>
+				<KeyboardArrowDownRoundedIcon />
+			</div>
 		</Toolbar>
 	</AppBar>;
 }
diff --git a/styles/editor.css b/styles/editor.css
index d1e5e00..8e0db4a 100644
--- a/styles/editor.css
+++ b/styles/editor.css
@@ -493,3 +493,38 @@
 	transition-duration: 0ms;
 	opacity: 1;
 }
+
+header .projarea .projfolder {
+	color: var(--c700);
+}
+
+header .projarea {
+	line-height: 0;
+	height: 24px;
+	transition-property: opacity;
+	transition-duration: 150ms;
+}
+
+header .projarea.disabled {
+	opacity: 0;
+}
+
+header .projarea > * {
+	vertical-align: middle;
+}
+
+header .projarea .projname {
+	transition-property: background-color;
+	transition-duration: 150ms;
+}
+
+header .projarea .projname:focus {
+	background-color: var(--c100);
+	outline: none;
+}
+
+header .projarea span {
+	padding: 2px 4px;
+	margin: -2px -4px;
+	border-radius: 6px;
+}