diff options
Diffstat (limited to 'language-web/src/main/js')
-rw-r--r-- | language-web/src/main/js/App.tsx | 137 | ||||
-rw-r--r-- | language-web/src/main/js/editor/EditorButtons.tsx | 65 | ||||
-rw-r--r-- | language-web/src/main/js/index.tsx | 19 | ||||
-rw-r--r-- | language-web/src/main/js/makeStyles.ts | 4 | ||||
-rw-r--r-- | language-web/src/main/js/theme/EditorTheme.ts | 2 | ||||
-rw-r--r-- | language-web/src/main/js/theme/ThemeProvider.tsx | 2 | ||||
-rw-r--r-- | language-web/src/main/js/theme/ThemeStore.ts | 4 |
7 files changed, 84 insertions, 149 deletions
diff --git a/language-web/src/main/js/App.tsx b/language-web/src/main/js/App.tsx index 5cd157fa..d25ac4d3 100644 --- a/language-web/src/main/js/App.tsx +++ b/language-web/src/main/js/App.tsx | |||
@@ -1,92 +1,65 @@ | |||
1 | import AppBar from '@mui/material/AppBar'; | ||
2 | import Box from '@mui/material/Box'; | ||
3 | import Button from '@mui/material/Button'; | ||
4 | import IconButton from '@mui/material/IconButton'; | ||
5 | import Toolbar from '@mui/material/Toolbar'; | ||
6 | import Typography from '@mui/material/Typography'; | ||
7 | import MenuIcon from '@mui/icons-material/Menu'; | ||
8 | import PlayArrowIcon from '@mui/icons-material/PlayArrow'; | ||
1 | import React from 'react'; | 9 | import React from 'react'; |
2 | import AppBar from '@material-ui/core/AppBar'; | ||
3 | import Box from '@material-ui/core/Box'; | ||
4 | import Button from '@material-ui/core/Button'; | ||
5 | import IconButton from '@material-ui/core/IconButton'; | ||
6 | import Toolbar from '@material-ui/core/Toolbar'; | ||
7 | import Typography from '@material-ui/core/Typography'; | ||
8 | import MenuIcon from '@material-ui/icons/Menu'; | ||
9 | import PlayArrowIcon from '@material-ui/icons/PlayArrow'; | ||
10 | 10 | ||
11 | import { makeStyles } from './makeStyles'; | ||
12 | import { EditorArea } from './editor/EditorArea'; | 11 | import { EditorArea } from './editor/EditorArea'; |
13 | import { EditorButtons } from './editor/EditorButtons'; | 12 | import { EditorButtons } from './editor/EditorButtons'; |
14 | 13 | ||
15 | const useStyles = makeStyles()((theme) => ({ | 14 | export const App = (): JSX.Element => ( |
16 | container: { | 15 | <Box |
17 | height: '100vh', | 16 | display="flex" |
18 | }, | 17 | flexDirection="column" |
19 | menuButton: { | 18 | sx={{ height: '100vh' }} |
20 | marginRight: theme.spacing(2), | 19 | > |
21 | }, | 20 | <AppBar |
22 | title: { | 21 | position="static" |
23 | flexGrow: 1, | 22 | color="inherit" |
24 | }, | 23 | > |
25 | editorBox: { | 24 | <Toolbar> |
26 | overflow: 'auto', | 25 | <IconButton |
27 | }, | 26 | edge="start" |
28 | })); | 27 | sx={{ mr: 2 }} |
29 | 28 | color="inherit" | |
30 | export const App = (): JSX.Element => { | 29 | aria-label="menu" |
31 | const { classes, cx } = useStyles(); | 30 | > |
32 | 31 | <MenuIcon /> | |
33 | return ( | 32 | </IconButton> |
33 | <Typography | ||
34 | variant="h6" | ||
35 | component="h1" | ||
36 | flexGrow={1} | ||
37 | > | ||
38 | Refinery | ||
39 | </Typography> | ||
40 | </Toolbar> | ||
41 | </AppBar> | ||
34 | <Box | 42 | <Box |
35 | display="flex" | 43 | display="flex" |
36 | flexDirection="column" | 44 | justifyContent="space-between" |
37 | className={cx(classes.container)} | 45 | alignItems="center" |
46 | p={1} | ||
38 | > | 47 | > |
39 | <AppBar | 48 | <EditorButtons /> |
40 | position="static" | 49 | <Button |
41 | color="inherit" | 50 | variant="outlined" |
42 | > | 51 | color="primary" |
43 | <Toolbar> | 52 | startIcon={<PlayArrowIcon />} |
44 | <IconButton | ||
45 | edge="start" | ||
46 | className={cx(classes.menuButton)} | ||
47 | color="inherit" | ||
48 | aria-label="menu" | ||
49 | > | ||
50 | <MenuIcon /> | ||
51 | </IconButton> | ||
52 | <Typography | ||
53 | variant="h6" | ||
54 | component="h1" | ||
55 | className={cx(classes.title)} | ||
56 | > | ||
57 | GraphSolver | ||
58 | </Typography> | ||
59 | </Toolbar> | ||
60 | </AppBar> | ||
61 | <Box | ||
62 | display="flex" | ||
63 | justifyContent="space-between" | ||
64 | alignItems="center" | ||
65 | p={1} | ||
66 | > | 53 | > |
67 | <Box | 54 | Generate |
68 | display="flex" | 55 | </Button> |
69 | alignItems="center" | 56 | </Box> |
70 | > | 57 | <Box |
71 | <EditorButtons /> | 58 | flexGrow={1} |
72 | </Box> | 59 | flexShrink={1} |
73 | <Box> | 60 | sx={{ overflow: 'auto' }} |
74 | <Button | 61 | > |
75 | variant="outlined" | 62 | <EditorArea /> |
76 | color="primary" | ||
77 | startIcon={<PlayArrowIcon />} | ||
78 | > | ||
79 | Generate | ||
80 | </Button> | ||
81 | </Box> | ||
82 | </Box> | ||
83 | <Box | ||
84 | flexGrow={1} | ||
85 | flexShrink={1} | ||
86 | className={cx(classes.editorBox)} | ||
87 | > | ||
88 | <EditorArea /> | ||
89 | </Box> | ||
90 | </Box> | 63 | </Box> |
91 | ); | 64 | </Box> |
92 | }; | 65 | ); |
diff --git a/language-web/src/main/js/editor/EditorButtons.tsx b/language-web/src/main/js/editor/EditorButtons.tsx index d3825c07..56577e82 100644 --- a/language-web/src/main/js/editor/EditorButtons.tsx +++ b/language-web/src/main/js/editor/EditorButtons.tsx | |||
@@ -1,76 +1,51 @@ | |||
1 | import { observer } from 'mobx-react-lite'; | 1 | import { observer } from 'mobx-react-lite'; |
2 | import Stack from '@mui/material/Stack'; | ||
3 | import ToggleButton from '@mui/material/ToggleButton'; | ||
4 | import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'; | ||
5 | import FormatListNumberedIcon from '@mui/icons-material/FormatListNumbered'; | ||
6 | import RedoIcon from '@mui/icons-material/Redo'; | ||
7 | import UndoIcon from '@mui/icons-material/Undo'; | ||
2 | import React from 'react'; | 8 | import React from 'react'; |
3 | import Button from '@material-ui/core/Button'; | ||
4 | import ButtonGroup from '@material-ui/core/ButtonGroup'; | ||
5 | import ToggleButton from '@material-ui/core/ToggleButton'; | ||
6 | import Divider from '@material-ui/core/Divider'; | ||
7 | import FormatListNumberedIcon from '@material-ui/icons/FormatListNumbered'; | ||
8 | import RedoIcon from '@material-ui/icons/Redo'; | ||
9 | import UndoIcon from '@material-ui/icons/Undo'; | ||
10 | 9 | ||
11 | import { makeStyles } from '../makeStyles'; | ||
12 | import { useRootStore } from '../RootStore'; | 10 | import { useRootStore } from '../RootStore'; |
13 | 11 | ||
14 | const useStyles = makeStyles()((theme) => ({ | ||
15 | iconButton: { | ||
16 | padding: 7, | ||
17 | border: 0, | ||
18 | color: theme.palette.text.primary, | ||
19 | '&, &.MuiButtonGroup-grouped': { | ||
20 | minWidth: 36, | ||
21 | }, | ||
22 | '&.MuiButtonGroup-grouped:not(:last-of-type)': { | ||
23 | borderRight: 0, | ||
24 | }, | ||
25 | }, | ||
26 | divider: { | ||
27 | margin: theme.spacing(0.5), | ||
28 | }, | ||
29 | })); | ||
30 | |||
31 | export const EditorButtons = observer(() => { | 12 | export const EditorButtons = observer(() => { |
32 | const { editorStore } = useRootStore(); | 13 | const { editorStore } = useRootStore(); |
33 | const { classes, cx } = useStyles(); | ||
34 | 14 | ||
35 | return ( | 15 | return ( |
36 | <> | 16 | <Stack |
37 | <ButtonGroup | 17 | direction="row" |
38 | variant="text" | 18 | spacing={1} |
19 | > | ||
20 | <ToggleButtonGroup | ||
21 | size="small" | ||
39 | > | 22 | > |
40 | <Button | 23 | <ToggleButton |
41 | disabled={!editorStore.canUndo} | 24 | disabled={!editorStore.canUndo} |
42 | onClick={() => editorStore.undo()} | 25 | onClick={() => editorStore.undo()} |
43 | className={cx(classes.iconButton)} | ||
44 | color="inherit" | ||
45 | aria-label="Undo" | 26 | aria-label="Undo" |
27 | value="undo" | ||
46 | > | 28 | > |
47 | <UndoIcon fontSize="small" /> | 29 | <UndoIcon fontSize="small" /> |
48 | </Button> | 30 | </ToggleButton> |
49 | <Button | 31 | <ToggleButton |
50 | disabled={!editorStore.canRedo} | 32 | disabled={!editorStore.canRedo} |
51 | onClick={() => editorStore.redo()} | 33 | onClick={() => editorStore.redo()} |
52 | className={cx(classes.iconButton)} | ||
53 | color="inherit" | ||
54 | aria-label="Redo" | 34 | aria-label="Redo" |
35 | value="redo" | ||
55 | > | 36 | > |
56 | <RedoIcon fontSize="small" /> | 37 | <RedoIcon fontSize="small" /> |
57 | </Button> | 38 | </ToggleButton> |
58 | </ButtonGroup> | 39 | </ToggleButtonGroup> |
59 | <Divider | ||
60 | flexItem | ||
61 | orientation="vertical" | ||
62 | className={classes.divider} | ||
63 | /> | ||
64 | <ToggleButton | 40 | <ToggleButton |
65 | selected={editorStore.showLineNumbers} | 41 | selected={editorStore.showLineNumbers} |
66 | onChange={() => editorStore.toggleLineNumbers()} | 42 | onChange={() => editorStore.toggleLineNumbers()} |
67 | size="small" | 43 | size="small" |
68 | className={cx(classes.iconButton)} | ||
69 | aria-label="Show line numbers" | 44 | aria-label="Show line numbers" |
70 | value="show-line-numbers" | 45 | value="show-line-numbers" |
71 | > | 46 | > |
72 | <FormatListNumberedIcon fontSize="small" /> | 47 | <FormatListNumberedIcon fontSize="small" /> |
73 | </ToggleButton> | 48 | </ToggleButton> |
74 | </> | 49 | </Stack> |
75 | ); | 50 | ); |
76 | }); | 51 | }); |
diff --git a/language-web/src/main/js/index.tsx b/language-web/src/main/js/index.tsx index 86cb4a65..80c70f23 100644 --- a/language-web/src/main/js/index.tsx +++ b/language-web/src/main/js/index.tsx | |||
@@ -1,8 +1,6 @@ | |||
1 | import { CacheProvider } from '@emotion/react'; | ||
2 | import React from 'react'; | 1 | import React from 'react'; |
3 | import { render } from 'react-dom'; | 2 | import { render } from 'react-dom'; |
4 | import CssBaseline from '@material-ui/core/CssBaseline'; | 3 | import CssBaseline from '@mui/material/CssBaseline'; |
5 | import createCache from 'tss-react/@emotion/cache'; | ||
6 | 4 | ||
7 | import { App } from './App'; | 5 | import { App } from './App'; |
8 | import { RootStore, RootStoreProvider } from './RootStore'; | 6 | import { RootStore, RootStoreProvider } from './RootStore'; |
@@ -49,19 +47,12 @@ scope Family = 1, Person += 5..10. | |||
49 | const rootStore = new RootStore(); | 47 | const rootStore = new RootStore(); |
50 | rootStore.editorStore.updateValue(initialValue); | 48 | rootStore.editorStore.updateValue(initialValue); |
51 | 49 | ||
52 | const muiCache = createCache({ | ||
53 | key: 'mui', | ||
54 | prepend: true, | ||
55 | }); | ||
56 | |||
57 | const app = ( | 50 | const app = ( |
58 | <RootStoreProvider rootStore={rootStore}> | 51 | <RootStoreProvider rootStore={rootStore}> |
59 | <CacheProvider value={muiCache}> | 52 | <ThemeProvider> |
60 | <ThemeProvider> | 53 | <CssBaseline /> |
61 | <CssBaseline /> | 54 | <App /> |
62 | <App /> | 55 | </ThemeProvider> |
63 | </ThemeProvider> | ||
64 | </CacheProvider> | ||
65 | </RootStoreProvider> | 56 | </RootStoreProvider> |
66 | ); | 57 | ); |
67 | 58 | ||
diff --git a/language-web/src/main/js/makeStyles.ts b/language-web/src/main/js/makeStyles.ts deleted file mode 100644 index a80e8858..00000000 --- a/language-web/src/main/js/makeStyles.ts +++ /dev/null | |||
@@ -1,4 +0,0 @@ | |||
1 | import { createMakeStyles } from 'tss-react'; | ||
2 | import { useTheme } from '@material-ui/core/styles'; | ||
3 | |||
4 | export const { makeStyles } = createMakeStyles({ useTheme }); | ||
diff --git a/language-web/src/main/js/theme/EditorTheme.ts b/language-web/src/main/js/theme/EditorTheme.ts index 957f2426..1b0dd5de 100644 --- a/language-web/src/main/js/theme/EditorTheme.ts +++ b/language-web/src/main/js/theme/EditorTheme.ts | |||
@@ -1,4 +1,4 @@ | |||
1 | import { PaletteMode } from '@material-ui/core'; | 1 | import type { PaletteMode } from '@mui/material'; |
2 | 2 | ||
3 | import cssVariables from '../../css/themeVariables.module.scss'; | 3 | import cssVariables from '../../css/themeVariables.module.scss'; |
4 | 4 | ||
diff --git a/language-web/src/main/js/theme/ThemeProvider.tsx b/language-web/src/main/js/theme/ThemeProvider.tsx index e7574725..f5b50be1 100644 --- a/language-web/src/main/js/theme/ThemeProvider.tsx +++ b/language-web/src/main/js/theme/ThemeProvider.tsx | |||
@@ -1,5 +1,5 @@ | |||
1 | import { ThemeProvider as MaterialUiThemeProvider } from '@material-ui/core/styles'; | ||
2 | import { observer } from 'mobx-react-lite'; | 1 | import { observer } from 'mobx-react-lite'; |
2 | import { ThemeProvider as MaterialUiThemeProvider } from '@mui/material/styles'; | ||
3 | import React from 'react'; | 3 | import React from 'react'; |
4 | 4 | ||
5 | import { useRootStore } from '../RootStore'; | 5 | import { useRootStore } from '../RootStore'; |
diff --git a/language-web/src/main/js/theme/ThemeStore.ts b/language-web/src/main/js/theme/ThemeStore.ts index 2644a96a..3bbea3a1 100644 --- a/language-web/src/main/js/theme/ThemeStore.ts +++ b/language-web/src/main/js/theme/ThemeStore.ts | |||
@@ -1,9 +1,9 @@ | |||
1 | import { makeAutoObservable } from 'mobx'; | ||
1 | import { | 2 | import { |
2 | Theme, | 3 | Theme, |
3 | createTheme, | 4 | createTheme, |
4 | responsiveFontSizes, | 5 | responsiveFontSizes, |
5 | } from '@material-ui/core/styles'; | 6 | } from '@mui/material/styles'; |
6 | import { makeAutoObservable } from 'mobx'; | ||
7 | 7 | ||
8 | import { | 8 | import { |
9 | EditorTheme, | 9 | EditorTheme, |