ShowConnections: improve look in simplified prof; fix tooltip overflow
This commit is contained in:
parent
4bf28f4634
commit
aaba22f577
4 changed files with 45 additions and 25 deletions
|
@ -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) {
|
||||
|
|
|
@ -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 })"
|
||||
}
|
||||
}
|
||||
],
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -69,13 +69,6 @@ export default definePlugin({
|
|||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
find: "=!1,canUsePremiumCustomization:",
|
||||
replacement: {
|
||||
match: /(\i)\.premiumType/,
|
||||
replace: "$self.patchPremiumType($1)||$&"
|
||||
}
|
||||
},
|
||||
{
|
||||
find: "BannerLoadingStatus:function",
|
||||
replacement: {
|
||||
|
|
Loading…
Reference in a new issue