diff options
| -rw-r--r-- | components/icons.tsx | 10 | ||||
| -rw-r--r-- | pages/editor.tsx | 20 | ||||
| -rw-r--r-- | styles/editor.css | 35 |
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; +} |