diff options
author | Kristóf Marussy <kristof@marussy.com> | 2022-09-30 20:06:09 +0200 |
---|---|---|
committer | Kristóf Marussy <kristof@marussy.com> | 2022-10-03 20:06:52 +0200 |
commit | cfdc9eae27e0fc6197abe694c7488a169dd618e9 (patch) | |
tree | 9ea9d5d2282369162a5fe8baa1f0ea79d5d2f10d | |
parent | feat: data structure for default assertions (diff) | |
download | refinery-cfdc9eae27e0fc6197abe694c7488a169dd618e9.tar.gz refinery-cfdc9eae27e0fc6197abe694c7488a169dd618e9.tar.zst refinery-cfdc9eae27e0fc6197abe694c7488a169dd618e9.zip |
fix(frontend): editor selection visibility
-rw-r--r-- | subprojects/frontend/src/editor/EditorArea.tsx | 1 | ||||
-rw-r--r-- | subprojects/frontend/src/editor/EditorPane.tsx | 2 | ||||
-rw-r--r-- | subprojects/frontend/src/editor/EditorStore.ts | 4 | ||||
-rw-r--r-- | subprojects/frontend/src/editor/EditorTheme.ts | 13 | ||||
-rw-r--r-- | subprojects/frontend/src/theme/ThemeProvider.tsx | 12 |
5 files changed, 22 insertions, 10 deletions
diff --git a/subprojects/frontend/src/editor/EditorArea.tsx b/subprojects/frontend/src/editor/EditorArea.tsx index 174b1205..e6227672 100644 --- a/subprojects/frontend/src/editor/EditorArea.tsx +++ b/subprojects/frontend/src/editor/EditorArea.tsx | |||
@@ -46,6 +46,7 @@ export default observer(function EditorArea({ | |||
46 | > | 46 | > |
47 | <EditorTheme | 47 | <EditorTheme |
48 | showLineNumbers={editorStore.showLineNumbers} | 48 | showLineNumbers={editorStore.showLineNumbers} |
49 | showActiveLine={!editorStore.hasSelection} | ||
49 | ref={editorParentRef} | 50 | ref={editorParentRef} |
50 | /> | 51 | /> |
51 | <EditorAreaDecorations parent={parent} scroller={scroller} /> | 52 | <EditorAreaDecorations parent={parent} scroller={scroller} /> |
diff --git a/subprojects/frontend/src/editor/EditorPane.tsx b/subprojects/frontend/src/editor/EditorPane.tsx index bcd324e5..199a8e1d 100644 --- a/subprojects/frontend/src/editor/EditorPane.tsx +++ b/subprojects/frontend/src/editor/EditorPane.tsx | |||
@@ -21,7 +21,7 @@ function EditorLoading(): JSX.Element { | |||
21 | ); | 21 | ); |
22 | 22 | ||
23 | return ( | 23 | return ( |
24 | <Box mx={2}> | 24 | <Box mx={2} width="100%"> |
25 | {skeletonSizes.map((length, i) => ( | 25 | {skeletonSizes.map((length, i) => ( |
26 | /* eslint-disable-next-line react/no-array-index-key -- | 26 | /* eslint-disable-next-line react/no-array-index-key -- |
27 | Random placeholders have no identity. | 27 | Random placeholders have no identity. |
diff --git a/subprojects/frontend/src/editor/EditorStore.ts b/subprojects/frontend/src/editor/EditorStore.ts index c74e732f..d13f644c 100644 --- a/subprojects/frontend/src/editor/EditorStore.ts +++ b/subprojects/frontend/src/editor/EditorStore.ts | |||
@@ -255,6 +255,10 @@ export default class EditorStore { | |||
255 | log.debug('Show line numbers', this.showLineNumbers); | 255 | log.debug('Show line numbers', this.showLineNumbers); |
256 | } | 256 | } |
257 | 257 | ||
258 | get hasSelection(): boolean { | ||
259 | return this.state.selection.ranges.some(({ from, to }) => from !== to); | ||
260 | } | ||
261 | |||
258 | formatText(): boolean { | 262 | formatText(): boolean { |
259 | this.client.formatText(); | 263 | this.client.formatText(); |
260 | return true; | 264 | return true; |
diff --git a/subprojects/frontend/src/editor/EditorTheme.ts b/subprojects/frontend/src/editor/EditorTheme.ts index db051d0e..3ec977da 100644 --- a/subprojects/frontend/src/editor/EditorTheme.ts +++ b/subprojects/frontend/src/editor/EditorTheme.ts | |||
@@ -10,8 +10,12 @@ function svgURL(svg: string): string { | |||
10 | 10 | ||
11 | export default styled('div', { | 11 | export default styled('div', { |
12 | name: 'EditorTheme', | 12 | name: 'EditorTheme', |
13 | shouldForwardProp: (propName) => propName !== 'showLineNumbers', | 13 | shouldForwardProp: (propName) => |
14 | })<{ showLineNumbers: boolean }>(({ theme, showLineNumbers }) => { | 14 | propName !== 'showLineNumbers' && propName !== 'showActiveLine', |
15 | })<{ | ||
16 | showLineNumbers: boolean; | ||
17 | showActiveLine: boolean; | ||
18 | }>(({ theme, showLineNumbers, showActiveLine }) => { | ||
15 | const editorFontStyle = { | 19 | const editorFontStyle = { |
16 | ...theme.typography.editor, | 20 | ...theme.typography.editor, |
17 | fontWeight: theme.typography.fontWeightEditorNormal, | 21 | fontWeight: theme.typography.fontWeightEditorNormal, |
@@ -39,7 +43,9 @@ export default styled('div', { | |||
39 | padding: 0, | 43 | padding: 0, |
40 | }, | 44 | }, |
41 | '.cm-activeLine': { | 45 | '.cm-activeLine': { |
42 | background: theme.palette.highlight.activeLine, | 46 | background: showActiveLine |
47 | ? theme.palette.highlight.activeLine | ||
48 | : 'transparent', | ||
43 | }, | 49 | }, |
44 | '.cm-activeLineGutter': { | 50 | '.cm-activeLineGutter': { |
45 | background: 'transparent', | 51 | background: 'transparent', |
@@ -367,6 +373,7 @@ export default styled('div', { | |||
367 | '.cm-tooltip.cm-tooltip-autocomplete': { | 373 | '.cm-tooltip.cm-tooltip-autocomplete': { |
368 | ...editorFontStyle, | 374 | ...editorFontStyle, |
369 | background: theme.palette.background.paper, | 375 | background: theme.palette.background.paper, |
376 | border: 'none', | ||
370 | borderRadius: theme.shape.borderRadius, | 377 | borderRadius: theme.shape.borderRadius, |
371 | overflow: 'hidden', | 378 | overflow: 'hidden', |
372 | ...(theme.palette.mode === 'dark' && { | 379 | ...(theme.palette.mode === 'dark' && { |
diff --git a/subprojects/frontend/src/theme/ThemeProvider.tsx b/subprojects/frontend/src/theme/ThemeProvider.tsx index 550b3b30..09a72d54 100644 --- a/subprojects/frontend/src/theme/ThemeProvider.tsx +++ b/subprojects/frontend/src/theme/ThemeProvider.tsx | |||
@@ -247,20 +247,20 @@ const darkTheme = createResponsiveTheme({ | |||
247 | divider: alpha('#abb2bf', 0.24), | 247 | divider: alpha('#abb2bf', 0.24), |
248 | outer: { | 248 | outer: { |
249 | background: '#21252b', | 249 | background: '#21252b', |
250 | border: '#181a1f', | 250 | border: '#333841', |
251 | }, | 251 | }, |
252 | highlight: { | 252 | highlight: { |
253 | number: '#6188a6', | 253 | number: '#6188a6', |
254 | parameter: '#c8ae9d', | 254 | parameter: '#c8ae9d', |
255 | comment: '#5c6370', | 255 | comment: '#7f848e', |
256 | activeLine: '#21252b', | 256 | activeLine: '#2c313c', |
257 | selection: '#3e4453', | 257 | selection: '#404859', |
258 | lineNumber: '#5c6370', | 258 | lineNumber: '#5c6370', |
259 | foldPlaceholder: alpha('#ebebff', 0.12), | 259 | foldPlaceholder: alpha('#ebebff', 0.12), |
260 | activeLintRange: alpha('#fbc346', 0.28), | 260 | activeLintRange: alpha('#fbc346', 0.28), |
261 | occurences: { | 261 | occurences: { |
262 | read: alpha('#ebebff', 0.24), | 262 | read: alpha('#ebebff', 0.14), |
263 | write: alpha('#ebebff', 0.24), | 263 | write: alpha('#ebebff', 0.14), |
264 | }, | 264 | }, |
265 | search: { | 265 | search: { |
266 | match: '#33eaff', | 266 | match: '#33eaff', |