diff options
author | Kristóf Marussy <marussy@mit.bme.hu> | 2021-08-22 14:54:05 +0200 |
---|---|---|
committer | Kristóf Marussy <marussy@mit.bme.hu> | 2021-08-22 16:44:43 +0200 |
commit | 72cc4a99da270e8c964da46776f8b4245fbd919c (patch) | |
tree | 2666f25076071b10856a48c805b1cc67f3f09621 /language-web/src/main/js | |
parent | Bump CodeMirror, React versions (diff) | |
download | refinery-72cc4a99da270e8c964da46776f8b4245fbd919c.tar.gz refinery-72cc4a99da270e8c964da46776f8b4245fbd919c.tar.zst refinery-72cc4a99da270e8c964da46776f8b4245fbd919c.zip |
Bump Material-UI version
Diffstat (limited to 'language-web/src/main/js')
-rw-r--r-- | language-web/src/main/js/App.jsx | 14 | ||||
-rw-r--r-- | language-web/src/main/js/editor/EditorButtons.jsx | 24 | ||||
-rw-r--r-- | language-web/src/main/js/index.jsx | 24 | ||||
-rw-r--r-- | language-web/src/main/js/makeStyles.js | 4 |
4 files changed, 39 insertions, 27 deletions
diff --git a/language-web/src/main/js/App.jsx b/language-web/src/main/js/App.jsx index a0920823..5bd46c09 100644 --- a/language-web/src/main/js/App.jsx +++ b/language-web/src/main/js/App.jsx | |||
@@ -1,5 +1,4 @@ | |||
1 | import React from 'react'; | 1 | import React from 'react'; |
2 | import { makeStyles } from '@material-ui/core/styles'; | ||
3 | import AppBar from '@material-ui/core/AppBar'; | 2 | import AppBar from '@material-ui/core/AppBar'; |
4 | import Box from '@material-ui/core/Box'; | 3 | import Box from '@material-ui/core/Box'; |
5 | import Button from '@material-ui/core/Button'; | 4 | import Button from '@material-ui/core/Button'; |
@@ -9,10 +8,11 @@ import Typography from '@material-ui/core/Typography'; | |||
9 | import MenuIcon from '@material-ui/icons/Menu'; | 8 | import MenuIcon from '@material-ui/icons/Menu'; |
10 | import PlayArrowIcon from '@material-ui/icons/PlayArrow'; | 9 | import PlayArrowIcon from '@material-ui/icons/PlayArrow'; |
11 | 10 | ||
11 | import { makeStyles } from './makeStyles'; | ||
12 | import Editor from './editor/Editor'; | 12 | import Editor from './editor/Editor'; |
13 | import EditorButtons from './editor/EditorButtons'; | 13 | import EditorButtons from './editor/EditorButtons'; |
14 | 14 | ||
15 | const useStyles = makeStyles(theme => ({ | 15 | const useStyles = makeStyles()(theme => ({ |
16 | container: { | 16 | container: { |
17 | maxHeight: '100vh', | 17 | maxHeight: '100vh', |
18 | }, | 18 | }, |
@@ -28,13 +28,13 @@ const useStyles = makeStyles(theme => ({ | |||
28 | })); | 28 | })); |
29 | 29 | ||
30 | export default () => { | 30 | export default () => { |
31 | const classes = useStyles(); | 31 | const { classes, cx } = useStyles(); |
32 | 32 | ||
33 | return ( | 33 | return ( |
34 | <Box | 34 | <Box |
35 | display='flex' | 35 | display='flex' |
36 | flexDirection='column' | 36 | flexDirection='column' |
37 | className={classes.container} | 37 | className={cx(classes.container)} |
38 | > | 38 | > |
39 | <AppBar | 39 | <AppBar |
40 | position='static' | 40 | position='static' |
@@ -43,7 +43,7 @@ export default () => { | |||
43 | <Toolbar> | 43 | <Toolbar> |
44 | <IconButton | 44 | <IconButton |
45 | edge='start' | 45 | edge='start' |
46 | className={classes.menuButton} | 46 | className={cx(classes.menuButton)} |
47 | color='inherit' | 47 | color='inherit' |
48 | aria-label='menu' | 48 | aria-label='menu' |
49 | > | 49 | > |
@@ -52,7 +52,7 @@ export default () => { | |||
52 | <Typography | 52 | <Typography |
53 | variant='h6' | 53 | variant='h6' |
54 | component='h1' | 54 | component='h1' |
55 | className={classes.title} | 55 | className={cx(classes.title)} |
56 | > | 56 | > |
57 | GraphSolver | 57 | GraphSolver |
58 | </Typography> | 58 | </Typography> |
@@ -83,7 +83,7 @@ export default () => { | |||
83 | <Box | 83 | <Box |
84 | flexGrow={1} | 84 | flexGrow={1} |
85 | flexShrink={1} | 85 | flexShrink={1} |
86 | className={classes.editorBox} | 86 | className={cx(classes.editorBox)} |
87 | > | 87 | > |
88 | <Editor/> | 88 | <Editor/> |
89 | </Box> | 89 | </Box> |
diff --git a/language-web/src/main/js/editor/EditorButtons.jsx b/language-web/src/main/js/editor/EditorButtons.jsx index 18139bd4..a5a57f93 100644 --- a/language-web/src/main/js/editor/EditorButtons.jsx +++ b/language-web/src/main/js/editor/EditorButtons.jsx | |||
@@ -1,34 +1,36 @@ | |||
1 | import { observer } from 'mobx-react-lite'; | 1 | import { observer } from 'mobx-react-lite'; |
2 | import React from 'react'; | 2 | import React from 'react'; |
3 | import { makeStyles } from '@material-ui/core/styles'; | ||
4 | import Button from '@material-ui/core/Button'; | 3 | import Button from '@material-ui/core/Button'; |
5 | import ButtonGroup from '@material-ui/core/ButtonGroup'; | 4 | import ButtonGroup from '@material-ui/core/ButtonGroup'; |
5 | import ToggleButton from '@material-ui/core/ToggleButton'; | ||
6 | import Divider from '@material-ui/core/Divider'; | 6 | import Divider from '@material-ui/core/Divider'; |
7 | import FormatListNumberedIcon from '@material-ui/icons/FormatListNumbered'; | 7 | import FormatListNumberedIcon from '@material-ui/icons/FormatListNumbered'; |
8 | import RedoIcon from '@material-ui/icons/Redo'; | 8 | import RedoIcon from '@material-ui/icons/Redo'; |
9 | import UndoIcon from '@material-ui/icons/Undo'; | 9 | import UndoIcon from '@material-ui/icons/Undo'; |
10 | import ToggleButton from '@material-ui/lab/ToggleButton'; | ||
11 | 10 | ||
11 | import { makeStyles } from '../makeStyles'; | ||
12 | import { useRootStore } from '../RootStore'; | 12 | import { useRootStore } from '../RootStore'; |
13 | 13 | ||
14 | const useStyles = makeStyles(theme => ({ | 14 | const useStyles = makeStyles()(theme => ({ |
15 | iconButton: { | 15 | iconButton: { |
16 | padding: 7, | 16 | padding: 7, |
17 | minWidth: 36, | ||
18 | border: 0, | 17 | border: 0, |
19 | color: theme.palette.text.primary, | 18 | color: theme.palette.text.primary, |
20 | '&.MuiButtonGroup-groupedTextHorizontal': { | 19 | '&, &.MuiButtonGroup-grouped': { |
20 | minWidth: 36, | ||
21 | }, | ||
22 | '&.MuiButtonGroup-grouped:not(:last-of-type)': { | ||
21 | borderRight: 0, | 23 | borderRight: 0, |
22 | }, | 24 | }, |
23 | }, | 25 | }, |
24 | divider: { | 26 | divider: { |
25 | margin: theme.spacing(0.5), | 27 | margin: theme.spacing(0.5), |
26 | } | 28 | }, |
27 | })); | 29 | })); |
28 | 30 | ||
29 | export default observer(() => { | 31 | export default observer(() => { |
30 | const editorStore = useRootStore().editorStore; | 32 | const editorStore = useRootStore().editorStore; |
31 | const classes = useStyles(); | 33 | const { classes, cx } = useStyles(); |
32 | return ( | 34 | return ( |
33 | <> | 35 | <> |
34 | <ButtonGroup | 36 | <ButtonGroup |
@@ -37,7 +39,8 @@ export default observer(() => { | |||
37 | <Button | 39 | <Button |
38 | disabled={!editorStore.canUndo} | 40 | disabled={!editorStore.canUndo} |
39 | onClick={() => editorStore.undo()} | 41 | onClick={() => editorStore.undo()} |
40 | className={classes.iconButton} | 42 | className={cx(classes.iconButton)} |
43 | color='inherit' | ||
41 | aria-label='Undo' | 44 | aria-label='Undo' |
42 | > | 45 | > |
43 | <UndoIcon fontSize='small'/> | 46 | <UndoIcon fontSize='small'/> |
@@ -45,7 +48,8 @@ export default observer(() => { | |||
45 | <Button | 48 | <Button |
46 | disabled={!editorStore.canRedo} | 49 | disabled={!editorStore.canRedo} |
47 | onClick={() => editorStore.redo()} | 50 | onClick={() => editorStore.redo()} |
48 | className={classes.iconButton} | 51 | className={cx(classes.iconButton)} |
52 | color='inherit' | ||
49 | aria-label='Redo' | 53 | aria-label='Redo' |
50 | > | 54 | > |
51 | <RedoIcon fontSize='small'/> | 55 | <RedoIcon fontSize='small'/> |
@@ -60,7 +64,7 @@ export default observer(() => { | |||
60 | selected={editorStore.showLineNumbers} | 64 | selected={editorStore.showLineNumbers} |
61 | onChange={() => editorStore.toggleLineNumbers()} | 65 | onChange={() => editorStore.toggleLineNumbers()} |
62 | size='small' | 66 | size='small' |
63 | className={classes.iconButton} | 67 | className={cx(classes.iconButton)} |
64 | aria-label='Show line numbers' | 68 | aria-label='Show line numbers' |
65 | value='show-line-numbers' | 69 | value='show-line-numbers' |
66 | > | 70 | > |
diff --git a/language-web/src/main/js/index.jsx b/language-web/src/main/js/index.jsx index 40b02b14..d73ffcdd 100644 --- a/language-web/src/main/js/index.jsx +++ b/language-web/src/main/js/index.jsx | |||
@@ -1,7 +1,8 @@ | |||
1 | import { CacheProvider } from "@emotion/react"; | ||
1 | import React from 'react'; | 2 | import React from 'react'; |
2 | import { render } from 'react-dom'; | 3 | import { render } from 'react-dom'; |
3 | import { createMuiTheme } from '@material-ui/core/styles'; | 4 | import { ThemeProvider, createTheme } from '@material-ui/core/styles'; |
4 | import { ThemeProvider } from '@material-ui/styles'; | 5 | import { getCache } from "tss-react/cache"; |
5 | 6 | ||
6 | import App from './App'; | 7 | import App from './App'; |
7 | import CssBaseline from '@material-ui/core/CssBaseline'; | 8 | import CssBaseline from '@material-ui/core/CssBaseline'; |
@@ -48,11 +49,12 @@ scope Family = 1, Person += 5..10. | |||
48 | const rootStore = new RootStore(); | 49 | const rootStore = new RootStore(); |
49 | rootStore.editorStore.updateValue(initialValue); | 50 | rootStore.editorStore.updateValue(initialValue); |
50 | 51 | ||
51 | const theme = createMuiTheme({ | 52 | const theme = createTheme({ |
52 | palette: { | 53 | palette: { |
53 | type: 'dark', | 54 | mode: 'dark', |
54 | background: { | 55 | background: { |
55 | default: '#212121', | 56 | default: '#212121', |
57 | paper: '#2f2f2f', | ||
56 | }, | 58 | }, |
57 | primary: { | 59 | primary: { |
58 | main: '#82aaff', | 60 | main: '#82aaff', |
@@ -64,12 +66,14 @@ const theme = createMuiTheme({ | |||
64 | }); | 66 | }); |
65 | 67 | ||
66 | const app = ( | 68 | const app = ( |
67 | <ThemeProvider theme={theme}> | 69 | <CacheProvider value={getCache()}> |
68 | <CssBaseline/> | 70 | <ThemeProvider theme={theme}> |
69 | <RootStoreProvider rootStore={rootStore}> | 71 | <CssBaseline/> |
70 | <App/> | 72 | <RootStoreProvider rootStore={rootStore}> |
71 | </RootStoreProvider> | 73 | <App/> |
72 | </ThemeProvider> | 74 | </RootStoreProvider> |
75 | </ThemeProvider> | ||
76 | </CacheProvider> | ||
73 | ) | 77 | ) |
74 | 78 | ||
75 | render(app, document.getElementById('app')); | 79 | render(app, document.getElementById('app')); |
diff --git a/language-web/src/main/js/makeStyles.js b/language-web/src/main/js/makeStyles.js new file mode 100644 index 00000000..1dee6c1f --- /dev/null +++ b/language-web/src/main/js/makeStyles.js | |||
@@ -0,0 +1,4 @@ | |||
1 | import { createMakeStyles } from "tss-react"; | ||
2 | import { useTheme } from "@material-ui/core/styles"; | ||
3 | |||
4 | export const { makeStyles } = createMakeStyles({ useTheme }); | ||