PermissionsViewer: Fix user popout

This commit is contained in:
Nuckyz 2024-08-22 20:29:39 -03:00
parent 44c8463496
commit 2e81b9aeba
No known key found for this signature in database
GPG key ID: 440BF8296E1C4AD9
2 changed files with 17 additions and 17 deletions

View file

@ -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}

View file

@ -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>
)} )}
> >