Fix Settings UI

This commit is contained in:
Vendicated 2022-09-27 16:57:46 +02:00
parent 6398dd25d2
commit 572bfcee6c
No known key found for this signature in database
GPG key ID: EC781ADFB93EFFA3
6 changed files with 61 additions and 38 deletions

View file

@ -1,5 +1,5 @@
import Logger from "../utils/logger"; import Logger from "../utils/logger";
import { Card, React } from "../webpack/common"; import { React } from "../webpack/common";
interface Props { interface Props {
fallback?: React.ComponentType<React.PropsWithChildren<{ error: any; }>>; fallback?: React.ComponentType<React.PropsWithChildren<{ error: any; }>>;
@ -49,7 +49,7 @@ export default class ErrorBoundary extends React.Component<React.PropsWithChildr
/>; />;
return ( return (
<Card style={{ <div style={{
overflow: "hidden", overflow: "hidden",
padding: "2em", padding: "2em",
backgroundColor: color + "30", backgroundColor: color + "30",
@ -65,7 +65,7 @@ export default class ErrorBoundary extends React.Component<React.PropsWithChildr
<pre>{this.state.error} <pre>{this.state.error}
</pre> </pre>
</code> </code>
</Card> </div>
); );
} }
} }

17
src/components/Flex.tsx Normal file
View file

@ -0,0 +1,17 @@
import { PropsWithChildren } from "react";
import type { React } from '../webpack/common';
export function Flex(props: React.PropsWithChildren<{
flexDirection?: React.CSSProperties["flexDirection"];
style?: React.CSSProperties;
}>) {
props.style ??= {};
props.style.flexDirection ||= props.flexDirection;
props.style.gap ??= "1em";
props.style.display = "flex";
return (
<div {...props}>
{props.children}
</div>
);
}

View file

@ -3,10 +3,11 @@ import Plugins from 'plugins';
import { useSettings } from "../api/settings"; import { useSettings } from "../api/settings";
import IpcEvents from "../utils/IpcEvents"; import IpcEvents from "../utils/IpcEvents";
import { Button, ButtonProps, Flex, Switch, Forms, React } from "../webpack/common"; import { Button, Switch, Forms, React } from "../webpack/common";
import ErrorBoundary from "./ErrorBoundary"; import ErrorBoundary from "./ErrorBoundary";
import { startPlugin } from "../plugins"; import { startPlugin } from "../plugins";
import { stopPlugin } from '../plugins/index'; import { stopPlugin } from '../plugins/index';
import { Flex } from './Flex';
export default ErrorBoundary.wrap(function Settings(props) { export default ErrorBoundary.wrap(function Settings(props) {
const [settingsDir, , settingsDirPending] = useAwaiter(() => VencordNative.ipc.invoke<string>(IpcEvents.GET_SETTINGS_DIR), "Loading..."); const [settingsDir, , settingsDirPending] = useAwaiter(() => VencordNative.ipc.invoke<string>(IpcEvents.GET_SETTINGS_DIR), "Loading...");
@ -32,24 +33,20 @@ export default ErrorBoundary.wrap(function Settings(props) {
<Forms.FormSection tag="h1" title="Vencord"> <Forms.FormSection tag="h1" title="Vencord">
<Forms.FormText>SettingsDir: {settingsDir}</Forms.FormText> <Forms.FormText>SettingsDir: {settingsDir}</Forms.FormText>
<Flex style={{ marginTop: "8px", marginBottom: "8px" }}> <Flex style={{ marginTop: "8px", marginBottom: "8px" }}>
<Flex.Child> <Button
<Button onClick={() => VencordNative.ipc.invoke(IpcEvents.OPEN_PATH, settingsDir)}
onClick={() => VencordNative.ipc.invoke(IpcEvents.OPEN_PATH, settingsDir)} size={Button.Sizes.SMALL}
size={ButtonProps.ButtonSizes.SMALL} disabled={settingsDirPending}
disabled={settingsDirPending} >
> Launch Directory
Launch Directory </Button>
</Button> <Button
</Flex.Child> onClick={() => VencordNative.ipc.invoke(IpcEvents.OPEN_PATH, settingsDir, "quickCss.css")}
<Flex.Child> size={Button.Sizes.SMALL}
<Button disabled={settingsDir === "Loading..."}
onClick={() => VencordNative.ipc.invoke(IpcEvents.OPEN_PATH, settingsDir, "quickCss.css")} >
size={ButtonProps.ButtonSizes.SMALL} Open QuickCSS File
disabled={settingsDir === "Loading..."} </Button>
>
Open QuickCSS File
</Button>
</Flex.Child>
</Flex> </Flex>
<Forms.FormTitle tag="h5">Settings</Forms.FormTitle> <Forms.FormTitle tag="h5">Settings</Forms.FormTitle>
<Switch <Switch

View file

@ -55,7 +55,7 @@ electron.app.whenReady().then(() => {
// Remove CSP // Remove CSP
electron.session.defaultSession.webRequest.onHeadersReceived(({ responseHeaders, url }, cb) => { electron.session.defaultSession.webRequest.onHeadersReceived(({ responseHeaders, url }, cb) => {
if (responseHeaders) { if (responseHeaders) {
delete responseHeaders["content-security-policy-report-only"]; delete responseHeaders["content-security-policy-reportgnly"];
delete responseHeaders["content-security-policy"]; delete responseHeaders["content-security-policy"];
// Fix hosts that don't properly set the content type, such as // Fix hosts that don't properly set the content type, such as

View file

@ -1,5 +1,5 @@
import { startAll } from "../plugins"; import { startAll } from "../plugins";
import { waitFor, filters } from './webpack'; import { waitFor, filters, findByProps } from './webpack';
import type Components from "discord-types/components"; import type Components from "discord-types/components";
import type Stores from "discord-types/stores"; import type Stores from "discord-types/stores";
import type Other from "discord-types/other"; import type Other from "discord-types/other";
@ -7,12 +7,9 @@ import type Other from "discord-types/other";
export let FluxDispatcher: Other.FluxDispatcher; export let FluxDispatcher: Other.FluxDispatcher;
export let React: typeof import("react"); export let React: typeof import("react");
export let UserStore: Stores.UserStore; export let UserStore: Stores.UserStore;
export let Forms: any; export let Forms: any = {};
export let Button: any; export let Button: any;
export let ButtonProps: any;
export let Switch: any; export let Switch: any;
export let Flex: Components.Flex;
export let Card: Components.Card;
export let Tooltip: Components.Tooltip; export let Tooltip: Components.Tooltip;
waitFor("useState", m => React = m); waitFor("useState", m => React = m);
@ -25,12 +22,16 @@ waitFor(["dispatch", "subscribe"], m => {
m.subscribe("CONNECTION_OPEN", cb); m.subscribe("CONNECTION_OPEN", cb);
}); });
waitFor(["getCurrentUser", "initialize"], m => UserStore = m); waitFor(["getCurrentUser", "initialize"], m => UserStore = m);
waitFor("FormSection", m => Forms = m); waitFor(["Hovers", "Looks", "Sizes"], m => Button = m);
waitFor(["ButtonLooks", "default"], m => { waitFor(filters.byCode("helpdeskArticleId"), m => Switch = m);
Button = m.default; waitFor(["Positions", "Colors"], m => Tooltip = m);
ButtonProps = m;
}); waitFor(m => m.Tags && filters.byCode("errorSeparator")(m), m => Forms.FormTitle = m);
waitFor(filters.byDisplayName("SwitchItem"), m => Switch = m.default); waitFor(m => m.Tags && filters.byCode("titleClassName", "sectionTitle")(m), m => Forms.FormSection = m);
waitFor(filters.byDisplayName("Flex"), m => Flex = m.default); waitFor(m => m.Types?.INPUT_PLACEHOLDER, m => Forms.FormText = m);
waitFor(filters.byDisplayName("Card"), m => Card = m.default);
waitFor(filters.byDisplayName("Tooltip"), m => Tooltip = m.default); waitFor(m => {
if (typeof m !== "function") return false;
const s = m.toString();
return s.length < 200 && s.includes("divider");
}, m => Forms.FormDivider = m);

View file

@ -10,7 +10,15 @@ export const filters = {
props.length === 1 props.length === 1
? m => m[props[0]] !== void 0 ? m => m[props[0]] !== void 0
: m => props.every(p => m[p] !== void 0), : m => props.every(p => m[p] !== void 0),
byDisplayName: (deezNuts: string): FilterFn => m => m.default?.displayName === deezNuts byDisplayName: (deezNuts: string): FilterFn => m => m.default?.displayName === deezNuts,
byCode: (...code: string[]): FilterFn => m => {
if (typeof m !== "function") return false;
const s = Function.prototype.toString.call(m);
for (const c of code) {
if (!s.includes(c)) return false;
}
return true;
}
}; };
export const subscriptions = new Map<FilterFn, CallbackFn>(); export const subscriptions = new Map<FilterFn, CallbackFn>();