ulysia/Vencord
1
0
Fork 0
Code Pull requests Activity

PermissionsViewer: Show RoleIcons & which role grants permission (#2824)

Browse source
This commit is contained in:
vishnyanetchereshnya 2024-09-02 06:42:52 +03:00 committed by GitHub
parent 74fd85bd3d
commit 0c71d6c3fa
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 227 additions and 187 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

104
src/plugins/permissionsViewer/components/RolesAndUsersPermissions.tsx
View file

@ -21,8 +21,10 @@ import { Flex } from "@components/Flex";
import { InfoIcon, OwnerCrownIcon } from "@components/Icons"; import { InfoIcon, OwnerCrownIcon } from "@components/Icons";
import { getUniqueUsername } from "@utils/discord"; import { getUniqueUsername } from "@utils/discord";
import { ModalCloseButton, ModalContent, ModalHeader, ModalProps, ModalRoot, ModalSize, openModal } from "@utils/modal"; import { ModalCloseButton, ModalContent, ModalHeader, ModalProps, ModalRoot, ModalSize, openModal } from "@utils/modal";
import { Clipboard, ContextMenuApi, FluxDispatcher, GuildMemberStore, GuildStore, i18n, Menu, PermissionsBits, Text, Tooltip, useEffect, UserStore, useState, useStateFromStores } from "@webpack/common"; import { findByCodeLazy } from "@webpack";
import type { Guild } from "discord-types/general"; import { Clipboard, ContextMenuApi, FluxDispatcher, GuildMemberStore, GuildStore, i18n, Menu, PermissionsBits, ScrollerThin, Text, Tooltip, useEffect, UserStore, useState, useStateFromStores } from "@webpack/common";
import { UnicodeEmoji } from "@webpack/types";
import type { Guild, Role, User } from "discord-types/general";
import { settings } from ".."; import { settings } from "..";
import { cl, getPermissionDescription, getPermissionString } from "../utils"; import { cl, getPermissionDescription, getPermissionString } from "../utils";
@ -42,15 +44,15 @@ export interface RoleOrUserPermission {
overwriteDeny?: bigint; overwriteDeny?: bigint;
} }
function openRolesAndUsersPermissionsModal(permissions: Array<RoleOrUserPermission>, guild: Guild, header: string) { type GetRoleIconData = (role: Role, size: number) => { customIconSrc?: string; unicodeEmoji?: UnicodeEmoji; };
return openModal(modalProps => ( const getRoleIconData: GetRoleIconData = findByCodeLazy("convertSurrogateToName", "customIconSrc", "unicodeEmoji");
<RolesAndUsersPermissions
modalProps={modalProps} function getRoleIconSrc(role: Role) {
permissions={permissions} const icon = getRoleIconData(role, 20);
guild={guild} if (!icon) return;
header={header}
/> const { customIconSrc, unicodeEmoji } = icon;
)); return customIconSrc ?? unicodeEmoji?.url;
} }
function RolesAndUsersPermissionsComponent({ permissions, guild, modalProps, header }: { permissions: Array<RoleOrUserPermission>; guild: Guild; modalProps: ModalProps; header: string; }) { function RolesAndUsersPermissionsComponent({ permissions, guild, modalProps, header }: { permissions: Array<RoleOrUserPermission>; guild: Guild; modalProps: ModalProps; header: string; }) {
@ -86,31 +88,34 @@ function RolesAndUsersPermissionsComponent({ permissions, guild, modalProps, hea
size={ModalSize.LARGE} size={ModalSize.LARGE}
> >
<ModalHeader> <ModalHeader>
<Text className={cl("perms-title")} variant="heading-lg/semibold">{header} permissions:</Text> <Text className={cl("modal-title")} variant="heading-lg/semibold">{header} permissions:</Text>
<ModalCloseButton onClick={modalProps.onClose} /> <ModalCloseButton onClick={modalProps.onClose} />
</ModalHeader> </ModalHeader>
<ModalContent> <ModalContent className={cl("modal-content")}>
{!selectedItem && ( {!selectedItem && (
<div className={cl("perms-no-perms")}> <div className={cl("modal-no-perms")}>
<Text variant="heading-lg/normal">No permissions to display!</Text> <Text variant="heading-lg/normal">No permissions to display!</Text>
</div> </div>
)} )}
{selectedItem && ( {selectedItem && (
<div className={cl("perms-container")}> <div className={cl("modal-container")}>
<div className={cl("perms-list")}> <ScrollerThin className={cl("modal-list")} orientation="auto">
{permissions.map((permission, index) => { {permissions.map((permission, index) => {
const user = UserStore.getUser(permission.id ?? ""); const user: User | undefined = UserStore.getUser(permission.id ?? "");
const role = roles[permission.id ?? ""]; const role: Role | undefined = roles[permission.id ?? ""];
const roleIconSrc = role != null ? getRoleIconSrc(role) : undefined;
return ( return (
<button <div
className={cl("perms-list-item-btn")} className={cl("modal-list-item-btn")}
onClick={() => selectItem(index)} onClick={() => selectItem(index)}
role="button"
tabIndex={0}
> >
<div <div
className={cl("perms-list-item", { "perms-list-item-active": selectedItemIndex === index })} className={cl("modal-list-item", { "modal-list-item-active": selectedItemIndex === index })}
onContextMenu={e => { onContextMenu={e => {
if (permission.type === PermissionType.Role) if (permission.type === PermissionType.Role)
ContextMenuApi.openContextMenu(e, () => ( ContextMenuApi.openContextMenu(e, () => (
@ -124,7 +129,6 @@ function RolesAndUsersPermissionsComponent({ permissions, guild, modalProps, hea
ContextMenuApi.openContextMenu(e, () => ( ContextMenuApi.openContextMenu(e, () => (
<UserContextMenu <UserContextMenu
userId={permission.id!} userId={permission.id!}
onClose={modalProps.onClose}
/> />
)); ));
} }
@ -132,13 +136,19 @@ function RolesAndUsersPermissionsComponent({ permissions, guild, modalProps, hea
> >
{(permission.type === PermissionType.Role || permission.type === PermissionType.Owner) && ( {(permission.type === PermissionType.Role || permission.type === PermissionType.Owner) && (
<span <span
className={cl("perms-role-circle")} className={cl("modal-role-circle")}
style={{ backgroundColor: role?.colorString ?? "var(--primary-300)" }} style={{ backgroundColor: role?.colorString ?? "var(--primary-300)" }}
/> />
)} )}
{permission.type === PermissionType.User && user !== undefined && ( {permission.type === PermissionType.Role && roleIconSrc != null && (
<img <img
className={cl("perms-user-img")} className={cl("modal-role-image")}
src={roleIconSrc}
/>
)}
{permission.type === PermissionType.User && user != null && (
<img
className={cl("modal-user-img")}
src={user.getAvatarURL(void 0, void 0, false)} src={user.getAvatarURL(void 0, void 0, false)}
/> />
)} )}
@ -147,28 +157,25 @@ function RolesAndUsersPermissionsComponent({ permissions, guild, modalProps, hea
permission.type === PermissionType.Role permission.type === PermissionType.Role
? role?.name ?? "Unknown Role" ? role?.name ?? "Unknown Role"
: permission.type === PermissionType.User : permission.type === PermissionType.User
? (user && getUniqueUsername(user)) ?? "Unknown User" ? (user != null && getUniqueUsername(user)) ?? "Unknown User"
: ( : (
<Flex style={{ gap: "0.2em", justifyItems: "center" }}> <Flex style={{ gap: "0.2em", justifyItems: "center" }}>
@owner @owner
<OwnerCrownIcon <OwnerCrownIcon height={18} width={18} aria-hidden="true" />
height={18}
width={18}
aria-hidden="true"
/>
</Flex> </Flex>
) )
} }
</Text> </Text>
</div> </div>
</button> </div>
); );
})} })}
</div> </ScrollerThin>
<div className={cl("perms-perms")}> <div className={cl("modal-divider")} />
<ScrollerThin className={cl("modal-perms")} orientation="auto">
{Object.entries(PermissionsBits).map(([permissionName, bit]) => ( {Object.entries(PermissionsBits).map(([permissionName, bit]) => (
<div className={cl("perms-perms-item")}> <div className={cl("modal-perms-item")}>
<div className={cl("perms-perms-item-icon")}> <div className={cl("modal-perms-item-icon")}>
{(() => { {(() => {
const { permissions, overwriteAllow, overwriteDeny } = selectedItem; const { permissions, overwriteAllow, overwriteDeny } = selectedItem;
@ -192,7 +199,7 @@ function RolesAndUsersPermissionsComponent({ permissions, guild, modalProps, hea
</Tooltip> </Tooltip>
</div> </div>
))} ))}
</div> </ScrollerThin>
</div> </div>
)} )}
</ModalContent> </ModalContent>
@ -208,7 +215,7 @@ function RoleContextMenu({ guild, roleId, onClose }: { guild: Guild; roleId: str
aria-label="Role Options" aria-label="Role Options"
> >
<Menu.MenuItem <Menu.MenuItem
id="vc-copy-role-id" id={cl("copy-role-id")}
label={i18n.Messages.COPY_ID_ROLE} label={i18n.Messages.COPY_ID_ROLE}
action={() => { action={() => {
Clipboard.copy(roleId); Clipboard.copy(roleId);
@ -217,14 +224,13 @@ function RoleContextMenu({ guild, roleId, onClose }: { guild: Guild; roleId: str
{(settings.store as any).unsafeViewAsRole && ( {(settings.store as any).unsafeViewAsRole && (
<Menu.MenuItem <Menu.MenuItem
id="vc-pw-view-as-role" id={cl("view-as-role")}
label={i18n.Messages.VIEW_AS_ROLE} label={i18n.Messages.VIEW_AS_ROLE}
action={() => { action={() => {
const role = GuildStore.getRole(guild.id, roleId); const role = GuildStore.getRole(guild.id, roleId);
if (!role) return; if (!role) return;
onClose(); onClose();
FluxDispatcher.dispatch({ FluxDispatcher.dispatch({
type: "IMPERSONATE_UPDATE", type: "IMPERSONATE_UPDATE",
guildId: guild.id, guildId: guild.id,
@ -235,15 +241,14 @@ function RoleContextMenu({ guild, roleId, onClose }: { guild: Guild; roleId: str
} }
} }
}); });
} }}
}
/> />
)} )}
</Menu.Menu> </Menu.Menu>
); );
} }
function UserContextMenu({ userId, onClose }: { userId: string; onClose: () => void; }) { function UserContextMenu({ userId }: { userId: string; }) {
return ( return (
<Menu.Menu <Menu.Menu
navId={cl("user-context-menu")} navId={cl("user-context-menu")}
@ -251,7 +256,7 @@ function UserContextMenu({ userId, onClose }: { userId: string; onClose: () => v
aria-label="User Options" aria-label="User Options"
> >
<Menu.MenuItem <Menu.MenuItem
id="vc-copy-user-id" id={cl("copy-user-id")}
label={i18n.Messages.COPY_ID_USER} label={i18n.Messages.COPY_ID_USER}
action={() => { action={() => {
Clipboard.copy(userId); Clipboard.copy(userId);
@ -263,4 +268,13 @@ function UserContextMenu({ userId, onClose }: { userId: string; onClose: () => v
const RolesAndUsersPermissions = ErrorBoundary.wrap(RolesAndUsersPermissionsComponent); const RolesAndUsersPermissions = ErrorBoundary.wrap(RolesAndUsersPermissionsComponent);
export default openRolesAndUsersPermissionsModal; export default function openRolesAndUsersPermissionsModal(permissions: Array<RoleOrUserPermission>, guild: Guild, header: string) {
return openModal(modalProps => (
<RolesAndUsersPermissions
modalProps={modalProps}
permissions={permissions}
guild={guild}
header={header}
/>
));
}

90
src/plugins/permissionsViewer/components/UserPermissions.tsx
View file

@ -29,6 +29,7 @@ import openRolesAndUsersPermissionsModal, { PermissionType, type RoleOrUserPermi
interface UserPermission { interface UserPermission {
permission: string; permission: string;
roleName: string;
roleColor: string; roleColor: string;
rolePosition: number; rolePosition: number;
} }
@ -45,8 +46,48 @@ const { RoleRootClasses, RoleClasses, RoleBorderClasses } = proxyLazyWebpack(()
return { RoleRootClasses, RoleClasses, RoleBorderClasses }; return { RoleRootClasses, RoleClasses, RoleBorderClasses };
}); });
interface FakeRoleProps extends React.HTMLAttributes<HTMLDivElement> {
text: string;
color: string;
}
function FakeRole({ text, color, ...props }: FakeRoleProps) {
return (
<div {...props} className={classes(RoleClasses.role)}>
<div className={RoleClasses.roleRemoveButton}>
<span
className={classes(RoleBorderClasses.roleCircle, RoleClasses.roleCircle)}
style={{ backgroundColor: color }}
/>
</div>
<div className={RoleClasses.roleName}>
<Text
className={RoleClasses.roleNameOverflow}
variant="text-xs/medium"
>
{text}
</Text>
</div>
</div>
);
}
interface GrantedByTooltipProps {
roleName: string;
roleColor: string;
}
function GrantedByTooltip({ roleName, roleColor }: GrantedByTooltipProps) {
return (
<>
<Text variant="text-sm/medium">Granted By</Text>
<FakeRole text={roleName} color={roleColor} />
</>
);
}
function UserPermissionsComponent({ guild, guildMember, forceOpen = false }: { guild: Guild; guildMember: GuildMember; forceOpen?: boolean; }) { function UserPermissionsComponent({ guild, guildMember, forceOpen = false }: { guild: Guild; guildMember: GuildMember; forceOpen?: boolean; }) {
const stns = settings.use(["permissionsSortOrder"]); const { permissionsSortOrder } = settings.use(["permissionsSortOrder"]);
const [rolePermissions, userPermissions] = useMemo(() => { const [rolePermissions, userPermissions] = useMemo(() => {
const userPermissions: UserPermissions = []; const userPermissions: UserPermissions = [];
@ -67,6 +108,7 @@ function UserPermissionsComponent({ guild, guildMember, forceOpen = false }: { g
const OWNER = i18n.Messages.GUILD_OWNER || "Server Owner"; const OWNER = i18n.Messages.GUILD_OWNER || "Server Owner";
userPermissions.push({ userPermissions.push({
permission: OWNER, permission: OWNER,
roleName: "Owner",
roleColor: "var(--primary-300)", roleColor: "var(--primary-300)",
rolePosition: Infinity rolePosition: Infinity
}); });
@ -75,10 +117,11 @@ function UserPermissionsComponent({ guild, guildMember, forceOpen = false }: { g
sortUserRoles(userRoles); sortUserRoles(userRoles);
for (const [permission, bit] of Object.entries(PermissionsBits)) { for (const [permission, bit] of Object.entries(PermissionsBits)) {
for (const { permissions, colorString, position } of userRoles) { for (const { permissions, colorString, position, name } of userRoles) {
if ((permissions & bit) === bit) { if ((permissions & bit) === bit) {
userPermissions.push({ userPermissions.push({
permission: getPermissionString(permission), permission: getPermissionString(permission),
roleName: name,
roleColor: colorString || "var(--primary-300)", roleColor: colorString || "var(--primary-300)",
rolePosition: position rolePosition: position
}); });
@ -91,7 +134,7 @@ function UserPermissionsComponent({ guild, guildMember, forceOpen = false }: { g
userPermissions.sort((a, b) => b.rolePosition - a.rolePosition); userPermissions.sort((a, b) => b.rolePosition - a.rolePosition);
return [rolePermissions, userPermissions]; return [rolePermissions, userPermissions];
}, [stns.permissionsSortOrder]); }, [permissionsSortOrder]);
return ( return (
<ExpandableHeader <ExpandableHeader
@ -108,46 +151,41 @@ function UserPermissionsComponent({ guild, guildMember, forceOpen = false }: { g
onDropDownClick={state => settings.store.defaultPermissionsDropdownState = !state} onDropDownClick={state => settings.store.defaultPermissionsDropdownState = !state}
defaultState={settings.store.defaultPermissionsDropdownState} defaultState={settings.store.defaultPermissionsDropdownState}
buttons={[ buttons={[
(<Tooltip text={`Sorting by ${stns.permissionsSortOrder === PermissionsSortOrder.HighestRole ? "Highest Role" : "Lowest Role"}`}> <Tooltip text={`Sorting by ${permissionsSortOrder === PermissionsSortOrder.HighestRole ? "Highest Role" : "Lowest Role"}`}>
{tooltipProps => ( {tooltipProps => (
<button <div
{...tooltipProps} {...tooltipProps}
className={cl("userperms-sortorder-btn")} className={cl("user-sortorder-btn")}
role="button"
tabIndex={0}
onClick={() => { onClick={() => {
stns.permissionsSortOrder = stns.permissionsSortOrder === PermissionsSortOrder.HighestRole ? PermissionsSortOrder.LowestRole : PermissionsSortOrder.HighestRole; settings.store.permissionsSortOrder = permissionsSortOrder === PermissionsSortOrder.HighestRole ? PermissionsSortOrder.LowestRole : PermissionsSortOrder.HighestRole;
}} }}
> >
<svg <svg
width="20" width="20"
height="20" height="20"
viewBox="0 96 960 960" viewBox="0 96 960 960"
transform={stns.permissionsSortOrder === PermissionsSortOrder.HighestRole ? "scale(1 1)" : "scale(1 -1)"} transform={permissionsSortOrder === PermissionsSortOrder.HighestRole ? "scale(1 1)" : "scale(1 -1)"}
> >
<path fill="var(--text-normal)" d="M440 896V409L216 633l-56-57 320-320 320 320-56 57-224-224v487h-80Z" /> <path fill="var(--text-normal)" d="M440 896V409L216 633l-56-57 320-320 320 320-56 57-224-224v487h-80Z" />
</svg> </svg>
</button> </div>
)} )}
</Tooltip>) </Tooltip>
]}> ]}>
{userPermissions.length > 0 && ( {userPermissions.length > 0 && (
<div className={classes(RoleRootClasses.root)}> <div className={classes(RoleRootClasses.root)}>
{userPermissions.map(({ permission, roleColor }) => ( {userPermissions.map(({ permission, roleColor, roleName }) => (
<div className={classes(RoleClasses.role)}> <Tooltip
<div className={RoleClasses.roleRemoveButton}> text={<GrantedByTooltip roleName={roleName} roleColor={roleColor} />}
<span tooltipClassName={cl("granted-by-container")}
className={classes(RoleBorderClasses.roleCircle, RoleClasses.roleCircle)} tooltipContentClassName={cl("granted-by-content")}
style={{ backgroundColor: roleColor }}
/>
</div>
<div className={RoleClasses.roleName}>
<Text
className={RoleClasses.roleNameOverflow}
variant="text-xs/medium"
> >
{permission} {tooltipProps => (
</Text> <FakeRole {...tooltipProps} text={permission} color={roleColor} />
</div> )}
</div> </Tooltip>
))} ))}
</div> </div>
)} )}

89
src/plugins/permissionsViewer/index.tsx
View file

@ -26,7 +26,7 @@ import { Devs } from "@utils/constants";
import { classes } from "@utils/misc"; import { classes } from "@utils/misc";
import definePlugin, { OptionType } from "@utils/types"; import definePlugin, { OptionType } from "@utils/types";
import { findByPropsLazy } from "@webpack"; import { findByPropsLazy } from "@webpack";
import { Button, ChannelStore, Dialog, GuildMemberStore, GuildStore, Menu, PermissionsBits, Popout, TooltipContainer, UserStore } from "@webpack/common"; import { Button, ChannelStore, Dialog, GuildMemberStore, GuildStore, match, Menu, PermissionsBits, Popout, TooltipContainer, UserStore } from "@webpack/common";
import type { Guild, GuildMember } from "discord-types/general"; import type { Guild, GuildMember } from "discord-types/general";
import openRolesAndUsersPermissionsModal, { PermissionType, RoleOrUserPermission } from "./components/RolesAndUsersPermissions"; import openRolesAndUsersPermissionsModal, { PermissionType, RoleOrUserPermission } from "./components/RolesAndUsersPermissions";
@ -54,12 +54,12 @@ export const settings = definePluginSettings({
options: [ options: [
{ label: "Highest Role", value: PermissionsSortOrder.HighestRole, default: true }, { label: "Highest Role", value: PermissionsSortOrder.HighestRole, default: true },
{ label: "Lowest Role", value: PermissionsSortOrder.LowestRole } { label: "Lowest Role", value: PermissionsSortOrder.LowestRole }
], ]
}, },
defaultPermissionsDropdownState: { defaultPermissionsDropdownState: {
description: "Whether the permissions dropdown on user popouts should be open by default", description: "Whether the permissions dropdown on user popouts should be open by default",
type: OptionType.BOOLEAN, type: OptionType.BOOLEAN,
default: false, default: false
} }
}); });
@ -73,14 +73,11 @@ function MenuItem(guildId: string, id?: string, type?: MenuItemParentType) {
action={() => { action={() => {
const guild = GuildStore.getGuild(guildId); const guild = GuildStore.getGuild(guildId);
let permissions: RoleOrUserPermission[]; const { permissions, header }: { permissions: RoleOrUserPermission[], header: string; } = match(type)
let header: string; .with(MenuItemParentType.User, () => {
switch (type) {
case MenuItemParentType.User: {
const member = GuildMemberStore.getMember(guildId, id!); const member = GuildMemberStore.getMember(guildId, id!);
permissions = getSortedRoles(guild, member) const permissions: RoleOrUserPermission[] = getSortedRoles(guild, member)
.map(role => ({ .map(role => ({
type: PermissionType.Role, type: PermissionType.Role,
...role ...role
@ -93,37 +90,37 @@ function MenuItem(guildId: string, id?: string, type?: MenuItemParentType) {
}); });
} }
header = member.nick ?? UserStore.getUser(member.userId).username; return {
permissions,
break; header: member.nick ?? UserStore.getUser(member.userId).username
} };
})
case MenuItemParentType.Channel: { .with(MenuItemParentType.Channel, () => {
const channel = ChannelStore.getChannel(id!); const channel = ChannelStore.getChannel(id!);
permissions = sortPermissionOverwrites(Object.values(channel.permissionOverwrites).map(({ id, allow, deny, type }) => ({ const permissions = sortPermissionOverwrites(Object.values(channel.permissionOverwrites).map(({ id, allow, deny, type }) => ({
type: type as PermissionType, type: type as PermissionType,
id, id,
overwriteAllow: allow, overwriteAllow: allow,
overwriteDeny: deny overwriteDeny: deny
})), guildId); })), guildId);
header = channel.name; return {
permissions,
break; header: channel.name
} };
})
default: { .otherwise(() => {
permissions = Object.values(GuildStore.getRoles(guild.id)).map(role => ({ const permissions = Object.values(GuildStore.getRoles(guild.id)).map(role => ({
type: PermissionType.Role, type: PermissionType.Role,
...role ...role
})); }));
header = guild.name; return {
permissions,
break; header: guild.name
} };
} });
openRolesAndUsersPermissionsModal(permissions, guild, header); openRolesAndUsersPermissionsModal(permissions, guild, header);
}} }}
@ -133,32 +130,34 @@ function MenuItem(guildId: string, id?: string, type?: MenuItemParentType) {
function makeContextMenuPatch(childId: string | string[], type?: MenuItemParentType): NavContextMenuPatchCallback { function makeContextMenuPatch(childId: string | string[], type?: MenuItemParentType): NavContextMenuPatchCallback {
return (children, props) => { return (children, props) => {
if (!props) return; if (
if ((type === MenuItemParentType.User && !props.user) || (type === MenuItemParentType.Guild && !props.guild) || (type === MenuItemParentType.Channel && (!props.channel || !props.guild))) !props ||
(type === MenuItemParentType.User && !props.user) ||
(type === MenuItemParentType.Guild && !props.guild) ||
(type === MenuItemParentType.Channel && (!props.channel || !props.guild))
) {
return; return;
}
const group = findGroupChildrenByChildId(childId, children); const group = findGroupChildrenByChildId(childId, children);
const item = (() => { const item = match(type)
switch (type) { .with(MenuItemParentType.User, () => MenuItem(props.guildId, props.user.id, type))
case MenuItemParentType.User: .with(MenuItemParentType.Channel, () => MenuItem(props.guild.id, props.channel.id, type))
return MenuItem(props.guildId, props.user.id, type); .with(MenuItemParentType.Guild, () => MenuItem(props.guild.id))
case MenuItemParentType.Channel: .otherwise(() => null);
return MenuItem(props.guild.id, props.channel.id, type);
case MenuItemParentType.Guild:
return MenuItem(props.guild.id);
default:
return null;
}
})();
if (item == null) return; if (item == null) return;
if (group) if (group) {
group.push(item); return group.push(item);
else if (childId === "roles" && props.guildId) }
// "roles" may not be present due to the member not having any roles. In that case, add it above "Copy ID" // "roles" may not be present due to the member not having any roles. In that case, add it above "Copy ID"
if (childId === "roles" && props.guildId) {
children.splice(-1, 0, <Menu.MenuGroup>{item}</Menu.MenuGroup>); children.splice(-1, 0, <Menu.MenuGroup>{item}</Menu.MenuGroup>);
}
}; };
} }

123
src/plugins/permissionsViewer/styles.css
View file

@ -1,20 +1,6 @@
/* User Permissions Component */ /* User Permissions Component */
.vc-permviewer-userperms-title-container { .vc-permviewer-user-sortorder-btn {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 10px;
margin-bottom: 6px;
}
.vc-permviewer-userperms-btns-container {
display: flex;
align-items: center;
}
.vc-permviewer-userperms-sortorder-btn {
all: unset;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
align-items: center; align-items: center;
@ -23,27 +9,17 @@
height: 24px; height: 24px;
} }
.vc-permviewer-userperms-permdetails-btn {
all: unset;
cursor: pointer;
display: flex;
align-items: center;
}
.vc-permviewer-userperms-toggleperms-btn {
all: unset;
cursor: pointer;
display: flex;
align-items: center;
}
/* RolesAndUsersPermissions Component */ /* RolesAndUsersPermissions Component */
.vc-permviewer-perms-title { .vc-permviewer-modal-content {
padding: 16px 4px 16px 16px;
}
.vc-permviewer-modal-title {
flex-grow: 1; flex-grow: 1;
} }
.vc-permviewer-perms-no-perms { .vc-permviewer-modal-no-perms {
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; display: flex;
@ -52,101 +28,103 @@
text-align: center; text-align: center;
} }
.vc-permviewer-perms-container { .vc-permviewer-modal-container {
display: grid; width: 100%;
grid-template-columns: 1fr 2fr; height: 100%;
grid-template-areas: "list permissions"; display: flex;
padding: 16px 0; gap: 8px;
} }
.vc-permviewer-perms-list { .vc-permviewer-modal-list {
grid-area: list;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 2px; gap: 2px;
border-right: 2px solid var(--background-modifier-active); padding-right: 8px;
width: 200px;
} }
.vc-permviewer-perms-list-item-btn { .vc-permviewer-modal-list-item-btn {
all: unset;
cursor: pointer; cursor: pointer;
} }
.vc-permviewer-perms-list-item { .vc-permviewer-modal-list-item {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 8px 5px; gap: 8px;
cursor: pointer; padding: 8px;
width: 230px;
border-radius: 5px; border-radius: 5px;
} }
.vc-permviewer-perms-list-item:hover { .vc-permviewer-modal-list-item:hover {
background-color: var(--background-modifier-hover); background-color: var(--background-modifier-hover);
} }
.vc-permviewer-perms-list-item-active { .vc-permviewer-modal-list-item-active {
background-color: var(--background-modifier-selected); background-color: var(--background-modifier-selected);
} }
.vc-permviewer-perms-list-item > div { .vc-permviewer-modal-list-item > div {
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
} }
.vc-permviewer-perms-role-circle { .vc-permviewer-modal-role-circle {
border-radius: 50%; border-radius: 50%;
width: 12px; width: 12px;
height: 12px; height: 12px;
margin-left: 3px;
margin-right: 11px;
flex-shrink: 0; flex-shrink: 0;
} }
.vc-permviewer-perms-user-img { .vc-permviewer-modal-role-image {
width: 20px;
height: 20px;
object-fit: contain;
}
.vc-permviewer-modal-user-img {
border-radius: 50%; border-radius: 50%;
width: 20px; width: 20px;
height: 20px; height: 20px;
margin-right: 6px;
} }
.vc-permviewer-perms-perms { .vc-permviewer-modal-divider {
grid-area: permissions; width: 2px;
background-color: var(--background-modifier-active);
}
.vc-permviewer-modal-perms {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin-left: 5px; padding-right: 8px;
} }
.vc-permviewer-perms-perms-item { .vc-permviewer-modal-perms-item {
position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
padding: 10px; gap: 5px;
padding: 10px 2px 10px 10px;
border-bottom: 2px solid var(--background-modifier-active); border-bottom: 2px solid var(--background-modifier-active);
} }
.vc-permviewer-perms-perms-item:last-child { .vc-permviewer-modal-perms-item:last-child {
border: 0; border: 0;
} }
.vc-permviewer-perms-perms-item-icon { .vc-permviewer-modal-perms-item-icon {
border: 1px solid var(--background-modifier-selected); border: 1px solid var(--background-modifier-selected);
width: 24px; width: 24px;
height: 24px; height: 24px;
margin-right: 5px;
} }
.vc-permviewer-perms-perms-item .vc-info-icon { .vc-permviewer-modal-perms-item .vc-info-icon {
color: var(--interactive-muted); color: var(--interactive-muted);
margin-left: auto;
cursor: pointer; cursor: pointer;
position: absolute;
right: 0;
scale: 0.9;
transition: color ease-in 0.1s; transition: color ease-in 0.1s;
} }
.vc-permviewer-perms-perms-item .vc-info-icon:hover { .vc-permviewer-modal-perms-item .vc-info-icon:hover {
color: var(--interactive-active); color: var(--interactive-active);
} }
@ -167,3 +145,14 @@
background: rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-6)); background: rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-6));
border-color: var(--profile-body-border-color) border-color: var(--profile-body-border-color)
} }
.vc-permviewer-granted-by-container {
max-width: 300px;
width: auto;
}
.vc-permviewer-granted-by-content {
display: flex;
align-items: center;
gap: 4px;
}

2
src/webpack/common/types/components.d.ts vendored
View file

@ -459,7 +459,7 @@ export type ScrollerThin = ComponentType<PropsWithChildren<{
style?: CSSProperties; style?: CSSProperties;
dir?: "ltr"; dir?: "ltr";
orientation?: "horizontal" | "vertical"; orientation?: "horizontal" | "vertical" | "auto";
paddingFix?: boolean; paddingFix?: boolean;
fade?: boolean; fade?: boolean;