ShowConnections: Add verified & copy/link icons in tooltip (#1092)
This commit is contained in:
parent
dfda9e7f84
commit
195f1a032f
83
src/components/Icons.tsx
Normal file
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>
|
||||
);
|
||||
}
|
38
src/plugins/showConnections/VerifiedIcon.tsx
Normal file
38
src/plugins/showConnections/VerifiedIcon.tsx
Normal file
|
@ -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 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 =>
|
||||
|
|
|
@ -3,3 +3,9 @@
|
|||
display: inline-block;
|
||||
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 Dialog: t.Dialog;
|
||||
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 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>;
|
||||
|
||||
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;
|
||||
});
|
||||
|
|
12
src/webpack/common/types/components.d.ts
vendored
12
src/webpack/common/types/components.d.ts
vendored
|
@ -375,3 +375,15 @@ export type Popout = ComponentType<{
|
|||
};
|
||||
|
||||
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>;
|
||||
|
|
Loading…
Reference in a new issue