diff options
author | Kristóf Marussy <kristof@marussy.com> | 2021-10-25 20:56:35 +0200 |
---|---|---|
committer | Kristóf Marussy <kristof@marussy.com> | 2021-10-31 19:26:12 +0100 |
commit | 8bca9baf3cb371eb45023eb986b8730e21cf728c (patch) | |
tree | 07e3bae4e84f40a61ac13ac122a3a7e7de32b798 /language-web/src/main/js/editor/EditorButtons.tsx | |
parent | feat(web): disconnect background tabs only (diff) | |
download | refinery-8bca9baf3cb371eb45023eb986b8730e21cf728c.tar.gz refinery-8bca9baf3cb371eb45023eb986b8730e21cf728c.tar.zst refinery-8bca9baf3cb371eb45023eb986b8730e21cf728c.zip |
feat(web): show lint status on lint button
Diffstat (limited to 'language-web/src/main/js/editor/EditorButtons.tsx')
-rw-r--r-- | language-web/src/main/js/editor/EditorButtons.tsx | 23 |
1 files changed, 21 insertions, 2 deletions
diff --git a/language-web/src/main/js/editor/EditorButtons.tsx b/language-web/src/main/js/editor/EditorButtons.tsx index 9622475c..bd843dfe 100644 --- a/language-web/src/main/js/editor/EditorButtons.tsx +++ b/language-web/src/main/js/editor/EditorButtons.tsx | |||
@@ -1,16 +1,35 @@ | |||
1 | import type { Diagnostic } from '@codemirror/lint'; | ||
1 | import { observer } from 'mobx-react-lite'; | 2 | import { observer } from 'mobx-react-lite'; |
2 | import Stack from '@mui/material/Stack'; | 3 | import Stack from '@mui/material/Stack'; |
3 | import ToggleButton from '@mui/material/ToggleButton'; | 4 | import ToggleButton from '@mui/material/ToggleButton'; |
4 | import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'; | 5 | import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'; |
5 | import CheckIcon from '@mui/icons-material/Check'; | 6 | import CheckIcon from '@mui/icons-material/Check'; |
7 | import ErrorIcon from '@mui/icons-material/Error'; | ||
6 | import FormatListNumberedIcon from '@mui/icons-material/FormatListNumbered'; | 8 | import FormatListNumberedIcon from '@mui/icons-material/FormatListNumbered'; |
9 | import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined'; | ||
7 | import RedoIcon from '@mui/icons-material/Redo'; | 10 | import RedoIcon from '@mui/icons-material/Redo'; |
8 | import SearchIcon from '@mui/icons-material/Search'; | 11 | import SearchIcon from '@mui/icons-material/Search'; |
9 | import UndoIcon from '@mui/icons-material/Undo'; | 12 | import UndoIcon from '@mui/icons-material/Undo'; |
13 | import WarningIcon from '@mui/icons-material/Warning'; | ||
10 | import React from 'react'; | 14 | import React from 'react'; |
11 | 15 | ||
12 | import { useRootStore } from '../RootStore'; | 16 | import { useRootStore } from '../RootStore'; |
13 | 17 | ||
18 | // Exhastive switch as proven by TypeScript. | ||
19 | // eslint-disable-next-line consistent-return | ||
20 | function getLintIcon(severity: Diagnostic['severity'] | null) { | ||
21 | switch (severity) { | ||
22 | case 'error': | ||
23 | return <ErrorIcon fontSize="small" />; | ||
24 | case 'warning': | ||
25 | return <WarningIcon fontSize="small" />; | ||
26 | case 'info': | ||
27 | return <InfoOutlinedIcon fontSize="small" />; | ||
28 | case null: | ||
29 | return <CheckIcon fontSize="small" />; | ||
30 | } | ||
31 | } | ||
32 | |||
14 | export const EditorButtons = observer(() => { | 33 | export const EditorButtons = observer(() => { |
15 | const { editorStore } = useRootStore(); | 34 | const { editorStore } = useRootStore(); |
16 | 35 | ||
@@ -61,10 +80,10 @@ export const EditorButtons = observer(() => { | |||
61 | <ToggleButton | 80 | <ToggleButton |
62 | selected={editorStore.showLintPanel} | 81 | selected={editorStore.showLintPanel} |
63 | onClick={() => editorStore.toggleLintPanel()} | 82 | onClick={() => editorStore.toggleLintPanel()} |
64 | aria-label="Show errors and warnings" | 83 | aria-label={`${editorStore.errorCount} errors, ${editorStore.warningCount} warnings, ${editorStore.infoCount} info`} |
65 | value="show-lint-panel" | 84 | value="show-lint-panel" |
66 | > | 85 | > |
67 | <CheckIcon fontSize="small" /> | 86 | {getLintIcon(editorStore.highestDiagnosticLevel)} |
68 | </ToggleButton> | 87 | </ToggleButton> |
69 | </ToggleButtonGroup> | 88 | </ToggleButtonGroup> |
70 | </Stack> | 89 | </Stack> |