diff options
author | Kristóf Marussy <kristof@marussy.com> | 2022-02-17 03:17:49 +0100 |
---|---|---|
committer | Kristóf Marussy <kristof@marussy.com> | 2022-03-06 18:56:45 +0100 |
commit | 2efa902d42733abafcfcacd6ae8efcea4afe59ae (patch) | |
tree | 168f7f0e1e806b30af68701cff4350bd96f9751c /packages/renderer/src/components/sidebar/ToggleLocationBarButton.tsx | |
parent | feat: Basic location bar (diff) | |
download | sophie-2efa902d42733abafcfcacd6ae8efcea4afe59ae.tar.gz sophie-2efa902d42733abafcfcacd6ae8efcea4afe59ae.tar.zst sophie-2efa902d42733abafcfcacd6ae8efcea4afe59ae.zip |
design: Location bar and other UI styling
InputBase paddings are idiosyncratic if there is both a start and an end
adornment. To simplify the styles, we override the styling from InputBase
and compute our own paddings.
The animated color change when switching from a secure site to an
insecure one was distracting, so we disable color animations in the
location bar.
Diffstat (limited to 'packages/renderer/src/components/sidebar/ToggleLocationBarButton.tsx')
-rw-r--r-- | packages/renderer/src/components/sidebar/ToggleLocationBarButton.tsx | 31 |
1 files changed, 22 insertions, 9 deletions
diff --git a/packages/renderer/src/components/sidebar/ToggleLocationBarButton.tsx b/packages/renderer/src/components/sidebar/ToggleLocationBarButton.tsx index 7e20598..60033b0 100644 --- a/packages/renderer/src/components/sidebar/ToggleLocationBarButton.tsx +++ b/packages/renderer/src/components/sidebar/ToggleLocationBarButton.tsx | |||
@@ -20,12 +20,29 @@ | |||
20 | 20 | ||
21 | import IconChevronLeft from '@mui/icons-material/KeyboardDoubleArrowLeft'; | 21 | import IconChevronLeft from '@mui/icons-material/KeyboardDoubleArrowLeft'; |
22 | import IconChevronRight from '@mui/icons-material/KeyboardDoubleArrowRight'; | 22 | import IconChevronRight from '@mui/icons-material/KeyboardDoubleArrowRight'; |
23 | import { useTheme } from '@mui/material'; | ||
23 | import CircularProgress from '@mui/material/CircularProgress'; | 24 | import CircularProgress from '@mui/material/CircularProgress'; |
24 | import IconButton from '@mui/material/IconButton'; | 25 | import IconButton from '@mui/material/IconButton'; |
25 | import { observer } from 'mobx-react-lite'; | 26 | import { observer } from 'mobx-react-lite'; |
26 | import React from 'react'; | 27 | import React from 'react'; |
27 | 28 | ||
28 | import { useStore } from '../StoreProvider'; | 29 | import { useStore } from '../StoreProvider'; |
30 | import { LOCATION_BAR_ID } from '../locationBar/LocationBar'; | ||
31 | |||
32 | function ToggleLocationBarIcon({ | ||
33 | loading, | ||
34 | show, | ||
35 | }: { | ||
36 | loading: boolean; | ||
37 | show: boolean; | ||
38 | }): JSX.Element { | ||
39 | const { direction } = useTheme(); | ||
40 | if (loading) { | ||
41 | return <CircularProgress color="inherit" size="1.5rem" />; | ||
42 | } | ||
43 | const left = direction === 'ltr' ? show : !show; | ||
44 | return left ? <IconChevronLeft /> : <IconChevronRight />; | ||
45 | } | ||
29 | 46 | ||
30 | function ToggleLocationBarButton(): JSX.Element { | 47 | function ToggleLocationBarButton(): JSX.Element { |
31 | const store = useStore(); | 48 | const store = useStore(); |
@@ -33,21 +50,17 @@ function ToggleLocationBarButton(): JSX.Element { | |||
33 | settings: { selectedService, showLocationBar }, | 50 | settings: { selectedService, showLocationBar }, |
34 | } = store; | 51 | } = store; |
35 | 52 | ||
36 | let icon: JSX.Element; | ||
37 | if (selectedService?.state === 'loading') { | ||
38 | icon = <CircularProgress color="inherit" size="1.5rem" />; | ||
39 | } else { | ||
40 | icon = showLocationBar ? <IconChevronLeft /> : <IconChevronRight />; | ||
41 | } | ||
42 | |||
43 | return ( | 53 | return ( |
44 | <IconButton | 54 | <IconButton |
45 | aria-pressed={showLocationBar} | 55 | aria-pressed={showLocationBar} |
46 | aria-controls="locationBar" | 56 | aria-controls={LOCATION_BAR_ID} |
47 | aria-label="Show location bar" | 57 | aria-label="Show location bar" |
48 | onClick={() => store.toggleLocationBar()} | 58 | onClick={() => store.toggleLocationBar()} |
49 | > | 59 | > |
50 | {icon} | 60 | <ToggleLocationBarIcon |
61 | loading={selectedService?.state === 'loading'} | ||
62 | show={showLocationBar} | ||
63 | /> | ||
51 | </IconButton> | 64 | </IconButton> |
52 | ); | 65 | ); |
53 | } | 66 | } |