sinvo/docmost
1
0
Fork 0
mirror of https://github.com/docmost/docmost.git synced 2026-05-20 00:14:10 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix permission list scroll

Browse Source
This commit is contained in:
Philipinho
2026-01-19 19:17:56 +00:00
parent 884948da35
commit 6063b0ba3f
4 changed files with 59 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/client/src/ee/page-permission/components/page-permission-item.tsx
+46 -50
View File
@@ -1,4 +1,4 @@
import { Group, Menu, Text, UnstyledButton } from "@mantine/core"; import { Menu, Text, UnstyledButton, Group } from "@mantine/core";
import { IconChevronDown, IconCheck } from "@tabler/icons-react"; import { IconChevronDown, IconCheck } from "@tabler/icons-react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { useAtomValue } from "jotai"; import { useAtomValue } from "jotai";
@@ -43,65 +43,61 @@ export function PagePermissionItem({
{member.type === "group" && <IconGroupCircle />} {member.type === "group" && <IconGroupCircle />}
<div className={classes.permissionItemDetails}> <div className={classes.permissionItemDetails}>
<Group gap={4}> <Text fz="sm" fw={500} truncate>
<Text fz="sm" fw={500} lineClamp={1}> {member.name}
{member.name} {isCurrentUser && <Text span c="dimmed"> ({t("You")})</Text>}
</Text> </Text>
{isCurrentUser && ( <Text fz="xs" c="dimmed" truncate>
<Text fz="sm" c="dimmed">
({t("You")})
</Text>
)}
</Group>
<Text fz="xs" c="dimmed" lineClamp={1}>
{member.type === "user" && member.email} {member.type === "user" && member.email}
{member.type === "group" && formatMemberCount(member.memberCount, t)} {member.type === "group" && formatMemberCount(member.memberCount, t)}
</Text> </Text>
</div> </div>
</div> </div>
{isCurrentUser || disabled ? ( <div className={classes.permissionItemRole}>
<Text size="sm" c="dimmed"> {isCurrentUser || disabled ? (
{t(roleLabel)} <Text size="sm" c="dimmed">
</Text> {t(roleLabel)}
) : ( </Text>
<Menu withArrow position="bottom-end"> ) : (
<Menu.Target> <Menu withArrow position="bottom-end">
<UnstyledButton> <Menu.Target>
<Group gap={4}> <UnstyledButton>
<Text size="sm">{t(roleLabel)}</Text> <Group gap={4}>
<IconChevronDown size={14} /> <Text size="sm">{t(roleLabel)}</Text>
</Group> <IconChevronDown size={14} />
</UnstyledButton> </Group>
</Menu.Target> </UnstyledButton>
</Menu.Target>
<Menu.Dropdown> <Menu.Dropdown>
{pagePermissionRoleData.map((role) => ( {pagePermissionRoleData.map((role) => (
<Menu.Item
key={role.value}
onClick={() => onRoleChange(member.id, member.type, role.value)}
rightSection={
role.value === member.role ? <IconCheck size={16} /> : null
}
>
<div>
<Text size="sm">{t(role.label)}</Text>
<Text size="xs" c="dimmed">
{t(role.description)}
</Text>
</div>
</Menu.Item>
))}
<Menu.Divider />
<Menu.Item <Menu.Item
key={role.value} color="red"
onClick={() => onRoleChange(member.id, member.type, role.value)} onClick={() => onRemove(member.id, member.type)}
rightSection={
role.value === member.role ? <IconCheck size={16} /> : null
}
> >
<div> {t("Remove access")}
<Text size="sm">{t(role.label)}</Text>
<Text size="xs" c="dimmed">
{t(role.description)}
</Text>
</div>
</Menu.Item> </Menu.Item>
))} </Menu.Dropdown>
<Menu.Divider /> </Menu>
<Menu.Item )}
color="red" </div>
onClick={() => onRemove(member.id, member.type)}
>
{t("Remove access")}
</Menu.Item>
</Menu.Dropdown>
</Menu>
)}
</div> </div>
); );
} }
apps/client/src/ee/page-permission/components/page-permission-list.tsx
+2 -2
View File
@@ -163,7 +163,7 @@ export function PagePermissionList({
</Text> </Text>
</Group> </Group>
<ScrollArea.Autosize mah={250}> <ScrollArea mah={250}>
{sortedMembers.map((member) => ( {sortedMembers.map((member) => (
<PagePermissionItem <PagePermissionItem
key={`${member.type}-${member.id}`} key={`${member.type}-${member.id}`}
@@ -173,7 +173,7 @@ export function PagePermissionList({
disabled={!canManage} disabled={!canManage}
/> />
))} ))}
</ScrollArea.Autosize> </ScrollArea>
</> </>
); );
} }
apps/client/src/ee/page-permission/components/page-permission-tab.tsx
+2 -2
View File
@@ -26,8 +26,8 @@ import {
useUnrestrictPageMutation, useUnrestrictPageMutation,
} from "@/ee/page-permission/queries/page-permission-query"; } from "@/ee/page-permission/queries/page-permission-query";
import { pagePermissionRoleData } from "@/ee/page-permission/types/page-permission-role-data"; import { pagePermissionRoleData } from "@/ee/page-permission/types/page-permission-role-data";
import { GeneralAccessSelect } from "./general-access-select"; import { GeneralAccessSelect } from "@/ee/page-permission";
import { PagePermissionList } from "./page-permission-list"; import { PagePermissionList } from "@/ee/page-permission";
import classes from "./page-permission.module.css"; import classes from "./page-permission.module.css";
import { buildPageUrl } from "@/features/page/page.utils"; import { buildPageUrl } from "@/features/page/page.utils";
apps/client/src/ee/page-permission/components/page-permission.module.css
+9
View File
@@ -37,6 +37,7 @@
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: var(--mantine-spacing-xs) 0; padding: var(--mantine-spacing-xs) 0;
gap: var(--mantine-spacing-sm);
} }
.permissionItemInfo { .permissionItemInfo {
@@ -45,11 +46,19 @@
gap: var(--mantine-spacing-sm); gap: var(--mantine-spacing-sm);
flex: 1; flex: 1;
min-width: 0; min-width: 0;
overflow: hidden;
} }
.permissionItemDetails { .permissionItemDetails {
min-width: 0; min-width: 0;
flex: 1; flex: 1;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.permissionItemRole {
flex-shrink: 0;
} }
.avatarStack { .avatarStack {