me/owo-vencord
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 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 ErrorBoundary from "@components/ErrorBoundary";
import { Devs } from "@utils/constants";
import { classes } from "@utils/misc";
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 { User } from "discord-types/general";
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") {
return ({ color, tooltip }: { color: string; tooltip: string; }) => (
return ({ color, tooltip, wantMargin }: { color: string; tooltip: string; wantMargin: boolean; }) => (
<Tooltip text={tooltip} >
{(tooltipProps: any) => (
<svg
@ -42,7 +39,12 @@ function Icon(path: string, viewBox = "0 0 24 24") {
width="20"
viewBox={viewBox}
fill={color}
className={classes(RoleIconClasses.roleIcon, RoleIconClasses.clickable, RoleIconClasses2.roleIcon)}
style={{
marginLeft: wantMargin ? 4 : 0,
verticalAlign: "top",
position: "relative",
top: 1,
}}
>
<path d={path} />
</svg>
@ -61,16 +63,16 @@ type Platform = keyof typeof Icons;
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 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 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.id === UserStore.getCurrentUser().id) {
@ -103,26 +105,21 @@ const PlatformIndicator = ({ user, inline = false, marginLeft = "4px" }: { user:
key={platform}
platform={platform as Platform}
status={status}
wantMargin={wantMargin}
/>
));
if (!icons.length) return null;
return (
<span
className="vc-platform-indicator"
style={{
marginLeft,
gap: "4px"
}}
>
<span className="vc-platform-indicator">
{icons}
</span>
);
};
const badge: ProfileBadge = {
component: p => <PlatformIndicator {...p} marginLeft="" />,
component: p => <PlatformIndicator {...p} wantMargin={false} />,
position: BadgePosition.START,
shouldShow: userInfo => !!Object.keys(getStatus(userInfo.user.id) ?? {}).length,
key: "indicator"
@ -147,7 +144,7 @@ const indicatorLocations = {
description: "Inside messages",
onEnable: () => addDecoration("platform-indicator", props =>
<ErrorBoundary noop>
<PlatformIndicator user={props.message?.author} inline />
<PlatformIndicator user={props.message?.author} />
</ErrorBoundary>
),
onDisable: () => removeDecoration("platform-indicator")