diff options
author | Kristóf Marussy <kristof@marussy.com> | 2022-02-16 01:09:27 +0100 |
---|---|---|
committer | Kristóf Marussy <kristof@marussy.com> | 2022-02-24 00:53:06 +0100 |
commit | 39231032ef9abfc3a90af7bf0460037aa220ce11 (patch) | |
tree | 0159913431d04689c5a988eb4d69e001486d9bac /packages/renderer/src | |
parent | chore(deps): Bump dependencies (diff) | |
download | sophie-39231032ef9abfc3a90af7bf0460037aa220ce11.tar.gz sophie-39231032ef9abfc3a90af7bf0460037aa220ce11.tar.zst sophie-39231032ef9abfc3a90af7bf0460037aa220ce11.zip |
feat: Basic location bar
Still needs adding event handlers to actually navigate the browser.
Signed-off-by: Kristóf Marussy <kristof@marussy.com>
Diffstat (limited to 'packages/renderer/src')
-rw-r--r-- | packages/renderer/src/components/App.tsx | 16 | ||||
-rw-r--r-- | packages/renderer/src/components/locationBar/LocationBar.tsx | 54 | ||||
-rw-r--r-- | packages/renderer/src/components/locationBar/LocationTextField.tsx | 59 | ||||
-rw-r--r-- | packages/renderer/src/components/locationBar/NavigationButtons.tsx | 75 | ||||
-rw-r--r-- | packages/renderer/src/components/sidebar/ServiceIcon.tsx (renamed from packages/renderer/src/components/ServiceIcon.tsx) | 0 | ||||
-rw-r--r-- | packages/renderer/src/components/sidebar/ServiceSwitcher.tsx (renamed from packages/renderer/src/components/ServiceSwitcher.tsx) | 3 | ||||
-rw-r--r-- | packages/renderer/src/components/sidebar/Sidebar.tsx (renamed from packages/renderer/src/components/Sidebar.tsx) | 14 | ||||
-rw-r--r-- | packages/renderer/src/components/sidebar/ToggleDarkModeButton.tsx (renamed from packages/renderer/src/components/ToggleDarkModeButton.tsx) | 2 | ||||
-rw-r--r-- | packages/renderer/src/components/sidebar/ToggleLocationBarButton.tsx | 55 | ||||
-rw-r--r-- | packages/renderer/src/stores/RendererStore.ts | 9 |
10 files changed, 280 insertions, 7 deletions
diff --git a/packages/renderer/src/components/App.tsx b/packages/renderer/src/components/App.tsx index 1174bbb..cf97074 100644 --- a/packages/renderer/src/components/App.tsx +++ b/packages/renderer/src/components/App.tsx | |||
@@ -22,7 +22,8 @@ import Box from '@mui/material/Box'; | |||
22 | import React from 'react'; | 22 | import React from 'react'; |
23 | 23 | ||
24 | import BrowserViewPlaceholder from './BrowserViewPlaceholder'; | 24 | import BrowserViewPlaceholder from './BrowserViewPlaceholder'; |
25 | import Sidebar from './Sidebar'; | 25 | import LocationBar from './locationBar/LocationBar'; |
26 | import Sidebar from './sidebar/Sidebar'; | ||
26 | 27 | ||
27 | export default function App(): JSX.Element { | 28 | export default function App(): JSX.Element { |
28 | return ( | 29 | return ( |
@@ -36,7 +37,18 @@ export default function App(): JSX.Element { | |||
36 | }} | 37 | }} |
37 | > | 38 | > |
38 | <Sidebar /> | 39 | <Sidebar /> |
39 | <BrowserViewPlaceholder /> | 40 | <Box |
41 | sx={{ | ||
42 | flex: 1, | ||
43 | display: 'flex', | ||
44 | flexDirection: 'column', | ||
45 | alignItems: 'stretch', | ||
46 | height: '100%', | ||
47 | }} | ||
48 | > | ||
49 | <LocationBar /> | ||
50 | <BrowserViewPlaceholder /> | ||
51 | </Box> | ||
40 | </Box> | 52 | </Box> |
41 | ); | 53 | ); |
42 | } | 54 | } |
diff --git a/packages/renderer/src/components/locationBar/LocationBar.tsx b/packages/renderer/src/components/locationBar/LocationBar.tsx new file mode 100644 index 0000000..e1f470d --- /dev/null +++ b/packages/renderer/src/components/locationBar/LocationBar.tsx | |||
@@ -0,0 +1,54 @@ | |||
1 | /* | ||
2 | * Copyright (C) 2022 Kristóf Marussy <kristof@marussy.com> | ||
3 | * | ||
4 | * This file is part of Sophie. | ||
5 | * | ||
6 | * Sophie is free software: you can redistribute it and/or modify | ||
7 | * it under the terms of the GNU Affero General Public License as | ||
8 | * published by the Free Software Foundation, version 3. | ||
9 | * | ||
10 | * This program is distributed in the hope that it will be useful, | ||
11 | * but WITHOUT ANY WARRANTY; without even the implied warranty of | ||
12 | * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the | ||
13 | * GNU Affero General Public License for more details. | ||
14 | * | ||
15 | * You should have received a copy of the GNU Affero General Public License | ||
16 | * along with this program. If not, see <https://www.gnu.org/licenses/>. | ||
17 | * | ||
18 | * SPDX-License-Identifier: AGPL-3.0-only | ||
19 | */ | ||
20 | |||
21 | import { styled } from '@mui/material/styles'; | ||
22 | import { observer } from 'mobx-react-lite'; | ||
23 | import React from 'react'; | ||
24 | |||
25 | import { useStore } from '../StoreProvider'; | ||
26 | |||
27 | import LocationTextField from './LocationTextField'; | ||
28 | import NavigationButtons from './NavigationButtons'; | ||
29 | |||
30 | const LocationBarRoot = styled('header', { | ||
31 | name: 'LocationBar', | ||
32 | slot: 'Root', | ||
33 | })(({ theme, hidden }) => ({ | ||
34 | display: hidden ? 'none' : 'flex', | ||
35 | flexDirection: 'row', | ||
36 | padding: theme.spacing(1), | ||
37 | gap: theme.spacing(1), | ||
38 | borderBottom: `1px solid ${theme.palette.divider}`, | ||
39 | })); | ||
40 | |||
41 | function LocationBar(): JSX.Element { | ||
42 | const { | ||
43 | settings: { selectedService, showLocationBar }, | ||
44 | } = useStore(); | ||
45 | |||
46 | return ( | ||
47 | <LocationBarRoot id="locationBar" hidden={!showLocationBar}> | ||
48 | <NavigationButtons service={selectedService} /> | ||
49 | <LocationTextField service={selectedService} /> | ||
50 | </LocationBarRoot> | ||
51 | ); | ||
52 | } | ||
53 | |||
54 | export default observer(LocationBar); | ||
diff --git a/packages/renderer/src/components/locationBar/LocationTextField.tsx b/packages/renderer/src/components/locationBar/LocationTextField.tsx new file mode 100644 index 0000000..a618bf6 --- /dev/null +++ b/packages/renderer/src/components/locationBar/LocationTextField.tsx | |||
@@ -0,0 +1,59 @@ | |||
1 | /* | ||
2 | * Copyright (C) 2022 Kristóf Marussy <kristof@marussy.com> | ||
3 | * | ||
4 | * This file is part of Sophie. | ||
5 | * | ||
6 | * Sophie is free software: you can redistribute it and/or modify | ||
7 | * it under the terms of the GNU Affero General Public License as | ||
8 | * published by the Free Software Foundation, version 3. | ||
9 | * | ||
10 | * This program is distributed in the hope that it will be useful, | ||
11 | * but WITHOUT ANY WARRANTY; without even the implied warranty of | ||
12 | * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the | ||
13 | * GNU Affero General Public License for more details. | ||
14 | * | ||
15 | * You should have received a copy of the GNU Affero General Public License | ||
16 | * along with this program. If not, see <https://www.gnu.org/licenses/>. | ||
17 | * | ||
18 | * SPDX-License-Identifier: AGPL-3.0-only | ||
19 | */ | ||
20 | |||
21 | import IconGlobe from '@mui/icons-material/Public'; | ||
22 | import FilledInput from '@mui/material/FilledInput'; | ||
23 | import InputAdornment from '@mui/material/InputAdornment'; | ||
24 | import { Service } from '@sophie/shared'; | ||
25 | import { observer } from 'mobx-react-lite'; | ||
26 | import React from 'react'; | ||
27 | |||
28 | function LocationTextField({ | ||
29 | service, | ||
30 | }: { | ||
31 | service: Service | undefined; | ||
32 | }): JSX.Element { | ||
33 | return ( | ||
34 | <FilledInput | ||
35 | aria-label="Location" | ||
36 | inputProps={{ | ||
37 | spellCheck: false, | ||
38 | }} | ||
39 | size="small" | ||
40 | fullWidth | ||
41 | hiddenLabel | ||
42 | disableUnderline | ||
43 | sx={(theme) => ({ | ||
44 | borderRadius: 1, | ||
45 | '&.Mui-focused': { | ||
46 | outline: `2px solid ${theme.palette.primary.main}`, | ||
47 | }, | ||
48 | })} | ||
49 | startAdornment={ | ||
50 | <InputAdornment position="start"> | ||
51 | <IconGlobe fontSize="small" /> | ||
52 | </InputAdornment> | ||
53 | } | ||
54 | value={service?.currentUrl ?? ''} | ||
55 | /> | ||
56 | ); | ||
57 | } | ||
58 | |||
59 | export default observer(LocationTextField); | ||
diff --git a/packages/renderer/src/components/locationBar/NavigationButtons.tsx b/packages/renderer/src/components/locationBar/NavigationButtons.tsx new file mode 100644 index 0000000..82ed657 --- /dev/null +++ b/packages/renderer/src/components/locationBar/NavigationButtons.tsx | |||
@@ -0,0 +1,75 @@ | |||
1 | /* | ||
2 | * Copyright (C) 2022 Kristóf Marussy <kristof@marussy.com> | ||
3 | * | ||
4 | * This file is part of Sophie. | ||
5 | * | ||
6 | * Sophie is free software: you can redistribute it and/or modify | ||
7 | * it under the terms of the GNU Affero General Public License as | ||
8 | * published by the Free Software Foundation, version 3. | ||
9 | * | ||
10 | * This program is distributed in the hope that it will be useful, | ||
11 | * but WITHOUT ANY WARRANTY; without even the implied warranty of | ||
12 | * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the | ||
13 | * GNU Affero General Public License for more details. | ||
14 | * | ||
15 | * You should have received a copy of the GNU Affero General Public License | ||
16 | * along with this program. If not, see <https://www.gnu.org/licenses/>. | ||
17 | * | ||
18 | * SPDX-License-Identifier: AGPL-3.0-only | ||
19 | */ | ||
20 | |||
21 | import IconArrowBack from '@mui/icons-material/ArrowBack'; | ||
22 | import IconArrowForward from '@mui/icons-material/ArrowForward'; | ||
23 | import IconStop from '@mui/icons-material/Close'; | ||
24 | import IconHome from '@mui/icons-material/HomeOutlined'; | ||
25 | import IconRefresh from '@mui/icons-material/Refresh'; | ||
26 | import Box from '@mui/material/Box'; | ||
27 | import IconButton from '@mui/material/IconButton'; | ||
28 | import { Service } from '@sophie/shared'; | ||
29 | import { observer } from 'mobx-react-lite'; | ||
30 | import React from 'react'; | ||
31 | |||
32 | function NavigationButtons({ | ||
33 | service, | ||
34 | }: { | ||
35 | service: Service | undefined; | ||
36 | }): JSX.Element { | ||
37 | return ( | ||
38 | <Box | ||
39 | sx={{ | ||
40 | display: 'flex', | ||
41 | flexDirection: 'row', | ||
42 | }} | ||
43 | > | ||
44 | <IconButton | ||
45 | aria-label="Go back" | ||
46 | disabled={service === undefined || !service.canGoBack} | ||
47 | > | ||
48 | <IconArrowBack /> | ||
49 | </IconButton> | ||
50 | <IconButton | ||
51 | aria-label="Go forward" | ||
52 | disabled={service === undefined || !service.canGoForward} | ||
53 | > | ||
54 | <IconArrowForward /> | ||
55 | </IconButton> | ||
56 | {service?.state === 'loading' ? ( | ||
57 | <IconButton aria-label="Stop"> | ||
58 | <IconStop /> | ||
59 | </IconButton> | ||
60 | ) : ( | ||
61 | <IconButton aria-label="Refresh" disabled={service === undefined}> | ||
62 | <IconRefresh /> | ||
63 | </IconButton> | ||
64 | )} | ||
65 | <IconButton | ||
66 | aria-label="Go to service homepage" | ||
67 | disabled={service === undefined} | ||
68 | > | ||
69 | <IconHome /> | ||
70 | </IconButton> | ||
71 | </Box> | ||
72 | ); | ||
73 | } | ||
74 | |||
75 | export default observer(NavigationButtons); | ||
diff --git a/packages/renderer/src/components/ServiceIcon.tsx b/packages/renderer/src/components/sidebar/ServiceIcon.tsx index 83b2a5f..83b2a5f 100644 --- a/packages/renderer/src/components/ServiceIcon.tsx +++ b/packages/renderer/src/components/sidebar/ServiceIcon.tsx | |||
diff --git a/packages/renderer/src/components/ServiceSwitcher.tsx b/packages/renderer/src/components/sidebar/ServiceSwitcher.tsx index 2cf997e..3b47990 100644 --- a/packages/renderer/src/components/ServiceSwitcher.tsx +++ b/packages/renderer/src/components/sidebar/ServiceSwitcher.tsx | |||
@@ -24,8 +24,9 @@ import { alpha, styled } from '@mui/material/styles'; | |||
24 | import { observer } from 'mobx-react-lite'; | 24 | import { observer } from 'mobx-react-lite'; |
25 | import React from 'react'; | 25 | import React from 'react'; |
26 | 26 | ||
27 | import { useStore } from '../StoreProvider'; | ||
28 | |||
27 | import ServiceIcon from './ServiceIcon'; | 29 | import ServiceIcon from './ServiceIcon'; |
28 | import { useStore } from './StoreProvider'; | ||
29 | 30 | ||
30 | const ServiceSwitcherRoot = styled(Tabs, { | 31 | const ServiceSwitcherRoot = styled(Tabs, { |
31 | name: 'ServiceSwitcher', | 32 | name: 'ServiceSwitcher', |
diff --git a/packages/renderer/src/components/Sidebar.tsx b/packages/renderer/src/components/sidebar/Sidebar.tsx index 0eb8f93..80826ca 100644 --- a/packages/renderer/src/components/Sidebar.tsx +++ b/packages/renderer/src/components/sidebar/Sidebar.tsx | |||
@@ -24,6 +24,7 @@ import React from 'react'; | |||
24 | 24 | ||
25 | import ServiceSwitcher from './ServiceSwitcher'; | 25 | import ServiceSwitcher from './ServiceSwitcher'; |
26 | import ToggleDarkModeButton from './ToggleDarkModeButton'; | 26 | import ToggleDarkModeButton from './ToggleDarkModeButton'; |
27 | import ToggleLocationBarButton from './ToggleLocationBarButton'; | ||
27 | 28 | ||
28 | export default function Sidebar(): JSX.Element { | 29 | export default function Sidebar(): JSX.Element { |
29 | return ( | 30 | return ( |
@@ -34,15 +35,22 @@ export default function Sidebar(): JSX.Element { | |||
34 | display: 'flex', | 35 | display: 'flex', |
35 | flexDirection: 'column', | 36 | flexDirection: 'column', |
36 | alignItems: 'center', | 37 | alignItems: 'center', |
37 | justifyContent: 'space-between', | 38 | paddingY: 1, |
38 | paddingBottom: 1, | 39 | gap: 1, |
39 | backgroundClip: 'padding-box', | ||
40 | background: alpha(theme.palette.text.primary, 0.09), | 40 | background: alpha(theme.palette.text.primary, 0.09), |
41 | backgroundClip: 'padding-box', | ||
41 | borderInlineEnd: `1px solid ${theme.palette.divider}`, | 42 | borderInlineEnd: `1px solid ${theme.palette.divider}`, |
42 | minWidth: 69, | 43 | minWidth: 69, |
43 | })} | 44 | })} |
44 | > | 45 | > |
46 | <ToggleLocationBarButton /> | ||
45 | <ServiceSwitcher /> | 47 | <ServiceSwitcher /> |
48 | <Box | ||
49 | sx={{ | ||
50 | flex: 1, | ||
51 | WebkitAppRegion: 'drag', | ||
52 | }} | ||
53 | /> | ||
46 | <ToggleDarkModeButton /> | 54 | <ToggleDarkModeButton /> |
47 | </Box> | 55 | </Box> |
48 | ); | 56 | ); |
diff --git a/packages/renderer/src/components/ToggleDarkModeButton.tsx b/packages/renderer/src/components/sidebar/ToggleDarkModeButton.tsx index 695756a..164b066 100644 --- a/packages/renderer/src/components/ToggleDarkModeButton.tsx +++ b/packages/renderer/src/components/sidebar/ToggleDarkModeButton.tsx | |||
@@ -24,7 +24,7 @@ import IconButton from '@mui/material/IconButton'; | |||
24 | import { observer } from 'mobx-react-lite'; | 24 | import { observer } from 'mobx-react-lite'; |
25 | import React from 'react'; | 25 | import React from 'react'; |
26 | 26 | ||
27 | import { useStore } from './StoreProvider'; | 27 | import { useStore } from '../StoreProvider'; |
28 | 28 | ||
29 | export default observer(() => { | 29 | export default observer(() => { |
30 | const store = useStore(); | 30 | const store = useStore(); |
diff --git a/packages/renderer/src/components/sidebar/ToggleLocationBarButton.tsx b/packages/renderer/src/components/sidebar/ToggleLocationBarButton.tsx new file mode 100644 index 0000000..7e20598 --- /dev/null +++ b/packages/renderer/src/components/sidebar/ToggleLocationBarButton.tsx | |||
@@ -0,0 +1,55 @@ | |||
1 | /* | ||
2 | * Copyright (C) 2022 Kristóf Marussy <kristof@marussy.com> | ||
3 | * | ||
4 | * This file is part of Sophie. | ||
5 | * | ||
6 | * Sophie is free software: you can redistribute it and/or modify | ||
7 | * it under the terms of the GNU Affero General Public License as | ||
8 | * published by the Free Software Foundation, version 3. | ||
9 | * | ||
10 | * This program is distributed in the hope that it will be useful, | ||
11 | * but WITHOUT ANY WARRANTY; without even the implied warranty of | ||
12 | * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the | ||
13 | * GNU Affero General Public License for more details. | ||
14 | * | ||
15 | * You should have received a copy of the GNU Affero General Public License | ||
16 | * along with this program. If not, see <https://www.gnu.org/licenses/>. | ||
17 | * | ||
18 | * SPDX-License-Identifier: AGPL-3.0-only | ||
19 | */ | ||
20 | |||
21 | import IconChevronLeft from '@mui/icons-material/KeyboardDoubleArrowLeft'; | ||
22 | import IconChevronRight from '@mui/icons-material/KeyboardDoubleArrowRight'; | ||
23 | import CircularProgress from '@mui/material/CircularProgress'; | ||
24 | import IconButton from '@mui/material/IconButton'; | ||
25 | import { observer } from 'mobx-react-lite'; | ||
26 | import React from 'react'; | ||
27 | |||
28 | import { useStore } from '../StoreProvider'; | ||
29 | |||
30 | function ToggleLocationBarButton(): JSX.Element { | ||
31 | const store = useStore(); | ||
32 | const { | ||
33 | settings: { selectedService, showLocationBar }, | ||
34 | } = store; | ||
35 | |||
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 ( | ||
44 | <IconButton | ||
45 | aria-pressed={showLocationBar} | ||
46 | aria-controls="locationBar" | ||
47 | aria-label="Show location bar" | ||
48 | onClick={() => store.toggleLocationBar()} | ||
49 | > | ||
50 | {icon} | ||
51 | </IconButton> | ||
52 | ); | ||
53 | } | ||
54 | |||
55 | export default observer(ToggleLocationBarButton); | ||
diff --git a/packages/renderer/src/stores/RendererStore.ts b/packages/renderer/src/stores/RendererStore.ts index 4d85929..1acc605 100644 --- a/packages/renderer/src/stores/RendererStore.ts +++ b/packages/renderer/src/stores/RendererStore.ts | |||
@@ -72,6 +72,15 @@ const RendererStore = types | |||
72 | this.setThemeSource('dark'); | 72 | this.setThemeSource('dark'); |
73 | } | 73 | } |
74 | }, | 74 | }, |
75 | setShowLocationBar(showLocationBar: boolean): void { | ||
76 | getEnv(self).dispatchMainAction({ | ||
77 | action: 'set-show-location-bar', | ||
78 | showLocationBar, | ||
79 | }); | ||
80 | }, | ||
81 | toggleLocationBar(): void { | ||
82 | this.setShowLocationBar(!self.settings.showLocationBar); | ||
83 | }, | ||
75 | })); | 84 | })); |
76 | 85 | ||
77 | /* | 86 | /* |