diff options
Diffstat (limited to 'language-web/src/main/js/editor/EditorButtons.tsx')
-rw-r--r-- | language-web/src/main/js/editor/EditorButtons.tsx | 29 |
1 files changed, 15 insertions, 14 deletions
diff --git a/language-web/src/main/js/editor/EditorButtons.tsx b/language-web/src/main/js/editor/EditorButtons.tsx index 1a187635..d3825c07 100644 --- a/language-web/src/main/js/editor/EditorButtons.tsx +++ b/language-web/src/main/js/editor/EditorButtons.tsx | |||
@@ -11,7 +11,7 @@ import UndoIcon from '@material-ui/icons/Undo'; | |||
11 | import { makeStyles } from '../makeStyles'; | 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 | border: 0, | 17 | border: 0, |
@@ -28,47 +28,48 @@ const useStyles = makeStyles()(theme => ({ | |||
28 | }, | 28 | }, |
29 | })); | 29 | })); |
30 | 30 | ||
31 | export default observer(() => { | 31 | export const EditorButtons = observer(() => { |
32 | const { editorStore } = useRootStore(); | 32 | const { editorStore } = useRootStore(); |
33 | const { classes, cx } = useStyles(); | 33 | const { classes, cx } = useStyles(); |
34 | |||
34 | return ( | 35 | return ( |
35 | <> | 36 | <> |
36 | <ButtonGroup | 37 | <ButtonGroup |
37 | variant='text' | 38 | variant="text" |
38 | > | 39 | > |
39 | <Button | 40 | <Button |
40 | disabled={!editorStore.canUndo} | 41 | disabled={!editorStore.canUndo} |
41 | onClick={() => editorStore.undo()} | 42 | onClick={() => editorStore.undo()} |
42 | className={cx(classes.iconButton)} | 43 | className={cx(classes.iconButton)} |
43 | color='inherit' | 44 | color="inherit" |
44 | aria-label='Undo' | 45 | aria-label="Undo" |
45 | > | 46 | > |
46 | <UndoIcon fontSize='small'/> | 47 | <UndoIcon fontSize="small" /> |
47 | </Button> | 48 | </Button> |
48 | <Button | 49 | <Button |
49 | disabled={!editorStore.canRedo} | 50 | disabled={!editorStore.canRedo} |
50 | onClick={() => editorStore.redo()} | 51 | onClick={() => editorStore.redo()} |
51 | className={cx(classes.iconButton)} | 52 | className={cx(classes.iconButton)} |
52 | color='inherit' | 53 | color="inherit" |
53 | aria-label='Redo' | 54 | aria-label="Redo" |
54 | > | 55 | > |
55 | <RedoIcon fontSize='small'/> | 56 | <RedoIcon fontSize="small" /> |
56 | </Button> | 57 | </Button> |
57 | </ButtonGroup> | 58 | </ButtonGroup> |
58 | <Divider | 59 | <Divider |
59 | flexItem | 60 | flexItem |
60 | orientation='vertical' | 61 | orientation="vertical" |
61 | className={classes.divider} | 62 | className={classes.divider} |
62 | /> | 63 | /> |
63 | <ToggleButton | 64 | <ToggleButton |
64 | selected={editorStore.showLineNumbers} | 65 | selected={editorStore.showLineNumbers} |
65 | onChange={() => editorStore.toggleLineNumbers()} | 66 | onChange={() => editorStore.toggleLineNumbers()} |
66 | size='small' | 67 | size="small" |
67 | className={cx(classes.iconButton)} | 68 | className={cx(classes.iconButton)} |
68 | aria-label='Show line numbers' | 69 | aria-label="Show line numbers" |
69 | value='show-line-numbers' | 70 | value="show-line-numbers" |
70 | > | 71 | > |
71 | <FormatListNumberedIcon fontSize='small'/> | 72 | <FormatListNumberedIcon fontSize="small" /> |
72 | </ToggleButton> | 73 | </ToggleButton> |
73 | </> | 74 | </> |
74 | ); | 75 | ); |