ShowConnections: improve look in simplified prof; fix tooltip overflow

This commit is contained in:
Vendicated 2024-06-09 03:44:52 +02:00
parent 4bf28f4634
commit aaba22f577
No known key found for this signature in database
GPG key ID: D66986BAF75ECF18
4 changed files with 45 additions and 25 deletions

View file

@ -60,6 +60,7 @@ export default definePlugin({
// FIXME: remove once change merged to stable // FIXME: remove once change merged to stable
{ {
find: "Messages.ACTIVITY_SETTINGS", find: "Messages.ACTIVITY_SETTINGS",
noWarn: true,
replacement: { replacement: {
get match() { get match() {
switch (Settings.plugins.Settings.settingsLocation) { switch (Settings.plugins.Settings.settingsLocation) {

View file

@ -74,15 +74,28 @@ interface ConnectionPlatform {
icon: { lightSVG: string, darkSVG: string; }; icon: { lightSVG: string, darkSVG: string; };
} }
const profilePopoutComponent = ErrorBoundary.wrap((props: { user: User, displayProfile, compactSpacing; }) => const profilePopoutComponent = ErrorBoundary.wrap(
<ConnectionsComponent id={props.user.id} theme={getProfileThemeProps(props).theme} compactSpacing={props.compactSpacing} /> (props: { user: User; displayProfile?: any; simplified?: boolean; }) => (
<ConnectionsComponent
{...props}
id={props.user.id}
theme={getProfileThemeProps(props).theme}
/>
),
{ noop: true }
); );
const profilePanelComponent = ErrorBoundary.wrap(({ id }: { id: string; }) => const profilePanelComponent = ErrorBoundary.wrap(
<ConnectionsComponent id={id} theme={ThemeStore.theme} /> (props: { id: string; simplified?: boolean; }) => (
<ConnectionsComponent
{...props}
theme={ThemeStore.theme}
/>
),
{ noop: true }
); );
function ConnectionsComponent({ id, theme, compactSpacing }: { id: string, theme: string, compactSpacing?: boolean; }) { function ConnectionsComponent({ id, theme, simplified }: { id: string, theme: string, simplified?: boolean; }) {
const profile = UserProfileStore.getUserProfile(id); const profile = UserProfileStore.getUserProfile(id);
if (!profile) if (!profile)
return null; return null;
@ -91,10 +104,21 @@ function ConnectionsComponent({ id, theme, compactSpacing }: { id: string, theme
if (!connections?.length) if (!connections?.length)
return null; return null;
const Container = compactSpacing ? "div" : Section; const connectionsContainer = (
<Flex style={{
marginTop: !simplified ? "8px" : undefined,
gap: getSpacingPx(settings.store.iconSpacing),
flexWrap: "wrap"
}}>
{connections.map(connection => <CompactConnectionComponent connection={connection} theme={theme} />)}
</Flex>
);
if (simplified)
return connectionsContainer;
return ( return (
<Container> <Section>
<Text <Text
tag="h2" tag="h2"
variant="eyebrow" variant="eyebrow"
@ -102,14 +126,8 @@ function ConnectionsComponent({ id, theme, compactSpacing }: { id: string, theme
> >
Connections Connections
</Text> </Text>
<Flex style={{ {connectionsContainer}
marginTop: "8px", </Section>
gap: getSpacingPx(settings.store.iconSpacing),
flexWrap: "wrap"
}}>
{connections.map(connection => <CompactConnectionComponent connection={connection} theme={theme} />)}
</Flex>
</Container>
); );
} }
@ -134,7 +152,7 @@ function CompactConnectionComponent({ connection, theme }: { connection: Connect
<Tooltip <Tooltip
text={ text={
<span className="vc-sc-tooltip"> <span className="vc-sc-tooltip">
{connection.name} <span className="vc-sc-connection-name">{connection.name}</span>
{connection.verified && <VerifiedIcon />} {connection.verified && <VerifiedIcon />}
<TooltipIcon height={16} width={16} /> <TooltipIcon height={16} width={16} />
</span> </span>
@ -180,7 +198,7 @@ export default definePlugin({
find: "{isUsingGuildBio:null!==(", find: "{isUsingGuildBio:null!==(",
replacement: { replacement: {
match: /,theme:\i\}\)(?=,.{0,150}setNote:)/, match: /,theme:\i\}\)(?=,.{0,150}setNote:)/,
replace: "$&,$self.profilePopoutComponent({ user: arguments[0].user, displayProfile: arguments[0].displayProfile, compactSpacing: false })" replace: "$&,$self.profilePopoutComponent({ user: arguments[0].user, displayProfile: arguments[0].displayProfile })"
} }
}, },
{ {
@ -195,7 +213,7 @@ export default definePlugin({
find: "autoFocusNote:!0})", find: "autoFocusNote:!0})",
replacement: { replacement: {
match: /{autoFocusNote:!1}\)}\)(?<=user:(\i),bio:null==(\i)\?.+?)/, match: /{autoFocusNote:!1}\)}\)(?<=user:(\i),bio:null==(\i)\?.+?)/,
replace: "$&,$self.profilePopoutComponent({ user: $1, displayProfile: $2, compactSpacing: true })" replace: "$&,$self.profilePopoutComponent({ user: $1, displayProfile: $2, simplified: true })"
} }
} }
], ],

View file

@ -9,3 +9,11 @@
gap: 0.25em; gap: 0.25em;
align-items: center; align-items: center;
} }
.vc-sc-connection-name {
word-break: break-all;
}
.vc-sc-tooltip svg {
min-width: 16px;
}

View file

@ -69,13 +69,6 @@ export default definePlugin({
} }
] ]
}, },
{
find: "=!1,canUsePremiumCustomization:",
replacement: {
match: /(\i)\.premiumType/,
replace: "$self.patchPremiumType($1)||$&"
}
},
{ {
find: "BannerLoadingStatus:function", find: "BannerLoadingStatus:function",
replacement: { replacement: {