diff options
Diffstat (limited to 'subprojects/frontend/src/editor')
-rw-r--r-- | subprojects/frontend/src/editor/EditorButtons.tsx | 34 | ||||
-rw-r--r-- | subprojects/frontend/src/editor/EditorParent.ts | 46 | ||||
-rw-r--r-- | subprojects/frontend/src/editor/GenerateButton.tsx | 7 |
3 files changed, 30 insertions, 57 deletions
diff --git a/subprojects/frontend/src/editor/EditorButtons.tsx b/subprojects/frontend/src/editor/EditorButtons.tsx index 652ca71e..1412a314 100644 --- a/subprojects/frontend/src/editor/EditorButtons.tsx +++ b/subprojects/frontend/src/editor/EditorButtons.tsx | |||
@@ -36,24 +36,22 @@ function EditorButtons(): JSX.Element { | |||
36 | const { editorStore } = useRootStore(); | 36 | const { editorStore } = useRootStore(); |
37 | 37 | ||
38 | return ( | 38 | return ( |
39 | <Stack direction="row" spacing={1}> | 39 | <Stack direction="row" flexGrow={1}> |
40 | <Stack direction="row" alignItems="center"> | 40 | <IconButton |
41 | <IconButton | 41 | disabled={!editorStore.canUndo} |
42 | disabled={!editorStore.canUndo} | 42 | onClick={() => editorStore.undo()} |
43 | onClick={() => editorStore.undo()} | 43 | aria-label="Undo" |
44 | aria-label="Undo" | 44 | > |
45 | > | 45 | <UndoIcon fontSize="small" /> |
46 | <UndoIcon fontSize="small" /> | 46 | </IconButton> |
47 | </IconButton> | 47 | <IconButton |
48 | <IconButton | 48 | disabled={!editorStore.canRedo} |
49 | disabled={!editorStore.canRedo} | 49 | onClick={() => editorStore.redo()} |
50 | onClick={() => editorStore.redo()} | 50 | aria-label="Redo" |
51 | aria-label="Redo" | 51 | > |
52 | > | 52 | <RedoIcon fontSize="small" /> |
53 | <RedoIcon fontSize="small" /> | 53 | </IconButton> |
54 | </IconButton> | 54 | <ToggleButtonGroup size="small" sx={{ mx: 1 }}> |
55 | </Stack> | ||
56 | <ToggleButtonGroup size="small"> | ||
57 | <ToggleButton | 55 | <ToggleButton |
58 | selected={editorStore.showLineNumbers} | 56 | selected={editorStore.showLineNumbers} |
59 | onClick={() => editorStore.toggleLineNumbers()} | 57 | onClick={() => editorStore.toggleLineNumbers()} |
diff --git a/subprojects/frontend/src/editor/EditorParent.ts b/subprojects/frontend/src/editor/EditorParent.ts index 805065fc..3742b89c 100644 --- a/subprojects/frontend/src/editor/EditorParent.ts +++ b/subprojects/frontend/src/editor/EditorParent.ts | |||
@@ -1,22 +1,5 @@ | |||
1 | import { alpha, styled } from '@mui/material/styles'; | 1 | import { alpha, styled } from '@mui/material/styles'; |
2 | 2 | ||
3 | /** | ||
4 | * Returns a squiggly underline background image encoded as a CSS `url()` data URI with Base64. | ||
5 | * | ||
6 | * Based on | ||
7 | * https://github.com/codemirror/lint/blob/f524b4a53b0183bb343ac1e32b228d28030d17af/src/lint.ts#L501 | ||
8 | * | ||
9 | * @param color the color of the underline | ||
10 | * @returns the CSS `url()` | ||
11 | */ | ||
12 | function underline(color: string) { | ||
13 | const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="6" height="3"> | ||
14 | <path d="m0 3 l2 -2 l1 0 l2 2 l1 0" stroke="${color}" fill="none" stroke-width=".7"/> | ||
15 | </svg>`; | ||
16 | const svgBase64 = window.btoa(svg); | ||
17 | return `url('data:image/svg+xml;base64,${svgBase64}')`; | ||
18 | } | ||
19 | |||
20 | export default styled('div', { | 3 | export default styled('div', { |
21 | name: 'EditorParent', | 4 | name: 'EditorParent', |
22 | shouldForwardProp: (propName) => propName !== 'showLineNumbers', | 5 | shouldForwardProp: (propName) => propName !== 'showLineNumbers', |
@@ -28,7 +11,9 @@ export default styled('div', { | |||
28 | borderLeftColor: color, | 11 | borderLeftColor: color, |
29 | }; | 12 | }; |
30 | codeMirrorLintStyle[`.cm-lintRange-${severity}`] = { | 13 | codeMirrorLintStyle[`.cm-lintRange-${severity}`] = { |
31 | backgroundImage: underline(color), | 14 | backgroundImage: 'none', |
15 | textDecoration: `underline wavy ${color}`, | ||
16 | textDecorationSkipInk: 'none', | ||
32 | }; | 17 | }; |
33 | }); | 18 | }); |
34 | 19 | ||
@@ -42,10 +27,9 @@ export default styled('div', { | |||
42 | }, | 27 | }, |
43 | '.cm-scroller, .cm-tooltip-autocomplete, .cm-completionLabel, .cm-completionDetail': | 28 | '.cm-scroller, .cm-tooltip-autocomplete, .cm-completionLabel, .cm-completionDetail': |
44 | { | 29 | { |
45 | fontSize: 16, | 30 | ...theme.typography.body1, |
46 | fontFamily: '"JetBrains MonoVariable", "JetBrains Mono", monospace', | 31 | fontFamily: '"JetBrains MonoVariable", "JetBrains Mono", monospace', |
47 | fontFeatureSettings: '"liga", "calt"', | 32 | fontFeatureSettings: '"liga", "calt"', |
48 | fontWeight: 400, | ||
49 | letterSpacing: 0, | 33 | letterSpacing: 0, |
50 | textRendering: 'optimizeLegibility', | 34 | textRendering: 'optimizeLegibility', |
51 | }, | 35 | }, |
@@ -61,7 +45,7 @@ export default styled('div', { | |||
61 | color: theme.palette.secondary.main, | 45 | color: theme.palette.secondary.main, |
62 | }, | 46 | }, |
63 | '.cm-activeLine': { | 47 | '.cm-activeLine': { |
64 | background: alpha(theme.palette.text.secondary, 0.06), | 48 | background: theme.palette.highlight.activeLine, |
65 | }, | 49 | }, |
66 | '.cm-foldGutter': { | 50 | '.cm-foldGutter': { |
67 | color: alpha(theme.palette.text.primary, 0), | 51 | color: alpha(theme.palette.text.primary, 0), |
@@ -103,10 +87,10 @@ export default styled('div', { | |||
103 | }, | 87 | }, |
104 | '.cm-panel': { | 88 | '.cm-panel': { |
105 | '&, & button, & input': { | 89 | '&, & button, & input': { |
106 | fontFamily: '"Roboto","Helvetica","Arial",sans-serif', | 90 | fontFamily: theme.typography.fontFamily, |
107 | }, | 91 | }, |
108 | background: theme.palette.background.paper, | 92 | background: theme.palette.background.default, |
109 | borderTop: `1px solid ${theme.palette.divider}`, | 93 | borderTop: `1px solid ${theme.palette.divider2}`, |
110 | 'button[name="close"]': { | 94 | 'button[name="close"]': { |
111 | background: 'transparent', | 95 | background: 'transparent', |
112 | color: theme.palette.text.secondary, | 96 | color: theme.palette.text.secondary, |
@@ -114,6 +98,7 @@ export default styled('div', { | |||
114 | }, | 98 | }, |
115 | }, | 99 | }, |
116 | '.cm-panel.cm-panel-lint': { | 100 | '.cm-panel.cm-panel-lint': { |
101 | boderBottom: 'none', | ||
117 | 'button[name="close"]': { | 102 | 'button[name="close"]': { |
118 | // Close button interferes with scrollbar, so we better hide it. | 103 | // Close button interferes with scrollbar, so we better hide it. |
119 | // The panel can still be closed from the toolbar. | 104 | // The panel can still be closed from the toolbar. |
@@ -121,18 +106,13 @@ export default styled('div', { | |||
121 | }, | 106 | }, |
122 | ul: { | 107 | ul: { |
123 | li: { | 108 | li: { |
124 | borderBottom: `1px solid ${theme.palette.divider}`, | ||
125 | cursor: 'pointer', | 109 | cursor: 'pointer', |
126 | color: theme.palette.text.primary, | 110 | color: theme.palette.text.primary, |
127 | }, | 111 | }, |
128 | '[aria-selected]': { | 112 | '[aria-selected], &:focus [aria-selected]': { |
129 | background: theme.palette.selection.main, | 113 | background: theme.palette.selection.main, |
130 | color: theme.palette.selection.contrastText, | 114 | color: theme.palette.selection.contrastText, |
131 | }, | 115 | }, |
132 | '&:focus [aria-selected]': { | ||
133 | background: theme.palette.primary.main, | ||
134 | color: theme.palette.primary.contrastText, | ||
135 | }, | ||
136 | }, | 116 | }, |
137 | }, | 117 | }, |
138 | '.cm-foldPlaceholder': { | 118 | '.cm-foldPlaceholder': { |
@@ -159,7 +139,7 @@ export default styled('div', { | |||
159 | }, | 139 | }, |
160 | '.tok-comment': { | 140 | '.tok-comment': { |
161 | fontStyle: 'italic', | 141 | fontStyle: 'italic', |
162 | color: theme.palette.text.disabled, | 142 | color: theme.palette.highlight.comment, |
163 | }, | 143 | }, |
164 | '.tok-number': { | 144 | '.tok-number': { |
165 | color: theme.palette.highlight.number, | 145 | color: theme.palette.highlight.number, |
@@ -225,9 +205,9 @@ export default styled('div', { | |||
225 | fontStyle: 'normal', | 205 | fontStyle: 'normal', |
226 | }, | 206 | }, |
227 | '[aria-selected]': { | 207 | '[aria-selected]': { |
228 | background: `${theme.palette.selection.main} !important`, | 208 | background: `${theme.palette.primary.main} !important`, |
229 | '.cm-completionIcon, .cm-completionLabel, .cm-completionDetail': { | 209 | '.cm-completionIcon, .cm-completionLabel, .cm-completionDetail': { |
230 | color: theme.palette.selection.contrastText, | 210 | color: theme.palette.primary.contrastText, |
231 | }, | 211 | }, |
232 | }, | 212 | }, |
233 | }, | 213 | }, |
diff --git a/subprojects/frontend/src/editor/GenerateButton.tsx b/subprojects/frontend/src/editor/GenerateButton.tsx index fc337da9..4d5c4e44 100644 --- a/subprojects/frontend/src/editor/GenerateButton.tsx +++ b/subprojects/frontend/src/editor/GenerateButton.tsx | |||
@@ -22,11 +22,7 @@ function GenerateButton(): JSX.Element { | |||
22 | 22 | ||
23 | if (errorCount > 0) { | 23 | if (errorCount > 0) { |
24 | return ( | 24 | return ( |
25 | <Button | 25 | <Button color="error" onClick={() => editorStore.toggleLintPanel()}> |
26 | variant="outlined" | ||
27 | color="error" | ||
28 | onClick={() => editorStore.toggleLintPanel()} | ||
29 | > | ||
30 | {summary} | 26 | {summary} |
31 | </Button> | 27 | </Button> |
32 | ); | 28 | ); |
@@ -34,7 +30,6 @@ function GenerateButton(): JSX.Element { | |||
34 | 30 | ||
35 | return ( | 31 | return ( |
36 | <Button | 32 | <Button |
37 | variant="outlined" | ||
38 | color={warningCount > 0 ? 'warning' : 'primary'} | 33 | color={warningCount > 0 ? 'warning' : 'primary'} |
39 | startIcon={<PlayArrowIcon />} | 34 | startIcon={<PlayArrowIcon />} |
40 | > | 35 | > |