mirrors/desktop
1
0
Fork 0
mirror of https://github.com/zen-browser/desktop.git synced 2026-04-19 22:10:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix workspace position dragging on Linux (Fixes #7542)

Browse Source 
This commit fixes an issue where dragging workspaces to change their position doesn't work on Linux platforms.

The main changes include:
1. Added Linux-specific drag and drop handling with a transparent drag image
2. Enhanced dragover event handling for better visual feedback on Linux
3. Improved CSS styles for drag and drop elements on Linux
4. Added clearer comments to explain the reorder mode behavior

The issue was that the drag and drop functionality wasn't working properly on Linux due to platform-specific behavior differences. This fix ensures that workspace reordering works consistently across all platforms.
This commit is contained in:
Marcus Bergo
2025-04-16 00:50:41 -03:00
committed by Mad Bergo
parent d94deed341
commit ed88aafdc1
2 changed files with 50 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/zen/workspaces/ZenWorkspaces.mjs
View File

@@ -1018,6 +1018,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
element.classList.add('identity-color-' + containerGroup.color);
element.setAttribute('data-usercontextid', containerGroup.userContextId);
}
// Set draggable attribute based on reorder mode
if (this.isReorderModeOn(browser)) {
element.setAttribute('draggable', 'true');
}
@@ -1028,6 +1029,15 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
this.draggedElement = element;
event.dataTransfer.effectAllowed = 'move';
event.dataTransfer.setData('text/plain', element.getAttribute('zen-workspace-id'));
// Create a transparent drag image for Linux
if (AppConstants.platform === 'linux') {
const dragImage = document.createElement('canvas');
dragImage.width = 1;
dragImage.height = 1;
event.dataTransfer.setDragImage(dragImage, 0, 0);
}
element.classList.add('dragging');
} else {
event.preventDefault();
@@ -1041,6 +1051,15 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
if (this.isReorderModeOn(browser) && this.draggedElement) {
event.preventDefault();
event.dataTransfer.dropEffect = 'move';
// Ensure the dragover effect is visible on Linux
if (AppConstants.platform === 'linux') {
const targetId = element.getAttribute('zen-workspace-id');
const draggedId = this.draggedElement.getAttribute('zen-workspace-id');
if (targetId !== draggedId) {
element.classList.add('dragover');
}
}
}
}.bind(browser.ZenWorkspaces)
);
@@ -1150,6 +1169,11 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
if (this.isReorderModeOn(browser) && this.draggedElement) {
event.preventDefault();
event.dataTransfer.dropEffect = 'move';
// Ensure the dragover effect is visible on Linux
if (AppConstants.platform === 'linux') {
element.classList.add('dragover');
}
}
}.bind(browser.ZenWorkspaces)
);
@@ -1259,6 +1283,8 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
// Update draggable attribute
const workspaceElements = document.querySelectorAll('.zen-workspace-button');
workspaceElements.forEach((elem) => {
// When reorder mode is toggled off, remove draggable attribute
// When reorder mode is toggled on, set draggable attribute
if (isActive) {
elem.removeAttribute('draggable');
} else {

24
src/zen/workspaces/zen-workspaces.css
View File

@@ -365,10 +365,34 @@
background-color: var(--toolbarbutton-icon-fill-attention);
}
/* Enhanced visual feedback for Linux platform */
@supports (-moz-gtk-csd-available) {
.zen-workspace-button.dragover {
background-color: color-mix(in srgb, var(--toolbarbutton-icon-fill-attention) 15%, transparent);
}
.zen-workspace-button.dragover::after {
height: 3px;
}
}
.zen-workspace-last-place-drop-target.dragover {
background-color: var(--toolbarbutton-icon-fill-attention);
}
/* Enhanced visual feedback for Linux platform */
@supports (-moz-gtk-csd-available) {
.zen-workspace-last-place-drop-target {
height: 6px;
margin: 4px 0;
}
.zen-workspace-last-place-drop-target.dragover {
background-color: var(--toolbarbutton-icon-fill-attention);
box-shadow: 0 0 4px var(--toolbarbutton-icon-fill-attention);
}
}
#PanelUI-zen-workspaces-reorder-mode[active='true'] {
color: var(--toolbarbutton-icon-fill-attention) !important;
}