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