diff options
author | Matthias Schiffer <mschiffer@universe-factory.net> | 2020-03-19 23:12:13 +0100 |
---|---|---|
committer | Matthias Schiffer <mschiffer@universe-factory.net> | 2020-03-19 23:12:13 +0100 |
commit | 1605e743f44b835e99b3403cb3cfc5018b697d26 (patch) | |
tree | a7d05b20bfa587a5f0cc448d66b2fc7ad392b974 /src/renderer/editor/editor.tsx | |
parent | 6c8f2d780acd6c41d42de6b5fc8d84e765334b64 (diff) | |
download | rpgedit-1605e743f44b835e99b3403cb3cfc5018b697d26.tar rpgedit-1605e743f44b835e99b3403cb3cfc5018b697d26.zip |
editor: experiment with Material UI for sprite library implementation
Diffstat (limited to 'src/renderer/editor/editor.tsx')
-rw-r--r-- | src/renderer/editor/editor.tsx | 62 |
1 files changed, 58 insertions, 4 deletions
diff --git a/src/renderer/editor/editor.tsx b/src/renderer/editor/editor.tsx index fd8360a..2c57afc 100644 --- a/src/renderer/editor/editor.tsx +++ b/src/renderer/editor/editor.tsx @@ -1,10 +1,64 @@ import * as React from 'react'; -import Button from '@material-ui/core/Button'; + +import 'typeface-roboto'; + +import { createMuiTheme, makeStyles, Theme, ThemeProvider } from '@material-ui/core/styles'; + +import CssBaseline from '@material-ui/core/CssBaseline'; +import Drawer from '@material-ui/core/Drawer'; + +import { Library } from './library'; + +const drawerWidth = 240; + +const useStyles = makeStyles((theme: Theme) => ({ + root: { + display: 'flex', + }, + drawer: { + width: drawerWidth, + flexShrink: 0, + }, + drawerPaper: { + width: drawerWidth, + }, + content: { + flexGrow: 1, + padding: theme.spacing(3), + }, +})); + +function EditorLayout(): JSX.Element { + const classes = useStyles(); + + return ( + <div className={classes.root}> + <CssBaseline /> + <Drawer + className={classes.drawer} + variant='permanent' + classes={{ + paper: classes.drawerPaper, + }} + anchor='left' + ></Drawer> + <main className={classes.content}> + <Library /> + </main> + </div> + ); +} + +const theme = createMuiTheme({ + palette: { + type: 'dark', + }, +}); export function Editor(): JSX.Element { return ( - <Button variant='contained' color='primary'> - Hello World - </Button> + <ThemeProvider theme={theme}> + <EditorLayout /> + </ThemeProvider> ); } |