diff options
author | Kristóf Marussy <marussy@mit.bme.hu> | 2021-07-01 23:54:32 +0200 |
---|---|---|
committer | Kristóf Marussy <marussy@mit.bme.hu> | 2021-07-02 00:12:15 +0200 |
commit | ef73394c3c8554719412c3bf763e2f8c90ffed56 (patch) | |
tree | 28f2635848c2540cef2d1200b753a1d8083ea956 /language-web/src/main/js/editor | |
parent | Add material-ui and mobx integration (diff) | |
download | refinery-ef73394c3c8554719412c3bf763e2f8c90ffed56.tar.gz refinery-ef73394c3c8554719412c3bf763e2f8c90ffed56.tar.zst refinery-ef73394c3c8554719412c3bf763e2f8c90ffed56.zip |
Material UI theming WIP
Diffstat (limited to 'language-web/src/main/js/editor')
-rw-r--r-- | language-web/src/main/js/editor/Editor.jsx | 2 | ||||
-rw-r--r-- | language-web/src/main/js/editor/EditorButtons.jsx | 67 | ||||
-rw-r--r-- | language-web/src/main/js/editor/EditorStore.jsx | 6 |
3 files changed, 63 insertions, 12 deletions
diff --git a/language-web/src/main/js/editor/Editor.jsx b/language-web/src/main/js/editor/Editor.jsx index c4b2e183..98cf2715 100644 --- a/language-web/src/main/js/editor/Editor.jsx +++ b/language-web/src/main/js/editor/Editor.jsx | |||
@@ -12,6 +12,8 @@ export default observer(() => { | |||
12 | const codeMirrorOptions = { | 12 | const codeMirrorOptions = { |
13 | mode: 'xtext/problem', | 13 | mode: 'xtext/problem', |
14 | indentUnit: 2, | 14 | indentUnit: 2, |
15 | theme: 'material-darker', | ||
16 | lineNumbers: editorStore.showLineNumbers, | ||
15 | }; | 17 | }; |
16 | 18 | ||
17 | const xtextOptions = { | 19 | const xtextOptions = { |
diff --git a/language-web/src/main/js/editor/EditorButtons.jsx b/language-web/src/main/js/editor/EditorButtons.jsx index b9f0d076..62f82f29 100644 --- a/language-web/src/main/js/editor/EditorButtons.jsx +++ b/language-web/src/main/js/editor/EditorButtons.jsx | |||
@@ -1,27 +1,70 @@ | |||
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 IconButton from '@material-ui/core/IconButton'; | 3 | import { makeStyles } from '@material-ui/core/styles'; |
4 | import Button from '@material-ui/core/Button'; | ||
5 | import ButtonGroup from '@material-ui/core/ButtonGroup'; | ||
6 | import Divider from '@material-ui/core/Divider'; | ||
7 | import FormatListNumberedIcon from '@material-ui/icons/FormatListNumbered'; | ||
4 | import RedoIcon from '@material-ui/icons/Redo'; | 8 | import RedoIcon from '@material-ui/icons/Redo'; |
5 | import UndoIcon from '@material-ui/icons/Undo'; | 9 | import UndoIcon from '@material-ui/icons/Undo'; |
6 | 10 | import ToggleButton from '@material-ui/lab/ToggleButton'; | |
7 | import { useRootStore } from '../RootStore'; | 11 | import { useRootStore } from '../RootStore'; |
8 | 12 | ||
13 | const useStyles = makeStyles(theme => ({ | ||
14 | iconButton: { | ||
15 | padding: 8, | ||
16 | minWidth: 36, | ||
17 | '&.MuiButtonGroup-groupedTextHorizontal': { | ||
18 | borderRight: 0, | ||
19 | }, | ||
20 | }, | ||
21 | flatToggleButton: { | ||
22 | padding: 8, | ||
23 | border: 0, | ||
24 | color: theme.palette.text.primary, | ||
25 | }, | ||
26 | divider: { | ||
27 | margin: theme.spacing(0.5), | ||
28 | } | ||
29 | })); | ||
30 | |||
9 | export default observer(() => { | 31 | export default observer(() => { |
10 | const editorStore = useRootStore().editorStore; | 32 | const editorStore = useRootStore().editorStore; |
33 | const classes = useStyles(); | ||
11 | return ( | 34 | return ( |
12 | <> | 35 | <> |
13 | <IconButton | 36 | <ButtonGroup |
14 | disabled={!editorStore.canUndo} | 37 | variant='text' |
15 | onClick={() => editorStore.undo()} | ||
16 | > | 38 | > |
17 | <UndoIcon fontSize='small'/> | 39 | <Button |
18 | </IconButton> | 40 | disabled={!editorStore.canUndo} |
19 | <IconButton | 41 | onClick={() => editorStore.undo()} |
20 | disabled={!editorStore.canRedo} | 42 | className={classes.iconButton} |
21 | onClick={() => editorStore.redo()} | 43 | > |
44 | <UndoIcon fontSize='small'/> | ||
45 | </Button> | ||
46 | <Button | ||
47 | disabled={!editorStore.canRedo} | ||
48 | onClick={() => editorStore.redo()} | ||
49 | className={classes.iconButton} | ||
50 | > | ||
51 | <RedoIcon fontSize='small'/> | ||
52 | </Button> | ||
53 | </ButtonGroup> | ||
54 | <Divider | ||
55 | flexItem | ||
56 | orientation='vertical' | ||
57 | className={classes.divider} | ||
58 | /> | ||
59 | <ToggleButton | ||
60 | value='Show line numbers' | ||
61 | selected={editorStore.showLineNumbers} | ||
62 | onChange={() => editorStore.toggleLineNumbers()} | ||
63 | size='small' | ||
64 | className={classes.flatToggleButton} | ||
22 | > | 65 | > |
23 | <RedoIcon fontSize='small'/> | 66 | <FormatListNumberedIcon fontSize='small'/> |
24 | </IconButton> | 67 | </ToggleButton> |
25 | </> | 68 | </> |
26 | ); | 69 | ); |
27 | }); | 70 | }); |
diff --git a/language-web/src/main/js/editor/EditorStore.jsx b/language-web/src/main/js/editor/EditorStore.jsx index 9c286c28..6b03b383 100644 --- a/language-web/src/main/js/editor/EditorStore.jsx +++ b/language-web/src/main/js/editor/EditorStore.jsx | |||
@@ -7,6 +7,8 @@ export default class EditorStore { | |||
7 | editor = null; | 7 | editor = null; |
8 | /** @type {string} */ | 8 | /** @type {string} */ |
9 | value = ''; | 9 | value = ''; |
10 | /** @type {boolean} */ | ||
11 | showLineNumbers = false; | ||
10 | 12 | ||
11 | constructor() { | 13 | constructor() { |
12 | this.atom = createAtom('EditorStore'); | 14 | this.atom = createAtom('EditorStore'); |
@@ -72,4 +74,8 @@ export default class EditorStore { | |||
72 | redo() { | 74 | redo() { |
73 | this.editor.redo(); | 75 | this.editor.redo(); |
74 | } | 76 | } |
77 | |||
78 | toggleLineNumbers() { | ||
79 | this.showLineNumbers = !this.showLineNumbers; | ||
80 | } | ||
75 | } | 81 | } |