diff options
| -rw-r--r-- | pages/editor.tsx | 28 | ||||
| -rw-r--r-- | styles/editor.css | 16 | ||||
| -rw-r--r-- | styles/util.css | 16 |
3 files changed, 41 insertions, 19 deletions
diff --git a/pages/editor.tsx b/pages/editor.tsx index 53f7397..01cd989 100644 --- a/pages/editor.tsx +++ b/pages/editor.tsx @@ -1,4 +1,4 @@ -import { useEffect, useState } from 'react'; +import { CSSProperties, useEffect, useState } from 'react'; import { loopSlide } from '../timeline'; import { TimedVideoPlayer } from './present'; @@ -6,7 +6,10 @@ import AppBar from '@material-ui/core/AppBar'; import Button from '@material-ui/core/Button'; import ButtonGroup from '@material-ui/core/ButtonGroup'; import Fab from '@material-ui/core/Fab'; +import Slider from '@material-ui/core/Slider'; import Toolbar from '@material-ui/core/Toolbar'; +import ZoomInRoundedIcon from '@material-ui/icons/ZoomInRounded'; +import ZoomOutRoundedIcon from '@material-ui/icons/ZoomOutRounded'; import Icon from '@mdi/react'; import { PressureIcon, SlideKeyframe } from '../components/icons'; @@ -68,6 +71,8 @@ export default function Index() { var rerender = () => setDummy(!dummy); var [player, setPlayer] = useState(new TimedVideoPlayer()); + var [timelineZoom, setTimelineZoom] = useState(4); + useEffect(() => { var videoEL = document.getElementById('player') as HTMLVideoElement; player.registerPlayer(videoEL); @@ -165,8 +170,27 @@ export default function Index() { </div> </Button> </ButtonGroup> + <div className='zoom'> + <ZoomOutRoundedIcon /> + <div className='spacing'> + <Slider + value={timelineZoom} + onChange={(event: any, newValue: number | number[]) => { + setTimelineZoom(newValue as number); + }} + min={0} + step={0.00000001} + max={1} + aria-labelledby='continuous-slider' + /> + </div> + <ZoomInRoundedIcon /> + </div> </div> - <div className='timeline posrel'> + <div + className='timeline posrel' + style={{ '--zoom': (12 - 0.5) * timelineZoom ** (1 / 0.4) + 0.5 } as CSSProperties} + > <TimelineEditor player={player} /> diff --git a/styles/editor.css b/styles/editor.css index 3d84c22..9e315ca 100644 --- a/styles/editor.css +++ b/styles/editor.css @@ -50,10 +50,24 @@ color: var(--gruble); } -.appGrid .tools .MuiButtonGroup-root { +.appGrid .tools .MuiButtonGroup-root, +.appGrid .tools .zoom { margin-top: 8px; } +.appGrid .tools .zoom { + display: grid; + grid-template-columns: 24px 1fr 24px; +} + +.appGrid .tools .zoom .spacing { + margin: -4px 8px; +} + +.appGrid .tools .zoom .spacing .MuiSlider-root { + color: var(--gruble); +} + .appGrid .tools .MuiButtonGroup-root .MuiButton-root { border-width: 2px; padding: 8px; diff --git a/styles/util.css b/styles/util.css index a2381ae..8a86a04 100644 --- a/styles/util.css +++ b/styles/util.css @@ -1,13 +1,3 @@ -.drop-1 { box-shadow: var(--drop-level-1); } -.drop-2 { box-shadow: var(--drop-level-2); } - -.pad-s { padding: var(--spacing-small); } -.pad-m { padding: var(--spacing-medium); } -.pad-l { padding: var(--spacing-large); } - -.round-l { border-radius: var(--loose-corner); } -.round-t { border-radius: var(--tight-corner); } - .bg-100 { background-color: var(--gray-100); } .bg-200 { background-color: var(--gray-200); } .bg-300 { background-color: var(--gray-300); } @@ -18,10 +8,6 @@ .fg-100 { color: var(--gray-100); } .fg-900 { color: var(--gray-900); } -.outcome.win { color: var(--disk-a-alt); } -.outcome.lose { color: var(--disk-b-alt); } -.outcome.draw { color: var(--gray-600); } - .posabs { position: absolute; } .posrel { position: relative; } .posfix { position: fixed; } @@ -59,8 +45,6 @@ .w1fr { width: 1fr; } -.w100m2m { width: calc(100% - var(--spacing-medium)); } - .w100vw { width: 100vw; } .h100vh { height: 100vh; } |