Mirrors/plane
1
0
Fork 0
mirror of https://github.com/makeplane/plane.git synced 2026-02-24 04:00:14 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix: drag handle button UI

Browse Source
This commit is contained in:
Aaryan Khandelwal
2026-01-22 15:49:48 +05:30
parent ad9be51eb4
commit e7c84e86a9
3 changed files with 27 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
packages/editor/src/core/extensions/table/plugins/drag-handles/column/drag-handle.ts
View File

@@ -53,8 +53,7 @@ export function createColumnDragHandle(config: ColumnDragHandleConfig): {
// Create button
const button = document.createElement("button");
button.type = "button";
button.className =
"py-1 bg-layer-1 border border-strong-1 rounded-sm outline-none transition-all duration-200 hover:bg-layer-1-hover";
button.className = "default-state";
// Create icon (Ellipsis lucide icon as SVG)
const icon = createSvgElement(DRAG_HANDLE_ICONS.ellipsis, "size-4 text-primary");
@@ -89,9 +88,8 @@ export function createColumnDragHandle(config: ColumnDragHandleConfig): {
isDropdownOpen = false;
// Reset button to closed state
button.className =
"px-1 bg-layer-1 border border-strong-1 rounded-sm outline-none transition-all duration-200 hover:bg-layer-1-hover";
// Reset button to default state
button.className = "default-state";
// Remove dropdown and backdrop
if (dropdownElement) {
@@ -126,15 +124,16 @@ export function createColumnDragHandle(config: ColumnDragHandleConfig): {
isDropdownOpen = true;
// Update button to open state
button.className =
"px-1 bg-layer-1 border border-strong-1 rounded-sm outline-none transition-all duration-200 opacity-100 bg-accent-primary border-accent-strong";
button.className = "open-state";
// Add active dropdown extension
editor.commands.addActiveDropbarExtension(CORE_EXTENSIONS.TABLE);
// Create backdrop
backdropElement = document.createElement("div");
backdropElement.style.cssText = "position: fixed; inset: 0; z-index: 99;";
backdropElement.style.position = "fixed";
backdropElement.style.inset = "0";
backdropElement.style.zIndex = "99";
backdropClickHandler = closeDropdown;
backdropElement.addEventListener("click", backdropClickHandler);
document.body.appendChild(backdropElement);
@@ -143,7 +142,8 @@ export function createColumnDragHandle(config: ColumnDragHandleConfig): {
dropdownElement = document.createElement("div");
dropdownElement.className =
"max-h-[90vh] w-[12rem] overflow-y-auto rounded-md border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 shadow-raised-200";
dropdownElement.style.cssText = "position: fixed; z-index: 100;";
dropdownElement.style.position = "fixed";
dropdownElement.style.zIndex = "100";
// Create and append dropdown content
const content = createDropdownContent(getDropdownOptions());

18
packages/editor/src/core/extensions/table/plugins/drag-handles/row/drag-handle.ts
View File

@@ -53,8 +53,7 @@ export function createRowDragHandle(config: RowDragHandleConfig): {
// Create button
const button = document.createElement("button");
button.type = "button";
button.className =
"py-1 bg-layer-1 border border-strong-1 rounded-sm outline-none transition-all duration-200 hover:bg-layer-1-hover";
button.className = "default-state";
// Create icon (Ellipsis lucide icon as SVG)
const icon = createSvgElement(DRAG_HANDLE_ICONS.ellipsis, "size-4 text-primary");
@@ -89,9 +88,8 @@ export function createRowDragHandle(config: RowDragHandleConfig): {
isDropdownOpen = false;
// Reset button to closed state
button.className =
"py-1 bg-layer-1 border border-strong-1 rounded-sm outline-none transition-all duration-200 hover:bg-layer-1-hover";
// Reset button to default state
button.className = "default-state";
// Remove dropdown and backdrop
if (dropdownElement) {
@@ -126,15 +124,16 @@ export function createRowDragHandle(config: RowDragHandleConfig): {
isDropdownOpen = true;
// Update button to open state
button.className =
"py-1 bg-layer-1 border border-strong-1 rounded-sm outline-none transition-all duration-200 opacity-100 bg-accent-primary border-accent-strong";
button.className = "open-state";
// Add active dropdown extension
editor.commands.addActiveDropbarExtension(CORE_EXTENSIONS.TABLE);
// Create backdrop
backdropElement = document.createElement("div");
backdropElement.style.cssText = "position: fixed; inset: 0; z-index: 99;";
backdropElement.style.position = "fixed";
backdropElement.style.inset = "0";
backdropElement.style.zIndex = "99";
backdropClickHandler = closeDropdown;
backdropElement.addEventListener("click", backdropClickHandler);
document.body.appendChild(backdropElement);
@@ -143,7 +142,8 @@ export function createRowDragHandle(config: RowDragHandleConfig): {
dropdownElement = document.createElement("div");
dropdownElement.className =
"max-h-[90vh] w-[12rem] overflow-y-auto rounded-md border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 shadow-raised-200";
dropdownElement.style.cssText = "position: fixed; z-index: 100;";
dropdownElement.style.position = "fixed";
dropdownElement.style.zIndex = "100";
// Create and append dropdown content
const content = createDropdownContent(getDropdownOptions());

10
packages/editor/src/styles/table.css
View File

@@ -57,7 +57,15 @@
.table-col-handle-container,
.table-row-handle-container {
& > button {
opacity: 0;
@apply py-1 opacity-0 rounded-sm outline-none;
&.default-state {
@apply bg-layer-1 hover:bg-layer-1-hover border border-strong-1;
}
&.open-state {
@apply opacity-100! bg-accent-primary border-accent-strong;
}
}
}