diff options
author | 2023-07-24 14:37:16 +0200 | |
---|---|---|
committer | 2023-07-24 14:37:16 +0200 | |
commit | 8789304690384d19ad829286560aec5ed0917976 (patch) | |
tree | b157e78e8b6a3f2fb3d0eee6e1aa10d2c16e0204 /subprojects/frontend/src/editor/EditorTheme.ts | |
parent | decreasing steps in fast fuzz tests (diff) | |
parent | Merge pull request #27 from kris7t/ordered-result-set (diff) | |
download | refinery-8789304690384d19ad829286560aec5ed0917976.tar.gz refinery-8789304690384d19ad829286560aec5ed0917976.tar.zst refinery-8789304690384d19ad829286560aec5ed0917976.zip |
Merge branch 'graphs4value:main' into datastructure
Diffstat (limited to 'subprojects/frontend/src/editor/EditorTheme.ts')
-rw-r--r-- | subprojects/frontend/src/editor/EditorTheme.ts | 132 |
1 files changed, 9 insertions, 123 deletions
diff --git a/subprojects/frontend/src/editor/EditorTheme.ts b/subprojects/frontend/src/editor/EditorTheme.ts index 01b65a7e..e057ce18 100644 --- a/subprojects/frontend/src/editor/EditorTheme.ts +++ b/subprojects/frontend/src/editor/EditorTheme.ts | |||
@@ -1,3 +1,9 @@ | |||
1 | /* | ||
2 | * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/> | ||
3 | * | ||
4 | * SPDX-License-Identifier: EPL-2.0 | ||
5 | */ | ||
6 | |||
1 | import errorSVG from '@material-icons/svg/svg/error/baseline.svg?raw'; | 7 | import errorSVG from '@material-icons/svg/svg/error/baseline.svg?raw'; |
2 | import expandMoreSVG from '@material-icons/svg/svg/expand_more/baseline.svg?raw'; | 8 | import expandMoreSVG from '@material-icons/svg/svg/expand_more/baseline.svg?raw'; |
3 | import infoSVG from '@material-icons/svg/svg/info/baseline.svg?raw'; | 9 | import infoSVG from '@material-icons/svg/svg/info/baseline.svg?raw'; |
@@ -8,32 +14,6 @@ function svgURL(svg: string): string { | |||
8 | return `url('data:image/svg+xml;utf8,${svg}')`; | 14 | return `url('data:image/svg+xml;utf8,${svg}')`; |
9 | } | 15 | } |
10 | 16 | ||
11 | function radialShadowTheme( | ||
12 | origin: string, | ||
13 | scaleX: boolean, | ||
14 | scaleY: boolean, | ||
15 | ): CSSObject { | ||
16 | function radialGradient(opacity: number, scale: string): string { | ||
17 | return `radial-gradient( | ||
18 | farthest-side at ${origin}, | ||
19 | rgba(0, 0, 0, ${opacity}), | ||
20 | rgba(0, 0, 0, 0) | ||
21 | ) | ||
22 | ${origin} / | ||
23 | ${scaleX ? scale : '100%'} | ||
24 | ${scaleY ? scale : '100%'} | ||
25 | no-repeat`; | ||
26 | } | ||
27 | |||
28 | return { | ||
29 | background: ` | ||
30 | ${radialGradient(0.2, '40%')}, | ||
31 | ${radialGradient(0.14, '50%')}, | ||
32 | ${radialGradient(0.12, '100%')} | ||
33 | `, | ||
34 | }; | ||
35 | } | ||
36 | |||
37 | export default styled('div', { | 17 | export default styled('div', { |
38 | name: 'EditorTheme', | 18 | name: 'EditorTheme', |
39 | shouldForwardProp: (propName) => | 19 | shouldForwardProp: (propName) => |
@@ -52,98 +32,13 @@ export default styled('div', { | |||
52 | }, | 32 | }, |
53 | }; | 33 | }; |
54 | 34 | ||
55 | const scrollerThumbOpacity = theme.palette.mode === 'dark' ? 0.16 : 0.28; | ||
56 | |||
57 | const generalStyle: CSSObject = { | 35 | const generalStyle: CSSObject = { |
58 | background: theme.palette.background.default, | 36 | background: theme.palette.background.default, |
59 | '&, .cm-editor': { | 37 | '&, .cm-editor': { |
60 | height: '100%', | 38 | height: '100%', |
61 | }, | 39 | }, |
62 | '.cm-scroller-holder': { | ||
63 | display: 'flex', | ||
64 | position: 'relative', | ||
65 | flexDirection: 'column', | ||
66 | overflow: 'hidden', | ||
67 | flex: '1 1', | ||
68 | }, | ||
69 | '.cm-scroller-spacer': { | ||
70 | position: 'sticky', | ||
71 | flexShrink: 0, | ||
72 | zIndex: 300, | ||
73 | width: 1, | ||
74 | marginRight: -1, | ||
75 | pointerEvents: 'none', | ||
76 | }, | ||
77 | '.cm-scroller': { | 40 | '.cm-scroller': { |
78 | color: theme.palette.text.secondary, | 41 | color: theme.palette.text.secondary, |
79 | scrollbarWidth: 'none', | ||
80 | MsOverflowStyle: 'none', | ||
81 | '&::-webkit-scrollbar': { | ||
82 | width: 0, | ||
83 | height: 0, | ||
84 | background: 'transparent', | ||
85 | }, | ||
86 | }, | ||
87 | '.cm-scroller-track': { | ||
88 | position: 'absolute', | ||
89 | zIndex: 300, | ||
90 | touchAction: 'none', | ||
91 | }, | ||
92 | '.cm-scroller-thumb': { | ||
93 | position: 'absolute', | ||
94 | background: theme.palette.text.secondary, | ||
95 | opacity: scrollerThumbOpacity, | ||
96 | transition: theme.transitions.create('opacity', { | ||
97 | duration: theme.transitions.duration.shortest, | ||
98 | }), | ||
99 | touchAction: 'none', | ||
100 | WebkitTapHighlightColor: 'transparent', | ||
101 | '&:hover': { | ||
102 | opacity: 0.75, | ||
103 | '@media (hover: none)': { | ||
104 | opacity: scrollerThumbOpacity, | ||
105 | }, | ||
106 | }, | ||
107 | '&.active': { | ||
108 | opacity: 1, | ||
109 | pointerEvents: 'none', | ||
110 | userSelect: 'none', | ||
111 | }, | ||
112 | }, | ||
113 | '.cm-scroller-track-y, .cm-scroller-thumb-y': { | ||
114 | top: 0, | ||
115 | right: 0, | ||
116 | width: 12, | ||
117 | }, | ||
118 | '.cm-scroller-track-x, .cm-scroller-thumb-x': { | ||
119 | left: 0, | ||
120 | bottom: 0, | ||
121 | height: 12, | ||
122 | }, | ||
123 | '.cm-scroller-track-x': { | ||
124 | right: 12, | ||
125 | }, | ||
126 | '.cm-scroller-gutter-decoration': { | ||
127 | position: 'absolute', | ||
128 | top: 0, | ||
129 | bottom: 0, | ||
130 | left: 0, | ||
131 | width: 0, | ||
132 | transition: theme.transitions.create('width', { | ||
133 | duration: theme.transitions.duration.shortest, | ||
134 | }), | ||
135 | ...radialShadowTheme('0 50%', true, false), | ||
136 | }, | ||
137 | '.cm-scroller-top-decoration': { | ||
138 | position: 'absolute', | ||
139 | top: 0, | ||
140 | left: 0, | ||
141 | right: 0, | ||
142 | height: 0, | ||
143 | transition: theme.transitions.create('height', { | ||
144 | duration: theme.transitions.duration.shortest, | ||
145 | }), | ||
146 | ...radialShadowTheme('50% 0', false, true), | ||
147 | }, | 42 | }, |
148 | '.cm-gutters': { | 43 | '.cm-gutters': { |
149 | background: theme.palette.background.default, | 44 | background: theme.palette.background.default, |
@@ -162,7 +57,6 @@ export default styled('div', { | |||
162 | background: 'transparent', | 57 | background: 'transparent', |
163 | }, | 58 | }, |
164 | '.cm-cursor, .cm-cursor-primary': { | 59 | '.cm-cursor, .cm-cursor-primary': { |
165 | marginLeft: -1, | ||
166 | borderLeft: `2px solid ${theme.palette.info.main}`, | 60 | borderLeft: `2px solid ${theme.palette.info.main}`, |
167 | }, | 61 | }, |
168 | '.cm-selectionBackground': { | 62 | '.cm-selectionBackground': { |
@@ -175,7 +69,6 @@ export default styled('div', { | |||
175 | }, | 69 | }, |
176 | }, | 70 | }, |
177 | '.cm-line': { | 71 | '.cm-line': { |
178 | position: 'relative', // For indentation highlights | ||
179 | padding: '0 12px 0 0px', | 72 | padding: '0 12px 0 0px', |
180 | }, | 73 | }, |
181 | }; | 74 | }; |
@@ -265,13 +158,6 @@ export default styled('div', { | |||
265 | '.cm-searchMatch-selected': { | 158 | '.cm-searchMatch-selected': { |
266 | background: theme.palette.highlight.search.selected, | 159 | background: theme.palette.highlight.search.selected, |
267 | }, | 160 | }, |
268 | '.cm-indentation-marker': { | ||
269 | display: 'inline-block', | ||
270 | boxShadow: `1px 0 0 ${theme.palette.text.disabled} inset`, | ||
271 | '&.active': { | ||
272 | boxShadow: `1px 0 0 ${theme.palette.text.primary} inset`, | ||
273 | }, | ||
274 | }, | ||
275 | '.cm-scroller-selection': { | 161 | '.cm-scroller-selection': { |
276 | position: 'absolute', | 162 | position: 'absolute', |
277 | right: 0, | 163 | right: 0, |
@@ -452,11 +338,11 @@ export default styled('div', { | |||
452 | 338 | ||
453 | const foldStyle = { | 339 | const foldStyle = { |
454 | '.cm-foldGutter': { | 340 | '.cm-foldGutter': { |
455 | width: 17, | 341 | width: 16, |
456 | }, | 342 | }, |
457 | '.problem-editor-foldMarker': { | 343 | '.problem-editor-foldMarker': { |
458 | display: 'block', | 344 | display: 'block', |
459 | margin: '4px 1px 4px 0', | 345 | margin: '4px 0 4px 0', |
460 | padding: 0, | 346 | padding: 0, |
461 | maskImage: svgURL(expandMoreSVG), | 347 | maskImage: svgURL(expandMoreSVG), |
462 | maskSize: '16px 16px', | 348 | maskSize: '16px 16px', |
@@ -467,7 +353,7 @@ export default styled('div', { | |||
467 | cursor: 'pointer', | 353 | cursor: 'pointer', |
468 | WebkitTapHighlightColor: 'transparent', | 354 | WebkitTapHighlightColor: 'transparent', |
469 | [theme.breakpoints.down('sm')]: { | 355 | [theme.breakpoints.down('sm')]: { |
470 | margin: '2px 1px 2px 0', | 356 | margin: '2px 0 2px 0', |
471 | }, | 357 | }, |
472 | }, | 358 | }, |
473 | '.problem-editor-foldMarker-open': { | 359 | '.problem-editor-foldMarker-open': { |