ulysia/Vencord
1
0
Fork 0
Code Pull requests Activity

Unhardcode PluginSettings styles

Browse source
This commit is contained in:
Vendicated 2023-01-09 16:23:40 +01:00
parent 95df164e44
commit da2d317555
No known key found for this signature in database
GPG key ID: A1DC0CFB5615D905
2 changed files with 58 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

51
src/components/PluginSettings/index.tsx
View file

@ -20,7 +20,7 @@ import "./styles.css";
import * as DataStore from "@api/DataStore";
import { showNotice } from "@api/Notices";
import { Settings, useSettings } from "@api/settings";
import { useSettings } from "@api/settings";
import { classNameFactory } from "@api/Styles";
import ErrorBoundary from "@components/ErrorBoundary";
import { ErrorCard } from "@components/ErrorCard";
@ -71,8 +71,8 @@ function ReloadRequiredCard({ plugins, ...props }: ReloadRequiredCardProps) {
const pluginSuffix = plugins.length === 1 ? " requires a reload to apply changes." : ".";
return (
<ErrorCard {...props} style={{ padding: "1em", display: "grid", gridTemplateColumns: "1fr auto", gap: 8, ...props.style }}>
<span style={{ margin: "auto 0" }}>
<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>
@ -91,8 +91,6 @@ function PluginCard({ plugin, disabled, onRestartNeeded, onMouseEnter, onMouseLe
const settings = useSettings();
const pluginSettings = settings.plugins[plugin.name];
const [iconHover, setIconHover] = React.useState(false);
function isEnabled() {
return pluginSettings?.enabled || plugin.started;
}
@ -154,43 +152,20 @@ function PluginCard({ plugin, disabled, onRestartNeeded, onMouseEnter, onMouseLe
onChange={toggleEnabled}
disabled={disabled}
value={isEnabled()}
note={<Text variant="text-md/normal" style={{
height: 40,
overflow: "hidden",
// mfw css is so bad you need whatever this is to get multi line overflow ellipsis to work
textOverflow: "ellipsis",
display: "-webkit-box", // firefox users will cope (it doesn't support it)
WebkitLineClamp: 2,
lineClamp: 2,
WebkitBoxOrient: "vertical",
boxOrient: "vertical"
}}>
{plugin.description}
</Text>}
note={<Text className={cl("note")} variant="text-md/normal">{plugin.description}</Text>}
hideBorder={true}
>
<Flex style={{ marginTop: "auto", width: "100%", height: "100%", alignItems: "center", gap: "8px" }}>
<Flex className={cl("flex")}>
<Text
variant="text-md/bold"
style={{
display: "flex", width: "100%", alignItems: "center", flexGrow: "1", gap: "8px"
}}
className={cl("name")}
>
{plugin.name}{(isNew) && <Badge text="NEW" color="#ED4245" />}
{plugin.name}{isNew && <Badge text="NEW" color="#ED4245" />}
</Text>
<button role="switch" onClick={() => openModal()} className={classes("button-12Fmur", cl("info-button"))}>
{plugin.options
? <CogWheel
style={{ color: iconHover ? "" : "var(--text-muted)" }}
onMouseEnter={() => setIconHover(true)}
onMouseLeave={() => setIconHover(false)}
/>
: <InfoIcon
width="24" height="24"
style={{ color: iconHover ? "" : "var(--text-muted)" }}
onMouseEnter={() => setIconHover(true)}
onMouseLeave={() => setIconHover(false)}
/>}
? <CogWheel />
: <InfoIcon width="24" height="24" />}
</button>
</Flex>
</Switch>
@ -287,7 +262,7 @@ export default ErrorBoundary.wrap(function PluginSettings() {
for (const p of sortedPlugins) {
if (!pluginFilter(p)) continue;
const isRequired = p.required || depMap[p.name]?.some(d => Settings.plugins[d].enabled);
const isRequired = p.required || depMap[p.name]?.some(d => settings.plugins[d].enabled);
if (isRequired) {
const tooltipText = p.required
@ -330,10 +305,10 @@ export default ErrorBoundary.wrap(function PluginSettings() {
Filters
</Forms.FormTitle>
<ReloadRequiredCard plugins={[...changes.getChanges()]} style={{ marginBottom: 16 }} />
<ReloadRequiredCard plugins={[...changes.getChanges()]} className={Margins.marginBottom20} />
<div className={cl("filter-controls")}>
<TextInput autoFocus value={searchValue.value} placeholder="Search for a plugin..." onChange={onSearch} style={{ marginBottom: 24 }} />
<TextInput autoFocus value={searchValue.value} placeholder="Search for a plugin..." onChange={onSearch} className={Margins.marginBottom20} />
<div className={InputStyles.inputWrapper}>
<Select
className={InputStyles.inputDefault}
@ -373,7 +348,7 @@ function makeDependencyList(deps: string[]) {
return (
<React.Fragment>
<Forms.FormText>This plugin is required by:</Forms.FormText>
{deps.map((dep: string) => <Forms.FormText style={{ margin: "0 auto" }}>{dep}</Forms.FormText>)}
{deps.map((dep: string) => <Forms.FormText className={cl("dep-text")}>{dep}</Forms.FormText>)}
</React.Fragment>
);
}

48
src/components/PluginSettings/styles.css
View file

@ -27,14 +27,13 @@
background-color: var(--background-modifier-selected);
color: var(--interactive-active);
border-radius: 3px;
cursor: pointer;
display: block;
height: 100%;
padding: 10px;
width: 100%
width: 100%;
}
.vc-plugins-card .vc-plugins-info-button {
.vc-plugins-info-button {
height: 24px;
width: 24px;
padding: 0;
@ -58,4 +57,47 @@
font-size: 12px;
line-height: 16px;
color: var(--white-500);
text-align: center;
}
.vc-plugins-note {
height: 40px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
box-orient: vertical;
}
.vc-plugins-name {
display: flex;
width: 100%;
align-items: center;
flex-grow: 1;
gap: 8px;
}
.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 {
padding: 1em;
display: grid;
grid-template-columns: 1fr auto;
gap: 1em;
}
.vc-plugins-info-button svg:not(:hover):not(:focus) {
color: var(--text-muted);
}