From 39231032ef9abfc3a90af7bf0460037aa220ce11 Mon Sep 17 00:00:00 2001 From: Kristóf Marussy Date: Wed, 16 Feb 2022 01:09:27 +0100 Subject: feat: Basic location bar MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Still needs adding event handlers to actually navigate the browser. Signed-off-by: Kristóf Marussy --- packages/renderer/src/components/App.tsx | 16 ++- packages/renderer/src/components/ServiceIcon.tsx | 119 --------------------- .../renderer/src/components/ServiceSwitcher.tsx | 91 ---------------- packages/renderer/src/components/Sidebar.tsx | 49 --------- .../src/components/ToggleDarkModeButton.tsx | 43 -------- .../src/components/locationBar/LocationBar.tsx | 54 ++++++++++ .../components/locationBar/LocationTextField.tsx | 59 ++++++++++ .../components/locationBar/NavigationButtons.tsx | 75 +++++++++++++ .../src/components/sidebar/ServiceIcon.tsx | 119 +++++++++++++++++++++ .../src/components/sidebar/ServiceSwitcher.tsx | 92 ++++++++++++++++ .../renderer/src/components/sidebar/Sidebar.tsx | 57 ++++++++++ .../components/sidebar/ToggleDarkModeButton.tsx | 43 ++++++++ .../components/sidebar/ToggleLocationBarButton.tsx | 55 ++++++++++ packages/renderer/src/stores/RendererStore.ts | 9 ++ 14 files changed, 577 insertions(+), 304 deletions(-) delete mode 100644 packages/renderer/src/components/ServiceIcon.tsx delete mode 100644 packages/renderer/src/components/ServiceSwitcher.tsx delete mode 100644 packages/renderer/src/components/Sidebar.tsx delete mode 100644 packages/renderer/src/components/ToggleDarkModeButton.tsx create mode 100644 packages/renderer/src/components/locationBar/LocationBar.tsx create mode 100644 packages/renderer/src/components/locationBar/LocationTextField.tsx create mode 100644 packages/renderer/src/components/locationBar/NavigationButtons.tsx create mode 100644 packages/renderer/src/components/sidebar/ServiceIcon.tsx create mode 100644 packages/renderer/src/components/sidebar/ServiceSwitcher.tsx create mode 100644 packages/renderer/src/components/sidebar/Sidebar.tsx create mode 100644 packages/renderer/src/components/sidebar/ToggleDarkModeButton.tsx create mode 100644 packages/renderer/src/components/sidebar/ToggleLocationBarButton.tsx (limited to 'packages/renderer/src') 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'; import React from 'react'; import BrowserViewPlaceholder from './BrowserViewPlaceholder'; -import Sidebar from './Sidebar'; +import LocationBar from './locationBar/LocationBar'; +import Sidebar from './sidebar/Sidebar'; export default function App(): JSX.Element { return ( @@ -36,7 +37,18 @@ export default function App(): JSX.Element { }} > - + + + + ); } diff --git a/packages/renderer/src/components/ServiceIcon.tsx b/packages/renderer/src/components/ServiceIcon.tsx deleted file mode 100644 index 83b2a5f..0000000 --- a/packages/renderer/src/components/ServiceIcon.tsx +++ /dev/null @@ -1,119 +0,0 @@ -/* - * Copyright (C) 2022 Kristóf Marussy - * - * This file is part of Sophie. - * - * Sophie is free software: you can redistribute it and/or modify - * it under the terms of the GNU Affero General Public License as - * published by the Free Software Foundation, version 3. - * - * This program is distributed in the hope that it will be useful, - * but WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - * GNU Affero General Public License for more details. - * - * You should have received a copy of the GNU Affero General Public License - * along with this program. If not, see . - * - * SPDX-License-Identifier: AGPL-3.0-only - */ - -import Badge from '@mui/material/Badge'; -import { styled, useTheme } from '@mui/material/styles'; -import { Service } from '@sophie/shared'; -import { observer } from 'mobx-react-lite'; -import React from 'react'; - -const ServiceIconRoot = styled('div', { - name: 'ServiceIcon', - slot: 'Root', -})(({ theme }) => ({ - width: 36, - height: 36, - borderRadius: theme.shape.borderRadius, - background: 'currentColor', - display: 'flex', - justifyContent: 'center', - alignItems: 'center', -})); - -const ServiceIconText = styled('div', { - name: 'ServiceIcon', - slot: 'Text', -})(({ theme }) => ({ - display: 'inline-block', - flex: 0, - fontSize: theme.typography.pxToRem(24), - color: theme.palette.primary.contrastText, -})); - -const IndirectMessageBadge = styled(Badge)(({ theme }) => ({ - '& .MuiBadge-dot': { - // The indirect message badge floats ouside the icon in the middle. - top: '50%', - ...(theme.direction === 'ltr' - ? { - left: theme.spacing(-1), - } - : { - right: theme.spacing(-1), - }), - background: - theme.palette.mode === 'dark' - ? theme.palette.text.primary - : 'currentColor', - }, -})); - -const DirectMessageBadge = styled(Badge)(({ theme }) => ({ - '& .MuiBadge-badge': { - // Move the badge closer to the icon so that even "99+" messages can fit in the sidebar. - ...(theme.direction === 'ltr' - ? { - right: theme.spacing(0.25), - } - : { - left: theme.spacing(0.25), - }), - top: theme.spacing(0.25), - // Set the badge apart from the icon with a shadow (a border would be too heavy). - boxShadow: theme.shadows[1], - // Add a bit more emphasis to the badge. - fontWeight: 700, - }, -})); - -function ServiceIcon({ service }: { service: Service }): JSX.Element { - const { direction } = useTheme(); - const { - settings: { name }, - directMessageCount, - indirectMessageCount, - } = service; - - return ( - - - - {name.length > 0 ? name[0] : '?'} - - - - ); -} - -export default observer(ServiceIcon); diff --git a/packages/renderer/src/components/ServiceSwitcher.tsx b/packages/renderer/src/components/ServiceSwitcher.tsx deleted file mode 100644 index 2cf997e..0000000 --- a/packages/renderer/src/components/ServiceSwitcher.tsx +++ /dev/null @@ -1,91 +0,0 @@ -/* - * Copyright (C) 2022 Kristóf Marussy - * - * This file is part of Sophie. - * - * Sophie is free software: you can redistribute it and/or modify - * it under the terms of the GNU Affero General Public License as - * published by the Free Software Foundation, version 3. - * - * This program is distributed in the hope that it will be useful, - * but WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - * GNU Affero General Public License for more details. - * - * You should have received a copy of the GNU Affero General Public License - * along with this program. If not, see . - * - * SPDX-License-Identifier: AGPL-3.0-only - */ - -import Tab from '@mui/material/Tab'; -import Tabs from '@mui/material/Tabs'; -import { alpha, styled } from '@mui/material/styles'; -import { observer } from 'mobx-react-lite'; -import React from 'react'; - -import ServiceIcon from './ServiceIcon'; -import { useStore } from './StoreProvider'; - -const ServiceSwitcherRoot = styled(Tabs, { - name: 'ServiceSwitcher', - slot: 'Root', -})(({ theme }) => ({ - '.MuiTabs-indicator': { - ...(theme.direction === 'ltr' - ? { - left: 0, - right: 'auto', - } - : { - left: 'auto', - right: 0, - }), - }, -})); - -const ServiceSwitcherTab = styled(Tab, { - name: 'ServiceSwitcher', - slot: 'Tab', -})(({ theme }) => ({ - minWidth: 0, - transition: theme.transitions.create('background-color', { - duration: theme.transitions.duration.shortest, - }), - '&.Mui-selected': { - backgroundColor: - theme.palette.mode === 'dark' - ? alpha(theme.palette.text.primary, 0.12) - : alpha(theme.palette.primary.light, 0.24), - }, -})); - -function ServiceSwitcher(): JSX.Element { - const store = useStore(); - const { - settings: { selectedService }, - services, - } = store; - - return ( - - store.setSelectedServiceId(newValue) - } - > - {services.map((service) => ( - } - aria-label={service.settings.name} - /> - ))} - - ); -} - -export default observer(ServiceSwitcher); diff --git a/packages/renderer/src/components/Sidebar.tsx b/packages/renderer/src/components/Sidebar.tsx deleted file mode 100644 index 0eb8f93..0000000 --- a/packages/renderer/src/components/Sidebar.tsx +++ /dev/null @@ -1,49 +0,0 @@ -/* - * Copyright (C) 2021-2022 Kristóf Marussy - * - * This file is part of Sophie. - * - * Sophie is free software: you can redistribute it and/or modify - * it under the terms of the GNU Affero General Public License as - * published by the Free Software Foundation, version 3. - * - * This program is distributed in the hope that it will be useful, - * but WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - * GNU Affero General Public License for more details. - * - * You should have received a copy of the GNU Affero General Public License - * along with this program. If not, see . - * - * SPDX-License-Identifier: AGPL-3.0-only - */ - -import Box from '@mui/material/Box'; -import { alpha } from '@mui/material/styles'; -import React from 'react'; - -import ServiceSwitcher from './ServiceSwitcher'; -import ToggleDarkModeButton from './ToggleDarkModeButton'; - -export default function Sidebar(): JSX.Element { - return ( - ({ - flex: 0, - display: 'flex', - flexDirection: 'column', - alignItems: 'center', - justifyContent: 'space-between', - paddingBottom: 1, - backgroundClip: 'padding-box', - background: alpha(theme.palette.text.primary, 0.09), - borderInlineEnd: `1px solid ${theme.palette.divider}`, - minWidth: 69, - })} - > - - - - ); -} diff --git a/packages/renderer/src/components/ToggleDarkModeButton.tsx b/packages/renderer/src/components/ToggleDarkModeButton.tsx deleted file mode 100644 index 695756a..0000000 --- a/packages/renderer/src/components/ToggleDarkModeButton.tsx +++ /dev/null @@ -1,43 +0,0 @@ -/* - * Copyright (C) 2021-2022 Kristóf Marussy - * - * This file is part of Sophie. - * - * Sophie is free software: you can redistribute it and/or modify - * it under the terms of the GNU Affero General Public License as - * published by the Free Software Foundation, version 3. - * - * This program is distributed in the hope that it will be useful, - * but WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - * GNU Affero General Public License for more details. - * - * You should have received a copy of the GNU Affero General Public License - * along with this program. If not, see . - * - * SPDX-License-Identifier: AGPL-3.0-only - */ - -import DarkModeIcon from '@mui/icons-material/DarkMode'; -import LightModeIcon from '@mui/icons-material/LightMode'; -import IconButton from '@mui/material/IconButton'; -import { observer } from 'mobx-react-lite'; -import React from 'react'; - -import { useStore } from './StoreProvider'; - -export default observer(() => { - const store = useStore(); - const { - shared: { shouldUseDarkColors }, - } = store; - - return ( - store.toggleDarkMode()} - > - {shouldUseDarkColors ? : } - - ); -}); 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 @@ +/* + * Copyright (C) 2022 Kristóf Marussy + * + * This file is part of Sophie. + * + * Sophie is free software: you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as + * published by the Free Software Foundation, version 3. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + * along with this program. If not, see . + * + * SPDX-License-Identifier: AGPL-3.0-only + */ + +import { styled } from '@mui/material/styles'; +import { observer } from 'mobx-react-lite'; +import React from 'react'; + +import { useStore } from '../StoreProvider'; + +import LocationTextField from './LocationTextField'; +import NavigationButtons from './NavigationButtons'; + +const LocationBarRoot = styled('header', { + name: 'LocationBar', + slot: 'Root', +})(({ theme, hidden }) => ({ + display: hidden ? 'none' : 'flex', + flexDirection: 'row', + padding: theme.spacing(1), + gap: theme.spacing(1), + borderBottom: `1px solid ${theme.palette.divider}`, +})); + +function LocationBar(): JSX.Element { + const { + settings: { selectedService, showLocationBar }, + } = useStore(); + + return ( + + ); +} + +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 @@ +/* + * Copyright (C) 2022 Kristóf Marussy + * + * This file is part of Sophie. + * + * Sophie is free software: you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as + * published by the Free Software Foundation, version 3. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + * along with this program. If not, see . + * + * SPDX-License-Identifier: AGPL-3.0-only + */ + +import IconGlobe from '@mui/icons-material/Public'; +import FilledInput from '@mui/material/FilledInput'; +import InputAdornment from '@mui/material/InputAdornment'; +import { Service } from '@sophie/shared'; +import { observer } from 'mobx-react-lite'; +import React from 'react'; + +function LocationTextField({ + service, +}: { + service: Service | undefined; +}): JSX.Element { + return ( + ({ + borderRadius: 1, + '&.Mui-focused': { + outline: `2px solid ${theme.palette.primary.main}`, + }, + })} + startAdornment={ + + + + } + value={service?.currentUrl ?? ''} + /> + ); +} + +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 @@ +/* + * Copyright (C) 2022 Kristóf Marussy + * + * This file is part of Sophie. + * + * Sophie is free software: you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as + * published by the Free Software Foundation, version 3. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + * along with this program. If not, see . + * + * SPDX-License-Identifier: AGPL-3.0-only + */ + +import IconArrowBack from '@mui/icons-material/ArrowBack'; +import IconArrowForward from '@mui/icons-material/ArrowForward'; +import IconStop from '@mui/icons-material/Close'; +import IconHome from '@mui/icons-material/HomeOutlined'; +import IconRefresh from '@mui/icons-material/Refresh'; +import Box from '@mui/material/Box'; +import IconButton from '@mui/material/IconButton'; +import { Service } from '@sophie/shared'; +import { observer } from 'mobx-react-lite'; +import React from 'react'; + +function NavigationButtons({ + service, +}: { + service: Service | undefined; +}): JSX.Element { + return ( + + + + + + + + {service?.state === 'loading' ? ( + + + + ) : ( + + + + )} + + + + + ); +} + +export default observer(NavigationButtons); diff --git a/packages/renderer/src/components/sidebar/ServiceIcon.tsx b/packages/renderer/src/components/sidebar/ServiceIcon.tsx new file mode 100644 index 0000000..83b2a5f --- /dev/null +++ b/packages/renderer/src/components/sidebar/ServiceIcon.tsx @@ -0,0 +1,119 @@ +/* + * Copyright (C) 2022 Kristóf Marussy + * + * This file is part of Sophie. + * + * Sophie is free software: you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as + * published by the Free Software Foundation, version 3. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + * along with this program. If not, see . + * + * SPDX-License-Identifier: AGPL-3.0-only + */ + +import Badge from '@mui/material/Badge'; +import { styled, useTheme } from '@mui/material/styles'; +import { Service } from '@sophie/shared'; +import { observer } from 'mobx-react-lite'; +import React from 'react'; + +const ServiceIconRoot = styled('div', { + name: 'ServiceIcon', + slot: 'Root', +})(({ theme }) => ({ + width: 36, + height: 36, + borderRadius: theme.shape.borderRadius, + background: 'currentColor', + display: 'flex', + justifyContent: 'center', + alignItems: 'center', +})); + +const ServiceIconText = styled('div', { + name: 'ServiceIcon', + slot: 'Text', +})(({ theme }) => ({ + display: 'inline-block', + flex: 0, + fontSize: theme.typography.pxToRem(24), + color: theme.palette.primary.contrastText, +})); + +const IndirectMessageBadge = styled(Badge)(({ theme }) => ({ + '& .MuiBadge-dot': { + // The indirect message badge floats ouside the icon in the middle. + top: '50%', + ...(theme.direction === 'ltr' + ? { + left: theme.spacing(-1), + } + : { + right: theme.spacing(-1), + }), + background: + theme.palette.mode === 'dark' + ? theme.palette.text.primary + : 'currentColor', + }, +})); + +const DirectMessageBadge = styled(Badge)(({ theme }) => ({ + '& .MuiBadge-badge': { + // Move the badge closer to the icon so that even "99+" messages can fit in the sidebar. + ...(theme.direction === 'ltr' + ? { + right: theme.spacing(0.25), + } + : { + left: theme.spacing(0.25), + }), + top: theme.spacing(0.25), + // Set the badge apart from the icon with a shadow (a border would be too heavy). + boxShadow: theme.shadows[1], + // Add a bit more emphasis to the badge. + fontWeight: 700, + }, +})); + +function ServiceIcon({ service }: { service: Service }): JSX.Element { + const { direction } = useTheme(); + const { + settings: { name }, + directMessageCount, + indirectMessageCount, + } = service; + + return ( + + + + {name.length > 0 ? name[0] : '?'} + + + + ); +} + +export default observer(ServiceIcon); diff --git a/packages/renderer/src/components/sidebar/ServiceSwitcher.tsx b/packages/renderer/src/components/sidebar/ServiceSwitcher.tsx new file mode 100644 index 0000000..3b47990 --- /dev/null +++ b/packages/renderer/src/components/sidebar/ServiceSwitcher.tsx @@ -0,0 +1,92 @@ +/* + * Copyright (C) 2022 Kristóf Marussy + * + * This file is part of Sophie. + * + * Sophie is free software: you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as + * published by the Free Software Foundation, version 3. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + * along with this program. If not, see . + * + * SPDX-License-Identifier: AGPL-3.0-only + */ + +import Tab from '@mui/material/Tab'; +import Tabs from '@mui/material/Tabs'; +import { alpha, styled } from '@mui/material/styles'; +import { observer } from 'mobx-react-lite'; +import React from 'react'; + +import { useStore } from '../StoreProvider'; + +import ServiceIcon from './ServiceIcon'; + +const ServiceSwitcherRoot = styled(Tabs, { + name: 'ServiceSwitcher', + slot: 'Root', +})(({ theme }) => ({ + '.MuiTabs-indicator': { + ...(theme.direction === 'ltr' + ? { + left: 0, + right: 'auto', + } + : { + left: 'auto', + right: 0, + }), + }, +})); + +const ServiceSwitcherTab = styled(Tab, { + name: 'ServiceSwitcher', + slot: 'Tab', +})(({ theme }) => ({ + minWidth: 0, + transition: theme.transitions.create('background-color', { + duration: theme.transitions.duration.shortest, + }), + '&.Mui-selected': { + backgroundColor: + theme.palette.mode === 'dark' + ? alpha(theme.palette.text.primary, 0.12) + : alpha(theme.palette.primary.light, 0.24), + }, +})); + +function ServiceSwitcher(): JSX.Element { + const store = useStore(); + const { + settings: { selectedService }, + services, + } = store; + + return ( + + store.setSelectedServiceId(newValue) + } + > + {services.map((service) => ( + } + aria-label={service.settings.name} + /> + ))} + + ); +} + +export default observer(ServiceSwitcher); diff --git a/packages/renderer/src/components/sidebar/Sidebar.tsx b/packages/renderer/src/components/sidebar/Sidebar.tsx new file mode 100644 index 0000000..80826ca --- /dev/null +++ b/packages/renderer/src/components/sidebar/Sidebar.tsx @@ -0,0 +1,57 @@ +/* + * Copyright (C) 2021-2022 Kristóf Marussy + * + * This file is part of Sophie. + * + * Sophie is free software: you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as + * published by the Free Software Foundation, version 3. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + * along with this program. If not, see . + * + * SPDX-License-Identifier: AGPL-3.0-only + */ + +import Box from '@mui/material/Box'; +import { alpha } from '@mui/material/styles'; +import React from 'react'; + +import ServiceSwitcher from './ServiceSwitcher'; +import ToggleDarkModeButton from './ToggleDarkModeButton'; +import ToggleLocationBarButton from './ToggleLocationBarButton'; + +export default function Sidebar(): JSX.Element { + return ( + ({ + flex: 0, + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + paddingY: 1, + gap: 1, + background: alpha(theme.palette.text.primary, 0.09), + backgroundClip: 'padding-box', + borderInlineEnd: `1px solid ${theme.palette.divider}`, + minWidth: 69, + })} + > + + + + + + ); +} diff --git a/packages/renderer/src/components/sidebar/ToggleDarkModeButton.tsx b/packages/renderer/src/components/sidebar/ToggleDarkModeButton.tsx new file mode 100644 index 0000000..164b066 --- /dev/null +++ b/packages/renderer/src/components/sidebar/ToggleDarkModeButton.tsx @@ -0,0 +1,43 @@ +/* + * Copyright (C) 2021-2022 Kristóf Marussy + * + * This file is part of Sophie. + * + * Sophie is free software: you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as + * published by the Free Software Foundation, version 3. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + * along with this program. If not, see . + * + * SPDX-License-Identifier: AGPL-3.0-only + */ + +import DarkModeIcon from '@mui/icons-material/DarkMode'; +import LightModeIcon from '@mui/icons-material/LightMode'; +import IconButton from '@mui/material/IconButton'; +import { observer } from 'mobx-react-lite'; +import React from 'react'; + +import { useStore } from '../StoreProvider'; + +export default observer(() => { + const store = useStore(); + const { + shared: { shouldUseDarkColors }, + } = store; + + return ( + store.toggleDarkMode()} + > + {shouldUseDarkColors ? : } + + ); +}); 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 @@ +/* + * Copyright (C) 2022 Kristóf Marussy + * + * This file is part of Sophie. + * + * Sophie is free software: you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as + * published by the Free Software Foundation, version 3. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + * along with this program. If not, see . + * + * SPDX-License-Identifier: AGPL-3.0-only + */ + +import IconChevronLeft from '@mui/icons-material/KeyboardDoubleArrowLeft'; +import IconChevronRight from '@mui/icons-material/KeyboardDoubleArrowRight'; +import CircularProgress from '@mui/material/CircularProgress'; +import IconButton from '@mui/material/IconButton'; +import { observer } from 'mobx-react-lite'; +import React from 'react'; + +import { useStore } from '../StoreProvider'; + +function ToggleLocationBarButton(): JSX.Element { + const store = useStore(); + const { + settings: { selectedService, showLocationBar }, + } = store; + + let icon: JSX.Element; + if (selectedService?.state === 'loading') { + icon = ; + } else { + icon = showLocationBar ? : ; + } + + return ( + store.toggleLocationBar()} + > + {icon} + + ); +} + +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 this.setThemeSource('dark'); } }, + setShowLocationBar(showLocationBar: boolean): void { + getEnv(self).dispatchMainAction({ + action: 'set-show-location-bar', + showLocationBar, + }); + }, + toggleLocationBar(): void { + this.setShowLocationBar(!self.settings.showLocationBar); + }, })); /* -- cgit v1.2.3-70-g09d2