PlatformIndicators: Fix layout reflows 2: Electric Boogaloo
This commit is contained in:
parent
d589d22a0b
commit
06cee75a56
1 changed files with 8 additions and 7 deletions
|
@ -22,12 +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, findStoreLazy } from "@webpack";
|
import { findByCodeLazy, findByPropsLazy, findLazy, 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 }: { color: string; tooltip: string; }) => (
|
||||||
|
@ -39,6 +42,7 @@ 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)}
|
||||||
>
|
>
|
||||||
<path d={path} />
|
<path d={path} />
|
||||||
</svg>
|
</svg>
|
||||||
|
@ -105,18 +109,15 @@ const PlatformIndicator = ({ user, inline = false, marginLeft = "4px" }: { user:
|
||||||
if (!icons.length) return null;
|
if (!icons.length) return null;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<span
|
||||||
className="vc-platform-indicator"
|
className="vc-platform-indicator"
|
||||||
style={{
|
style={{
|
||||||
marginLeft,
|
marginLeft,
|
||||||
gap: "4px",
|
gap: "4px"
|
||||||
display: inline ? "inline-flex" : "flex",
|
|
||||||
alignItems: "center",
|
|
||||||
translate: inline ? "0 3px 0" : undefined
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{icons}
|
{icons}
|
||||||
</div>
|
</span>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue