diff options
author | 2022-09-06 00:20:27 +0200 | |
---|---|---|
committer | 2022-09-06 01:05:24 +0200 | |
commit | 13ef6251c688e3139a4f8a7c94ff5dab90719420 (patch) | |
tree | 693e5393c3c792641bda77222818aa3285e8482e /subprojects/frontend/src/editor/EditorPane.tsx | |
parent | fix(frontend): Lezer bracket matching (diff) | |
download | refinery-13ef6251c688e3139a4f8a7c94ff5dab90719420.tar.gz refinery-13ef6251c688e3139a4f8a7c94ff5dab90719420.tar.zst refinery-13ef6251c688e3139a4f8a7c94ff5dab90719420.zip |
refactor(frontend): toolbar sm breakpoint
Improve toolbar appearance on small screens
Diffstat (limited to 'subprojects/frontend/src/editor/EditorPane.tsx')
-rw-r--r-- | subprojects/frontend/src/editor/EditorPane.tsx | 6 |
1 files changed, 5 insertions, 1 deletions
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 ? ( |