Add categories to Vesktop settings to reduce visual clutter (#379)
Co-authored-by: Vendicated <vendicated@riseup.net>
This commit is contained in:
Justin Chung
GitHub
parent
0acd3e160a
commit
612d35c96f
10 changed files with 368 additions and 207 deletions
|
|
@ -1,205 +0,0 @@
|
||||||
/*
|
|
||||||
* SPDX-License-Identifier: GPL-3.0
|
|
||||||
* Vesktop, a desktop app aiming to give you a snappier Discord Experience
|
|
||||||
* Copyright (c) 2023 Vendicated and Vencord contributors
|
|
||||||
*/
|
|
||||||
|
|
||||||
import "./settings.css";
|
|
||||||
|
|
||||||
import { Margins } from "@vencord/types/utils";
|
|
||||||
import { Button, Forms, Select, Switch, Text, Toasts, useState } from "@vencord/types/webpack/common";
|
|
||||||
import { setBadge } from "renderer/appBadge";
|
|
||||||
import { useSettings } from "renderer/settings";
|
|
||||||
import { isMac } from "renderer/utils";
|
|
||||||
import { isTruthy } from "shared/utils/guards";
|
|
||||||
|
|
||||||
export default function SettingsUi() {
|
|
||||||
const Settings = useSettings();
|
|
||||||
const supportsWindowsTransparency = VesktopNative.app.supportsWindowsTransparency();
|
|
||||||
|
|
||||||
const { autostart } = VesktopNative;
|
|
||||||
const [autoStartEnabled, setAutoStartEnabled] = useState(autostart.isEnabled());
|
|
||||||
|
|
||||||
const allSwitches: Array<false | [keyof typeof Settings, string, string, boolean?, (() => boolean)?]> = [
|
|
||||||
[
|
|
||||||
"customTitleBar",
|
|
||||||
"Discord Titlebar",
|
|
||||||
"Use Discord's custom title bar instead of the native system one. Requires a full restart."
|
|
||||||
],
|
|
||||||
!isMac && ["tray", "Tray Icon", "Add a tray icon for Vesktop", true],
|
|
||||||
!isMac && [
|
|
||||||
"minimizeToTray",
|
|
||||||
"Minimize to tray",
|
|
||||||
"Hitting X will make Vesktop minimize to the tray instead of closing",
|
|
||||||
true,
|
|
||||||
() => Settings.tray ?? true
|
|
||||||
],
|
|
||||||
["arRPC", "Rich Presence", "Enables Rich Presence via arRPC", false],
|
|
||||||
[
|
|
||||||
"disableMinSize",
|
|
||||||
"Disable minimum window size",
|
|
||||||
"Allows you to make the window as small as your heart desires"
|
|
||||||
],
|
|
||||||
["staticTitle", "Static Title", 'Makes the window title "Vesktop" instead of changing to the current page'],
|
|
||||||
[
|
|
||||||
"enableMenu",
|
|
||||||
"Enable Menu Bar",
|
|
||||||
"Enables the application menu bar. Press ALT to toggle visibility. Incompatible with 'Discord Titlebar'"
|
|
||||||
],
|
|
||||||
["disableSmoothScroll", "Disable smooth scrolling", "Disables smooth scrolling in Vesktop", false],
|
|
||||||
["hardwareAcceleration", "Hardware Acceleration", "Enable hardware acceleration", true],
|
|
||||||
["splashTheming", "Splash theming", "Adapt the splash window colors to your custom theme", false],
|
|
||||||
[
|
|
||||||
"openLinksWithElectron",
|
|
||||||
"Open Links in app (experimental)",
|
|
||||||
"Opens links in a new Vesktop window instead of your web browser"
|
|
||||||
],
|
|
||||||
["checkUpdates", "Check for updates", "Automatically check for Vesktop updates", true]
|
|
||||||
];
|
|
||||||
|
|
||||||
const switches = allSwitches.filter(isTruthy);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Forms.FormSection>
|
|
||||||
<Text variant="heading-lg/semibold" style={{ color: "var(--header-primary)" }} tag="h2">
|
|
||||||
Vesktop Settings
|
|
||||||
</Text>
|
|
||||||
|
|
||||||
<Forms.FormTitle className={Margins.top16 + " " + Margins.bottom8}>Discord Branch</Forms.FormTitle>
|
|
||||||
<Select
|
|
||||||
placeholder="Stable"
|
|
||||||
options={[
|
|
||||||
{ label: "Stable", value: "stable", default: true },
|
|
||||||
{ label: "Canary", value: "canary" },
|
|
||||||
{ label: "PTB", value: "ptb" }
|
|
||||||
]}
|
|
||||||
closeOnSelect={true}
|
|
||||||
select={v => (Settings.discordBranch = v)}
|
|
||||||
isSelected={v => v === Settings.discordBranch}
|
|
||||||
serialize={s => s}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<Forms.FormDivider className={Margins.top16 + " " + Margins.bottom16} />
|
|
||||||
|
|
||||||
<Switch
|
|
||||||
value={autoStartEnabled}
|
|
||||||
onChange={async v => {
|
|
||||||
await autostart[v ? "enable" : "disable"]();
|
|
||||||
setAutoStartEnabled(v);
|
|
||||||
}}
|
|
||||||
note="Automatically start Vesktop on computer start-up"
|
|
||||||
>
|
|
||||||
Start With System
|
|
||||||
</Switch>
|
|
||||||
|
|
||||||
<Switch
|
|
||||||
value={Settings.appBadge ?? true}
|
|
||||||
onChange={v => {
|
|
||||||
Settings.appBadge = v;
|
|
||||||
if (v) setBadge();
|
|
||||||
else VesktopNative.app.setBadgeCount(0);
|
|
||||||
}}
|
|
||||||
note="Show mention badge on the app icon"
|
|
||||||
>
|
|
||||||
Notification Badge
|
|
||||||
</Switch>
|
|
||||||
|
|
||||||
{switches.map(([key, text, note, def, predicate]) => (
|
|
||||||
<Switch
|
|
||||||
value={(Settings[key as any] ?? def ?? false) && predicate?.() !== false}
|
|
||||||
disabled={predicate && !predicate()}
|
|
||||||
onChange={v => (Settings[key as any] = v)}
|
|
||||||
note={note}
|
|
||||||
key={key}
|
|
||||||
>
|
|
||||||
{text}
|
|
||||||
</Switch>
|
|
||||||
))}
|
|
||||||
|
|
||||||
{supportsWindowsTransparency && (
|
|
||||||
<>
|
|
||||||
<Forms.FormTitle className={Margins.top16 + " " + Margins.bottom8}>
|
|
||||||
Transparency Options
|
|
||||||
</Forms.FormTitle>
|
|
||||||
<Forms.FormText className={Margins.bottom8}>
|
|
||||||
Requires a full restart. You will need a theme that supports transparency for this to work.
|
|
||||||
</Forms.FormText>
|
|
||||||
|
|
||||||
<Select
|
|
||||||
placeholder="None"
|
|
||||||
options={[
|
|
||||||
{
|
|
||||||
label: "None",
|
|
||||||
value: "none",
|
|
||||||
default: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "Mica (incorporates system theme + desktop wallpaper to paint the background)",
|
|
||||||
value: "mica"
|
|
||||||
},
|
|
||||||
{ label: "Tabbed (variant of Mica with stronger background tinting)", value: "tabbed" },
|
|
||||||
{
|
|
||||||
label: "Acrylic (blurs the window behind Vesktop for a translucent background)",
|
|
||||||
value: "acrylic"
|
|
||||||
}
|
|
||||||
]}
|
|
||||||
closeOnSelect={true}
|
|
||||||
select={v => (Settings.transparencyOption = v)}
|
|
||||||
isSelected={v => v === Settings.transparencyOption}
|
|
||||||
serialize={s => s}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<Forms.FormDivider className={Margins.top16 + " " + Margins.bottom16} />
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<Forms.FormTitle>Vencord Location</Forms.FormTitle>
|
|
||||||
<Forms.FormText>
|
|
||||||
Vencord files are loaded from{" "}
|
|
||||||
{Settings.vencordDir ? (
|
|
||||||
<a
|
|
||||||
href="about:blank"
|
|
||||||
onClick={e => {
|
|
||||||
e.preventDefault();
|
|
||||||
VesktopNative.fileManager.showItemInFolder(Settings.vencordDir!);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{Settings.vencordDir}
|
|
||||||
</a>
|
|
||||||
) : (
|
|
||||||
"the default location"
|
|
||||||
)}
|
|
||||||
</Forms.FormText>
|
|
||||||
<div className="vcd-location-btns">
|
|
||||||
<Button
|
|
||||||
size={Button.Sizes.SMALL}
|
|
||||||
onClick={async () => {
|
|
||||||
const choice = await VesktopNative.fileManager.selectVencordDir();
|
|
||||||
switch (choice) {
|
|
||||||
case "cancelled":
|
|
||||||
return;
|
|
||||||
case "invalid":
|
|
||||||
Toasts.show({
|
|
||||||
message:
|
|
||||||
"You did not choose a valid Vencord install. Make sure you're selecting the dist dir!",
|
|
||||||
id: Toasts.genId(),
|
|
||||||
type: Toasts.Type.FAILURE
|
|
||||||
});
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
Settings.vencordDir = choice;
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Change
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
size={Button.Sizes.SMALL}
|
|
||||||
color={Button.Colors.RED}
|
|
||||||
onClick={() => (Settings.vencordDir = void 0)}
|
|
||||||
>
|
|
||||||
Reset
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</Forms.FormSection>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
@ -5,4 +5,3 @@
|
||||||
*/
|
*/
|
||||||
|
|
||||||
export * as ScreenShare from "./ScreenSharePicker";
|
export * as ScreenShare from "./ScreenSharePicker";
|
||||||
export { default as Settings } from "./Settings";
|
|
||||||
|
|
|
||||||
26
src/renderer/components/settings/AutoStartToggle.tsx
Normal file
26
src/renderer/components/settings/AutoStartToggle.tsx
Normal file
|
|
@ -0,0 +1,26 @@
|
||||||
|
/*
|
||||||
|
* SPDX-License-Identifier: GPL-3.0
|
||||||
|
* Vesktop, a desktop app aiming to give you a snappier Discord Experience
|
||||||
|
* Copyright (c) 2023 Vendicated and Vencord contributors
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { Switch, useState } from "@vencord/types/webpack/common";
|
||||||
|
|
||||||
|
import { SettingsComponent } from "./Settings";
|
||||||
|
|
||||||
|
export const AutoStartToggle: SettingsComponent = () => {
|
||||||
|
const [autoStartEnabled, setAutoStartEnabled] = useState(VesktopNative.autostart.isEnabled());
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Switch
|
||||||
|
value={autoStartEnabled}
|
||||||
|
onChange={async v => {
|
||||||
|
await VesktopNative.autostart[v ? "enable" : "disable"]();
|
||||||
|
setAutoStartEnabled(v);
|
||||||
|
}}
|
||||||
|
note="Automatically start Vesktop on computer start-up"
|
||||||
|
>
|
||||||
|
Start With System
|
||||||
|
</Switch>
|
||||||
|
);
|
||||||
|
};
|
||||||
26
src/renderer/components/settings/DiscordBranchPicker.tsx
Normal file
26
src/renderer/components/settings/DiscordBranchPicker.tsx
Normal file
|
|
@ -0,0 +1,26 @@
|
||||||
|
/*
|
||||||
|
* SPDX-License-Identifier: GPL-3.0
|
||||||
|
* Vesktop, a desktop app aiming to give you a snappier Discord Experience
|
||||||
|
* Copyright (c) 2023 Vendicated and Vencord contributors
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { Select } from "@vencord/types/webpack/common";
|
||||||
|
|
||||||
|
import { SettingsComponent } from "./Settings";
|
||||||
|
|
||||||
|
export const DiscordBranchPicker: SettingsComponent = ({ settings }) => {
|
||||||
|
return (
|
||||||
|
<Select
|
||||||
|
placeholder="Stable"
|
||||||
|
options={[
|
||||||
|
{ label: "Stable", value: "stable", default: true },
|
||||||
|
{ label: "Canary", value: "canary" },
|
||||||
|
{ label: "PTB", value: "ptb" }
|
||||||
|
]}
|
||||||
|
closeOnSelect={true}
|
||||||
|
select={v => (settings.discordBranch = v)}
|
||||||
|
isSelected={v => v === settings.discordBranch}
|
||||||
|
serialize={s => s}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
26
src/renderer/components/settings/NotificationBadgeToggle.tsx
Normal file
26
src/renderer/components/settings/NotificationBadgeToggle.tsx
Normal file
|
|
@ -0,0 +1,26 @@
|
||||||
|
/*
|
||||||
|
* SPDX-License-Identifier: GPL-3.0
|
||||||
|
* Vesktop, a desktop app aiming to give you a snappier Discord Experience
|
||||||
|
* Copyright (c) 2023 Vendicated and Vencord contributors
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { Switch } from "@vencord/types/webpack/common";
|
||||||
|
import { setBadge } from "renderer/appBadge";
|
||||||
|
|
||||||
|
import { SettingsComponent } from "./Settings";
|
||||||
|
|
||||||
|
export const NotificationBadgeToggle: SettingsComponent = ({ settings }) => {
|
||||||
|
return (
|
||||||
|
<Switch
|
||||||
|
value={settings.appBadge ?? true}
|
||||||
|
onChange={v => {
|
||||||
|
settings.appBadge = v;
|
||||||
|
if (v) setBadge();
|
||||||
|
else VesktopNative.app.setBadgeCount(0);
|
||||||
|
}}
|
||||||
|
note="Show mention badge on the app icon"
|
||||||
|
>
|
||||||
|
Notification Badge
|
||||||
|
</Switch>
|
||||||
|
);
|
||||||
|
};
|
||||||
170
src/renderer/components/settings/Settings.tsx
Normal file
170
src/renderer/components/settings/Settings.tsx
Normal file
|
|
@ -0,0 +1,170 @@
|
||||||
|
/*
|
||||||
|
* SPDX-License-Identifier: GPL-3.0
|
||||||
|
* Vesktop, a desktop app aiming to give you a snappier Discord Experience
|
||||||
|
* Copyright (c) 2023 Vendicated and Vencord contributors
|
||||||
|
*/
|
||||||
|
|
||||||
|
import "./settings.css";
|
||||||
|
|
||||||
|
import { Forms, Switch, Text } from "@vencord/types/webpack/common";
|
||||||
|
import { ComponentType } from "react";
|
||||||
|
import { Settings, useSettings } from "renderer/settings";
|
||||||
|
import { isMac, isWindows } from "renderer/utils";
|
||||||
|
|
||||||
|
import { AutoStartToggle } from "./AutoStartToggle";
|
||||||
|
import { DiscordBranchPicker } from "./DiscordBranchPicker";
|
||||||
|
import { NotificationBadgeToggle } from "./NotificationBadgeToggle";
|
||||||
|
import { VencordLocationPicker } from "./VencordLocationPicker";
|
||||||
|
import { WindowsTransparencyControls } from "./WindowsTransparencyControls";
|
||||||
|
|
||||||
|
interface BooleanSetting {
|
||||||
|
key: keyof typeof Settings.store;
|
||||||
|
title: string;
|
||||||
|
description: string;
|
||||||
|
defaultValue: boolean;
|
||||||
|
disabled?(): boolean;
|
||||||
|
invisible?(): boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export type SettingsComponent = ComponentType<{ settings: typeof Settings.store }>;
|
||||||
|
|
||||||
|
const SettingsOptions: Record<string, Array<BooleanSetting | SettingsComponent>> = {
|
||||||
|
"Discord Branch": [DiscordBranchPicker],
|
||||||
|
"System Startup & Performance": [
|
||||||
|
AutoStartToggle,
|
||||||
|
{
|
||||||
|
key: "hardwareAcceleration",
|
||||||
|
title: "Hardware Acceleration",
|
||||||
|
description: "Enable hardware acceleration",
|
||||||
|
defaultValue: true
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"User Interface": [
|
||||||
|
{
|
||||||
|
key: "customTitleBar",
|
||||||
|
title: "Discord Titlebar",
|
||||||
|
description: "Use Discord's custom title bar instead of the native system one. Requires a full restart.",
|
||||||
|
defaultValue: isWindows
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: "staticTitle",
|
||||||
|
title: "Static Title",
|
||||||
|
description: 'Makes the window title "Vesktop" instead of changing to the current page',
|
||||||
|
defaultValue: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: "enableMenu",
|
||||||
|
title: "Enable Menu Bar",
|
||||||
|
description: "Enables the application menu bar. Press ALT to toggle visibility.",
|
||||||
|
defaultValue: false,
|
||||||
|
disabled: () => Settings.store.customTitleBar ?? isWindows
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: "splashTheming",
|
||||||
|
title: "Splash theming",
|
||||||
|
description: "Adapt the splash window colors to your custom theme",
|
||||||
|
defaultValue: false
|
||||||
|
},
|
||||||
|
WindowsTransparencyControls
|
||||||
|
],
|
||||||
|
Behaviour: [
|
||||||
|
{
|
||||||
|
key: "tray",
|
||||||
|
title: "Tray Icon",
|
||||||
|
description: "Add a tray icon for Vesktop",
|
||||||
|
defaultValue: true,
|
||||||
|
invisible: () => isMac
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: "minimizeToTray",
|
||||||
|
title: "Minimize to tray",
|
||||||
|
description: "Hitting X will make Vesktop minimize to the tray instead of closing",
|
||||||
|
defaultValue: true,
|
||||||
|
invisible: () => isMac,
|
||||||
|
disabled: () => Settings.store.tray === false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: "disableMinSize",
|
||||||
|
title: "Disable minimum window size",
|
||||||
|
description: "Allows you to make the window as small as your heart desires",
|
||||||
|
defaultValue: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: "disableSmoothScroll",
|
||||||
|
title: "Disable smooth scrolling",
|
||||||
|
description: "Disables smooth scrolling",
|
||||||
|
defaultValue: false
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"Notifications & Updates": [
|
||||||
|
NotificationBadgeToggle,
|
||||||
|
{
|
||||||
|
key: "checkUpdates",
|
||||||
|
title: "Check for updates",
|
||||||
|
description: "Automatically check for Vesktop updates",
|
||||||
|
defaultValue: true
|
||||||
|
}
|
||||||
|
],
|
||||||
|
Miscelleanous: [
|
||||||
|
{
|
||||||
|
key: "arRPC",
|
||||||
|
title: "Rich Presence",
|
||||||
|
description: "Enables Rich Presence via arRPC",
|
||||||
|
defaultValue: false
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
key: "openLinksWithElectron",
|
||||||
|
title: "Open Links in app (experimental)",
|
||||||
|
description: "Opens links in a new Vesktop window instead of your web browser",
|
||||||
|
defaultValue: false
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"Vencord Location": [VencordLocationPicker]
|
||||||
|
};
|
||||||
|
|
||||||
|
function SettingsSections() {
|
||||||
|
const Settings = useSettings();
|
||||||
|
|
||||||
|
const sections = Object.entries(SettingsOptions).map(([title, settings]) => (
|
||||||
|
<Forms.FormSection
|
||||||
|
title={title}
|
||||||
|
key={title}
|
||||||
|
className="vcd-settings-section"
|
||||||
|
titleClassName="vcd-settings-title"
|
||||||
|
>
|
||||||
|
{settings.map(Setting => {
|
||||||
|
if (typeof Setting === "function") return <Setting settings={Settings} />;
|
||||||
|
|
||||||
|
const { defaultValue, title, description, key, disabled, invisible } = Setting;
|
||||||
|
if (invisible?.()) return null;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Switch
|
||||||
|
value={Settings[key as any] ?? defaultValue}
|
||||||
|
onChange={v => (Settings[key as any] = v)}
|
||||||
|
note={description}
|
||||||
|
disabled={disabled?.()}
|
||||||
|
key={key}
|
||||||
|
>
|
||||||
|
{title}
|
||||||
|
</Switch>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</Forms.FormSection>
|
||||||
|
));
|
||||||
|
|
||||||
|
return <>{sections}</>;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function SettingsUi() {
|
||||||
|
return (
|
||||||
|
<Forms.FormSection>
|
||||||
|
<Text variant="heading-lg/semibold" style={{ color: "var(--header-primary)" }} tag="h2">
|
||||||
|
Vesktop Settings
|
||||||
|
</Text>
|
||||||
|
|
||||||
|
<SettingsSections />
|
||||||
|
</Forms.FormSection>
|
||||||
|
);
|
||||||
|
}
|
||||||
62
src/renderer/components/settings/VencordLocationPicker.tsx
Normal file
62
src/renderer/components/settings/VencordLocationPicker.tsx
Normal file
|
|
@ -0,0 +1,62 @@
|
||||||
|
/*
|
||||||
|
* SPDX-License-Identifier: GPL-3.0
|
||||||
|
* Vesktop, a desktop app aiming to give you a snappier Discord Experience
|
||||||
|
* Copyright (c) 2023 Vendicated and Vencord contributors
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { Button, Forms, Toasts } from "@vencord/types/webpack/common";
|
||||||
|
|
||||||
|
import { SettingsComponent } from "./Settings";
|
||||||
|
|
||||||
|
export const VencordLocationPicker: SettingsComponent = ({ settings }) => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Forms.FormText>
|
||||||
|
Vencord files are loaded from{" "}
|
||||||
|
{settings.vencordDir ? (
|
||||||
|
<a
|
||||||
|
href="about:blank"
|
||||||
|
onClick={e => {
|
||||||
|
e.preventDefault();
|
||||||
|
VesktopNative.fileManager.showItemInFolder(settings.vencordDir!);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{settings.vencordDir}
|
||||||
|
</a>
|
||||||
|
) : (
|
||||||
|
"the default location"
|
||||||
|
)}
|
||||||
|
</Forms.FormText>
|
||||||
|
<div className="vcd-location-btns">
|
||||||
|
<Button
|
||||||
|
size={Button.Sizes.SMALL}
|
||||||
|
onClick={async () => {
|
||||||
|
const choice = await VesktopNative.fileManager.selectVencordDir();
|
||||||
|
switch (choice) {
|
||||||
|
case "cancelled":
|
||||||
|
return;
|
||||||
|
case "invalid":
|
||||||
|
Toasts.show({
|
||||||
|
message:
|
||||||
|
"You did not choose a valid Vencord install. Make sure you're selecting the dist dir!",
|
||||||
|
id: Toasts.genId(),
|
||||||
|
type: Toasts.Type.FAILURE
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
settings.vencordDir = choice;
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Change
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
size={Button.Sizes.SMALL}
|
||||||
|
color={Button.Colors.RED}
|
||||||
|
onClick={() => (settings.vencordDir = void 0)}
|
||||||
|
>
|
||||||
|
Reset
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,49 @@
|
||||||
|
/*
|
||||||
|
* SPDX-License-Identifier: GPL-3.0
|
||||||
|
* Vesktop, a desktop app aiming to give you a snappier Discord Experience
|
||||||
|
* Copyright (c) 2023 Vendicated and Vencord contributors
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { Margins } from "@vencord/types/utils";
|
||||||
|
import { Forms, Select } from "@vencord/types/webpack/common";
|
||||||
|
|
||||||
|
import { SettingsComponent } from "./Settings";
|
||||||
|
|
||||||
|
export const WindowsTransparencyControls: SettingsComponent = ({ settings }) => {
|
||||||
|
if (!VesktopNative.app.supportsWindowsTransparency()) return null;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Forms.FormTitle className={Margins.top16 + " " + Margins.bottom8}>Transparency Options</Forms.FormTitle>
|
||||||
|
<Forms.FormText className={Margins.bottom8}>
|
||||||
|
Requires a full restart. You will need a theme that supports transparency for this to work.
|
||||||
|
</Forms.FormText>
|
||||||
|
|
||||||
|
<Select
|
||||||
|
placeholder="None"
|
||||||
|
options={[
|
||||||
|
{
|
||||||
|
label: "None",
|
||||||
|
value: "none",
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Mica (incorporates system theme + desktop wallpaper to paint the background)",
|
||||||
|
value: "mica"
|
||||||
|
},
|
||||||
|
{ label: "Tabbed (variant of Mica with stronger background tinting)", value: "tabbed" },
|
||||||
|
{
|
||||||
|
label: "Acrylic (blurs the window behind Vesktop for a translucent background)",
|
||||||
|
value: "acrylic"
|
||||||
|
}
|
||||||
|
]}
|
||||||
|
closeOnSelect={true}
|
||||||
|
select={v => (settings.transparencyOption = v)}
|
||||||
|
isSelected={v => v === settings.transparencyOption}
|
||||||
|
serialize={s => s}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Forms.FormDivider className={Margins.top16 + " " + Margins.bottom16} />
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
@ -4,3 +4,11 @@
|
||||||
gap: 0.5em;
|
gap: 0.5em;
|
||||||
margin-top: 0.5em;
|
margin-top: 0.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.vcd-settings-section {
|
||||||
|
margin-top: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vcd-settings-title {
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
@ -15,7 +15,7 @@ export * as Components from "./components";
|
||||||
import { findByPropsLazy } from "@vencord/types/webpack";
|
import { findByPropsLazy } from "@vencord/types/webpack";
|
||||||
import { FluxDispatcher } from "@vencord/types/webpack/common";
|
import { FluxDispatcher } from "@vencord/types/webpack/common";
|
||||||
|
|
||||||
import SettingsUi from "./components/Settings";
|
import SettingsUi from "./components/settings/Settings";
|
||||||
import { Settings } from "./settings";
|
import { Settings } from "./settings";
|
||||||
export { Settings };
|
export { Settings };
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue