diff options
Diffstat (limited to 'subprojects/frontend/src/editor')
-rw-r--r-- | subprojects/frontend/src/editor/EditorPane.tsx | 23 | ||||
-rw-r--r-- | subprojects/frontend/src/editor/EditorTheme.ts | 13 | ||||
-rw-r--r-- | subprojects/frontend/src/editor/SearchToolbar.tsx | 32 |
3 files changed, 52 insertions, 16 deletions
diff --git a/subprojects/frontend/src/editor/EditorPane.tsx b/subprojects/frontend/src/editor/EditorPane.tsx index 935a84e8..df43d2c9 100644 --- a/subprojects/frontend/src/editor/EditorPane.tsx +++ b/subprojects/frontend/src/editor/EditorPane.tsx | |||
@@ -1,10 +1,10 @@ | |||
1 | import Box from '@mui/material/Box'; | 1 | import Box from '@mui/material/Box'; |
2 | import Skeleton from '@mui/material/Skeleton'; | ||
2 | import Stack from '@mui/material/Stack'; | 3 | import Stack from '@mui/material/Stack'; |
3 | import Toolbar from '@mui/material/Toolbar'; | 4 | import Toolbar from '@mui/material/Toolbar'; |
4 | import { observer } from 'mobx-react-lite'; | 5 | import { observer } from 'mobx-react-lite'; |
5 | import React from 'react'; | 6 | import React, { useState } from 'react'; |
6 | 7 | ||
7 | import Loading from '../Loading'; | ||
8 | import { useRootStore } from '../RootStore'; | 8 | import { useRootStore } from '../RootStore'; |
9 | 9 | ||
10 | import EditorArea from './EditorArea'; | 10 | import EditorArea from './EditorArea'; |
@@ -12,6 +12,23 @@ import EditorButtons from './EditorButtons'; | |||
12 | import GenerateButton from './GenerateButton'; | 12 | import GenerateButton from './GenerateButton'; |
13 | import SearchPanelPortal from './SearchPanelPortal'; | 13 | import SearchPanelPortal from './SearchPanelPortal'; |
14 | 14 | ||
15 | function EditorLoading(): JSX.Element { | ||
16 | const [skeletonSizes] = useState(() => | ||
17 | new Array(10).fill(0).map(() => Math.random() * 60 + 10), | ||
18 | ); | ||
19 | |||
20 | return ( | ||
21 | <Box mx={2}> | ||
22 | {skeletonSizes.map((length, i) => ( | ||
23 | /* eslint-disable-next-line react/no-array-index-key -- | ||
24 | Random placeholders have no identity. | ||
25 | */ | ||
26 | <Skeleton key={i} width={`${length}%`} /> | ||
27 | ))} | ||
28 | </Box> | ||
29 | ); | ||
30 | } | ||
31 | |||
15 | function EditorPane(): JSX.Element { | 32 | function EditorPane(): JSX.Element { |
16 | const { editorStore } = useRootStore(); | 33 | const { editorStore } = useRootStore(); |
17 | 34 | ||
@@ -23,7 +40,7 @@ function EditorPane(): JSX.Element { | |||
23 | </Toolbar> | 40 | </Toolbar> |
24 | <Box flexGrow={1} flexShrink={1} overflow="auto"> | 41 | <Box flexGrow={1} flexShrink={1} overflow="auto"> |
25 | {editorStore === undefined ? ( | 42 | {editorStore === undefined ? ( |
26 | <Loading /> | 43 | <EditorLoading /> |
27 | ) : ( | 44 | ) : ( |
28 | <> | 45 | <> |
29 | <SearchPanelPortal editorStore={editorStore} /> | 46 | <SearchPanelPortal editorStore={editorStore} /> |
diff --git a/subprojects/frontend/src/editor/EditorTheme.ts b/subprojects/frontend/src/editor/EditorTheme.ts index ca07d602..dfeeb547 100644 --- a/subprojects/frontend/src/editor/EditorTheme.ts +++ b/subprojects/frontend/src/editor/EditorTheme.ts | |||
@@ -14,8 +14,10 @@ export default styled('div', { | |||
14 | })<{ showLineNumbers: boolean }>(({ theme, showLineNumbers }) => { | 14 | })<{ showLineNumbers: boolean }>(({ theme, showLineNumbers }) => { |
15 | const editorFontStyle = { | 15 | const editorFontStyle = { |
16 | ...theme.typography.editor, | 16 | ...theme.typography.editor, |
17 | fontWeight: theme.typography.fontWeightEditorNormal, | ||
17 | [theme.breakpoints.down('sm')]: { | 18 | [theme.breakpoints.down('sm')]: { |
18 | fontSize: '0.875rem', | 19 | // `rem` for JetBrains MonoVariable make the text too large in Safari. |
20 | fontSize: '14px', | ||
19 | lineHeight: 1.43, | 21 | lineHeight: 1.43, |
20 | }, | 22 | }, |
21 | }; | 23 | }; |
@@ -29,7 +31,12 @@ export default styled('div', { | |||
29 | color: theme.palette.text.secondary, | 31 | color: theme.palette.text.secondary, |
30 | }, | 32 | }, |
31 | '.cm-gutters': { | 33 | '.cm-gutters': { |
32 | background: theme.palette.background.default, | 34 | background: `linear-gradient( |
35 | to right, | ||
36 | ${theme.palette.background.default} 0%, | ||
37 | ${theme.palette.background.default} calc(100% - 12px), | ||
38 | transparent 100% | ||
39 | )`, | ||
33 | border: 'none', | 40 | border: 'none', |
34 | }, | 41 | }, |
35 | '.cm-content': { | 42 | '.cm-content': { |
@@ -93,7 +100,7 @@ export default styled('div', { | |||
93 | fontStyle: 'italic', | 100 | fontStyle: 'italic', |
94 | }, | 101 | }, |
95 | '.tok-problem-containment': { | 102 | '.tok-problem-containment': { |
96 | fontWeight: theme.typography.fontWeightBold, | 103 | fontWeight: theme.typography.fontWeightEditorBold, |
97 | textDecorationSkipInk: 'none', | 104 | textDecorationSkipInk: 'none', |
98 | }, | 105 | }, |
99 | '.tok-problem-error': { | 106 | '.tok-problem-error': { |
diff --git a/subprojects/frontend/src/editor/SearchToolbar.tsx b/subprojects/frontend/src/editor/SearchToolbar.tsx index 7e6ff4f7..895f1ca1 100644 --- a/subprojects/frontend/src/editor/SearchToolbar.tsx +++ b/subprojects/frontend/src/editor/SearchToolbar.tsx | |||
@@ -11,6 +11,7 @@ import Stack from '@mui/material/Stack'; | |||
11 | import TextField from '@mui/material/TextField'; | 11 | import TextField from '@mui/material/TextField'; |
12 | import ToggleButton from '@mui/material/ToggleButton'; | 12 | import ToggleButton from '@mui/material/ToggleButton'; |
13 | import Toolbar from '@mui/material/Toolbar'; | 13 | import Toolbar from '@mui/material/Toolbar'; |
14 | import { styled } from '@mui/material/styles'; | ||
14 | import useMediaQuery from '@mui/material/useMediaQuery'; | 15 | import useMediaQuery from '@mui/material/useMediaQuery'; |
15 | import { observer } from 'mobx-react-lite'; | 16 | import { observer } from 'mobx-react-lite'; |
16 | import React, { useCallback, useState } from 'react'; | 17 | import React, { useCallback, useState } from 'react'; |
@@ -18,7 +19,13 @@ import React, { useCallback, useState } from 'react'; | |||
18 | import type SearchPanelStore from './SearchPanelStore'; | 19 | import type SearchPanelStore from './SearchPanelStore'; |
19 | 20 | ||
20 | const SPLIT_MEDIA_QUERY = '@media (max-width: 1200px)'; | 21 | const SPLIT_MEDIA_QUERY = '@media (max-width: 1200px)'; |
21 | const ABBREVIATE_MEDIA_QUERY = '@media (max-width: 720px)'; | 22 | |
23 | const DimLabel = styled(FormControlLabel)(({ theme }) => ({ | ||
24 | '.MuiFormControlLabel-label': { | ||
25 | ...theme.typography.body2, | ||
26 | color: theme.palette.text.secondary, | ||
27 | }, | ||
28 | })); | ||
22 | 29 | ||
23 | function SearchToolbar({ | 30 | function SearchToolbar({ |
24 | searchPanelStore, | 31 | searchPanelStore, |
@@ -31,7 +38,6 @@ function SearchToolbar({ | |||
31 | invalidRegexp, | 38 | invalidRegexp, |
32 | } = searchPanelStore; | 39 | } = searchPanelStore; |
33 | const split = useMediaQuery(SPLIT_MEDIA_QUERY); | 40 | const split = useMediaQuery(SPLIT_MEDIA_QUERY); |
34 | const abbreviate = useMediaQuery(ABBREVIATE_MEDIA_QUERY); | ||
35 | const [showRepalceState, setShowReplaceState] = useState(false); | 41 | const [showRepalceState, setShowReplaceState] = useState(false); |
36 | 42 | ||
37 | const showReplace = !split || showRepalceState || replace !== ''; | 43 | const showReplace = !split || showRepalceState || replace !== ''; |
@@ -132,7 +138,7 @@ function SearchToolbar({ | |||
132 | alignItems="center" | 138 | alignItems="center" |
133 | rowGap={0.5} | 139 | rowGap={0.5} |
134 | > | 140 | > |
135 | <FormControlLabel | 141 | <DimLabel |
136 | control={ | 142 | control={ |
137 | <Checkbox | 143 | <Checkbox |
138 | checked={caseSensitive} | 144 | checked={caseSensitive} |
@@ -144,10 +150,9 @@ function SearchToolbar({ | |||
144 | size="small" | 150 | size="small" |
145 | /> | 151 | /> |
146 | } | 152 | } |
147 | aria-label="Match case" | 153 | label="Match case" |
148 | label={abbreviate ? 'Case' : 'Match case'} | ||
149 | /> | 154 | /> |
150 | <FormControlLabel | 155 | <DimLabel |
151 | control={ | 156 | control={ |
152 | <Checkbox | 157 | <Checkbox |
153 | checked={literal} | 158 | checked={literal} |
@@ -159,10 +164,9 @@ function SearchToolbar({ | |||
159 | size="small" | 164 | size="small" |
160 | /> | 165 | /> |
161 | } | 166 | } |
162 | aria-label="Literal" | 167 | label="Literal" |
163 | label={abbreviate ? 'Lit' : 'Literal'} | ||
164 | /> | 168 | /> |
165 | <FormControlLabel | 169 | <DimLabel |
166 | control={ | 170 | control={ |
167 | <Checkbox | 171 | <Checkbox |
168 | checked={regexp} | 172 | checked={regexp} |
@@ -248,7 +252,15 @@ function SearchToolbar({ | |||
248 | </Stack> | 252 | </Stack> |
249 | </Stack> | 253 | </Stack> |
250 | </Stack> | 254 | </Stack> |
251 | <Stack direction="row" alignSelf="stretch" alignItems="start" mt="1px"> | 255 | <Stack |
256 | direction="row" | ||
257 | alignSelf="stretch" | ||
258 | alignItems="start" | ||
259 | mt="1px" | ||
260 | sx={{ | ||
261 | [SPLIT_MEDIA_QUERY]: { display: 'none' }, | ||
262 | }} | ||
263 | > | ||
252 | <IconButton | 264 | <IconButton |
253 | aria-label="Close find/replace" | 265 | aria-label="Close find/replace" |
254 | onClick={() => searchPanelStore.close()} | 266 | onClick={() => searchPanelStore.close()} |