diff options
author | 2022-10-31 15:57:18 -0400 | |
---|---|---|
committer | 2022-11-05 19:41:17 +0100 | |
commit | 20895372d408e41d2cb929dc7a568afce94807ce (patch) | |
tree | dd192e1d64e5ecec6ec17a72df3f86acbacc5c95 /subprojects/frontend/src/editor/EditorTheme.ts | |
parent | refactor: DNF atoms (diff) | |
download | refinery-20895372d408e41d2cb929dc7a568afce94807ce.tar.gz refinery-20895372d408e41d2cb929dc7a568afce94807ce.tar.zst refinery-20895372d408e41d2cb929dc7a568afce94807ce.zip |
refactor(frontend): editor theme improvements
Diffstat (limited to 'subprojects/frontend/src/editor/EditorTheme.ts')
-rw-r--r-- | subprojects/frontend/src/editor/EditorTheme.ts | 37 |
1 files changed, 27 insertions, 10 deletions
diff --git a/subprojects/frontend/src/editor/EditorTheme.ts b/subprojects/frontend/src/editor/EditorTheme.ts index fa77862c..325f8d18 100644 --- a/subprojects/frontend/src/editor/EditorTheme.ts +++ b/subprojects/frontend/src/editor/EditorTheme.ts | |||
@@ -4,6 +4,11 @@ import infoSVG from '@material-icons/svg/svg/info/baseline.svg?raw'; | |||
4 | import warningSVG from '@material-icons/svg/svg/warning/baseline.svg?raw'; | 4 | import warningSVG from '@material-icons/svg/svg/warning/baseline.svg?raw'; |
5 | import { alpha, styled, type CSSObject } from '@mui/material/styles'; | 5 | import { alpha, styled, type CSSObject } from '@mui/material/styles'; |
6 | 6 | ||
7 | import { | ||
8 | INDENTATION_MARKER_ACTIVE_CLASS, | ||
9 | INDENTATION_MARKER_CLASS, | ||
10 | } from './indentationMarkerViewPlugin'; | ||
11 | |||
7 | function svgURL(svg: string): string { | 12 | function svgURL(svg: string): string { |
8 | return `url('data:image/svg+xml;utf8,${svg}')`; | 13 | return `url('data:image/svg+xml;utf8,${svg}')`; |
9 | } | 14 | } |
@@ -62,6 +67,9 @@ export default styled('div', { | |||
62 | background: theme.palette.highlight.selection, | 67 | background: theme.palette.highlight.selection, |
63 | }, | 68 | }, |
64 | }, | 69 | }, |
70 | '.cm-line': { | ||
71 | position: 'relative', // For indentation highlights | ||
72 | }, | ||
65 | }; | 73 | }; |
66 | 74 | ||
67 | const highlightingStyle: CSSObject = { | 75 | const highlightingStyle: CSSObject = { |
@@ -149,6 +157,13 @@ export default styled('div', { | |||
149 | '.cm-searchMatch-selected': { | 157 | '.cm-searchMatch-selected': { |
150 | background: theme.palette.highlight.search.selected, | 158 | background: theme.palette.highlight.search.selected, |
151 | }, | 159 | }, |
160 | [`.${INDENTATION_MARKER_CLASS}`]: { | ||
161 | display: 'inline-block', | ||
162 | boxShadow: `1px 0 0 ${theme.palette.highlight.lineNumber} inset`, | ||
163 | }, | ||
164 | [`.${INDENTATION_MARKER_CLASS}.${INDENTATION_MARKER_ACTIVE_CLASS}`]: { | ||
165 | boxShadow: `1px 0 0 ${theme.palette.text.primary} inset`, | ||
166 | }, | ||
152 | }; | 167 | }; |
153 | 168 | ||
154 | const lineNumberStyle: CSSObject = { | 169 | const lineNumberStyle: CSSObject = { |
@@ -311,17 +326,7 @@ export default styled('div', { | |||
311 | 326 | ||
312 | const foldStyle = { | 327 | const foldStyle = { |
313 | '.cm-foldGutter': { | 328 | '.cm-foldGutter': { |
314 | opacity: 0, | ||
315 | width: 16, | 329 | width: 16, |
316 | transition: theme.transitions.create('opacity', { | ||
317 | duration: theme.transitions.duration.short, | ||
318 | }), | ||
319 | '@media (hover: none)': { | ||
320 | opacity: 1, | ||
321 | }, | ||
322 | }, | ||
323 | '.cm-gutters:hover .cm-foldGutter': { | ||
324 | opacity: 1, | ||
325 | }, | 330 | }, |
326 | '.problem-editor-foldMarker': { | 331 | '.problem-editor-foldMarker': { |
327 | display: 'block', | 332 | display: 'block', |
@@ -338,6 +343,18 @@ export default styled('div', { | |||
338 | margin: '2px 0', | 343 | margin: '2px 0', |
339 | }, | 344 | }, |
340 | }, | 345 | }, |
346 | '.problem-editor-foldMarker-open': { | ||
347 | opacity: 0, | ||
348 | transition: theme.transitions.create('opacity', { | ||
349 | duration: theme.transitions.duration.short, | ||
350 | }), | ||
351 | '@media (hover: none)': { | ||
352 | opacity: 1, | ||
353 | }, | ||
354 | }, | ||
355 | '.cm-gutters:hover .problem-editor-foldMarker-open': { | ||
356 | opacity: 1, | ||
357 | }, | ||
341 | '.problem-editor-foldMarker-closed': { | 358 | '.problem-editor-foldMarker-closed': { |
342 | transform: 'rotate(-90deg)', | 359 | transform: 'rotate(-90deg)', |
343 | }, | 360 | }, |