diff options
Diffstat (limited to 'subprojects/frontend/src/editor/EditorButtons.tsx')
-rw-r--r-- | subprojects/frontend/src/editor/EditorButtons.tsx | 32 |
1 files changed, 13 insertions, 19 deletions
diff --git a/subprojects/frontend/src/editor/EditorButtons.tsx b/subprojects/frontend/src/editor/EditorButtons.tsx index 150aa00d..652ca71e 100644 --- a/subprojects/frontend/src/editor/EditorButtons.tsx +++ b/subprojects/frontend/src/editor/EditorButtons.tsx | |||
@@ -1,9 +1,4 @@ | |||
1 | import type { Diagnostic } from '@codemirror/lint'; | 1 | import type { Diagnostic } from '@codemirror/lint'; |
2 | import { observer } from 'mobx-react-lite'; | ||
3 | import IconButton from '@mui/material/IconButton'; | ||
4 | import Stack from '@mui/material/Stack'; | ||
5 | import ToggleButton from '@mui/material/ToggleButton'; | ||
6 | import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'; | ||
7 | import CheckIcon from '@mui/icons-material/Check'; | 2 | import CheckIcon from '@mui/icons-material/Check'; |
8 | import ErrorIcon from '@mui/icons-material/Error'; | 3 | import ErrorIcon from '@mui/icons-material/Error'; |
9 | import FormatListNumberedIcon from '@mui/icons-material/FormatListNumbered'; | 4 | import FormatListNumberedIcon from '@mui/icons-material/FormatListNumbered'; |
@@ -13,6 +8,11 @@ import RedoIcon from '@mui/icons-material/Redo'; | |||
13 | import SearchIcon from '@mui/icons-material/Search'; | 8 | import SearchIcon from '@mui/icons-material/Search'; |
14 | import UndoIcon from '@mui/icons-material/Undo'; | 9 | import UndoIcon from '@mui/icons-material/Undo'; |
15 | import WarningIcon from '@mui/icons-material/Warning'; | 10 | import WarningIcon from '@mui/icons-material/Warning'; |
11 | import IconButton from '@mui/material/IconButton'; | ||
12 | import Stack from '@mui/material/Stack'; | ||
13 | import ToggleButton from '@mui/material/ToggleButton'; | ||
14 | import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'; | ||
15 | import { observer } from 'mobx-react-lite'; | ||
16 | import React from 'react'; | 16 | import React from 'react'; |
17 | 17 | ||
18 | import { useRootStore } from '../RootStore'; | 18 | import { useRootStore } from '../RootStore'; |
@@ -27,23 +27,17 @@ function getLintIcon(severity: Diagnostic['severity'] | null) { | |||
27 | return <WarningIcon fontSize="small" />; | 27 | return <WarningIcon fontSize="small" />; |
28 | case 'info': | 28 | case 'info': |
29 | return <InfoOutlinedIcon fontSize="small" />; | 29 | return <InfoOutlinedIcon fontSize="small" />; |
30 | case null: | 30 | default: |
31 | return <CheckIcon fontSize="small" />; | 31 | return <CheckIcon fontSize="small" />; |
32 | } | 32 | } |
33 | } | 33 | } |
34 | 34 | ||
35 | export const EditorButtons = observer(() => { | 35 | function EditorButtons(): JSX.Element { |
36 | const { editorStore } = useRootStore(); | 36 | const { editorStore } = useRootStore(); |
37 | 37 | ||
38 | return ( | 38 | return ( |
39 | <Stack | 39 | <Stack direction="row" spacing={1}> |
40 | direction="row" | 40 | <Stack direction="row" alignItems="center"> |
41 | spacing={1} | ||
42 | > | ||
43 | <Stack | ||
44 | direction="row" | ||
45 | alignItems="center" | ||
46 | > | ||
47 | <IconButton | 41 | <IconButton |
48 | disabled={!editorStore.canUndo} | 42 | disabled={!editorStore.canUndo} |
49 | onClick={() => editorStore.undo()} | 43 | onClick={() => editorStore.undo()} |
@@ -59,9 +53,7 @@ export const EditorButtons = observer(() => { | |||
59 | <RedoIcon fontSize="small" /> | 53 | <RedoIcon fontSize="small" /> |
60 | </IconButton> | 54 | </IconButton> |
61 | </Stack> | 55 | </Stack> |
62 | <ToggleButtonGroup | 56 | <ToggleButtonGroup size="small"> |
63 | size="small" | ||
64 | > | ||
65 | <ToggleButton | 57 | <ToggleButton |
66 | selected={editorStore.showLineNumbers} | 58 | selected={editorStore.showLineNumbers} |
67 | onClick={() => editorStore.toggleLineNumbers()} | 59 | onClick={() => editorStore.toggleLineNumbers()} |
@@ -95,4 +87,6 @@ export const EditorButtons = observer(() => { | |||
95 | </IconButton> | 87 | </IconButton> |
96 | </Stack> | 88 | </Stack> |
97 | ); | 89 | ); |
98 | }); | 90 | } |
91 | |||
92 | export default observer(EditorButtons); | ||