feat(settings): new settings design (#261)
This commit is contained in:
parent
a85ec594a7
commit
6b55dee9fb
|
@ -18,7 +18,7 @@
|
||||||
|
|
||||||
import { debounce } from "../utils/debounce";
|
import { debounce } from "../utils/debounce";
|
||||||
import { makeCodeblock } from "../utils/misc";
|
import { makeCodeblock } from "../utils/misc";
|
||||||
import { Button, Clipboard, Forms, Margins, Parser, React, Switch, TextInput } from "../webpack/common";
|
import { Button, Clipboard, Forms, Margins, Parser, React, Switch, Text, TextInput } from "../webpack/common";
|
||||||
import { search } from "../webpack/webpack";
|
import { search } from "../webpack/webpack";
|
||||||
import { CheckedTextInput } from "./CheckedTextInput";
|
import { CheckedTextInput } from "./CheckedTextInput";
|
||||||
import ErrorBoundary from "./ErrorBoundary";
|
import ErrorBoundary from "./ErrorBoundary";
|
||||||
|
@ -243,7 +243,8 @@ function PatchHelper() {
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<Forms.FormSection>
|
||||||
|
<Text variant="heading-md/normal" tag="h2" className={Margins.marginBottom8}>Patch Helper</Text>
|
||||||
<Forms.FormTitle>find</Forms.FormTitle>
|
<Forms.FormTitle>find</Forms.FormTitle>
|
||||||
<TextInput
|
<TextInput
|
||||||
type="text"
|
type="text"
|
||||||
|
@ -288,7 +289,7 @@ function PatchHelper() {
|
||||||
<Button onClick={() => Clipboard.copy(code)}>Copy to Clipboard</Button>
|
<Button onClick={() => Clipboard.copy(code)}>Copy to Clipboard</Button>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
</>
|
</Forms.FormSection>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -243,9 +243,9 @@ export default ErrorBoundary.wrap(function Settings() {
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Forms.FormSection tag="h1" title="Vencord">
|
<Forms.FormSection>
|
||||||
<Forms.FormTitle tag="h5" className={classes(Margins.marginTop20, Margins.marginBottom8)}>
|
<Forms.FormTitle tag="h5" className={classes(Margins.marginTop20, Margins.marginBottom8)}>
|
||||||
Plugins
|
Filters
|
||||||
</Forms.FormTitle>
|
</Forms.FormTitle>
|
||||||
|
|
||||||
<ReloadRequiredCard plugins={[...changes.getChanges()]} style={{ marginBottom: 16 }} />
|
<ReloadRequiredCard plugins={[...changes.getChanges()]} style={{ marginBottom: 16 }} />
|
||||||
|
@ -268,6 +268,8 @@ export default ErrorBoundary.wrap(function Settings() {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<Forms.FormTitle className={Margins.marginTop20}>Plugins</Forms.FormTitle>
|
||||||
|
|
||||||
<div style={styles.PluginsGrid}>
|
<div style={styles.PluginsGrid}>
|
||||||
{sortedPlugins?.length ? sortedPlugins
|
{sortedPlugins?.length ? sortedPlugins
|
||||||
.filter(a => !a.required && !dependencyCheck(a.name, depMap).length && pluginFilter(a))
|
.filter(a => !a.required && !dependencyCheck(a.name, depMap).length && pluginFilter(a))
|
||||||
|
|
|
@ -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,
|
|
||||||
});
|
|
69
src/components/VencordSettings/BackupRestoreTab.tsx
Normal file
69
src/components/VencordSettings/BackupRestoreTab.tsx
Normal file
|
@ -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);
|
22
src/components/VencordSettings/PluginsTab.tsx
Normal file
22
src/components/VencordSettings/PluginsTab.tsx
Normal file
|
@ -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);
|
|
@ -18,14 +18,14 @@
|
||||||
|
|
||||||
import gitHash from "~git-hash";
|
import gitHash from "~git-hash";
|
||||||
|
|
||||||
import { classes, useAwaiter } from "../utils/misc";
|
import { classes, useAwaiter } from "../../utils/misc";
|
||||||
import { changes, checkForUpdates, getRepo, isNewer, rebuild, update, updateError, UpdateLogger } from "../utils/updater";
|
import { changes, checkForUpdates, getRepo, isNewer, rebuild, update, updateError, UpdateLogger } from "../../utils/updater";
|
||||||
import { Alerts, Button, Card, Forms, Margins, Parser, React, Toasts } from "../webpack/common";
|
import { Alerts, Button, Card, Forms, Margins, Parser, React, Toasts } from "../../webpack/common";
|
||||||
import ErrorBoundary from "./ErrorBoundary";
|
import ErrorBoundary from "../ErrorBoundary";
|
||||||
import { ErrorCard } from "./ErrorCard";
|
import { ErrorCard } from "../ErrorCard";
|
||||||
import { Flex } from "./Flex";
|
import { Flex } from "../Flex";
|
||||||
import { handleComponentFailed } from "./handleComponentFailed";
|
import { handleComponentFailed } from "../handleComponentFailed";
|
||||||
import { Link } from "./Link";
|
import { Link } from "../Link";
|
||||||
|
|
||||||
function withDispatcher(dispatcher: React.Dispatch<React.SetStateAction<boolean>>, action: () => any) {
|
function withDispatcher(dispatcher: React.Dispatch<React.SetStateAction<boolean>>, action: () => any) {
|
||||||
return async () => {
|
return async () => {
|
||||||
|
@ -192,7 +192,7 @@ function Updater() {
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Forms.FormSection tag="h1" title="Vencord Updater">
|
<Forms.FormSection>
|
||||||
<Forms.FormTitle tag="h5">Repo</Forms.FormTitle>
|
<Forms.FormTitle tag="h5">Repo</Forms.FormTitle>
|
||||||
|
|
||||||
<Forms.FormText>{repoPending ? repo : err ? "Failed to retrieve - check console" : (
|
<Forms.FormText>{repoPending ? repo : err ? "Failed to retrieve - check console" : (
|
134
src/components/VencordSettings/VencordTab.tsx
Normal file
134
src/components/VencordSettings/VencordTab.tsx
Normal file
|
@ -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);
|
84
src/components/VencordSettings/index.tsx
Normal file
84
src/components/VencordSettings/index.tsx
Normal file
|
@ -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>;
|
||||||
|
}
|
23
src/components/VencordSettings/settingsStyles.css
Normal file
23
src/components/VencordSettings/settingsStyles.css
Normal file
|
@ -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;
|
||||||
|
}
|
|
@ -18,5 +18,4 @@
|
||||||
|
|
||||||
export { default as PatchHelper } from "./PatchHelper";
|
export { default as PatchHelper } from "./PatchHelper";
|
||||||
export { default as PluginSettings } from "./PluginSettings";
|
export { default as PluginSettings } from "./PluginSettings";
|
||||||
export { default as Settings } from "./Settings";
|
export { default as VencordSettings } from "./VencordSettings";
|
||||||
export { default as Updater } from "./Updater";
|
|
||||||
|
|
|
@ -19,8 +19,11 @@
|
||||||
import gitHash from "~git-hash";
|
import gitHash from "~git-hash";
|
||||||
|
|
||||||
import { Devs } from "../utils/constants";
|
import { Devs } from "../utils/constants";
|
||||||
|
import { LazyComponent } from "../utils/misc";
|
||||||
import definePlugin from "../utils/types";
|
import definePlugin from "../utils/types";
|
||||||
|
|
||||||
|
const SettingsComponent = LazyComponent(() => require("../components/VencordSettings").default);
|
||||||
|
|
||||||
export default definePlugin({
|
export default definePlugin({
|
||||||
name: "Settings",
|
name: "Settings",
|
||||||
description: "Adds Settings UI and debug info",
|
description: "Adds Settings UI and debug info",
|
||||||
|
@ -42,13 +45,15 @@ export default definePlugin({
|
||||||
replacement: {
|
replacement: {
|
||||||
match: /\{section:(.{1,2})\.ID\.HEADER,\s*label:(.{1,2})\..{1,2}\.Messages\.ACTIVITY_SETTINGS\}/,
|
match: /\{section:(.{1,2})\.ID\.HEADER,\s*label:(.{1,2})\..{1,2}\.Messages\.ACTIVITY_SETTINGS\}/,
|
||||||
replace: (m, mod) => {
|
replace: (m, mod) => {
|
||||||
const updater = !IS_WEB ? '{section:"VencordUpdater",label:"Updater",element:Vencord.Components.Updater},' : "";
|
const updater = !IS_WEB ? '{section:"VencordUpdater",label:"Updater",element:Vencord.Plugins.plugins.Settings.tabs.updater},' : "";
|
||||||
const patchHelper = IS_DEV ? '{section:"VencordPatchHelper",label:"PatchHelper",element:Vencord.Components.PatchHelper},' : "";
|
const patchHelper = IS_DEV ? '{section:"VencordPatchHelper",label:"Patch Helper",element:Vencord.Components.PatchHelper},' : "";
|
||||||
return (
|
return (
|
||||||
`{section:${mod}.ID.HEADER,label:"Vencord"},` +
|
`{section:${mod}.ID.HEADER,label:"Vencord"},` +
|
||||||
'{section:"VencordSetting",label:"Vencord",element:Vencord.Components.Settings},' +
|
'{section:"VencordSettings",label:"Vencord",element:Vencord.Plugins.plugins.Settings.tabs.vencord},' +
|
||||||
'{section:"VencordPlugins",label:"Plugins",element:Vencord.Components.PluginSettings},' +
|
'{section:"VencordPlugins",label:"Plugins",element:Vencord.Plugins.plugins.Settings.tabs.plugins},' +
|
||||||
|
'{section:"VencordThemes",label:"Themes",element:Vencord.Plugins.plugins.Settings.tabs.themes},' +
|
||||||
updater +
|
updater +
|
||||||
|
'{section:"VencordSettingsSync",label:"Backup & Restore",element:Vencord.Plugins.plugins.Settings.tabs.sync},' +
|
||||||
patchHelper +
|
patchHelper +
|
||||||
`{section:${mod}.ID.DIVIDER},${m}`
|
`{section:${mod}.ID.DIVIDER},${m}`
|
||||||
);
|
);
|
||||||
|
@ -56,6 +61,14 @@ export default definePlugin({
|
||||||
}
|
}
|
||||||
}],
|
}],
|
||||||
|
|
||||||
|
tabs: {
|
||||||
|
vencord: () => <SettingsComponent tab="VencordSettings" />,
|
||||||
|
plugins: () => <SettingsComponent tab="VencordPlugins" />,
|
||||||
|
themes: () => <SettingsComponent tab="VencordThemes" />,
|
||||||
|
updater: () => <SettingsComponent tab="VencordUpdater" />,
|
||||||
|
sync: () => <SettingsComponent tab="VencordSettingsSync" />
|
||||||
|
},
|
||||||
|
|
||||||
get electronVersion() {
|
get electronVersion() {
|
||||||
return VencordNative.getVersions().electron || window.armcord?.electron || null;
|
return VencordNative.getVersions().electron || window.armcord?.electron || null;
|
||||||
},
|
},
|
||||||
|
|
|
@ -16,7 +16,7 @@
|
||||||
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import cssText from "~fileContent/styles.css";
|
import cssText from "~fileContent/spotifyStyles.css";
|
||||||
|
|
||||||
import IpcEvents from "../../utils/IpcEvents";
|
import IpcEvents from "../../utils/IpcEvents";
|
||||||
import { lazyWebpack } from "../../utils/misc";
|
import { lazyWebpack } from "../../utils/misc";
|
||||||
|
|
|
@ -195,7 +195,7 @@ export type TextProps = React.PropsWithChildren & {
|
||||||
className?: string;
|
className?: string;
|
||||||
};
|
};
|
||||||
|
|
||||||
export type TextVariant = "heading-sm/normal" | "heading-sm/medium" | "heading-sm/bold" | "heading-md/normal" | "heading-md/medium" | "heading-md/bold" | "heading-lg/normal" | "heading-lg/medium" | "heading-lg/bold" | "heading-xl/normal" | "heading-xl/medium" | "heading-xl/bold" | "heading-xxl/normal" | "heading-xxl/medium" | "heading-xxl/bold" | "eyebrow" | "heading-deprecated-14/normal" | "heading-deprecated-14/medium" | "heading-deprecated-14/bold" | "text-xxs/normal" | "text-xxs/medium" | "text-xxs/semibold" | "text-xxs/bold" | "text-xs/normal" | "text-xs/medium" | "text-xs/semibold" | "text-xs/bold" | "text-sm/normal" | "text-sm/medium" | "text-sm/semibold" | "text-sm/bold" | "text-md/normal" | "text-md/medium" | "text-md/semibold" | "text-md/bold" | "text-lg/normal" | "text-lg/medium" | "text-lg/semibold" | "text-lg/bold" | "display-md" | "display-lg" | "code";
|
export type TextVariant = "heading-sm/normal" | "heading-sm/medium" | "heading-sm/bold" | "heading-md/normal" | "heading-md/medium" | "heading-md/bold" | "heading-lg/normal" | "heading-lg/medium" | "heading-lg/bold" | "heading-xl/normal" | "heading-xl/medium" | "heading-xl/bold" | "heading-xxl/normal" | "heading-xxl/medium" | "heading-xxl/bold" | "eyebrow" | "heading-deprecated-14/normal" | "heading-deprecated-14/medium" | "heading-deprecated-14/bold" | "text-xxs/normal" | "text-xxs/medium" | "text-xxs/semibold" | "text-xxs/bold" | "text-xs/normal" | "text-xs/medium" | "text-xs/semibold" | "text-xs/bold" | "text-sm/normal" | "text-sm/medium" | "text-sm/semibold" | "text-sm/bold" | "text-md/normal" | "text-md/medium" | "text-md/semibold" | "text-md/bold" | "text-lg/normal" | "text-lg/medium" | "text-lg/semibold" | "text-lg/bold" | "display-sm" | "display-md" | "display-lg" | "code";
|
||||||
|
|
||||||
type RC<C> = React.ComponentType<React.PropsWithChildren<C & Record<string, any>>>;
|
type RC<C> = React.ComponentType<React.PropsWithChildren<C & Record<string, any>>>;
|
||||||
interface Menu {
|
interface Menu {
|
||||||
|
|
Loading…
Reference in a new issue