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