aboutsummaryrefslogtreecommitdiff
path: root/src/components/PluginSettings
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/PluginSettings')
-rw-r--r--src/components/PluginSettings/index.tsx86
-rw-r--r--src/components/PluginSettings/styles.css47
2 files changed, 78 insertions, 55 deletions
diff --git a/src/components/PluginSettings/index.tsx b/src/components/PluginSettings/index.tsx
index 3b283d0..58058b1 100644
--- a/src/components/PluginSettings/index.tsx
+++ b/src/components/PluginSettings/index.tsx
@@ -23,25 +23,25 @@ import { showNotice } from "@api/Notices";
import { useSettings } from "@api/settings";
import { classNameFactory } from "@api/Styles";
import ErrorBoundary from "@components/ErrorBoundary";
-import { ErrorCard } from "@components/ErrorCard";
import { Flex } from "@components/Flex";
import { handleComponentFailed } from "@components/handleComponentFailed";
import { Badge } from "@components/PluginSettings/components";
import PluginModal from "@components/PluginSettings/PluginModal";
+import { Switch } from "@components/Switch";
import { ChangeList } from "@utils/ChangeList";
import Logger from "@utils/Logger";
import { classes, LazyComponent, useAwaiter } from "@utils/misc";
import { openModalLazy } from "@utils/modal";
import { Plugin } from "@utils/types";
import { findByCode, findByPropsLazy } from "@webpack";
-import { Alerts, Button, Forms, Margins, Parser, React, Select, Switch, Text, TextInput, Toasts, Tooltip } from "@webpack/common";
+import { Alerts, Button, Card, Forms, Margins, Parser, React, Select, Text, TextInput, Toasts, Tooltip } from "@webpack/common";
import Plugins from "~plugins";
-const cl = classNameFactory("vc-plugins-");
-
import { startDependenciesRecursive, startPlugin, stopPlugin } from "../../plugins";
+
+const cl = classNameFactory("vc-plugins-");
const logger = new Logger("PluginSettings", "#a6d189");
const InputStyles = findByPropsLazy("inputDefault", "inputWrapper");
@@ -60,23 +60,27 @@ function showErrorToast(message: string) {
});
}
-interface ReloadRequiredCardProps extends React.HTMLProps<HTMLDivElement> {
- plugins: string[];
-}
-
-function ReloadRequiredCard({ plugins, ...props }: ReloadRequiredCardProps) {
- if (plugins.length === 0) return null;
-
- const pluginPrefix = plugins.length === 1 ? "The plugin" : "The following plugins require a reload to apply changes:";
- const pluginSuffix = plugins.length === 1 ? " requires a reload to apply changes." : ".";
-
+function ReloadRequiredCard({ required }: { required: boolean; }) {
return (
- <ErrorCard {...props} className={cl("reload-card")}>
- <span className={cl("dep-text")}>
- {pluginPrefix} <code>{plugins.join(", ")}</code>{pluginSuffix}
- </span>
- <Button look={Button.Looks.INVERTED} onClick={() => location.reload()}>Reload</Button>
- </ErrorCard>
+ <Card className={cl("info-card", { "restart-card": required })}>
+ {required ? (
+ <>
+ <Forms.FormTitle tag="h5">Restart required!</Forms.FormTitle>
+ <Forms.FormText className={cl("dep-text")}>
+ Restart now to apply new plugins and their settings
+ </Forms.FormText>
+ <Button color={Button.Colors.YELLOW} onClick={() => location.reload()}>
+ Restart
+ </Button>
+ </>
+ ) : (
+ <>
+ <Forms.FormTitle tag="h5">Plugin Management</Forms.FormTitle>
+ <Forms.FormText>Press the cog wheel or info icon to get more info on a plugin</Forms.FormText>
+ <Forms.FormText>Plugins with a cog wheel have settings you can modify!</Forms.FormText>
+ </>
+ )}
+ </Card>
);
}
@@ -147,26 +151,24 @@ function PluginCard({ plugin, disabled, onRestartNeeded, onMouseEnter, onMouseLe
}
return (
- <Flex className={cl("card")} flexDirection="column" onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
- <Switch
- onChange={toggleEnabled}
- disabled={disabled}
- value={isEnabled()}
- note={<Text className={cl("note")} variant="text-sm/normal">{plugin.description}</Text>}
- hideBorder={true}
- >
- <Flex className={cl("flex")}>
- <Text variant="text-md/bold" className={cl("name")}>
- {plugin.name}{isNew && <Badge text="NEW" color="#ED4245" />}
- </Text>
- <button role="switch" onClick={() => openModal()} className={classes("button-12Fmur", cl("info-button"))}>
- {plugin.options
- ? <CogWheel />
- : <InfoIcon width="24" height="24" />}
- </button>
- </Flex>
- </Switch>
- </Flex>
+ <Flex className={cl("card", { "card-disabled": disabled })} flexDirection="column" onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
+ <div className={cl("card-header")}>
+ <Text variant="text-md/bold" className={cl("name")}>
+ {plugin.name}{isNew && <Badge text="NEW" color="#ED4245" />}
+ </Text>
+ <button role="switch" onClick={() => openModal()} className={classes("button-12Fmur", cl("info-button"))}>
+ {plugin.options
+ ? <CogWheel />
+ : <InfoIcon width="24" height="24" />}
+ </button>
+ <Switch
+ checked={isEnabled()}
+ onChange={toggleEnabled}
+ disabled={disabled}
+ />
+ </div>
+ <Text className={cl("note")} variant="text-sm/normal">{plugin.description}</Text>
+ </Flex >
);
}
@@ -298,12 +300,12 @@ export default ErrorBoundary.wrap(function PluginSettings() {
return (
<Forms.FormSection>
+ <ReloadRequiredCard required={changes.hasChanges} />
+
<Forms.FormTitle tag="h5" className={classes(Margins.marginTop20, Margins.marginBottom8)}>
Filters
</Forms.FormTitle>
- <ReloadRequiredCard plugins={[...changes.getChanges()]} className={Margins.marginBottom20} />
-
<div className={cl("filter-controls")}>
<TextInput autoFocus value={searchValue.value} placeholder="Search for a plugin..." onChange={onSearch} className={Margins.marginBottom20} />
<div className={InputStyles.inputWrapper}>
diff --git a/src/components/PluginSettings/styles.css b/src/components/PluginSettings/styles.css
index fe8dc94..1626d7d 100644
--- a/src/components/PluginSettings/styles.css
+++ b/src/components/PluginSettings/styles.css
@@ -29,18 +29,32 @@
border-radius: 8px;
display: block;
height: 100%;
- padding: 10px;
+ padding: 12px;
width: 100%;
transition: 0.1s ease-out;
transition-property: box-shadow, transform, background, opacity;
}
+.vc-plugins-card-disabled {
+ opacity: 0.6;
+}
+
.vc-plugins-card:hover {
background-color: var(--background-tertiary);
transform: translateY(-1px);
box-shadow: var(--elevation-high);
}
+.vc-plugins-card-header {
+ margin-top: auto;
+ display: flex;
+ width: 100%;
+ justify-content: flex-end;
+ height: 1.5rem;
+ align-items: center;
+ gap: 8px;
+}
+
.vc-plugins-info-button {
height: 24px;
width: 24px;
@@ -92,23 +106,30 @@
cursor: "default";
}
-.vc-plugins-flex {
- margin-top: auto;
- width: 100%;
- height: 100%;
- align-items: center;
- gap: 8px;
-}
-
.vc-plugins-dep-name {
margin: 0 auto;
}
-.vc-plugins-reload-card {
+.vc-plugins-info-card {
padding: 1em;
- display: grid;
- grid-template-columns: 1fr auto;
- gap: 1em;
+ height: 8em;
+ display: flex;
+ flex-direction: column;
+}
+
+.vc-plugins-info-card div {
+ line-height: 32px;
+}
+
+.vc-plugins-restart-card {
+ padding: 1em;
+ background: var(--info-warning-background);
+ border: 1px solid var(--info-warning-foreground);
+ color: var(--info-warning-text);
+}
+
+.vc-plugins-restart-card button {
+ margin-top: 0.5em;
}
.vc-plugins-info-button svg:not(:hover):not(:focus) {
generated by cgit (git 2.46.0) at 2024-11-27 20:30:27 +0000