diff options
Diffstat (limited to 'language-web/src/main/js/editor/EditorButtons.tsx')
-rw-r--r-- | language-web/src/main/js/editor/EditorButtons.tsx | 70 |
1 files changed, 56 insertions, 14 deletions
diff --git a/language-web/src/main/js/editor/EditorButtons.tsx b/language-web/src/main/js/editor/EditorButtons.tsx index 56577e82..09ce33dd 100644 --- a/language-web/src/main/js/editor/EditorButtons.tsx +++ b/language-web/src/main/js/editor/EditorButtons.tsx | |||
@@ -1,14 +1,36 @@ | |||
1 | import type { Diagnostic } from '@codemirror/lint'; | ||
1 | import { observer } from 'mobx-react-lite'; | 2 | import { observer } from 'mobx-react-lite'; |
3 | import IconButton from '@mui/material/IconButton'; | ||
2 | import Stack from '@mui/material/Stack'; | 4 | import Stack from '@mui/material/Stack'; |
3 | import ToggleButton from '@mui/material/ToggleButton'; | 5 | import ToggleButton from '@mui/material/ToggleButton'; |
4 | import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'; | 6 | import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'; |
7 | import CheckIcon from '@mui/icons-material/Check'; | ||
8 | import ErrorIcon from '@mui/icons-material/Error'; | ||
5 | import FormatListNumberedIcon from '@mui/icons-material/FormatListNumbered'; | 9 | import FormatListNumberedIcon from '@mui/icons-material/FormatListNumbered'; |
10 | import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined'; | ||
6 | import RedoIcon from '@mui/icons-material/Redo'; | 11 | import RedoIcon from '@mui/icons-material/Redo'; |
12 | import SearchIcon from '@mui/icons-material/Search'; | ||
7 | import UndoIcon from '@mui/icons-material/Undo'; | 13 | import UndoIcon from '@mui/icons-material/Undo'; |
14 | import WarningIcon from '@mui/icons-material/Warning'; | ||
8 | import React from 'react'; | 15 | import React from 'react'; |
9 | 16 | ||
10 | import { useRootStore } from '../RootStore'; | 17 | import { useRootStore } from '../RootStore'; |
11 | 18 | ||
19 | // Exhastive switch as proven by TypeScript. | ||
20 | // eslint-disable-next-line consistent-return | ||
21 | function getLintIcon(severity: Diagnostic['severity'] | null) { | ||
22 | switch (severity) { | ||
23 | case 'error': | ||
24 | return <ErrorIcon fontSize="small" />; | ||
25 | case 'warning': | ||
26 | return <WarningIcon fontSize="small" />; | ||
27 | case 'info': | ||
28 | return <InfoOutlinedIcon fontSize="small" />; | ||
29 | case null: | ||
30 | return <CheckIcon fontSize="small" />; | ||
31 | } | ||
32 | } | ||
33 | |||
12 | export const EditorButtons = observer(() => { | 34 | export const EditorButtons = observer(() => { |
13 | const { editorStore } = useRootStore(); | 35 | const { editorStore } = useRootStore(); |
14 | 36 | ||
@@ -17,35 +39,55 @@ export const EditorButtons = observer(() => { | |||
17 | direction="row" | 39 | direction="row" |
18 | spacing={1} | 40 | spacing={1} |
19 | > | 41 | > |
20 | <ToggleButtonGroup | 42 | <Stack |
21 | size="small" | 43 | direction="row" |
44 | alignItems="center" | ||
22 | > | 45 | > |
23 | <ToggleButton | 46 | <IconButton |
24 | disabled={!editorStore.canUndo} | 47 | disabled={!editorStore.canUndo} |
25 | onClick={() => editorStore.undo()} | 48 | onClick={() => editorStore.undo()} |
26 | aria-label="Undo" | 49 | aria-label="Undo" |
27 | value="undo" | 50 | value="undo" |
28 | > | 51 | > |
29 | <UndoIcon fontSize="small" /> | 52 | <UndoIcon fontSize="small" /> |
30 | </ToggleButton> | 53 | </IconButton> |
31 | <ToggleButton | 54 | <IconButton |
32 | disabled={!editorStore.canRedo} | 55 | disabled={!editorStore.canRedo} |
33 | onClick={() => editorStore.redo()} | 56 | onClick={() => editorStore.redo()} |
34 | aria-label="Redo" | 57 | aria-label="Redo" |
35 | value="redo" | 58 | value="redo" |
36 | > | 59 | > |
37 | <RedoIcon fontSize="small" /> | 60 | <RedoIcon fontSize="small" /> |
38 | </ToggleButton> | 61 | </IconButton> |
39 | </ToggleButtonGroup> | 62 | </Stack> |
40 | <ToggleButton | 63 | <ToggleButtonGroup |
41 | selected={editorStore.showLineNumbers} | ||
42 | onChange={() => editorStore.toggleLineNumbers()} | ||
43 | size="small" | 64 | size="small" |
44 | aria-label="Show line numbers" | ||
45 | value="show-line-numbers" | ||
46 | > | 65 | > |
47 | <FormatListNumberedIcon fontSize="small" /> | 66 | <ToggleButton |
48 | </ToggleButton> | 67 | selected={editorStore.showLineNumbers} |
68 | onClick={() => editorStore.toggleLineNumbers()} | ||
69 | aria-label="Show line numbers" | ||
70 | value="show-line-numbers" | ||
71 | > | ||
72 | <FormatListNumberedIcon fontSize="small" /> | ||
73 | </ToggleButton> | ||
74 | <ToggleButton | ||
75 | selected={editorStore.showSearchPanel} | ||
76 | onClick={() => editorStore.toggleSearchPanel()} | ||
77 | aria-label="Show find/replace" | ||
78 | value="show-search-panel" | ||
79 | > | ||
80 | <SearchIcon fontSize="small" /> | ||
81 | </ToggleButton> | ||
82 | <ToggleButton | ||
83 | selected={editorStore.showLintPanel} | ||
84 | onClick={() => editorStore.toggleLintPanel()} | ||
85 | aria-label="Show diagnostics panel" | ||
86 | value="show-lint-panel" | ||
87 | > | ||
88 | {getLintIcon(editorStore.highestDiagnosticLevel)} | ||
89 | </ToggleButton> | ||
90 | </ToggleButtonGroup> | ||
49 | </Stack> | 91 | </Stack> |
50 | ); | 92 | ); |
51 | }); | 93 | }); |