(PluginModal) minor tweaks (#563)
* fix(Settings): add section header for Equicord Settings * minor modal tweaks * lint * shrink size * hard cap card size --------- Co-authored-by: thororen1234 <78185467+thororen1234@users.noreply.github.com>
This commit is contained in:
prism
GitHub
parent
9242f55693
commit
c8887b881d
5 changed files with 75 additions and 43 deletions
|
|
@ -9,4 +9,4 @@
|
|||
.vc-settings-modal-links {
|
||||
display: flex;
|
||||
gap: 0.2em;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,38 @@
|
|||
.vc-plugin-modal-info {
|
||||
align-items: center;
|
||||
.vc-plugin-modal-header {
|
||||
align-items: flex-start;
|
||||
position: relative;
|
||||
padding: 16px 16px 0 24px;
|
||||
}
|
||||
|
||||
.vc-plugin-modal-header-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.vc-plugin-modal-header-trailing {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.vc-plugin-modal-title {
|
||||
color: var(--text-strong);
|
||||
padding-right: 32px;
|
||||
}
|
||||
|
||||
.vc-plugin-modal-description {
|
||||
flex-grow: 1;
|
||||
}
|
||||
color: var(--text-subtle);
|
||||
padding-right: 60px;
|
||||
}
|
||||
|
||||
.vc-plugin-modal-links {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@ import { classes, isObjectEmpty } from "@utils/misc";
|
|||
import { ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalProps, ModalRoot, ModalSize, openModal } from "@utils/modal";
|
||||
import { OptionType, Plugin } from "@utils/types";
|
||||
import { User } from "@vencord/discord-types";
|
||||
import { findByPropsLazy } from "@webpack";
|
||||
import { findByPropsLazy, findComponentByCodeLazy } from "@webpack";
|
||||
import { Clickable, FluxDispatcher, React, Toasts, Tooltip, useEffect, UserStore, UserSummaryItem, UserUtils, useState } from "@webpack/common";
|
||||
import { Constructor } from "type-fest";
|
||||
|
||||
|
|
@ -47,6 +47,7 @@ import { GithubButton, WebsiteButton } from "./LinkIconButton";
|
|||
const cl = classNameFactory("vc-plugin-modal-");
|
||||
|
||||
const AvatarStyles = findByPropsLazy("moreUsers", "emptyUser", "avatarContainer", "clickableAvatar");
|
||||
const CloseButton = findComponentByCodeLazy("CLOSE_BUTTON_LABEL");
|
||||
const UserRecord: Constructor<Partial<User>> = proxyLazy(() => UserStore.getCurrentUser().constructor) as any;
|
||||
|
||||
interface PluginModalProps extends ModalProps {
|
||||
|
|
@ -158,29 +159,26 @@ export default function PluginModal({ plugin, onRestartNeeded, onClose, transiti
|
|||
|
||||
return (
|
||||
<ModalRoot transitionState={transitionState} size={ModalSize.MEDIUM}>
|
||||
<ModalHeader separator={false} className={Margins.bottom8}>
|
||||
<BaseText size="xl" weight="bold" style={{ flexGrow: 1 }}>{plugin.name}</BaseText>
|
||||
<ModalCloseButton onClick={onClose} />
|
||||
<ModalHeader separator={false} className={cl("header")}>
|
||||
<div className={cl("header-content")}>
|
||||
<BaseText size="lg" weight="semibold" className={cl("title")}>{plugin.name}</BaseText>
|
||||
<BaseText size="sm" className={cl("description")}>{plugin.description}</BaseText>
|
||||
{!!plugin.settingsAboutComponent && (
|
||||
<div className={Margins.top8}>
|
||||
<ErrorBoundary message="An error occurred while rendering this plugin's custom Info Component">
|
||||
<plugin.settingsAboutComponent />
|
||||
</ErrorBoundary>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className={cl("header-trailing")}>
|
||||
<CloseButton onClick={onClose} />
|
||||
</div>
|
||||
</ModalHeader>
|
||||
|
||||
<ModalContent className={Margins.bottom16}>
|
||||
<section>
|
||||
<Flex className={cl("info")}>
|
||||
<Paragraph className={cl("description")}>{plugin.description}</Paragraph>
|
||||
{!pluginMeta.userPlugin && (
|
||||
<div className="vc-settings-modal-links">
|
||||
<WebsiteButton
|
||||
text="View more info"
|
||||
href={isEquicordPlugin ? `https://equicord.org/plugins/${plugin.name}` : `https://vencord.dev/plugins/${plugin.name}`}
|
||||
/>
|
||||
<GithubButton
|
||||
text="View source code"
|
||||
href={`https://github.com/${gitRemote}/tree/main/${pluginMeta.folderName}`}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</Flex>
|
||||
<BaseText size="lg" weight="semibold" className={classes(Margins.top8, Margins.bottom8)}>Authors</BaseText>
|
||||
<BaseText size="lg" weight="semibold" color="text-strong" className={Margins.bottom8}>Authors</BaseText>
|
||||
<div style={{ width: "fit-content" }}>
|
||||
<ErrorBoundary noop>
|
||||
<UserSummaryItem
|
||||
|
|
@ -207,25 +205,15 @@ export default function PluginModal({ plugin, onRestartNeeded, onClose, transiti
|
|||
</div>
|
||||
</section>
|
||||
|
||||
{!!plugin.settingsAboutComponent && (
|
||||
<div className={Margins.top16}>
|
||||
<section>
|
||||
<ErrorBoundary message="An error occurred while rendering this plugin's custom Info Component">
|
||||
<plugin.settingsAboutComponent />
|
||||
</ErrorBoundary>
|
||||
</section>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<section>
|
||||
<BaseText size="lg" weight="semibold" className={classes(Margins.top16, Margins.bottom8)}>Settings</BaseText>
|
||||
<BaseText size="lg" weight="semibold" color="text-strong" className={classes(Margins.top16, Margins.bottom8)}>Settings</BaseText>
|
||||
{renderSettings()}
|
||||
</section>
|
||||
</ModalContent>
|
||||
{
|
||||
hasSettings && <ModalFooter>
|
||||
{hasSettings && (
|
||||
<ModalFooter>
|
||||
<Flex flexDirection="column" style={{ width: "100%" }}>
|
||||
<Flex style={{ justifyContent: "space-between" }}>
|
||||
<Flex style={{ justifyContent: "space-between", alignItems: "center" }}>
|
||||
<Tooltip text="Reset to default settings" shouldShow={!isObjectEmpty(pluginSettings)}>
|
||||
{({ onMouseEnter, onMouseLeave }) => (
|
||||
<Button
|
||||
|
|
@ -240,10 +228,22 @@ export default function PluginModal({ plugin, onRestartNeeded, onClose, transiti
|
|||
</Button>
|
||||
)}
|
||||
</Tooltip>
|
||||
{!pluginMeta.userPlugin && (
|
||||
<div className={cl("links")}>
|
||||
<WebsiteButton
|
||||
text="View more info"
|
||||
href={isEquicordPlugin ? `https://equicord.org/plugins/${plugin.name}` : `https://vencord.dev/plugins/${plugin.name}`}
|
||||
/>
|
||||
<GithubButton
|
||||
text="View source code"
|
||||
href={`https://github.com/${gitRemote}/tree/main/${pluginMeta.folderName}`}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</Flex>
|
||||
</Flex>
|
||||
</ModalFooter>
|
||||
}
|
||||
)}
|
||||
</ModalRoot >
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -26,10 +26,10 @@
|
|||
color: var(--text-strong);
|
||||
}
|
||||
|
||||
.vc-plugins-setting-description {
|
||||
.vc-plugins-setting-inline .vc-plugins-setting-description {
|
||||
color: var(--text-subtle);
|
||||
}
|
||||
|
||||
.vc-plugins-setting-error {
|
||||
color: var(--text-feedback-critical, #FF5C5C);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
.vc-plugins-management-cards.vc-plugins-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: 600px;
|
||||
}
|
||||
|
||||
.vc-plugins-management-cards .vc-addon-card {
|
||||
|
|
@ -14,4 +15,4 @@
|
|||
.vc-plugins-management-cards .vc-addon-title {
|
||||
position: static;
|
||||
overflow: visible;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue