ShowConnections: Add verified & copy/link icons in tooltip (#1092)
This commit is contained in:
parent
dfda9e7f84
commit
195f1a032f
6 changed files with 163 additions and 5 deletions
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 { 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>
|
||||||
{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>
|
</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;
|
||||||
});
|
});
|
||||||
|
|
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>>;
|
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