diff options
author | Kristóf Marussy <kristof@marussy.com> | 2024-04-12 16:59:31 +0200 |
---|---|---|
committer | Kristóf Marussy <kristof@marussy.com> | 2024-04-12 17:39:52 +0200 |
commit | d087a0abc83c07c067d7ac7afff1acc57dad6220 (patch) | |
tree | e317ed7d5bd576efbb3af51be89bd3bfa5e00115 /subprojects/frontend/src/editor/SearchToolbar.tsx | |
parent | refactor(frontend): friendlier table view messages (diff) | |
download | refinery-d087a0abc83c07c067d7ac7afff1acc57dad6220.tar.gz refinery-d087a0abc83c07c067d7ac7afff1acc57dad6220.tar.zst refinery-d087a0abc83c07c067d7ac7afff1acc57dad6220.zip |
feat(frontend): add tooltips to buttons
Diffstat (limited to 'subprojects/frontend/src/editor/SearchToolbar.tsx')
-rw-r--r-- | subprojects/frontend/src/editor/SearchToolbar.tsx | 94 |
1 files changed, 49 insertions, 45 deletions
diff --git a/subprojects/frontend/src/editor/SearchToolbar.tsx b/subprojects/frontend/src/editor/SearchToolbar.tsx index 4ae7e893..bfdff234 100644 --- a/subprojects/frontend/src/editor/SearchToolbar.tsx +++ b/subprojects/frontend/src/editor/SearchToolbar.tsx | |||
@@ -17,15 +17,14 @@ import Stack from '@mui/material/Stack'; | |||
17 | import TextField from '@mui/material/TextField'; | 17 | import TextField from '@mui/material/TextField'; |
18 | import ToggleButton from '@mui/material/ToggleButton'; | 18 | import ToggleButton from '@mui/material/ToggleButton'; |
19 | import Toolbar from '@mui/material/Toolbar'; | 19 | import Toolbar from '@mui/material/Toolbar'; |
20 | import Tooltip from '@mui/material/Tooltip'; | ||
20 | import { styled } from '@mui/material/styles'; | 21 | import { styled } from '@mui/material/styles'; |
21 | import useMediaQuery from '@mui/material/useMediaQuery'; | ||
22 | import { observer } from 'mobx-react-lite'; | 22 | import { observer } from 'mobx-react-lite'; |
23 | import { useCallback, useState } from 'react'; | 23 | import { useCallback, useState } from 'react'; |
24 | import { useResizeDetector } from 'react-resize-detector'; | ||
24 | 25 | ||
25 | import type SearchPanelStore from './SearchPanelStore'; | 26 | import type SearchPanelStore from './SearchPanelStore'; |
26 | 27 | ||
27 | const SPLIT_MEDIA_QUERY = '@media (max-width: 1200px)'; | ||
28 | |||
29 | const DimLabel = styled(FormControlLabel)(({ theme }) => ({ | 28 | const DimLabel = styled(FormControlLabel)(({ theme }) => ({ |
30 | '.MuiFormControlLabel-label': { | 29 | '.MuiFormControlLabel-label': { |
31 | ...theme.typography.body2, | 30 | ...theme.typography.body2, |
@@ -43,7 +42,8 @@ export default observer(function SearchToolbar({ | |||
43 | query: { search, valid, caseSensitive, literal, regexp, replace }, | 42 | query: { search, valid, caseSensitive, literal, regexp, replace }, |
44 | invalidRegexp, | 43 | invalidRegexp, |
45 | } = searchPanelStore; | 44 | } = searchPanelStore; |
46 | const split = useMediaQuery(SPLIT_MEDIA_QUERY); | 45 | const { width, ref } = useResizeDetector(); |
46 | const split = width !== undefined && width <= 1200; | ||
47 | const [showRepalceState, setShowReplaceState] = useState(false); | 47 | const [showRepalceState, setShowReplaceState] = useState(false); |
48 | 48 | ||
49 | const showReplace = !split || showRepalceState || replace !== ''; | 49 | const showReplace = !split || showRepalceState || replace !== ''; |
@@ -61,16 +61,19 @@ export default observer(function SearchToolbar({ | |||
61 | <Toolbar | 61 | <Toolbar |
62 | variant="dense" | 62 | variant="dense" |
63 | sx={{ py: 0.5, alignItems: 'center', minHeight: 'auto' }} | 63 | sx={{ py: 0.5, alignItems: 'center', minHeight: 'auto' }} |
64 | ref={ref} | ||
64 | > | 65 | > |
65 | <Stack | 66 | <Stack |
66 | direction={split ? 'column' : 'row'} | 67 | direction={split ? 'column' : 'row'} |
67 | sx={{ | 68 | sx={{ |
68 | alignItems: 'center', | 69 | alignItems: 'center', |
69 | flexGrow: 1, | 70 | flexGrow: 1, |
70 | [SPLIT_MEDIA_QUERY]: { | 71 | ...(split |
71 | alignItems: 'start', | 72 | ? { |
72 | gap: 0.5, | 73 | alignItems: 'start', |
73 | }, | 74 | gap: 0.5, |
75 | } | ||
76 | : {}), | ||
74 | }} | 77 | }} |
75 | > | 78 | > |
76 | <Stack direction="row" flexWrap="wrap" alignItems="center" rowGap={0.5}> | 79 | <Stack direction="row" flexWrap="wrap" alignItems="center" rowGap={0.5}> |
@@ -121,22 +124,24 @@ export default observer(function SearchToolbar({ | |||
121 | mr={1} | 124 | mr={1} |
122 | rowGap={0.5} | 125 | rowGap={0.5} |
123 | > | 126 | > |
124 | <IconButton | 127 | <Tooltip title="Previous match"> |
125 | aria-label="Previous" | 128 | <IconButton |
126 | disabled={!valid} | 129 | disabled={!valid} |
127 | onClick={() => searchPanelStore.findPrevious()} | 130 | onClick={() => searchPanelStore.findPrevious()} |
128 | color="inherit" | 131 | color="inherit" |
129 | > | 132 | > |
130 | <KeyboardArrowUpIcon fontSize="small" /> | 133 | <KeyboardArrowUpIcon fontSize="small" /> |
131 | </IconButton> | 134 | </IconButton> |
132 | <IconButton | 135 | </Tooltip> |
133 | aria-label="Next" | 136 | <Tooltip title="Next match"> |
134 | disabled={!valid} | 137 | <IconButton |
135 | onClick={() => searchPanelStore.findNext()} | 138 | disabled={!valid} |
136 | color="inherit" | 139 | onClick={() => searchPanelStore.findNext()} |
137 | > | 140 | color="inherit" |
138 | <KeyboardArrowDownIcon fontSize="small" /> | 141 | > |
139 | </IconButton> | 142 | <KeyboardArrowDownIcon fontSize="small" /> |
143 | </IconButton> | ||
144 | </Tooltip> | ||
140 | </Stack> | 145 | </Stack> |
141 | <Stack | 146 | <Stack |
142 | direction="row" | 147 | direction="row" |
@@ -187,24 +192,25 @@ export default observer(function SearchToolbar({ | |||
187 | label="Regexp" | 192 | label="Regexp" |
188 | /> | 193 | /> |
189 | {split && ( | 194 | {split && ( |
190 | <ToggleButton | 195 | <Tooltip title="Replace"> |
191 | value="show-replace" | 196 | <ToggleButton |
192 | selected={showReplace} | 197 | value="show-replace" |
193 | onClick={() => { | 198 | selected={showReplace} |
194 | if (showReplace) { | 199 | onClick={() => { |
195 | searchPanelStore.updateQuery({ replace: '' }); | 200 | if (showReplace) { |
196 | setShowReplaceState(false); | 201 | searchPanelStore.updateQuery({ replace: '' }); |
197 | } else { | 202 | setShowReplaceState(false); |
198 | setShowReplaceState(true); | 203 | } else { |
199 | } | 204 | setShowReplaceState(true); |
200 | }} | 205 | } |
201 | aria-label="Show replace options" | 206 | }} |
202 | aria-controls={replaceId} | 207 | aria-controls={replaceId} |
203 | size="small" | 208 | size="small" |
204 | className="iconOnly" | 209 | className="iconOnly" |
205 | > | 210 | > |
206 | <FindReplaceIcon fontSize="small" /> | 211 | <FindReplaceIcon fontSize="small" /> |
207 | </ToggleButton> | 212 | </ToggleButton> |
213 | </Tooltip> | ||
208 | )} | 214 | )} |
209 | </Stack> | 215 | </Stack> |
210 | </Stack> | 216 | </Stack> |
@@ -263,9 +269,7 @@ export default observer(function SearchToolbar({ | |||
263 | alignSelf="stretch" | 269 | alignSelf="stretch" |
264 | alignItems="start" | 270 | alignItems="start" |
265 | mt="1px" | 271 | mt="1px" |
266 | sx={{ | 272 | sx={split ? { display: 'none' } : {}} |
267 | [SPLIT_MEDIA_QUERY]: { display: 'none' }, | ||
268 | }} | ||
269 | > | 273 | > |
270 | <IconButton | 274 | <IconButton |
271 | aria-label="Close find/replace" | 275 | aria-label="Close find/replace" |