PermissionsViewer: Fix user popout
This commit is contained in:
parent
44c8463496
commit
2e81b9aeba
|
@ -35,15 +35,17 @@ interface UserPermission {
|
||||||
|
|
||||||
type UserPermissions = Array<UserPermission>;
|
type UserPermissions = Array<UserPermission>;
|
||||||
|
|
||||||
const Classes = proxyLazyWebpack(() =>
|
const { RoleRootClasses, RoleClasses, RoleBorderClasses } = proxyLazyWebpack(() => {
|
||||||
Object.assign({}, ...findBulk(
|
const [RoleRootClasses, RoleClasses, RoleBorderClasses] = findBulk(
|
||||||
filters.byProps("roles", "rolePill", "rolePillBorder"),
|
filters.byProps("root", "showMoreButton", "collapseButton"),
|
||||||
filters.byProps("roleCircle", "dotBorderBase", "dotBorderColor"),
|
filters.byProps("role", "roleCircle", "roleName"),
|
||||||
filters.byProps("roleNameOverflow", "root", "roleName", "roleRemoveButton")
|
filters.byProps("roleCircle", "dot", "dotBorderColor")
|
||||||
))
|
) as Record<string, string>[];
|
||||||
) as Record<"roles" | "rolePill" | "rolePillBorder" | "desaturateUserColors" | "flex" | "alignCenter" | "justifyCenter" | "svg" | "background" | "dot" | "dotBorderColor" | "roleCircle" | "dotBorderBase" | "flex" | "alignCenter" | "justifyCenter" | "wrap" | "root" | "role" | "roleRemoveButton" | "roleDot" | "roleFlowerStar" | "roleRemoveIcon" | "roleRemoveIconFocused" | "roleVerifiedIcon" | "roleName" | "roleNameOverflow" | "actionButton" | "overflowButton" | "addButton" | "addButtonIcon" | "overflowRolesPopout" | "overflowRolesPopoutArrowWrapper" | "overflowRolesPopoutArrow" | "popoutBottom" | "popoutTop" | "overflowRolesPopoutHeader" | "overflowRolesPopoutHeaderIcon" | "overflowRolesPopoutHeaderText" | "roleIcon", string>;
|
|
||||||
|
|
||||||
function UserPermissionsComponent({ guild, guildMember, showBorder, forceOpen = false }: { guild: Guild; guildMember: GuildMember; showBorder: boolean; forceOpen?: boolean; }) {
|
return { RoleRootClasses, RoleClasses, RoleBorderClasses };
|
||||||
|
});
|
||||||
|
|
||||||
|
function UserPermissionsComponent({ guild, guildMember, forceOpen = false }: { guild: Guild; guildMember: GuildMember; forceOpen?: boolean; }) {
|
||||||
const stns = settings.use(["permissionsSortOrder"]);
|
const stns = settings.use(["permissionsSortOrder"]);
|
||||||
|
|
||||||
const [rolePermissions, userPermissions] = useMemo(() => {
|
const [rolePermissions, userPermissions] = useMemo(() => {
|
||||||
|
@ -91,8 +93,6 @@ function UserPermissionsComponent({ guild, guildMember, showBorder, forceOpen =
|
||||||
return [rolePermissions, userPermissions];
|
return [rolePermissions, userPermissions];
|
||||||
}, [stns.permissionsSortOrder]);
|
}, [stns.permissionsSortOrder]);
|
||||||
|
|
||||||
const { root, role, roleRemoveButton, roleNameOverflow, roles, rolePill, rolePillBorder, roleCircle, roleName } = Classes;
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ExpandableHeader
|
<ExpandableHeader
|
||||||
forceOpen={forceOpen}
|
forceOpen={forceOpen}
|
||||||
|
@ -130,18 +130,18 @@ function UserPermissionsComponent({ guild, guildMember, showBorder, forceOpen =
|
||||||
</Tooltip>)
|
</Tooltip>)
|
||||||
]}>
|
]}>
|
||||||
{userPermissions.length > 0 && (
|
{userPermissions.length > 0 && (
|
||||||
<div className={classes(root, roles)}>
|
<div className={classes(RoleRootClasses.root)}>
|
||||||
{userPermissions.map(({ permission, roleColor }) => (
|
{userPermissions.map(({ permission, roleColor }) => (
|
||||||
<div className={classes(role, rolePill, showBorder ? rolePillBorder : null)}>
|
<div className={classes(RoleClasses.role)}>
|
||||||
<div className={roleRemoveButton}>
|
<div className={RoleClasses.roleRemoveButton}>
|
||||||
<span
|
<span
|
||||||
className={roleCircle}
|
className={classes(RoleBorderClasses.roleCircle, RoleClasses.roleCircle)}
|
||||||
style={{ backgroundColor: roleColor }}
|
style={{ backgroundColor: roleColor }}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className={roleName}>
|
<div className={RoleClasses.roleName}>
|
||||||
<Text
|
<Text
|
||||||
className={roleNameOverflow}
|
className={RoleClasses.roleNameOverflow}
|
||||||
variant="text-xs/medium"
|
variant="text-xs/medium"
|
||||||
>
|
>
|
||||||
{permission}
|
{permission}
|
||||||
|
|
|
@ -184,7 +184,7 @@ export default definePlugin({
|
||||||
align="center"
|
align="center"
|
||||||
renderPopout={() => (
|
renderPopout={() => (
|
||||||
<Dialog className={PopoutClasses.container} style={{ width: "500px" }}>
|
<Dialog className={PopoutClasses.container} style={{ width: "500px" }}>
|
||||||
<UserPermissions guild={guild} guildMember={guildMember} showBorder forceOpen />
|
<UserPermissions guild={guild} guildMember={guildMember} forceOpen />
|
||||||
</Dialog>
|
</Dialog>
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
|
|
Loading…
Reference in a new issue