diff options
Diffstat (limited to 'subprojects/frontend')
-rw-r--r-- | subprojects/frontend/src/TopBar.tsx | 15 | ||||
-rw-r--r-- | subprojects/frontend/src/editor/EditorPane.tsx | 6 | ||||
-rw-r--r-- | subprojects/frontend/src/editor/GenerateButton.tsx | 12 |
3 files changed, 28 insertions, 5 deletions
diff --git a/subprojects/frontend/src/TopBar.tsx b/subprojects/frontend/src/TopBar.tsx index 4424e6b3..a060ff9e 100644 --- a/subprojects/frontend/src/TopBar.tsx +++ b/subprojects/frontend/src/TopBar.tsx | |||
@@ -1,10 +1,15 @@ | |||
1 | import AppBar from '@mui/material/AppBar'; | 1 | import AppBar from '@mui/material/AppBar'; |
2 | import Toolbar from '@mui/material/Toolbar'; | 2 | import Toolbar from '@mui/material/Toolbar'; |
3 | import Typography from '@mui/material/Typography'; | 3 | import Typography from '@mui/material/Typography'; |
4 | import { useTheme } from '@mui/material/styles'; | ||
5 | import useMediaQuery from '@mui/material/useMediaQuery'; | ||
4 | import { throttle } from 'lodash-es'; | 6 | import { throttle } from 'lodash-es'; |
7 | import { observer } from 'mobx-react-lite'; | ||
5 | import React, { useEffect, useMemo, useState } from 'react'; | 8 | import React, { useEffect, useMemo, useState } from 'react'; |
6 | 9 | ||
10 | import { useRootStore } from './RootStore'; | ||
7 | import ToggleDarkModeButton from './ToggleDarkModeButton'; | 11 | import ToggleDarkModeButton from './ToggleDarkModeButton'; |
12 | import GenerateButton from './editor/GenerateButton'; | ||
8 | 13 | ||
9 | function useWindowControlsOverlayVisible(): boolean { | 14 | function useWindowControlsOverlayVisible(): boolean { |
10 | const [windowControlsOverlayVisible, setWindowControlsOverlayVisible] = | 15 | const [windowControlsOverlayVisible, setWindowControlsOverlayVisible] = |
@@ -39,8 +44,11 @@ function useWindowControlsOverlayVisible(): boolean { | |||
39 | return windowControlsOverlayVisible; | 44 | return windowControlsOverlayVisible; |
40 | } | 45 | } |
41 | 46 | ||
42 | export default function TopBar(): JSX.Element { | 47 | export default observer(function TopBar(): JSX.Element { |
48 | const { editorStore } = useRootStore(); | ||
43 | const overlayVisible = useWindowControlsOverlayVisible(); | 49 | const overlayVisible = useWindowControlsOverlayVisible(); |
50 | const { breakpoints } = useTheme(); | ||
51 | const showGenerateButton = useMediaQuery(breakpoints.down('sm')); | ||
44 | 52 | ||
45 | return ( | 53 | return ( |
46 | <AppBar | 54 | <AppBar |
@@ -74,8 +82,11 @@ export default function TopBar(): JSX.Element { | |||
74 | <Typography variant="h6" component="h1" flexGrow={1}> | 82 | <Typography variant="h6" component="h1" flexGrow={1}> |
75 | Refinery | 83 | Refinery |
76 | </Typography> | 84 | </Typography> |
85 | {showGenerateButton && ( | ||
86 | <GenerateButton editorStore={editorStore} hideWarnings /> | ||
87 | )} | ||
77 | <ToggleDarkModeButton /> | 88 | <ToggleDarkModeButton /> |
78 | </Toolbar> | 89 | </Toolbar> |
79 | </AppBar> | 90 | </AppBar> |
80 | ); | 91 | ); |
81 | } | 92 | }); |
diff --git a/subprojects/frontend/src/editor/EditorPane.tsx b/subprojects/frontend/src/editor/EditorPane.tsx index 079ebcdc..e433e714 100644 --- a/subprojects/frontend/src/editor/EditorPane.tsx +++ b/subprojects/frontend/src/editor/EditorPane.tsx | |||
@@ -2,6 +2,8 @@ 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'; | ||
5 | import { observer } from 'mobx-react-lite'; | 7 | import { observer } from 'mobx-react-lite'; |
6 | import React, { useState } from 'react'; | 8 | import React, { useState } from 'react'; |
7 | 9 | ||
@@ -32,12 +34,14 @@ function EditorLoading(): JSX.Element { | |||
32 | 34 | ||
33 | export default observer(function EditorPane(): JSX.Element { | 35 | export default observer(function EditorPane(): JSX.Element { |
34 | const { editorStore } = useRootStore(); | 36 | const { editorStore } = useRootStore(); |
37 | const { breakpoints } = useTheme(); | ||
38 | const showGenerateButton = useMediaQuery(breakpoints.up('sm')); | ||
35 | 39 | ||
36 | return ( | 40 | return ( |
37 | <Stack direction="column" flexGrow={1} flexShrink={1} overflow="auto"> | 41 | <Stack direction="column" flexGrow={1} flexShrink={1} overflow="auto"> |
38 | <Toolbar variant="dense"> | 42 | <Toolbar variant="dense"> |
39 | <EditorButtons editorStore={editorStore} /> | 43 | <EditorButtons editorStore={editorStore} /> |
40 | <GenerateButton editorStore={editorStore} /> | 44 | {showGenerateButton && <GenerateButton editorStore={editorStore} />} |
41 | </Toolbar> | 45 | </Toolbar> |
42 | <Box flexGrow={1} flexShrink={1} overflow="auto"> | 46 | <Box flexGrow={1} flexShrink={1} overflow="auto"> |
43 | {editorStore === undefined ? ( | 47 | {editorStore === undefined ? ( |
diff --git a/subprojects/frontend/src/editor/GenerateButton.tsx b/subprojects/frontend/src/editor/GenerateButton.tsx index 2ffb1a94..485989b5 100644 --- a/subprojects/frontend/src/editor/GenerateButton.tsx +++ b/subprojects/frontend/src/editor/GenerateButton.tsx | |||
@@ -7,10 +7,12 @@ import type EditorStore from './EditorStore'; | |||
7 | 7 | ||
8 | const GENERATE_LABEL = 'Generate'; | 8 | const GENERATE_LABEL = 'Generate'; |
9 | 9 | ||
10 | export default observer(function GenerateButton({ | 10 | const GenerateButton = observer(function GenerateButton({ |
11 | editorStore, | 11 | editorStore, |
12 | hideWarnings, | ||
12 | }: { | 13 | }: { |
13 | editorStore: EditorStore | undefined; | 14 | editorStore: EditorStore | undefined; |
15 | hideWarnings?: boolean | undefined; | ||
14 | }): JSX.Element { | 16 | }): JSX.Element { |
15 | if (editorStore === undefined) { | 17 | if (editorStore === undefined) { |
16 | return ( | 18 | return ( |
@@ -26,7 +28,7 @@ export default observer(function GenerateButton({ | |||
26 | if (errorCount > 0) { | 28 | if (errorCount > 0) { |
27 | diagnostics.push(`${errorCount} error${errorCount === 1 ? '' : 's'}`); | 29 | diagnostics.push(`${errorCount} error${errorCount === 1 ? '' : 's'}`); |
28 | } | 30 | } |
29 | if (warningCount > 0) { | 31 | if (!(hideWarnings ?? false) && warningCount > 0) { |
30 | diagnostics.push(`${warningCount} warning${warningCount === 1 ? '' : 's'}`); | 32 | diagnostics.push(`${warningCount} warning${warningCount === 1 ? '' : 's'}`); |
31 | } | 33 | } |
32 | const summary = diagnostics.join(' and '); | 34 | const summary = diagnostics.join(' and '); |
@@ -55,3 +57,9 @@ export default observer(function GenerateButton({ | |||
55 | </Button> | 57 | </Button> |
56 | ); | 58 | ); |
57 | }); | 59 | }); |
60 | |||
61 | GenerateButton.defaultProps = { | ||
62 | hideWarnings: false, | ||
63 | }; | ||
64 | |||
65 | export default GenerateButton; | ||