summaryrefslogtreecommitdiffhomepage
path: root/gui/src
diff options
context:
space:
mode:
Diffstat (limited to 'gui/src')
-rw-r--r--gui/src/renderer/app.tsx4
-rw-r--r--gui/src/renderer/components/AdvancedSettings.tsx4
-rw-r--r--gui/src/renderer/components/SplitTunnelingSettings.tsx96
-rw-r--r--gui/src/renderer/components/SplitTunnelingSettingsStyles.tsx13
4 files changed, 55 insertions, 62 deletions
diff --git a/gui/src/renderer/app.tsx b/gui/src/renderer/app.tsx
index 43f105ce2d..28f73ac9e0 100644
--- a/gui/src/renderer/app.tsx
+++ b/gui/src/renderer/app.tsx
@@ -466,9 +466,9 @@ export default class AppRenderer {
return IpcRendererEventChannel.linuxSplitTunneling.launchApplication(application);
}
- public setSplitTunnelingState(enabled: boolean): Promise<void> {
+ public setSplitTunnelingState = (enabled: boolean): Promise<void> => {
return IpcRendererEventChannel.windowsSplitTunneling.setState(enabled);
- }
+ };
public addSplitTunnelingApplication(application: IApplication | string): Promise<void> {
return IpcRendererEventChannel.windowsSplitTunneling.addApplication(application);
diff --git a/gui/src/renderer/components/AdvancedSettings.tsx b/gui/src/renderer/components/AdvancedSettings.tsx
index 998996e1ab..8ecf6c0052 100644
--- a/gui/src/renderer/components/AdvancedSettings.tsx
+++ b/gui/src/renderer/components/AdvancedSettings.tsx
@@ -131,9 +131,7 @@ export default class AdvancedSettings extends React.Component<IProps, IState> {
{(window.env.platform === 'linux' || window.env.platform === 'win32') && (
<Cell.CellButtonGroup>
<Cell.CellButton onClick={this.props.onViewSplitTunneling}>
- <Cell.Label>
- {messages.pgettext('advanced-settings-view', 'Split tunneling')}
- </Cell.Label>
+ <Cell.Label>Split tunneling</Cell.Label>
<Cell.Icon height={12} width={7} source="icon-chevron" />
</Cell.CellButton>
</Cell.CellButtonGroup>
diff --git a/gui/src/renderer/components/SplitTunnelingSettings.tsx b/gui/src/renderer/components/SplitTunnelingSettings.tsx
index 017e226b1a..b6f2e3bd89 100644
--- a/gui/src/renderer/components/SplitTunnelingSettings.tsx
+++ b/gui/src/renderer/components/SplitTunnelingSettings.tsx
@@ -36,13 +36,15 @@ import {
StyledNoResultText,
StyledSearchContainer,
StyledNoResult,
- StyledDisabledWarning,
StyledActionIcon,
StyledCellWarningIcon,
StyledListContainer,
+ StyledHeaderTitleContainer,
+ StyledHeaderTitle,
} from './SplitTunnelingSettingsStyles';
import { formatMarkdown } from '../markdown-formatter';
import { BackAction } from './KeyboardNavigation';
+import Switch from './Switch';
export default function SplitTunneling() {
const { pop } = useHistory();
@@ -60,12 +62,7 @@ export default function SplitTunneling() {
<NavigationContainer>
<NavigationBar>
<NavigationItems>
- <TitleBarItem>
- {
- // TRANSLATORS: Title label in navigation bar
- messages.pgettext('split-tunneling-nav', 'Split tunneling')
- }
- </TitleBarItem>
+ <TitleBarItem>Split tunneling</TitleBarItem>
</NavigationItems>
</NavigationBar>
@@ -159,7 +156,7 @@ function LinuxSplitTunnelingSettings(props: IPlatformSplitTunnelingSettingsProps
return (
<>
<SettingsHeader>
- <HeaderTitle>{messages.pgettext('split-tunneling-view', 'Split tunneling')}</HeaderTitle>
+ <HeaderTitle>Split tunneling</HeaderTitle>
<HeaderSubTitle>
{messages.pgettext(
'split-tunneling-view',
@@ -370,14 +367,18 @@ export function WindowsSplitTunnelingSettings(props: IPlatformSplitTunnelingSett
await filePickerCallback();
}, [filePickerCallback, props.scrollToTop]);
- const showSplitSection = filteredSplitApplications.length > 0;
+ const showSplitSection = splitTunnelingEnabled && filteredSplitApplications.length > 0;
const showNonSplitSection =
- !filteredNonSplitApplications || filteredNonSplitApplications.length > 0;
+ splitTunnelingEnabled &&
+ (!filteredNonSplitApplications || filteredNonSplitApplications.length > 0);
return (
<>
<SettingsHeader>
- <HeaderTitle>{messages.pgettext('split-tunneling-view', 'Split tunneling')}</HeaderTitle>
+ <StyledHeaderTitleContainer>
+ <StyledHeaderTitle>Split tunneling</StyledHeaderTitle>
+ <Switch isOn={splitTunnelingEnabled} onChange={setSplitTunnelingState} />
+ </StyledHeaderTitleContainer>
<HeaderSubTitle>
{messages.pgettext(
'split-tunneling-view',
@@ -386,48 +387,35 @@ export function WindowsSplitTunnelingSettings(props: IPlatformSplitTunnelingSett
</HeaderSubTitle>
</SettingsHeader>
- {!splitTunnelingEnabled && filteredSplitApplications?.length > 0 && (
- <StyledDisabledWarning>
- {messages.pgettext(
- 'split-tunneling-view',
- 'Split tunneling has been disabled from the CLI and will automatically be enabled when adding or removing applications from the lists below.',
- )}
- </StyledDisabledWarning>
- )}
-
- <SearchBar searchTerm={searchTerm} onSearch={setSearchTerm} />
+ {splitTunnelingEnabled && <SearchBar searchTerm={searchTerm} onSearch={setSearchTerm} />}
- {(showSplitSection || showNonSplitSection) && (
- <>
- <Accordion expanded={showSplitSection}>
- <Cell.Section>
- <Cell.SectionTitle>
- {messages.pgettext('split-tunneling-view', 'Excluded apps')}
- </Cell.SectionTitle>
- <ApplicationList
- applications={filteredSplitApplications}
- onRemove={removeApplication}
- rowComponent={ApplicationRow}
- />
- </Cell.Section>
- </Accordion>
+ <Accordion expanded={showSplitSection}>
+ <Cell.Section>
+ <Cell.SectionTitle>
+ {messages.pgettext('split-tunneling-view', 'Excluded apps')}
+ </Cell.SectionTitle>
+ <ApplicationList
+ applications={filteredSplitApplications}
+ onRemove={removeApplication}
+ rowComponent={ApplicationRow}
+ />
+ </Cell.Section>
+ </Accordion>
- <Accordion expanded={showNonSplitSection}>
- <Cell.Section>
- <Cell.SectionTitle>
- {messages.pgettext('split-tunneling-view', 'All apps')}
- </Cell.SectionTitle>
- <ApplicationList
- applications={filteredNonSplitApplications}
- onSelect={addApplication}
- rowComponent={ApplicationRow}
- />
- </Cell.Section>
- </Accordion>
- </>
- )}
+ <Accordion expanded={showNonSplitSection}>
+ <Cell.Section>
+ <Cell.SectionTitle>
+ {messages.pgettext('split-tunneling-view', 'All apps')}
+ </Cell.SectionTitle>
+ <ApplicationList
+ applications={filteredNonSplitApplications}
+ onSelect={addApplication}
+ rowComponent={ApplicationRow}
+ />
+ </Cell.Section>
+ </Accordion>
- {searchTerm !== '' && !showSplitSection && !showNonSplitSection && (
+ {splitTunnelingEnabled && searchTerm !== '' && !showSplitSection && !showNonSplitSection && (
<StyledNoResult>
<StyledNoResultText>
{formatMarkdown(
@@ -443,9 +431,11 @@ export function WindowsSplitTunnelingSettings(props: IPlatformSplitTunnelingSett
</StyledNoResult>
)}
- <StyledBrowseButton onClick={addWithFilePicker}>
- {messages.pgettext('split-tunneling-view', 'Find another app')}
- </StyledBrowseButton>
+ {splitTunnelingEnabled && (
+ <StyledBrowseButton onClick={addWithFilePicker}>
+ {messages.pgettext('split-tunneling-view', 'Find another app')}
+ </StyledBrowseButton>
+ )}
</>
);
}
diff --git a/gui/src/renderer/components/SplitTunnelingSettingsStyles.tsx b/gui/src/renderer/components/SplitTunnelingSettingsStyles.tsx
index b907171d8d..054415db2a 100644
--- a/gui/src/renderer/components/SplitTunnelingSettingsStyles.tsx
+++ b/gui/src/renderer/components/SplitTunnelingSettingsStyles.tsx
@@ -2,10 +2,11 @@ import styled from 'styled-components';
import { colors } from '../../config.json';
import * as AppButton from './AppButton';
import * as Cell from './cell';
-import { normalText, smallText } from './common-styles';
+import { normalText } from './common-styles';
import ImageView from './ImageView';
import { Container } from './Layout';
import { NavigationScrollbars } from './NavigationBar';
+import { HeaderTitle } from './SettingsHeader';
export const StyledPageCover = styled.div({}, (props: { show: boolean }) => ({
position: 'absolute',
@@ -159,7 +160,11 @@ export const StyledNoResultText = styled(Cell.FooterText)({
textAlign: 'center',
});
-export const StyledDisabledWarning = styled.span(smallText, {
- margin: '0 22px 18px',
- color: colors.red,
+export const StyledHeaderTitleContainer = styled.div({
+ display: 'flex',
+ alignItems: 'center',
+});
+
+export const StyledHeaderTitle = styled(HeaderTitle)({
+ flex: 1,
});