diff --git a/src/zen/workspaces/ZenWorkspaces.mjs b/src/zen/workspaces/ZenWorkspaces.mjs index 2619f129a..c873d8761 100644 --- a/src/zen/workspaces/ZenWorkspaces.mjs +++ b/src/zen/workspaces/ZenWorkspaces.mjs @@ -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 { diff --git a/src/zen/workspaces/zen-workspaces.css b/src/zen/workspaces/zen-workspaces.css index af6d57541..94d9b4bf3 100644 --- a/src/zen/workspaces/zen-workspaces.css +++ b/src/zen/workspaces/zen-workspaces.css @@ -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; }