ShowConnections: Add verified & copy/link icons in tooltip (#1092)

This commit is contained in:
V 2023-05-10 23:13:47 +02:00 committed by GitHub
parent dfda9e7f84
commit 195f1a032f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 163 additions and 5 deletions

View file

@ -20,6 +20,8 @@ import "./styles.css";
import { definePluginSettings } from "@api/Settings";
import ErrorBoundary from "@components/ErrorBoundary";
import { Flex } from "@components/Flex";
import { CopyIcon, LinkIcon } from "@components/Icons";
import { Devs } from "@utils/constants";
import { copyWithToast } from "@utils/misc";
import { LazyComponent } from "@utils/react";
@ -28,6 +30,8 @@ import { findByCode, findByCodeLazy, findByPropsLazy, findStoreLazy } from "@web
import { Text, Tooltip } from "@webpack/common";
import { User } from "discord-types/general";
import { VerifiedIcon } from "./VerifiedIcon";
const Section = LazyComponent(() => findByCode("().lastSection"));
const UserProfileStore = findStoreLazy("UserProfileStore");
const ThemeStore = findStoreLazy("ThemeStore");
@ -97,7 +101,13 @@ function ConnectionsComponent({ id, theme }: { id: string, theme: string; }) {
>
Connections
</Text>
{connections.map(connection => <CompactConnectionComponent connection={connection} theme={theme} />)}
<Flex style={{
marginTop: "8px",
gap: getSpacingPx(settings.store.iconSpacing),
flexWrap: "wrap"
}}>
{connections.map(connection => <CompactConnectionComponent connection={connection} theme={theme} />)}
</Flex>
</Section>
);
}
@ -111,17 +121,23 @@ function CompactConnectionComponent({ connection, theme }: { connection: Connect
aria-label={connection.name}
src={theme === "light" ? platform.icon.lightSVG : platform.icon.darkSVG}
style={{
marginTop: getSpacingPx(settings.store.iconSpacing),
marginRight: getSpacingPx(settings.store.iconSpacing),
width: settings.store.iconSize,
height: settings.store.iconSize
}}
/>
);
const TooltipIcon = url ? LinkIcon : CopyIcon;
return (
<Tooltip
text={`${connection.name}${!connection.verified ? " (unverified)" : ""}`}
text={
<span className="vc-sc-tooltip">
{connection.name}
{connection.verified && <VerifiedIcon />}
<TooltipIcon height={16} width={16} />
</span>
}
key={connection.id}
>
{tooltipProps =>