diff options
| -rw-r--r-- | src/plugins/permissionsViewer/components/UserPermissions.tsx | 28 | ||||
| -rw-r--r-- | src/plugins/permissionsViewer/styles.css | 23 | ||||
| -rw-r--r-- | src/plugins/typingIndicator.tsx | 2 |
3 files changed, 46 insertions, 7 deletions
diff --git a/src/plugins/permissionsViewer/components/UserPermissions.tsx b/src/plugins/permissionsViewer/components/UserPermissions.tsx index acffa78..ab9bfea 100644 --- a/src/plugins/permissionsViewer/components/UserPermissions.tsx +++ b/src/plugins/permissionsViewer/components/UserPermissions.tsx @@ -23,7 +23,7 @@ import { filters, findBulk } from "@webpack"; import { i18n, PermissionsBits, Text, Tooltip, useMemo, UserStore, useState } from "@webpack/common"; import type { Guild, GuildMember } from "discord-types/general"; -import { settings } from ".."; +import { PermissionsSortOrder, settings } from ".."; import { cl, getPermissionString, getSortedRoles, sortUserRoles } from "../utils"; import openRolesAndUsersPermissionsModal, { PermissionType, type RoleOrUserPermission } from "./RolesAndUsersPermissions"; @@ -46,6 +46,7 @@ const Classes = proxyLazy(() => { }) 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 }: { guild: Guild; guildMember: GuildMember; }) { + const stns = settings.use(["permissionsSortOrder"]); const [viewPermissions, setViewPermissions] = useState(settings.store.defaultPermissionsDropdownState); const [rolePermissions, userPermissions] = useMemo(() => { @@ -91,7 +92,7 @@ function UserPermissionsComponent({ guild, guildMember }: { guild: Guild; guildM userPermissions.sort((a, b) => b.rolePosition - a.rolePosition); return [rolePermissions, userPermissions]; - }, []); + }, [stns.permissionsSortOrder]); const { root, role, roleRemoveButton, roleNameOverflow, roles, rolePill, rolePillBorder, roleCircle, roleName } = Classes; @@ -100,7 +101,28 @@ function UserPermissionsComponent({ guild, guildMember }: { guild: Guild; guildM <div className={cl("userperms-title-container")}> <Text className={cl("userperms-title")} variant="eyebrow">Permissions</Text> - <div> + <div className={cl("userperms-btns-container")}> + <Tooltip text={`Sorting by ${stns.permissionsSortOrder === PermissionsSortOrder.HighestRole ? "Highest Role" : "Lowest Role"}`}> + {tooltipProps => ( + <button + {...tooltipProps} + className={cl("userperms-sortorder-btn")} + onClick={() => { + stns.permissionsSortOrder = stns.permissionsSortOrder === PermissionsSortOrder.HighestRole ? PermissionsSortOrder.LowestRole : PermissionsSortOrder.HighestRole; + }} + > + <svg + width="20" + height="20" + viewBox="0 96 960 960" + transform={stns.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" /> + </svg> + </button> + )} + </Tooltip> + <Tooltip text="Role Details"> {tooltipProps => ( <button diff --git a/src/plugins/permissionsViewer/styles.css b/src/plugins/permissionsViewer/styles.css index a6b7cfe..1043491 100644 --- a/src/plugins/permissionsViewer/styles.css +++ b/src/plugins/permissionsViewer/styles.css @@ -3,21 +3,38 @@ .vc-permviewer-userperms-title-container { display: flex; justify-content: space-between; -} - -.vc-permviewer-userperms-title { + 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; + display: flex; + align-items: center; + justify-content: center; + width: 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 */ diff --git a/src/plugins/typingIndicator.tsx b/src/plugins/typingIndicator.tsx index bad95d2..2b4de82 100644 --- a/src/plugins/typingIndicator.tsx +++ b/src/plugins/typingIndicator.tsx @@ -89,7 +89,7 @@ function TypingIndicator({ channelId }: { channelId: string; }) { <Tooltip text={tooltipText!}> {({ onMouseLeave, onMouseEnter }) => ( <div - style={{ marginLeft: 6, zIndex: 0, cursor: "pointer" }} + style={{ marginLeft: 6, height: 16, display: "flex", alignItems: "center", zIndex: 0, cursor: "pointer" }} onMouseLeave={onMouseLeave} onMouseEnter={onMouseEnter} > |