diff options
Diffstat (limited to 'subprojects/frontend/src/editor/SearchToolbar.tsx')
-rw-r--r-- | subprojects/frontend/src/editor/SearchToolbar.tsx | 32 |
1 files changed, 22 insertions, 10 deletions
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()} |