diff options
Diffstat (limited to 'subprojects/frontend/src/editor')
-rw-r--r-- | subprojects/frontend/src/editor/AnimatedButton.tsx | 14 | ||||
-rw-r--r-- | subprojects/frontend/src/editor/EditorPane.tsx | 6 | ||||
-rw-r--r-- | subprojects/frontend/src/editor/EditorTheme.ts | 10 | ||||
-rw-r--r-- | subprojects/frontend/src/editor/GenerateButton.tsx | 13 |
4 files changed, 26 insertions, 17 deletions
diff --git a/subprojects/frontend/src/editor/AnimatedButton.tsx b/subprojects/frontend/src/editor/AnimatedButton.tsx index 7f6c61f0..f75d4617 100644 --- a/subprojects/frontend/src/editor/AnimatedButton.tsx +++ b/subprojects/frontend/src/editor/AnimatedButton.tsx | |||
@@ -1,6 +1,6 @@ | |||
1 | import Box from '@mui/material/Box'; | 1 | import Box from '@mui/material/Box'; |
2 | import Button from '@mui/material/Button'; | 2 | import Button from '@mui/material/Button'; |
3 | import { styled } from '@mui/material/styles'; | 3 | import { styled, type SxProps, type Theme } from '@mui/material/styles'; |
4 | import { type ReactNode, useLayoutEffect, useState } from 'react'; | 4 | import { type ReactNode, useLayoutEffect, useState } from 'react'; |
5 | 5 | ||
6 | const AnimatedButtonBase = styled(Button, { | 6 | const AnimatedButtonBase = styled(Button, { |
@@ -9,7 +9,9 @@ const AnimatedButtonBase = styled(Button, { | |||
9 | // Transition copied from `@mui/material/Button`. | 9 | // Transition copied from `@mui/material/Button`. |
10 | const colorTransition = theme.transitions.create( | 10 | const colorTransition = theme.transitions.create( |
11 | ['background-color', 'box-shadow', 'border-color', 'color'], | 11 | ['background-color', 'box-shadow', 'border-color', 'color'], |
12 | { duration: theme.transitions.duration.short }, | 12 | { |
13 | duration: theme.transitions.duration.short, | ||
14 | }, | ||
13 | ); | 15 | ); |
14 | return { | 16 | return { |
15 | width, | 17 | width, |
@@ -19,7 +21,6 @@ const AnimatedButtonBase = styled(Button, { | |||
19 | ${colorTransition}, | 21 | ${colorTransition}, |
20 | ${theme.transitions.create(['width'], { | 22 | ${theme.transitions.create(['width'], { |
21 | duration: theme.transitions.duration.short, | 23 | duration: theme.transitions.duration.short, |
22 | easing: theme.transitions.easing.easeOut, | ||
23 | })} | 24 | })} |
24 | `, | 25 | `, |
25 | '@media (prefers-reduced-motion: reduce)': { | 26 | '@media (prefers-reduced-motion: reduce)': { |
@@ -34,6 +35,7 @@ export default function AnimatedButton({ | |||
34 | color, | 35 | color, |
35 | disabled, | 36 | disabled, |
36 | startIcon, | 37 | startIcon, |
38 | sx, | ||
37 | children, | 39 | children, |
38 | }: { | 40 | }: { |
39 | 'aria-label'?: string; | 41 | 'aria-label'?: string; |
@@ -41,6 +43,7 @@ export default function AnimatedButton({ | |||
41 | color: 'error' | 'warning' | 'primary' | 'inherit'; | 43 | color: 'error' | 'warning' | 'primary' | 'inherit'; |
42 | disabled?: boolean; | 44 | disabled?: boolean; |
43 | startIcon: JSX.Element; | 45 | startIcon: JSX.Element; |
46 | sx?: SxProps<Theme> | undefined; | ||
44 | children?: ReactNode; | 47 | children?: ReactNode; |
45 | }): JSX.Element { | 48 | }): JSX.Element { |
46 | const [width, setWidth] = useState<string | undefined>(); | 49 | const [width, setWidth] = useState<string | undefined>(); |
@@ -65,9 +68,9 @@ export default function AnimatedButton({ | |||
65 | <AnimatedButtonBase | 68 | <AnimatedButtonBase |
66 | {...(ariaLabel === undefined ? {} : { 'aria-label': ariaLabel })} | 69 | {...(ariaLabel === undefined ? {} : { 'aria-label': ariaLabel })} |
67 | {...(onClick === undefined ? {} : { onClick })} | 70 | {...(onClick === undefined ? {} : { onClick })} |
71 | {...(sx === undefined ? {} : { sx })} | ||
68 | color={color} | 72 | color={color} |
69 | variant="outlined" | 73 | className="rounded shaded" |
70 | className="rounded" | ||
71 | disabled={disabled ?? false} | 74 | disabled={disabled ?? false} |
72 | startIcon={startIcon} | 75 | startIcon={startIcon} |
73 | width={width === undefined ? 'auto' : `calc(${width} + 50px)`} | 76 | width={width === undefined ? 'auto' : `calc(${width} + 50px)`} |
@@ -91,5 +94,6 @@ AnimatedButton.defaultProps = { | |||
91 | 'aria-label': undefined, | 94 | 'aria-label': undefined, |
92 | onClick: undefined, | 95 | onClick: undefined, |
93 | disabled: false, | 96 | disabled: false, |
97 | sx: undefined, | ||
94 | children: undefined, | 98 | children: undefined, |
95 | }; | 99 | }; |
diff --git a/subprojects/frontend/src/editor/EditorPane.tsx b/subprojects/frontend/src/editor/EditorPane.tsx index 1d51b3f5..f7f8241a 100644 --- a/subprojects/frontend/src/editor/EditorPane.tsx +++ b/subprojects/frontend/src/editor/EditorPane.tsx | |||
@@ -2,8 +2,6 @@ import Box from '@mui/material/Box'; | |||
2 | import Skeleton from '@mui/material/Skeleton'; | 2 | import Skeleton from '@mui/material/Skeleton'; |
3 | import Stack from '@mui/material/Stack'; | 3 | import Stack from '@mui/material/Stack'; |
4 | import Toolbar from '@mui/material/Toolbar'; | 4 | import Toolbar from '@mui/material/Toolbar'; |
5 | import { useTheme } from '@mui/material/styles'; | ||
6 | import useMediaQuery from '@mui/material/useMediaQuery'; | ||
7 | import { observer } from 'mobx-react-lite'; | 5 | import { observer } from 'mobx-react-lite'; |
8 | import { useState } from 'react'; | 6 | import { useState } from 'react'; |
9 | 7 | ||
@@ -12,7 +10,6 @@ import { useRootStore } from '../RootStoreProvider'; | |||
12 | import ConnectionStatusNotification from './ConnectionStatusNotification'; | 10 | import ConnectionStatusNotification from './ConnectionStatusNotification'; |
13 | import EditorArea from './EditorArea'; | 11 | import EditorArea from './EditorArea'; |
14 | import EditorButtons from './EditorButtons'; | 12 | import EditorButtons from './EditorButtons'; |
15 | import GenerateButton from './GenerateButton'; | ||
16 | import SearchPanelPortal from './SearchPanelPortal'; | 13 | import SearchPanelPortal from './SearchPanelPortal'; |
17 | 14 | ||
18 | function EditorLoading(): JSX.Element { | 15 | function EditorLoading(): JSX.Element { |
@@ -34,14 +31,11 @@ function EditorLoading(): JSX.Element { | |||
34 | 31 | ||
35 | export default observer(function EditorPane(): JSX.Element { | 32 | export default observer(function EditorPane(): JSX.Element { |
36 | const { editorStore } = useRootStore(); | 33 | const { editorStore } = useRootStore(); |
37 | const { breakpoints } = useTheme(); | ||
38 | const showGenerateButton = useMediaQuery(breakpoints.up('sm')); | ||
39 | 34 | ||
40 | return ( | 35 | return ( |
41 | <Stack direction="column" flexGrow={1} flexShrink={1} overflow="auto"> | 36 | <Stack direction="column" flexGrow={1} flexShrink={1} overflow="auto"> |
42 | <Toolbar variant="dense"> | 37 | <Toolbar variant="dense"> |
43 | <EditorButtons editorStore={editorStore} /> | 38 | <EditorButtons editorStore={editorStore} /> |
44 | {showGenerateButton && <GenerateButton editorStore={editorStore} />} | ||
45 | </Toolbar> | 39 | </Toolbar> |
46 | <Box display="flex" flexGrow={1} flexShrink={1} overflow="auto"> | 40 | <Box display="flex" flexGrow={1} flexShrink={1} overflow="auto"> |
47 | {editorStore === undefined ? ( | 41 | {editorStore === undefined ? ( |
diff --git a/subprojects/frontend/src/editor/EditorTheme.ts b/subprojects/frontend/src/editor/EditorTheme.ts index e9907e83..3f2a3bff 100644 --- a/subprojects/frontend/src/editor/EditorTheme.ts +++ b/subprojects/frontend/src/editor/EditorTheme.ts | |||
@@ -161,7 +161,7 @@ export default styled('div', { | |||
161 | background: 'transparent', | 161 | background: 'transparent', |
162 | }, | 162 | }, |
163 | '.cm-cursor, .cm-cursor-primary': { | 163 | '.cm-cursor, .cm-cursor-primary': { |
164 | borderLeft: `2px solid ${theme.palette.highlight.cursor}`, | 164 | borderLeft: `2px solid ${theme.palette.info.main}`, |
165 | }, | 165 | }, |
166 | '.cm-selectionBackground': { | 166 | '.cm-selectionBackground': { |
167 | background: theme.palette.highlight.selection, | 167 | background: theme.palette.highlight.selection, |
@@ -265,7 +265,7 @@ export default styled('div', { | |||
265 | }, | 265 | }, |
266 | '.cm-indentation-marker': { | 266 | '.cm-indentation-marker': { |
267 | display: 'inline-block', | 267 | display: 'inline-block', |
268 | boxShadow: `1px 0 0 ${theme.palette.highlight.lineNumber} inset`, | 268 | boxShadow: `1px 0 0 ${theme.palette.text.disabled} inset`, |
269 | '&.active': { | 269 | '&.active': { |
270 | boxShadow: `1px 0 0 ${theme.palette.text.primary} inset`, | 270 | boxShadow: `1px 0 0 ${theme.palette.text.primary} inset`, |
271 | }, | 271 | }, |
@@ -273,7 +273,7 @@ export default styled('div', { | |||
273 | '.cm-scroller-selection': { | 273 | '.cm-scroller-selection': { |
274 | position: 'absolute', | 274 | position: 'absolute', |
275 | right: 0, | 275 | right: 0, |
276 | boxShadow: `0 2px 0 ${theme.palette.highlight.cursor} inset`, | 276 | boxShadow: `0 2px 0 ${theme.palette.info.main} inset`, |
277 | zIndex: 200, | 277 | zIndex: 200, |
278 | }, | 278 | }, |
279 | '.cm-scroller-occurrence': { | 279 | '.cm-scroller-occurrence': { |
@@ -286,7 +286,7 @@ export default styled('div', { | |||
286 | const lineNumberStyle: CSSObject = { | 286 | const lineNumberStyle: CSSObject = { |
287 | '.cm-lineNumbers': { | 287 | '.cm-lineNumbers': { |
288 | ...editorFontStyle, | 288 | ...editorFontStyle, |
289 | color: theme.palette.highlight.lineNumber, | 289 | color: theme.palette.text.disabled, |
290 | ...(!showLineNumbers && { | 290 | ...(!showLineNumbers && { |
291 | display: 'none !important', | 291 | display: 'none !important', |
292 | }), | 292 | }), |
@@ -426,7 +426,7 @@ export default styled('div', { | |||
426 | '&[aria-selected="true"]': { | 426 | '&[aria-selected="true"]': { |
427 | color: theme.palette.text.primary, | 427 | color: theme.palette.text.primary, |
428 | background: 'transparent', | 428 | background: 'transparent', |
429 | fontWeight: theme.typography.fontWeightMedium, | 429 | fontWeight: theme.typography.fontWeightBold, |
430 | }, | 430 | }, |
431 | ':hover': { | 431 | ':hover': { |
432 | background: alpha( | 432 | background: alpha( |
diff --git a/subprojects/frontend/src/editor/GenerateButton.tsx b/subprojects/frontend/src/editor/GenerateButton.tsx index 1a32f5ce..2036fc28 100644 --- a/subprojects/frontend/src/editor/GenerateButton.tsx +++ b/subprojects/frontend/src/editor/GenerateButton.tsx | |||
@@ -1,6 +1,7 @@ | |||
1 | import DangerousOutlinedIcon from '@mui/icons-material/DangerousOutlined'; | 1 | import DangerousOutlinedIcon from '@mui/icons-material/DangerousOutlined'; |
2 | import PlayArrowIcon from '@mui/icons-material/PlayArrow'; | 2 | import PlayArrowIcon from '@mui/icons-material/PlayArrow'; |
3 | import Button from '@mui/material/Button'; | 3 | import Button from '@mui/material/Button'; |
4 | import type { SxProps, Theme } from '@mui/material/styles'; | ||
4 | import { observer } from 'mobx-react-lite'; | 5 | import { observer } from 'mobx-react-lite'; |
5 | 6 | ||
6 | import AnimatedButton from './AnimatedButton'; | 7 | import AnimatedButton from './AnimatedButton'; |
@@ -11,13 +12,20 @@ const GENERATE_LABEL = 'Generate'; | |||
11 | const GenerateButton = observer(function GenerateButton({ | 12 | const GenerateButton = observer(function GenerateButton({ |
12 | editorStore, | 13 | editorStore, |
13 | hideWarnings, | 14 | hideWarnings, |
15 | sx, | ||
14 | }: { | 16 | }: { |
15 | editorStore: EditorStore | undefined; | 17 | editorStore: EditorStore | undefined; |
16 | hideWarnings?: boolean | undefined; | 18 | hideWarnings?: boolean | undefined; |
19 | sx?: SxProps<Theme> | undefined; | ||
17 | }): JSX.Element { | 20 | }): JSX.Element { |
18 | if (editorStore === undefined) { | 21 | if (editorStore === undefined) { |
19 | return ( | 22 | return ( |
20 | <Button color="inherit" variant="outlined" className="rounded" disabled> | 23 | <Button |
24 | color="inherit" | ||
25 | className="rounded shaded" | ||
26 | disabled | ||
27 | {...(sx === undefined ? {} : { sx })} | ||
28 | > | ||
21 | Loading… | 29 | Loading… |
22 | </Button> | 30 | </Button> |
23 | ); | 31 | ); |
@@ -41,6 +49,7 @@ const GenerateButton = observer(function GenerateButton({ | |||
41 | onClick={() => editorStore.nextDiagnostic()} | 49 | onClick={() => editorStore.nextDiagnostic()} |
42 | color="error" | 50 | color="error" |
43 | startIcon={<DangerousOutlinedIcon />} | 51 | startIcon={<DangerousOutlinedIcon />} |
52 | {...(sx === undefined ? {} : { sx })} | ||
44 | > | 53 | > |
45 | {summary} | 54 | {summary} |
46 | </AnimatedButton> | 55 | </AnimatedButton> |
@@ -52,6 +61,7 @@ const GenerateButton = observer(function GenerateButton({ | |||
52 | disabled={!editorStore.opened} | 61 | disabled={!editorStore.opened} |
53 | color={warningCount > 0 ? 'warning' : 'primary'} | 62 | color={warningCount > 0 ? 'warning' : 'primary'} |
54 | startIcon={<PlayArrowIcon />} | 63 | startIcon={<PlayArrowIcon />} |
64 | {...(sx === undefined ? {} : { sx })} | ||
55 | > | 65 | > |
56 | {summary === '' ? GENERATE_LABEL : `${GENERATE_LABEL} (${summary})`} | 66 | {summary === '' ? GENERATE_LABEL : `${GENERATE_LABEL} (${summary})`} |
57 | </AnimatedButton> | 67 | </AnimatedButton> |
@@ -60,6 +70,7 @@ const GenerateButton = observer(function GenerateButton({ | |||
60 | 70 | ||
61 | GenerateButton.defaultProps = { | 71 | GenerateButton.defaultProps = { |
62 | hideWarnings: false, | 72 | hideWarnings: false, |
73 | sx: undefined, | ||
63 | }; | 74 | }; |
64 | 75 | ||
65 | export default GenerateButton; | 76 | export default GenerateButton; |