purgatory/clash-verge
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: adjust setting typography

Browse Source
This commit is contained in:
GyDi 2022-01-17 02:42:52 +08:00
parent 5eddf4f1aa
commit 40977785c3
No known key found for this signature in database
GPG Key ID: 1C95E0D3467B3084
4 changed files with 86 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
src/components/setting/setting-system.tsx Normal file
View File

@ -0,0 +1,67 @@
import useSWR, { useSWRConfig } from "swr";
import { Box, ListItemText, Switch } from "@mui/material";
import { getVergeConfig, patchVergeConfig } from "../../services/cmds";
import { SettingList, SettingItem } from "./setting";
import { CmdType } from "../../services/types";
import GuardState from "./guard-state";
import SysproxyTooltip from "./sysproxy-tooltip";
interface Props {
onError?: (err: Error) => void;
}
const SettingSystem = ({ onError }: Props) => {
const { mutate } = useSWRConfig();
const { data: vergeConfig } = useSWR("getVergeConfig", getVergeConfig);
const {
enable_auto_launch: startup = false,
enable_system_proxy: proxy = false,
} = vergeConfig ?? {};
const onSwitchFormat = (_e: any, value: boolean) => value;
const onChangeData = (patch: Partial<CmdType.VergeConfig>) => {
mutate("getVergeConfig", { ...vergeConfig, ...patch }, false);
};
return (
<SettingList title="System Setting">
<SettingItem>
<ListItemText primary="Auto Launch" />
<GuardState
value={startup}
valueProps="checked"
onCatch={onError}
onFormat={onSwitchFormat}
onChange={(e) => onChangeData({ enable_auto_launch: e })}
onGuard={(e) => patchVergeConfig({ enable_auto_launch: e })}
>
<Switch edge="end" />
</GuardState>
</SettingItem>
<SettingItem>
<ListItemText
primary={
<Box sx={{ display: "flex", alignItems: "center" }}>
System Proxy
<SysproxyTooltip />
</Box>
}
/>
<GuardState
value={proxy}
valueProps="checked"
onCatch={onError}
onFormat={onSwitchFormat}
onChange={(e) => onChangeData({ enable_system_proxy: e })}
onGuard={(e) => patchVergeConfig({ enable_system_proxy: e })}
>
<Switch edge="end" />
</GuardState>
</SettingItem>
</SettingList>
);
};
export default SettingSystem;

48
src/components/setting/setting-verge.tsx
View File

@ -1,12 +1,11 @@
import useSWR, { useSWRConfig } from "swr";
import { Box, ListItemText, Switch, Typography } from "@mui/material";
import { ListItemText, Switch, Typography } from "@mui/material";
import { getVergeConfig, patchVergeConfig } from "../../services/cmds";
import { SettingList, SettingItem } from "./setting";
import { CmdType } from "../../services/types";
import { version } from "../../../package.json";
import GuardState from "./guard-state";
import PaletteSwitch from "./palette-switch";
import SysproxyTooltip from "./sysproxy-tooltip";
interface Props {
onError?: (err: Error) => void;
@ -16,12 +15,8 @@ const SettingVerge = ({ onError }: Props) => {
const { mutate } = useSWRConfig();
const { data: vergeConfig } = useSWR("getVergeConfig", getVergeConfig);
const {
theme_mode: mode = "light",
theme_blur: blur = false,
enable_auto_launch: startup = false,
enable_system_proxy: proxy = false,
} = vergeConfig ?? {};
const { theme_mode: mode = "light", theme_blur: blur = false } =
vergeConfig ?? {};
const onSwitchFormat = (_e: any, value: boolean) => value;
const onChangeData = (patch: Partial<CmdType.VergeConfig>) => {
@ -29,7 +24,7 @@ const SettingVerge = ({ onError }: Props) => {
};
return (
<SettingList title="Common Setting">
<SettingList title="Verge Setting">
<SettingItem>
<ListItemText primary="Theme Mode" />
<GuardState
@ -60,41 +55,6 @@ const SettingVerge = ({ onError }: Props) => {
</GuardState>
</SettingItem>
<SettingItem>
<ListItemText primary="Auto Launch" />
<GuardState
value={startup}
valueProps="checked"
onCatch={onError}
onFormat={onSwitchFormat}
onChange={(e) => onChangeData({ enable_auto_launch: e })}
onGuard={(e) => patchVergeConfig({ enable_auto_launch: e })}
>
<Switch edge="end" />
</GuardState>
</SettingItem>
<SettingItem>
<ListItemText
primary={
<Box sx={{ display: "flex", alignItems: "center" }}>
System Proxy
<SysproxyTooltip />
</Box>
}
/>
<GuardState
value={proxy}
valueProps="checked"
onCatch={onError}
onFormat={onSwitchFormat}
onChange={(e) => onChangeData({ enable_system_proxy: e })}
onGuard={(e) => patchVergeConfig({ enable_system_proxy: e })}
>
<Switch edge="end" />
</GuardState>
</SettingItem>
<SettingItem>
<ListItemText primary="Version" />
<Typography sx={{ py: "6px" }}>v{version}</Typography>

4
src/components/setting/setting.tsx
View File

@ -6,9 +6,7 @@ export const SettingItem = styled(ListItem)(() => ({
paddingBottom: 5,
}));
export const SettingList: React.FC<{
title: string;
}> = (props) => (
export const SettingList: React.FC<{ title: string }> = (props) => (
<List>
<ListSubheader sx={{ background: "transparent" }} disableSticky>
{props.title}

18
src/pages/settings.tsx
View File

@ -2,16 +2,26 @@ import { Paper } from "@mui/material";
import BasePage from "../components/base-page";
import SettingVerge from "../components/setting/setting-verge";
import SettingClash from "../components/setting/setting-clash";
import SettingSystem from "../components/setting/setting-system";
import Notice from "../components/notice";
const SettingPage = () => {
const onError = (error: any) => {
error && Notice.error(error.toString());
};
return (
<BasePage title="Settings">
<Paper sx={{ borderRadius: 1, boxShadow: 2 }}>
<SettingVerge />
<Paper sx={{ borderRadius: 1, boxShadow: 2, mb: 3 }}>
<SettingClash onError={onError} />
</Paper>
<Paper sx={{ borderRadius: 1, boxShadow: 2, mt: 3 }}>
<SettingClash />
<Paper sx={{ borderRadius: 1, boxShadow: 2, mb: 3 }}>
<SettingSystem onError={onError} />
</Paper>
<Paper sx={{ borderRadius: 1, boxShadow: 2 }}>
<SettingVerge onError={onError} />
</Paper>
</BasePage>
);