diff options
Diffstat (limited to 'language-web/src/main/js/editor/EditorButtons.jsx')
-rw-r--r-- | language-web/src/main/js/editor/EditorButtons.jsx | 67 |
1 files changed, 55 insertions, 12 deletions
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 | }); |