Fascinated/Vencord
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

PlatformIndicators: Fix layout reflows - The trilogy

Browse Source
This commit is contained in:
Vendicated 2023-04-30 02:07:57 +02:00
parent 06cee75a56
commit 168d4b4cd9
No known key found for this signature in database
GPG Key ID: A1DC0CFB5615D905
1 changed files with 15 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/plugins/platformIndicators.tsx
View File

@ -22,18 +22,15 @@ import { addDecoration, removeDecoration } from "@api/MessageDecorations";
import { Settings } from "@api/settings"; import { Settings } from "@api/settings";
import ErrorBoundary from "@components/ErrorBoundary"; import ErrorBoundary from "@components/ErrorBoundary";
import { Devs } from "@utils/constants"; import { Devs } from "@utils/constants";
import { classes } from "@utils/misc";
import definePlugin, { OptionType } from "@utils/types"; import definePlugin, { OptionType } from "@utils/types";
import { findByCodeLazy, findByPropsLazy, findLazy, findStoreLazy } from "@webpack"; import { findByCodeLazy, findStoreLazy } from "@webpack";
import { PresenceStore, Tooltip, UserStore } from "@webpack/common"; import { PresenceStore, Tooltip, UserStore } from "@webpack/common";
import { User } from "discord-types/general"; import { User } from "discord-types/general";
const SessionsStore = findStoreLazy("SessionsStore"); const SessionsStore = findStoreLazy("SessionsStore");
const RoleIconClasses = findLazy(m => m.roleIcon && m.clickable && !m.alt);
const RoleIconClasses2 = findByPropsLazy("roleIcon", "alt");
function Icon(path: string, viewBox = "0 0 24 24") { function Icon(path: string, viewBox = "0 0 24 24") {
return ({ color, tooltip }: { color: string; tooltip: string; }) => ( return ({ color, tooltip, wantMargin }: { color: string; tooltip: string; wantMargin: boolean; }) => (
<Tooltip text={tooltip} > <Tooltip text={tooltip} >
{(tooltipProps: any) => ( {(tooltipProps: any) => (
<svg <svg
@ -42,7 +39,12 @@ function Icon(path: string, viewBox = "0 0 24 24") {
width="20" width="20"
viewBox={viewBox} viewBox={viewBox}
fill={color} fill={color}
className={classes(RoleIconClasses.roleIcon, RoleIconClasses.clickable, RoleIconClasses2.roleIcon)} style={{
marginLeft: wantMargin ? 4 : 0,
verticalAlign: "top",
position: "relative",
top: 1,
}}
> >
<path d={path} /> <path d={path} />
</svg> </svg>
@ -61,16 +63,16 @@ type Platform = keyof typeof Icons;
const getStatusColor = findByCodeLazy(".TWITCH", ".STREAMING", ".INVISIBLE"); const getStatusColor = findByCodeLazy(".TWITCH", ".STREAMING", ".INVISIBLE");
const PlatformIcon = ({ platform, status }: { platform: Platform, status: string; }) => { const PlatformIcon = ({ platform, status, wantMargin }: { platform: Platform, status: string; wantMargin: boolean; }) => {
const tooltip = platform[0].toUpperCase() + platform.slice(1); const tooltip = platform[0].toUpperCase() + platform.slice(1);
const Icon = Icons[platform] ?? Icons.desktop; const Icon = Icons[platform] ?? Icons.desktop;
return <Icon color={`var(--${getStatusColor(status)}`} tooltip={tooltip} />; return <Icon color={`var(--${getStatusColor(status)}`} tooltip={tooltip} wantMargin={wantMargin} />;
}; };
const getStatus = (id: string): Record<Platform, string> => PresenceStore.getState()?.clientStatuses?.[id]; const getStatus = (id: string): Record<Platform, string> => PresenceStore.getState()?.clientStatuses?.[id];
const PlatformIndicator = ({ user, inline = false, marginLeft = "4px" }: { user: User; inline?: boolean; marginLeft?: string; }) => { const PlatformIndicator = ({ user, wantMargin = true }: { user: User; wantMargin?: boolean; }) => {
if (!user || user.bot) return null; if (!user || user.bot) return null;
if (user.id === UserStore.getCurrentUser().id) { if (user.id === UserStore.getCurrentUser().id) {
@ -103,26 +105,21 @@ const PlatformIndicator = ({ user, inline = false, marginLeft = "4px" }: { user:
key={platform} key={platform}
platform={platform as Platform} platform={platform as Platform}
status={status} status={status}
wantMargin={wantMargin}
/> />
)); ));
if (!icons.length) return null; if (!icons.length) return null;
return ( return (
<span <span className="vc-platform-indicator">
className="vc-platform-indicator"
style={{
marginLeft,
gap: "4px"
}}
>
{icons} {icons}
</span> </span>
); );
}; };
const badge: ProfileBadge = { const badge: ProfileBadge = {
component: p => <PlatformIndicator {...p} marginLeft="" />, component: p => <PlatformIndicator {...p} wantMargin={false} />,
position: BadgePosition.START, position: BadgePosition.START,
shouldShow: userInfo => !!Object.keys(getStatus(userInfo.user.id) ?? {}).length, shouldShow: userInfo => !!Object.keys(getStatus(userInfo.user.id) ?? {}).length,
key: "indicator" key: "indicator"
@ -147,7 +144,7 @@ const indicatorLocations = {
description: "Inside messages", description: "Inside messages",
onEnable: () => addDecoration("platform-indicator", props => onEnable: () => addDecoration("platform-indicator", props =>
<ErrorBoundary noop> <ErrorBoundary noop>
<PlatformIndicator user={props.message?.author} inline /> <PlatformIndicator user={props.message?.author} />
</ErrorBoundary> </ErrorBoundary>
), ),
onDisable: () => removeDecoration("platform-indicator") onDisable: () => removeDecoration("platform-indicator")