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

83
src/components/Icons.tsx Normal file

@ -0,0 +1,83 @@
/*
* Vencord, a modification for Discord's desktop app
* Copyright (c) 2023 Vendicated and contributors
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
import { classes } from "@utils/misc";
import type { PropsWithChildren } from "react";
interface BaseIconProps extends IconProps {
viewBox: string;
}
interface IconProps {
className?: string;
height?: number;
width?: number;
}
function Icon({ height = 24, width = 24, className, children, viewBox }: PropsWithChildren<BaseIconProps>) {
return (
<svg
className={classes(className, "vc-icon")}
aria-hidden="true"
role="img"
width={width}
height={height}
viewBox={viewBox}
>
{children}
</svg>
);
}
/**
* Discord's link icon, as seen in the Message context menu "Copy Message Link" option
*/
export function LinkIcon({ height = 24, width = 24, className }: IconProps) {
return (
<Icon
height={height}
width={width}
className={classes(className, "vc-link-icon")}
viewBox="0 0 24 24"
>
<g fill="none" fill-rule="evenodd">
<path fill="currentColor" d="M10.59 13.41c.41.39.41 1.03 0 1.42-.39.39-1.03.39-1.42 0a5.003 5.003 0 0 1 0-7.07l3.54-3.54a5.003 5.003 0 0 1 7.07 0 5.003 5.003 0 0 1 0 7.07l-1.49 1.49c.01-.82-.12-1.64-.4-2.42l.47-.48a2.982 2.982 0 0 0 0-4.24 2.982 2.982 0 0 0-4.24 0l-3.53 3.53a2.982 2.982 0 0 0 0 4.24zm2.82-4.24c.39-.39 1.03-.39 1.42 0a5.003 5.003 0 0 1 0 7.07l-3.54 3.54a5.003 5.003 0 0 1-7.07 0 5.003 5.003 0 0 1 0-7.07l1.49-1.49c-.01.82.12 1.64.4 2.43l-.47.47a2.982 2.982 0 0 0 0 4.24 2.982 2.982 0 0 0 4.24 0l3.53-3.53a2.982 2.982 0 0 0 0-4.24.973.973 0 0 1 0-1.42z" />
<rect width={width} height={height} />
</g>
</Icon>
);
}
/**
* Discord's copy icon, as seen in the user popout right of the username when clicking
* your own username in the bottom left user panel
*/
export function CopyIcon(props: IconProps) {
return (
<Icon
{...props}
className={classes(props.className, "vc-copy-icon")}
viewBox="0 0 24 24"
>
<g fill="currentColor">
<path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1z" />
<path d="M15 5H8c-1.1 0-1.99.9-1.99 2L6 21c0 1.1.89 2 1.99 2H19c1.1 0 2-.9 2-2V11l-6-6zM8 21V7h6v5h5v9H8z" />
</g>
</Icon>
);
}

@ -0,0 +1,38 @@
/*
* Vencord, a modification for Discord's desktop app
* Copyright (c) 2023 Vendicated and contributors
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
import { LazyComponent } from "@utils/react";
import { findByCode, findLazy } from "@webpack";
import { i18n, useToken } from "@webpack/common";
const ColorMap = findLazy(m => m.colors?.INTERACTIVE_MUTED?.css);
const VerifiedIconComponent = LazyComponent(() => findByCode(".CONNECTIONS_ROLE_OFFICIAL_ICON_TOOLTIP"));
export function VerifiedIcon() {
const color = useToken(ColorMap.colors.INTERACTIVE_MUTED).hex();
const forcedIconColor = useToken(ColorMap.colors.INTERACTIVE_ACTIVE).hex();
return (
<VerifiedIconComponent
color={color}
forcedIconColor={forcedIconColor}
size={16}
tooltipText={i18n.Messages.CONNECTION_VERIFIED}
/>
);
}

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

@ -3,3 +3,9 @@
display: inline-block; display: inline-block;
cursor: pointer; cursor: pointer;
} }
.vc-sc-tooltip {
display: inline-flex;
gap: 0.25em;
align-items: center;
}

@ -43,6 +43,9 @@ export let ButtonLooks: t.ButtonLooks;
export let Popout: t.Popout; export let Popout: t.Popout;
export let Dialog: t.Dialog; export let Dialog: t.Dialog;
export let TabBar: any; export let TabBar: any;
// token lagger real
/** css colour resolver stuff, no clue what exactly this does, just copied usage from Discord */
export let useToken: t.useToken;
export const Timestamp = waitForComponent<t.Timestamp>("Timestamp", filters.byCode(".Messages.MESSAGE_EDITED_TIMESTAMP_A11Y_LABEL.format")); export const Timestamp = waitForComponent<t.Timestamp>("Timestamp", filters.byCode(".Messages.MESSAGE_EDITED_TIMESTAMP_A11Y_LABEL.format"));
export const Flex = waitForComponent<t.Flex>("Flex", ["Justify", "Align", "Wrap"]); export const Flex = waitForComponent<t.Flex>("Flex", ["Justify", "Align", "Wrap"]);
@ -50,6 +53,6 @@ export const Flex = waitForComponent<t.Flex>("Flex", ["Justify", "Align", "Wrap"
export const ButtonWrapperClasses = findByPropsLazy("buttonWrapper", "buttonContent") as Record<string, string>; export const ButtonWrapperClasses = findByPropsLazy("buttonWrapper", "buttonContent") as Record<string, string>;
waitFor("FormItem", m => { waitFor("FormItem", m => {
({ Card, Button, FormSwitch: Switch, Tooltip, TextInput, TextArea, Text, Select, SearchableSelect, Slider, ButtonLooks, TabBar, Popout, Dialog } = m); ({ useToken, Card, Button, FormSwitch: Switch, Tooltip, TextInput, TextArea, Text, Select, SearchableSelect, Slider, ButtonLooks, TabBar, Popout, Dialog } = m);
Forms = m; Forms = m;
}); });

@ -375,3 +375,15 @@ export type Popout = ComponentType<{
}; };
export type Dialog = ComponentType<PropsWithChildren<any>>; export type Dialog = ComponentType<PropsWithChildren<any>>;
type Resolve = (data: { theme: "light" | "dark", saturation: number; }) => {
hex(): string;
hsl(): string;
int(): number;
spring(): string;
};
export type useToken = (color: {
css: string;
resolve: Resolve;
}) => ReturnType<Resolve>;