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

feat(base): add drop-edge indicator component for pragmatic-dnd

Browse Source
This commit is contained in:
Philipinho
2026-05-24 02:18:31 +01:00
parent 911bf53924
commit 218b5755a9
2 changed files with 48 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/client/src/features/base/components/grid/base-drop-edge-indicator.tsx
+10
View File
@@ -0,0 +1,10 @@
import type { Edge } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
import classes from "@/features/base/styles/grid.module.css";
type Props = {
edge: Edge;
};
export function BaseDropEdgeIndicator({ edge }: Props) {
return <div className={classes.dropEdgeLine} data-edge={edge} aria-hidden />;
}
apps/client/src/features/base/styles/grid.module.css
+38
View File
@@ -614,3 +614,41 @@
background: rgba(255, 255, 255, 0.08);
color: var(--mantine-color-white);
}
.dropEdgeLine {
position: absolute;
background: light-dark(
var(--mantine-color-blue-5),
var(--mantine-color-blue-4)
);
pointer-events: none;
z-index: 2;
}
.dropEdgeLine[data-edge="left"] {
top: 0;
bottom: 0;
left: 0;
width: 2px;
}
.dropEdgeLine[data-edge="right"] {
top: 0;
bottom: 0;
right: 0;
width: 2px;
}
.dropEdgeLine[data-edge="top"] {
left: 0;
right: 0;
top: 0;
height: 2px;
}
.dropEdgeLine[data-edge="bottom"] {
left: 0;
right: 0;
bottom: 0;
height: 2px;
}