ShowConnections: improve look in simplified prof; fix tooltip overflow
This commit is contained in:
parent
4bf28f4634
commit
aaba22f577
|
@ -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) {
|
||||||
|
|
|
@ -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 })"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
|
@ -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: {
|
||||||
|
|
Loading…
Reference in a new issue