aboutsummaryrefslogtreecommitdiffstats
path: root/subprojects/frontend/src/editor/EditorTheme.ts
diff options
context:
space:
mode:
authorLibravatar Oszkár Semeráth <semerath@mit.bme.hu>2023-07-24 14:37:16 +0200
committerLibravatar GitHub <noreply@github.com>2023-07-24 14:37:16 +0200
commit8789304690384d19ad829286560aec5ed0917976 (patch)
treeb157e78e8b6a3f2fb3d0eee6e1aa10d2c16e0204 /subprojects/frontend/src/editor/EditorTheme.ts
parentdecreasing steps in fast fuzz tests (diff)
parentMerge pull request #27 from kris7t/ordered-result-set (diff)
downloadrefinery-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.ts132
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
1import errorSVG from '@material-icons/svg/svg/error/baseline.svg?raw'; 7import errorSVG from '@material-icons/svg/svg/error/baseline.svg?raw';
2import expandMoreSVG from '@material-icons/svg/svg/expand_more/baseline.svg?raw'; 8import expandMoreSVG from '@material-icons/svg/svg/expand_more/baseline.svg?raw';
3import infoSVG from '@material-icons/svg/svg/info/baseline.svg?raw'; 9import 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
11function 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
37export default styled('div', { 17export 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': {