feat(settings): new settings design (#261)
megumin
2 years ago
committed by
GitHub
parent
a85ec594a7
commit
6b55dee9fb
@ -1,140 +0,0 @@
|
||||
/*
|
||||
* Vencord, a modification for Discord's desktop app
|
||||
* Copyright (c) 2022 Vendicated and contributors
|
||||
*
|
||||
* This program is free software: you can redistribute it and/or modify
|
||||
* it under the terms of the GNU General Public License as published by
|
||||
* the Free Software Foundation, either version 3 of the License, or
|
||||
* (at your option) any later version.
|
||||
*
|
||||
* 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 General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU General Public License
|
||||
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
import { useSettings } from "../api/settings";
|
||||
import IpcEvents from "../utils/IpcEvents";
|
||||
import { useAwaiter } from "../utils/misc";
|
||||
import { downloadSettingsBackup, uploadSettingsBackup } from "../utils/settingsSync";
|
||||
import { Button, Card, Forms, Margins, React, Switch } from "../webpack/common";
|
||||
import DonateButton from "./DonateButton";
|
||||
import ErrorBoundary from "./ErrorBoundary";
|
||||
import { Flex } from "./Flex";
|
||||
import { handleComponentFailed } from "./handleComponentFailed";
|
||||
|
||||
export default ErrorBoundary.wrap(function Settings() {
|
||||
const [settingsDir, , settingsDirPending] = useAwaiter(() => VencordNative.ipc.invoke<string>(IpcEvents.GET_SETTINGS_DIR), "Loading...");
|
||||
const settings = useSettings();
|
||||
|
||||
return (
|
||||
<Forms.FormSection tag="h1" title="Vencord">
|
||||
<Card style={{
|
||||
padding: "1em",
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
marginBottom: "1em"
|
||||
}}>
|
||||
<div>
|
||||
<Forms.FormTitle tag="h5">Support the Project</Forms.FormTitle>
|
||||
<Forms.FormText>
|
||||
Please consider supporting the Development of Vencord by donating!
|
||||
</Forms.FormText>
|
||||
<DonateButton style={{ transform: "translateX(-1em)" }} />
|
||||
</div>
|
||||
<img
|
||||
role="presentation"
|
||||
src="https://cdn.discordapp.com/emojis/1026533090627174460.png"
|
||||
alt=""
|
||||
style={{ marginLeft: "auto", transform: "rotate(10deg)" }}
|
||||
/>
|
||||
</Card>
|
||||
|
||||
<Forms.FormTitle tag="h5">
|
||||
Settings
|
||||
</Forms.FormTitle>
|
||||
|
||||
<Forms.FormText className={Margins.marginBottom8}>
|
||||
Settings Directory: <code style={{ userSelect: "text", cursor: "text" }}>{settingsDir}</code>
|
||||
</Forms.FormText>
|
||||
|
||||
{!IS_WEB && <Flex className={Margins.marginBottom20}>
|
||||
<Button
|
||||
onClick={() => window.DiscordNative.app.relaunch()}
|
||||
size={Button.Sizes.SMALL}
|
||||
color={Button.Colors.GREEN}
|
||||
>
|
||||
Reload
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => window.DiscordNative.fileManager.showItemInFolder(settingsDir)}
|
||||
size={Button.Sizes.SMALL}
|
||||
disabled={settingsDirPending}
|
||||
>
|
||||
Launch Directory
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => VencordNative.ipc.invoke(IpcEvents.OPEN_MONACO_EDITOR)}
|
||||
size={Button.Sizes.SMALL}
|
||||
disabled={settingsDir === "Loading..."}
|
||||
>
|
||||
Open QuickCSS File
|
||||
</Button>
|
||||
</Flex>}
|
||||
|
||||
{IS_WEB && <Button
|
||||
onClick={() => require("./Monaco").launchMonacoEditor()}
|
||||
size={Button.Sizes.SMALL}
|
||||
disabled={settingsDir === "Loading..."}
|
||||
>
|
||||
Open QuickCSS File
|
||||
</Button>}
|
||||
|
||||
<Forms.FormDivider />
|
||||
<Switch
|
||||
value={settings.useQuickCss}
|
||||
onChange={(v: boolean) => settings.useQuickCss = v}
|
||||
note="Loads styles from your QuickCss file"
|
||||
>
|
||||
Use QuickCss
|
||||
</Switch>
|
||||
{!IS_WEB && <Switch
|
||||
value={settings.enableReactDevtools}
|
||||
onChange={(v: boolean) => settings.enableReactDevtools = v}
|
||||
note="Requires a full restart"
|
||||
>
|
||||
Enable React Developer Tools
|
||||
</Switch>}
|
||||
{!IS_WEB && <Switch
|
||||
value={settings.notifyAboutUpdates}
|
||||
onChange={(v: boolean) => settings.notifyAboutUpdates = v}
|
||||
note="Shows a Toast on StartUp"
|
||||
>
|
||||
Get notified about new Updates
|
||||
</Switch>}
|
||||
|
||||
<Forms.FormDivider />
|
||||
<Forms.FormTitle tag="h5">Settings Sync</Forms.FormTitle>
|
||||
<Flex>
|
||||
<Button
|
||||
onClick={uploadSettingsBackup}
|
||||
size={Button.Sizes.SMALL}
|
||||
>
|
||||
Import Settings
|
||||
</Button>
|
||||
<Button
|
||||
onClick={downloadSettingsBackup}
|
||||
size={Button.Sizes.SMALL}
|
||||
>
|
||||
Export Settings
|
||||
</Button>
|
||||
</Flex>
|
||||
</Forms.FormSection >
|
||||
);
|
||||
}, {
|
||||
message: "Failed to render the Settings. If this persists, try using the installer to reinstall!",
|
||||
onError: handleComponentFailed,
|
||||
});
|
||||
@ -0,0 +1,69 @@
|
||||
/*
|
||||
* Vencord, a modification for Discord's desktop app
|
||||
* Copyright (c) 2022 Vendicated and contributors
|
||||
*
|
||||
* This program is free software: you can redistribute it and/or modify
|
||||
* it under the terms of the GNU General Public License as published by
|
||||
* the Free Software Foundation, either version 3 of the License, or
|
||||
* (at your option) any later version.
|
||||
*
|
||||
* 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 General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU General Public License
|
||||
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
import { downloadSettingsBackup, uploadSettingsBackup } from "../../utils/settingsSync";
|
||||
import { Button, Card, Forms, Margins, Text } from "../../webpack/common";
|
||||
import ErrorBoundary from "../ErrorBoundary";
|
||||
import { Flex } from "../Flex";
|
||||
|
||||
function BackupRestoreTab() {
|
||||
return (
|
||||
<Forms.FormSection title="Settings Sync">
|
||||
<Card style={{
|
||||
backgroundColor: "var(--info-warning-background)",
|
||||
borderColor: "var(--info-warning-foreground)",
|
||||
color: "var(--info-warning-text)",
|
||||
padding: "1em",
|
||||
marginBottom: "0.5em",
|
||||
}}>
|
||||
<Flex flexDirection="column">
|
||||
<strong>Warning</strong>
|
||||
<span>Importing a settings file will overwrite your current settings.</span>
|
||||
</Flex>
|
||||
</Card>
|
||||
<Text variant="text-md/normal" className={Margins.marginBottom8}>
|
||||
You can import and export your Vencord settings as a JSON file.
|
||||
This allows you to easily transfer your settings to another device,
|
||||
or recover your settings after reinstalling Vencord or Discord.
|
||||
</Text>
|
||||
<Text variant="text-md/normal" className={Margins.marginBottom8}>
|
||||
Settings Export contains:
|
||||
<ul>
|
||||
<li>— Custom QuickCSS</li>
|
||||
<li>— Plugin Settings</li>
|
||||
</ul>
|
||||
</Text>
|
||||
<Flex>
|
||||
<Button
|
||||
onClick={uploadSettingsBackup}
|
||||
size={Button.Sizes.SMALL}
|
||||
>
|
||||
Import Settings
|
||||
</Button>
|
||||
<Button
|
||||
onClick={downloadSettingsBackup}
|
||||
size={Button.Sizes.SMALL}
|
||||
>
|
||||
Export Settings
|
||||
</Button>
|
||||
</Flex>
|
||||
</Forms.FormSection>
|
||||
);
|
||||
}
|
||||
|
||||
export default ErrorBoundary.wrap(BackupRestoreTab);
|
||||
@ -0,0 +1,22 @@
|
||||
/*
|
||||
* Vencord, a modification for Discord's desktop app
|
||||
* Copyright (c) 2022 Vendicated and contributors
|
||||
*
|
||||
* This program is free software: you can redistribute it and/or modify
|
||||
* it under the terms of the GNU General Public License as published by
|
||||
* the Free Software Foundation, either version 3 of the License, or
|
||||
* (at your option) any later version.
|
||||
*
|
||||
* 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 General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU General Public License
|
||||
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
import ErrorBoundary from "../ErrorBoundary";
|
||||
import PluginSettings from "../PluginSettings";
|
||||
|
||||
export default ErrorBoundary.wrap(PluginSettings);
|
||||
@ -0,0 +1,134 @@
|
||||
/*
|
||||
* Vencord, a modification for Discord's desktop app
|
||||
* Copyright (c) 2022 Vendicated and contributors
|
||||
*
|
||||
* This program is free software: you can redistribute it and/or modify
|
||||
* it under the terms of the GNU General Public License as published by
|
||||
* the Free Software Foundation, either version 3 of the License, or
|
||||
* (at your option) any later version.
|
||||
*
|
||||
* 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 General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU General Public License
|
||||
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
|
||||
import { useSettings } from "../../api/settings";
|
||||
import IpcEvents from "../../utils/IpcEvents";
|
||||
import { useAwaiter } from "../../utils/misc";
|
||||
import { Button, Card, Forms, React, Switch } from "../../webpack/common";
|
||||
import DonateButton from "../DonateButton";
|
||||
import ErrorBoundary from "../ErrorBoundary";
|
||||
|
||||
const st = (style: string) => `vcSettings${style}`;
|
||||
|
||||
function VencordSettings() {
|
||||
const [settingsDir, , settingsDirPending] = useAwaiter(() => VencordNative.ipc.invoke<string>(IpcEvents.GET_SETTINGS_DIR), "Loading...");
|
||||
const settings = useSettings();
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<DonateCard />
|
||||
<Forms.FormSection title="Quick Actions">
|
||||
<Card className={st("QuickActionCard")}>
|
||||
{IS_WEB ? (
|
||||
<Button
|
||||
onClick={() => require("./Monaco").launchMonacoEditor()}
|
||||
size={Button.Sizes.SMALL}
|
||||
disabled={settingsDir === "Loading..."}>
|
||||
Open QuickCSS File
|
||||
</Button>
|
||||
) : (
|
||||
<React.Fragment>
|
||||
<Button
|
||||
onClick={() => window.DiscordNative.app.relaunch()}
|
||||
size={Button.Sizes.SMALL}>
|
||||
Restart Client
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => VencordNative.ipc.invoke(IpcEvents.OPEN_MONACO_EDITOR)}
|
||||
size={Button.Sizes.SMALL}
|
||||
disabled={settingsDir === "Loading..."}>
|
||||
Open QuickCSS File
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => window.DiscordNative.fileManager.showItemInFolder(settingsDir)}
|
||||
size={Button.Sizes.SMALL}
|
||||
disabled={settingsDirPending}>
|
||||
Open Settings Folder
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => VencordNative.ipc.invoke(IpcEvents.OPEN_EXTERNAL, "https://github.com/Vendicated/Vencord")}
|
||||
size={Button.Sizes.SMALL}
|
||||
disabled={settingsDirPending}>
|
||||
Open in GitHub
|
||||
</Button>
|
||||
</React.Fragment>
|
||||
)}
|
||||
</Card>
|
||||
</Forms.FormSection>
|
||||
|
||||
<Forms.FormDivider />
|
||||
|
||||
<Forms.FormSection title="Settings">
|
||||
<Switch
|
||||
value={settings.useQuickCss}
|
||||
onChange={(v: boolean) => settings.useQuickCss = v}
|
||||
note="Loads styles from your QuickCss file">
|
||||
Use QuickCss
|
||||
</Switch>
|
||||
{!IS_WEB && (
|
||||
<React.Fragment>
|
||||
<Switch
|
||||
value={settings.enableReactDevtools}
|
||||
onChange={(v: boolean) => settings.enableReactDevtools = v}
|
||||
note="Requires a full restart">
|
||||
Enable React Developer Tools
|
||||
</Switch>
|
||||
<Switch
|
||||
value={settings.notifyAboutUpdates}
|
||||
onChange={(v: boolean) => settings.notifyAboutUpdates = v}
|
||||
note="Shows a Toast on StartUp">
|
||||
Get notified about new Updates
|
||||
</Switch>
|
||||
</React.Fragment>
|
||||
)}
|
||||
|
||||
</Forms.FormSection>
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
|
||||
function DonateCard() {
|
||||
return (
|
||||
<Card style={{
|
||||
padding: "1em",
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
marginBottom: "1em",
|
||||
marginTop: "1em"
|
||||
}}>
|
||||
<div>
|
||||
<Forms.FormTitle tag="h5">Support the Project</Forms.FormTitle>
|
||||
<Forms.FormText>
|
||||
Please consider supporting the Development of Vencord by donating!
|
||||
</Forms.FormText>
|
||||
<DonateButton style={{ transform: "translateX(-1em)" }} />
|
||||
</div>
|
||||
<img
|
||||
role="presentation"
|
||||
src="https://cdn.discordapp.com/emojis/1026533090627174460.png"
|
||||
alt=""
|
||||
style={{ marginLeft: "auto", transform: "rotate(10deg)" }}
|
||||
/>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
export default ErrorBoundary.wrap(VencordSettings);
|
||||
@ -0,0 +1,84 @@
|
||||
/*
|
||||
* Vencord, a modification for Discord's desktop app
|
||||
* Copyright (c) 2022 Vendicated and contributors
|
||||
*
|
||||
* This program is free software: you can redistribute it and/or modify
|
||||
* it under the terms of the GNU General Public License as published by
|
||||
* the Free Software Foundation, either version 3 of the License, or
|
||||
* (at your option) any later version.
|
||||
*
|
||||
* 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 General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU General Public License
|
||||
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
import cssText from "~fileContent/settingsStyles.css";
|
||||
|
||||
import { lazyWebpack } from "../../utils/misc";
|
||||
import { filters } from "../../webpack";
|
||||
import { Forms, React, Router, Text } from "../../webpack/common";
|
||||
import ErrorBoundary from "../ErrorBoundary";
|
||||
import BackupRestoreTab from "./BackupRestoreTab";
|
||||
import PluginsTab from "./PluginsTab";
|
||||
import Updater from "./Updater";
|
||||
import VencordSettings from "./VencordTab";
|
||||
|
||||
const style = document.createElement("style");
|
||||
style.textContent = cssText;
|
||||
document.head.appendChild(style);
|
||||
|
||||
const st = (style: string) => `vcSettings${style}`;
|
||||
|
||||
const TabBar = lazyWebpack(filters.byCode('[role="tab"][aria-disabled="false"]'));
|
||||
|
||||
interface SettingsProps {
|
||||
tab: string;
|
||||
}
|
||||
|
||||
const SettingsTabs = {
|
||||
VencordSettings: { name: "Vencord", component: () => <VencordSettings /> },
|
||||
VencordPlugins: { name: "Plugins", component: () => <PluginsTab /> },
|
||||
VencordThemes: { name: "Themes", component: () => <Text variant="text-md/medium">Coming soon to a Vencord near you!</Text> },
|
||||
VencordUpdater: { name: "Updater", component: () => Updater ? <Updater /> : null },
|
||||
VencordSettingsSync: { name: "Backup & Restore", component: () => <BackupRestoreTab /> },
|
||||
};
|
||||
|
||||
|
||||
function Settings(props: SettingsProps) {
|
||||
const { tab = "VencordSettings" } = props;
|
||||
|
||||
const CurrentTab = SettingsTabs[tab]?.component ?? null;
|
||||
|
||||
return <Forms.FormSection>
|
||||
<Text variant="heading-md/normal" tag="h2">Vencord Settings</Text>
|
||||
|
||||
<TabBar
|
||||
type={TabBar.Types.TOP}
|
||||
look={TabBar.Looks.BRAND}
|
||||
className={st("TabBar")}
|
||||
selectedItem={tab}
|
||||
onItemSelect={Router.open}
|
||||
>
|
||||
{Object.entries(SettingsTabs).map(([key, { name }]) => {
|
||||
return <TabBar.Item
|
||||
id={key}
|
||||
className={st("TabBarItem")}
|
||||
key={key}>
|
||||
{name}
|
||||
</TabBar.Item>;
|
||||
})}
|
||||
</TabBar>
|
||||
<Forms.FormDivider />
|
||||
<CurrentTab />
|
||||
</Forms.FormSection >;
|
||||
}
|
||||
|
||||
export default function (props: SettingsProps) {
|
||||
return <ErrorBoundary>
|
||||
<Settings tab={props.tab} />
|
||||
</ErrorBoundary>;
|
||||
}
|
||||
@ -0,0 +1,23 @@
|
||||
.vcSettingsTabBar {
|
||||
margin-top: 20px;
|
||||
margin-bottom: -2px;
|
||||
border-bottom: 2px solid var(--background-modifier-accent);
|
||||
}
|
||||
|
||||
.vcSettingsTabBarItem {
|
||||
margin-right: 32px;
|
||||
padding-bottom: 16px;
|
||||
margin-bottom: -2px;
|
||||
}
|
||||
|
||||
.vcSettingsQuickActionCard {
|
||||
padding: 1em;
|
||||
display: flex;
|
||||
gap: 1em;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
flex-grow: 1;
|
||||
flex-direction: row;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
Loading…
Reference in new issue