Fix Settings UI
This commit is contained in:
parent
6398dd25d2
commit
572bfcee6c
|
@ -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
17
src/components/Flex.tsx
Normal 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>
|
||||||
|
);
|
||||||
|
}
|
|
@ -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
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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);
|
|
@ -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>();
|
||||||
|
|
Loading…
Reference in a new issue