diff options
author | 2022-08-16 21:14:50 +0200 | |
---|---|---|
committer | 2022-08-16 21:14:50 +0200 | |
commit | 19cd11118cde7160cd447c81bc965007c0437479 (patch) | |
tree | 5fea613e7a46d69380995368a68cc72f186078a4 /subprojects/frontend/src/editor/EditorParent.ts | |
parent | chore(deps): bump frontend dependencies (diff) | |
download | refinery-19cd11118cde7160cd447c81bc965007c0437479.tar.gz refinery-19cd11118cde7160cd447c81bc965007c0437479.tar.zst refinery-19cd11118cde7160cd447c81bc965007c0437479.zip |
refactor(frondend): improve editor store and theme
Also bumps frontend dependencies.
Diffstat (limited to 'subprojects/frontend/src/editor/EditorParent.ts')
-rw-r--r-- | subprojects/frontend/src/editor/EditorParent.ts | 228 |
1 files changed, 0 insertions, 228 deletions
diff --git a/subprojects/frontend/src/editor/EditorParent.ts b/subprojects/frontend/src/editor/EditorParent.ts deleted file mode 100644 index 3742b89c..00000000 --- a/subprojects/frontend/src/editor/EditorParent.ts +++ /dev/null | |||
@@ -1,228 +0,0 @@ | |||
1 | import { alpha, styled } from '@mui/material/styles'; | ||
2 | |||
3 | export default styled('div', { | ||
4 | name: 'EditorParent', | ||
5 | shouldForwardProp: (propName) => propName !== 'showLineNumbers', | ||
6 | })<{ showLineNumbers: boolean }>(({ theme, showLineNumbers }) => { | ||
7 | const codeMirrorLintStyle: Record<string, unknown> = {}; | ||
8 | (['error', 'warning', 'info'] as const).forEach((severity) => { | ||
9 | const color = theme.palette[severity].main; | ||
10 | codeMirrorLintStyle[`.cm-diagnostic-${severity}`] = { | ||
11 | borderLeftColor: color, | ||
12 | }; | ||
13 | codeMirrorLintStyle[`.cm-lintRange-${severity}`] = { | ||
14 | backgroundImage: 'none', | ||
15 | textDecoration: `underline wavy ${color}`, | ||
16 | textDecorationSkipInk: 'none', | ||
17 | }; | ||
18 | }); | ||
19 | |||
20 | return { | ||
21 | background: theme.palette.background.default, | ||
22 | '&, .cm-editor': { | ||
23 | height: '100%', | ||
24 | }, | ||
25 | '.cm-content': { | ||
26 | padding: 0, | ||
27 | }, | ||
28 | '.cm-scroller, .cm-tooltip-autocomplete, .cm-completionLabel, .cm-completionDetail': | ||
29 | { | ||
30 | ...theme.typography.body1, | ||
31 | fontFamily: '"JetBrains MonoVariable", "JetBrains Mono", monospace', | ||
32 | fontFeatureSettings: '"liga", "calt"', | ||
33 | letterSpacing: 0, | ||
34 | textRendering: 'optimizeLegibility', | ||
35 | }, | ||
36 | '.cm-scroller': { | ||
37 | color: theme.palette.text.secondary, | ||
38 | }, | ||
39 | '.cm-gutters': { | ||
40 | background: 'transparent', | ||
41 | color: theme.palette.text.disabled, | ||
42 | border: 'none', | ||
43 | }, | ||
44 | '.cm-specialChar': { | ||
45 | color: theme.palette.secondary.main, | ||
46 | }, | ||
47 | '.cm-activeLine': { | ||
48 | background: theme.palette.highlight.activeLine, | ||
49 | }, | ||
50 | '.cm-foldGutter': { | ||
51 | color: alpha(theme.palette.text.primary, 0), | ||
52 | transition: theme.transitions.create('color', { | ||
53 | duration: theme.transitions.duration.short, | ||
54 | }), | ||
55 | '@media (hover: none)': { | ||
56 | color: theme.palette.text.primary, | ||
57 | }, | ||
58 | }, | ||
59 | '.cm-gutters:hover .cm-foldGutter': { | ||
60 | color: theme.palette.text.primary, | ||
61 | }, | ||
62 | '.cm-activeLineGutter': { | ||
63 | background: 'transparent', | ||
64 | }, | ||
65 | '.cm-lineNumbers': { | ||
66 | ...(!showLineNumbers && { | ||
67 | display: 'none !important', | ||
68 | }), | ||
69 | '.cm-activeLineGutter': { | ||
70 | color: theme.palette.text.primary, | ||
71 | }, | ||
72 | }, | ||
73 | '.cm-cursor, .cm-cursor-primary': { | ||
74 | borderLeft: `2px solid ${theme.palette.primary.main}`, | ||
75 | }, | ||
76 | '.cm-selectionBackground': { | ||
77 | background: theme.palette.selection.main, | ||
78 | }, | ||
79 | '.cm-focused': { | ||
80 | outline: 'none', | ||
81 | '.cm-selectionBackground': { | ||
82 | background: theme.palette.selection.main, | ||
83 | }, | ||
84 | }, | ||
85 | '.cm-panels-top': { | ||
86 | color: theme.palette.text.secondary, | ||
87 | }, | ||
88 | '.cm-panel': { | ||
89 | '&, & button, & input': { | ||
90 | fontFamily: theme.typography.fontFamily, | ||
91 | }, | ||
92 | background: theme.palette.background.default, | ||
93 | borderTop: `1px solid ${theme.palette.divider2}`, | ||
94 | 'button[name="close"]': { | ||
95 | background: 'transparent', | ||
96 | color: theme.palette.text.secondary, | ||
97 | cursor: 'pointer', | ||
98 | }, | ||
99 | }, | ||
100 | '.cm-panel.cm-panel-lint': { | ||
101 | boderBottom: 'none', | ||
102 | 'button[name="close"]': { | ||
103 | // Close button interferes with scrollbar, so we better hide it. | ||
104 | // The panel can still be closed from the toolbar. | ||
105 | display: 'none', | ||
106 | }, | ||
107 | ul: { | ||
108 | li: { | ||
109 | cursor: 'pointer', | ||
110 | color: theme.palette.text.primary, | ||
111 | }, | ||
112 | '[aria-selected], &:focus [aria-selected]': { | ||
113 | background: theme.palette.selection.main, | ||
114 | color: theme.palette.selection.contrastText, | ||
115 | }, | ||
116 | }, | ||
117 | }, | ||
118 | '.cm-foldPlaceholder': { | ||
119 | color: theme.palette.text.secondary, | ||
120 | backgroundColor: alpha(theme.palette.text.secondary, 0), | ||
121 | border: `1px solid ${alpha(theme.palette.text.secondary, 0.5)}`, | ||
122 | borderRadius: theme.shape.borderRadius, | ||
123 | transition: theme.transitions.create( | ||
124 | ['background-color', 'border-color', 'color'], | ||
125 | { | ||
126 | duration: theme.transitions.duration.short, | ||
127 | }, | ||
128 | ), | ||
129 | '&:hover': { | ||
130 | backgroundColor: alpha( | ||
131 | theme.palette.text.secondary, | ||
132 | theme.palette.action.hoverOpacity, | ||
133 | ), | ||
134 | borderColor: theme.palette.text.secondary, | ||
135 | '@media (hover: none)': { | ||
136 | backgroundColor: 'transparent', | ||
137 | }, | ||
138 | }, | ||
139 | }, | ||
140 | '.tok-comment': { | ||
141 | fontStyle: 'italic', | ||
142 | color: theme.palette.highlight.comment, | ||
143 | }, | ||
144 | '.tok-number': { | ||
145 | color: theme.palette.highlight.number, | ||
146 | }, | ||
147 | '.tok-string': { | ||
148 | color: theme.palette.secondary.dark, | ||
149 | }, | ||
150 | '.tok-keyword': { | ||
151 | color: theme.palette.primary.main, | ||
152 | }, | ||
153 | '.tok-typeName, .tok-macroName, .tok-atom': { | ||
154 | color: theme.palette.text.primary, | ||
155 | }, | ||
156 | '.tok-variableName': { | ||
157 | color: theme.palette.highlight.parameter, | ||
158 | }, | ||
159 | '.tok-problem-node': { | ||
160 | '&, & .tok-variableName': { | ||
161 | color: theme.palette.text.secondary, | ||
162 | }, | ||
163 | }, | ||
164 | '.tok-problem-individual': { | ||
165 | '&, & .tok-variableName': { | ||
166 | color: theme.palette.text.primary, | ||
167 | }, | ||
168 | }, | ||
169 | '.tok-problem-abstract, .tok-problem-new': { | ||
170 | fontStyle: 'italic', | ||
171 | }, | ||
172 | '.tok-problem-containment': { | ||
173 | fontWeight: 700, | ||
174 | }, | ||
175 | '.tok-problem-error': { | ||
176 | '&, & .tok-typeName': { | ||
177 | color: theme.palette.error.main, | ||
178 | }, | ||
179 | }, | ||
180 | '.tok-problem-builtin': { | ||
181 | '&, & .tok-typeName, & .tok-atom, & .tok-variableName': { | ||
182 | color: theme.palette.primary.main, | ||
183 | fontWeight: 400, | ||
184 | fontStyle: 'normal', | ||
185 | }, | ||
186 | }, | ||
187 | '.cm-tooltip-autocomplete': { | ||
188 | background: theme.palette.background.paper, | ||
189 | ...(theme.palette.mode === 'dark' && { | ||
190 | overflow: 'hidden', | ||
191 | borderRadius: theme.shape.borderRadius, | ||
192 | // https://github.com/mui/material-ui/blob/10c72729c7d03bab8cdce6eb422642684c56dca2/packages/mui-material/src/Paper/Paper.js#L18 | ||
193 | backgroundImage: | ||
194 | 'linear-gradient(rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.09))', | ||
195 | }), | ||
196 | boxShadow: theme.shadows[4], | ||
197 | '.cm-completionIcon': { | ||
198 | color: theme.palette.text.secondary, | ||
199 | }, | ||
200 | '.cm-completionLabel': { | ||
201 | color: theme.palette.text.primary, | ||
202 | }, | ||
203 | '.cm-completionDetail': { | ||
204 | color: theme.palette.text.secondary, | ||
205 | fontStyle: 'normal', | ||
206 | }, | ||
207 | '[aria-selected]': { | ||
208 | background: `${theme.palette.primary.main} !important`, | ||
209 | '.cm-completionIcon, .cm-completionLabel, .cm-completionDetail': { | ||
210 | color: theme.palette.primary.contrastText, | ||
211 | }, | ||
212 | }, | ||
213 | }, | ||
214 | '.cm-completionIcon': { | ||
215 | width: 16, | ||
216 | padding: 0, | ||
217 | marginRight: '0.5em', | ||
218 | textAlign: 'center', | ||
219 | }, | ||
220 | ...codeMirrorLintStyle, | ||
221 | '.cm-problem-read': { | ||
222 | background: theme.palette.highlight.occurences.read, | ||
223 | }, | ||
224 | '.cm-problem-write': { | ||
225 | background: theme.palette.highlight.occurences.write, | ||
226 | }, | ||
227 | }; | ||
228 | }); | ||