profxadke
/
Vencord
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: switch in plugin settings (#140)

This commit is contained in:
KraXen72 2022-10-22 23:38:48 +02:00 committed by GitHub
parent a3b0556a9a
commit 934a89add0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 28 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
src/components/PluginSettings/index.tsx
View File

@ -25,7 +25,7 @@ import { ChangeList } from "../../utils/ChangeList";
import { classes, lazyWebpack } from "../../utils/misc";
import { Plugin } from "../../utils/types";
import { filters } from "../../webpack";
import { Alerts, Button, Forms, Margins, Parser, React, Text, TextInput, Toasts, Tooltip } from "../../webpack/common";
import { Alerts, Button, Forms, Margins, Parser, React, Switch, Text, TextInput, Toasts, Tooltip } from "../../webpack/common";
import ErrorBoundary from "../ErrorBoundary";
import { Flex } from "../Flex";
import PluginModal from "./PluginModal";
@ -34,6 +34,9 @@ import * as styles from "./styles";
const Select = lazyWebpack(filters.byCode("optionClassName", "popoutPosition", "autoFocus", "maxVisibleItems"));
const InputStyles = lazyWebpack(filters.byProps(["inputDefault", "inputWrapper"]));
const CogWheel = lazyWebpack(filters.byCode("18.564C15.797 19.099 14.932 19.498 14 19.738V22H10V19.738C9.069"));
const InfoIcon = lazyWebpack(filters.byCode("4.4408921e-16 C4.4771525,-1.77635684e-15 4.4408921e-16"));
function showErrorToast(message: string) {
Toasts.show({
message,
@ -79,23 +82,21 @@ function PluginCard({ plugin, disabled, onRestartNeeded, onMouseEnter, onMouseLe
}
return (
<Flex style={styles.PluginsGridItem} flexDirection="column" onClick={() => openModal()} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
<Text variant="text-md/bold">{plugin.name}</Text>
<Text variant="text-md/normal" style={{ height: 40, overflow: "hidden" }}>{plugin.description}</Text>
<Flex flexDirection="row-reverse" style={{ marginTop: "auto", width: "100%", justifyContent: "space-between" }}>
<Button
onClick={e => {
e.preventDefault();
e.stopPropagation();
toggleEnabled();
}}
disabled={disabled}
color={isEnabled() ? Button.Colors.RED : Button.Colors.GREEN}
>
{isEnabled() ? "Disable" : "Enable"}
</Button>
{plugin.options && <Forms.FormText style={{ cursor: "pointer", margin: "auto 0 auto 10px" }}>Click to configure</Forms.FormText>}
</Flex>
<Flex style={styles.PluginsGridItem} flexDirection="column" onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
<Switch
onChange={toggleEnabled}
disabled={disabled}
value={isEnabled()}
note={<Text variant="text-md/normal" style={{ height: 40, overflow: "hidden" }}>{plugin.description}</Text>}
hideBorder={true}
>
<Flex style={{ marginTop: "auto", width: "100%", height: "100%", alignItems: "center" }}>
<Text variant="text-md/bold" style={{ flexGrow: "1" }}>{plugin.name}</Text>
<button role="switch" onClick={() => openModal()} style={styles.SettingsIcon} className="button-12Fmur">
{plugin.options ? <CogWheel /> : <InfoIcon width="24" height="24" />}
</button>
</Flex>
</Switch>
</Flex>
);
}

10
src/components/PluginSettings/styles.ts
View File

@ -29,7 +29,7 @@ export const PluginsGridItem: React.CSSProperties = {
borderRadius: 3,
cursor: "pointer",
display: "block",
height: 150,
height: "min-content",
padding: 10,
width: "100%",
};
@ -40,3 +40,11 @@ export const FiltersBar: React.CSSProperties = {
gridTemplateColumns: "1fr 150px",
display: "grid"
};
export const SettingsIcon: React.CSSProperties = {
height: "24px",
width: "24px",
padding: "0",
background: "transparent",
marginRight: 8
};