diff options
Diffstat (limited to 'subprojects/frontend/src/TopBar.tsx')
-rw-r--r-- | subprojects/frontend/src/TopBar.tsx | 91 |
1 files changed, 38 insertions, 53 deletions
diff --git a/subprojects/frontend/src/TopBar.tsx b/subprojects/frontend/src/TopBar.tsx index c722c203..e6350080 100644 --- a/subprojects/frontend/src/TopBar.tsx +++ b/subprojects/frontend/src/TopBar.tsx | |||
@@ -6,7 +6,6 @@ | |||
6 | 6 | ||
7 | import GitHubIcon from '@mui/icons-material/GitHub'; | 7 | import GitHubIcon from '@mui/icons-material/GitHub'; |
8 | import AppBar from '@mui/material/AppBar'; | 8 | import AppBar from '@mui/material/AppBar'; |
9 | import Button from '@mui/material/Button'; | ||
10 | import IconButton from '@mui/material/IconButton'; | 9 | import IconButton from '@mui/material/IconButton'; |
11 | import Stack from '@mui/material/Stack'; | 10 | import Stack from '@mui/material/Stack'; |
12 | import Toolbar from '@mui/material/Toolbar'; | 11 | import Toolbar from '@mui/material/Toolbar'; |
@@ -17,8 +16,10 @@ import { throttle } from 'lodash-es'; | |||
17 | import { observer } from 'mobx-react-lite'; | 16 | import { observer } from 'mobx-react-lite'; |
18 | import { useEffect, useMemo, useState } from 'react'; | 17 | import { useEffect, useMemo, useState } from 'react'; |
19 | 18 | ||
19 | import PaneButtons from './PaneButtons'; | ||
20 | import { useRootStore } from './RootStoreProvider'; | 20 | import { useRootStore } from './RootStoreProvider'; |
21 | import ToggleDarkModeButton from './ToggleDarkModeButton'; | 21 | import ToggleDarkModeButton from './ToggleDarkModeButton'; |
22 | import ConnectButton from './editor/ConnectButton'; | ||
22 | import GenerateButton from './editor/GenerateButton'; | 23 | import GenerateButton from './editor/GenerateButton'; |
23 | 24 | ||
24 | function useWindowControlsOverlayVisible(): boolean { | 25 | function useWindowControlsOverlayVisible(): boolean { |
@@ -65,11 +66,12 @@ const DevModeBadge = styled('div')(({ theme }) => ({ | |||
65 | })); | 66 | })); |
66 | 67 | ||
67 | export default observer(function TopBar(): JSX.Element { | 68 | export default observer(function TopBar(): JSX.Element { |
68 | const { editorStore } = useRootStore(); | 69 | const { editorStore, themeStore } = useRootStore(); |
69 | const overlayVisible = useWindowControlsOverlayVisible(); | 70 | const overlayVisible = useWindowControlsOverlayVisible(); |
70 | const { breakpoints } = useTheme(); | 71 | const { breakpoints } = useTheme(); |
71 | const small = useMediaQuery(breakpoints.down('sm')); | 72 | const medium = useMediaQuery(breakpoints.up('sm')); |
72 | const large = useMediaQuery(breakpoints.up('md')); | 73 | const large = useMediaQuery(breakpoints.up('md')); |
74 | const veryLarge = useMediaQuery(breakpoints.up('lg')); | ||
73 | 75 | ||
74 | return ( | 76 | return ( |
75 | <AppBar | 77 | <AppBar |
@@ -100,59 +102,42 @@ export default observer(function TopBar(): JSX.Element { | |||
100 | py: 0.5, | 102 | py: 0.5, |
101 | }} | 103 | }} |
102 | > | 104 | > |
103 | <Typography variant="h6" component="h1" flexGrow={1}> | 105 | <Typography variant="h6" component="h1"> |
104 | Refinery {import.meta.env.DEV && <DevModeBadge>Dev</DevModeBadge>} | 106 | Refinery {import.meta.env.DEV && <DevModeBadge>Dev</DevModeBadge>} |
105 | </Typography> | 107 | </Typography> |
106 | <Stack direction="row" marginRight={1}> | 108 | <Stack direction="row" flexGrow={1} marginLeft={1} gap={1}> |
107 | <GenerateButton editorStore={editorStore} hideWarnings={small} /> | 109 | <ConnectButton editorStore={editorStore} /> |
110 | {medium && !large && ( | ||
111 | <PaneButtons themeStore={themeStore} hideLabel /> | ||
112 | )} | ||
113 | </Stack> | ||
114 | {large && ( | ||
115 | <Stack | ||
116 | direction="row" | ||
117 | alignItems="center" | ||
118 | sx={{ | ||
119 | py: 0.5, | ||
120 | position: 'absolute', | ||
121 | top: 0, | ||
122 | bottom: 0, | ||
123 | left: '50%', | ||
124 | transform: 'translateX(-50%)', | ||
125 | }} | ||
126 | > | ||
127 | <PaneButtons themeStore={themeStore} /> | ||
128 | </Stack> | ||
129 | )} | ||
130 | <Stack direction="row" marginLeft={1} marginRight={1} gap={1}> | ||
131 | <GenerateButton editorStore={editorStore} hideWarnings={!veryLarge} /> | ||
108 | {large && ( | 132 | {large && ( |
109 | <> | 133 | <IconButton |
110 | <Button | 134 | aria-label="GitHub" |
111 | arial-label="Budapest University of Technology and Economics, Critical Systems Research Group" | 135 | href="https://github.com/graphs4value/refinery" |
112 | className="rounded" | 136 | target="_blank" |
113 | color="inherit" | 137 | color="inherit" |
114 | href="https://ftsrg.mit.bme.hu" | 138 | > |
115 | target="_blank" | 139 | <GitHubIcon /> |
116 | sx={{ marginLeft: 1 }} | 140 | </IconButton> |
117 | > | ||
118 | BME FTSRG | ||
119 | </Button> | ||
120 | <Button | ||
121 | aria-label="McGill University, Department of Electrical and Computer Engineering" | ||
122 | className="rounded" | ||
123 | color="inherit" | ||
124 | href="https://www.mcgill.ca/ece/daniel-varro" | ||
125 | target="_blank" | ||
126 | > | ||
127 | M<span style={{ textTransform: 'none' }}>c</span>Gill ECE | ||
128 | </Button> | ||
129 | <Button | ||
130 | aria-label="Linkönping University, Department of Computer and Information Science" | ||
131 | className="rounded" | ||
132 | color="inherit" | ||
133 | href="https://liu.se/en/employee/danva91" | ||
134 | target="_blank" | ||
135 | > | ||
136 | L<span style={{ textTransform: 'none' }}>i</span>U IDA | ||
137 | </Button> | ||
138 | <Button | ||
139 | aria-label="2022 Amazon Research Awards recipent" | ||
140 | className="rounded" | ||
141 | color="inherit" | ||
142 | href="https://www.amazon.science/research-awards/recipients/daniel-varro-fall-2021" | ||
143 | target="_blank" | ||
144 | > | ||
145 | Amazon Science | ||
146 | </Button> | ||
147 | <IconButton | ||
148 | aria-label="GitHub" | ||
149 | href="https://github.com/graphs4value/refinery" | ||
150 | target="_blank" | ||
151 | color="inherit" | ||
152 | > | ||
153 | <GitHubIcon /> | ||
154 | </IconButton> | ||
155 | </> | ||
156 | )} | 141 | )} |
157 | </Stack> | 142 | </Stack> |
158 | <ToggleDarkModeButton /> | 143 | <ToggleDarkModeButton /> |