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
{
find: "Messages.ACTIVITY_SETTINGS",
noWarn: true,
replacement: {
get match() {
switch (Settings.plugins.Settings.settingsLocation) {

View file

@ -74,15 +74,28 @@ interface ConnectionPlatform {
icon: { lightSVG: string, darkSVG: string; };
}
const profilePopoutComponent = ErrorBoundary.wrap((props: { user: User, displayProfile, compactSpacing; }) =>
<ConnectionsComponent id={props.user.id} theme={getProfileThemeProps(props).theme} compactSpacing={props.compactSpacing} />
const profilePopoutComponent = ErrorBoundary.wrap(
(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; }) =>
<ConnectionsComponent id={id} theme={ThemeStore.theme} />
const profilePanelComponent = ErrorBoundary.wrap(
(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);
if (!profile)
return null;
@ -91,10 +104,21 @@ function ConnectionsComponent({ id, theme, compactSpacing }: { id: string, theme
if (!connections?.length)
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 (
<Container>
<Section>
<Text
tag="h2"
variant="eyebrow"
@ -102,14 +126,8 @@ function ConnectionsComponent({ id, theme, compactSpacing }: { id: string, theme
>
Connections
</Text>
<Flex style={{
marginTop: "8px",
gap: getSpacingPx(settings.store.iconSpacing),
flexWrap: "wrap"
}}>
{connections.map(connection => <CompactConnectionComponent connection={connection} theme={theme} />)}
</Flex>
</Container>
{connectionsContainer}
</Section>
);
}
@ -134,7 +152,7 @@ function CompactConnectionComponent({ connection, theme }: { connection: Connect
<Tooltip
text={
<span className="vc-sc-tooltip">
{connection.name}
<span className="vc-sc-connection-name">{connection.name}</span>
{connection.verified && <VerifiedIcon />}
<TooltipIcon height={16} width={16} />
</span>
@ -180,7 +198,7 @@ export default definePlugin({
find: "{isUsingGuildBio:null!==(",
replacement: {
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})",
replacement: {
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;
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",
replacement: {