mirrors/desktop
1
0
Fork 0
mirror of https://github.com/zen-browser/desktop.git synced 2026-08-27 17:01:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refactor tab drag-and-drop functionality and enhance drag indicator styling

Browse Source
This commit is contained in:
mr. M
2025-01-31 23:02:13 +01:00
parent 00de303335
commit 7b41eb753d
4 changed files with 88 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css
View File

@@ -285,7 +285,6 @@
padding: 0 !important;
position: relative;
border-radius: var(--border-radius-medium);
& .tab-background {
overflow: hidden;
@@ -1072,21 +1071,32 @@
}
}
#vertical-pinned-tabs-container .tabbrowser-tab,
#tabbrowser-arrowscrollbox .tabbrowser-tab,
#zen-essentials-container .tabbrowser-tab {
transition: box-shadow 0.2s ease-in-out;
}
/* Vertical tabs reordering indicators */
#vertical-pinned-tabs-container .tabbrowser-tab.drag-over-before,
#tabbrowser-arrowscrollbox .tabbrowser-tab.drag-over-before {
box-shadow: 0 3px 6px -2px var(--toolbarbutton-active-background, rgba(0, 0, 255, 0.2));
}
#zen-drag-indicator {
--zen-drag-indicator-height: 2px;
--zen-drag-indicator-bg: color-mix(in srgb, var(--zen-primary-color) 50%, light-dark(rgba(0, 0, 0, .85), rgba(255, 255, 255, .95)) 50%);
width: calc(var(--indicator-width) - 2 * var(--zen-drag-indicator-height) - 4px);
height: var(--zen-drag-indicator-height);
position: fixed;
z-index: 1000;
background: var(--zen-drag-indicator-bg);
transition: top 0.1s ease;
pointer-events: none;
left: calc(var(--indicator-left) + 2 * var(--zen-drag-indicator-height) + 4px);
border-radius: 5px;
#vertical-pinned-tabs-container .tabbrowser-tab.drag-over-after,
#tabbrowser-arrowscrollbox .tabbrowser-tab.drag-over-after {
box-shadow: 0 -3px 6px -2px var(--toolbarbutton-active-background, rgba(0, 0, 255, 0.2));
&::before {
content: "";
position: absolute;
left: calc(-2 * var(--zen-drag-indicator-height));
top: 50%;
height: calc(2 * var(--zen-drag-indicator-height));
width: calc(2 * var(--zen-drag-indicator-height));
border: var(--zen-drag-indicator-height) solid var(--zen-drag-indicator-bg);
border-radius: 50%;
transform: translate(calc(-1 * var(--zen-drag-indicator-height)), -50%);
background: transparent;
}
}
/* Horizontal tabs reordering indicators */

72
src/browser/base/zen-components/ZenPinnedTabManager.mjs
View File

@@ -328,7 +328,7 @@
const actualPin = this._pinsCache.find((pin) => pin.uuid === tab.getAttribute('zen-pin-id'));
if(!actualPin) {
if (!actualPin) {
return;
}
actualPin.position = tab.position;
@@ -646,9 +646,9 @@
}
moveToAnotherTabContainerIfNecessary(event, draggedTab) {
const pinnedTabsTarget = event.target.closest("#vertical-pinned-tabs-container");
const essentialTabsTarget = event.target.closest("#zen-essentials-container");
const tabsTarget = event.target.closest("#tabbrowser-arrowscrollbox");
const pinnedTabsTarget = event.target.closest('#vertical-pinned-tabs-container');
const essentialTabsTarget = event.target.closest('#zen-essentials-container');
const tabsTarget = event.target.closest('#tabbrowser-arrowscrollbox');
let moved = false;
let isVertical = true;
@@ -658,7 +658,7 @@
if (!draggedTab.pinned) {
gBrowser.pinTab(draggedTab);
moved = true;
} else if (draggedTab.hasAttribute("zen-essential")) {
} else if (draggedTab.hasAttribute('zen-essential')) {
this.removeEssentials(draggedTab);
gBrowser.pinTab(draggedTab);
moved = true;
@@ -666,7 +666,7 @@
}
// Check for essentials container
else if (essentialTabsTarget) {
if (!draggedTab.hasAttribute("zen-essential")) {
if (!draggedTab.hasAttribute('zen-essential')) {
this.addToEssentials(draggedTab);
moved = true;
isVertical = false;
@@ -674,11 +674,11 @@
}
// Check for normal tabs container
else if (tabsTarget) {
if (draggedTab.pinned && !draggedTab.hasAttribute("zen-essential")) {
if (draggedTab.pinned && !draggedTab.hasAttribute('zen-essential')) {
gBrowser.unpinTab(draggedTab);
moved = true;
isRegularTabs = true;
} else if (draggedTab.hasAttribute("zen-essential")) {
} else if (draggedTab.hasAttribute('zen-essential')) {
this.removeEssentials(draggedTab);
moved = true;
isRegularTabs = true;
@@ -687,19 +687,18 @@
// If the tab was moved, adjust its position relative to the target tab
if (moved) {
const targetTab = event.target.closest(".tabbrowser-tab");
const targetTab = event.target.closest('.tabbrowser-tab');
if (targetTab) {
const rect = targetTab.getBoundingClientRect();
let newIndex = targetTab._tPos;
if (isVertical) {
const middleY = targetTab.screenY + rect.height / 2;
if(!isRegularTabs && event.screenY > middleY) {
if (!isRegularTabs && event.screenY > middleY) {
newIndex++;
} else if(isRegularTabs && event.screenY < middleY) {
} else if (isRegularTabs && event.screenY < middleY) {
newIndex--;
}
} else {
const middleX = targetTab.screenX + rect.width / 2;
if (event.screenX > middleX) {
@@ -714,20 +713,24 @@
}
removeTabContainersDragoverClass() {
document
.querySelectorAll(".tabbrowser-tab.drag-over-before, .tabbrowser-tab.drag-over-after")
.forEach(tab => {
tab.classList.remove("drag-over-before", "drag-over-after");
});
this.dragIndicator.remove();
this._dragIndicator = null;
}
get dragIndicator() {
if (!this._dragIndicator) {
this._dragIndicator = document.createElement('div');
this._dragIndicator.id = 'zen-drag-indicator';
document.body.appendChild(this._dragIndicator);
}
return this._dragIndicator;
}
applyDragoverClass(event, draggedTab) {
this.removeTabContainersDragoverClass();
const pinnedTabsTarget = event.target.closest("#vertical-pinned-tabs-container");
const essentialTabsTarget = event.target.closest("#zen-essentials-container");
const tabsTarget = event.target.closest("#tabbrowser-arrowscrollbox");
const targetTab = event.target.closest(".tabbrowser-tab");
const pinnedTabsTarget = event.target.closest('#vertical-pinned-tabs-container');
const essentialTabsTarget = event.target.closest('#zen-essentials-container');
const tabsTarget = event.target.closest('#tabbrowser-arrowscrollbox');
const targetTab = event.target.closest('.tabbrowser-tab');
// If there's no valid target tab, nothing to do
if (!targetTab) {
@@ -739,16 +742,16 @@
// Decide whether we should show a dragover class for the given target
if (pinnedTabsTarget) {
if (!draggedTab.pinned || draggedTab.hasAttribute("zen-essential")) {
if (!draggedTab.pinned || draggedTab.hasAttribute('zen-essential')) {
shouldAddDragOverElement = true;
}
} else if (essentialTabsTarget) {
if (!draggedTab.hasAttribute("zen-essential")) {
if (!draggedTab.hasAttribute('zen-essential')) {
shouldAddDragOverElement = true;
isVertical = false;
}
} else if (tabsTarget) {
if (draggedTab.pinned || draggedTab.hasAttribute("zen-essential")) {
if (draggedTab.pinned || draggedTab.hasAttribute('zen-essential')) {
shouldAddDragOverElement = true;
}
}
@@ -761,19 +764,20 @@
const rect = targetTab.getBoundingClientRect();
if (isVertical) {
const separation = 8;
const middleY = targetTab.screenY + rect.height / 2;
const indicator = this.dragIndicator;
let top=0;
if (event.screenY > middleY) {
targetTab.classList.add("drag-over-before");
top = rect.top + rect.height + 'px';
} else {
targetTab.classList.add("drag-over-after");
top = rect.top + 'px';
}
indicator.style.setProperty('--indicator-left', rect.left + (separation/2) + 'px');
indicator.style.setProperty('--indicator-width', rect.width - separation + 'px');
indicator.style.top = top;
} else {
const middleX = targetTab.screenX + rect.width / 2;
if (event.screenX > middleX) {
targetTab.classList.add("drag-over-before");
} else {
targetTab.classList.add("drag-over-after");
}
// SUPPORT FOR ESSENTIALS
}
}
}

10
src/browser/base/zen-components/ZenWorkspaces.mjs
View File

@@ -1815,9 +1815,13 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
if (matchingWorkspaces.length === 1) {
const workspace = matchingWorkspaces[0];
if (workspace.uuid !== this.getActiveWorkspaceFromCache().uuid) {
window.addEventListener('TabSelected', (event) => {
this.changeWorkspace(workspace, { alwaysChange: true });
}, { once: true });
window.addEventListener(
'TabSelected',
(event) => {
this.changeWorkspace(workspace, { alwaysChange: true });
},
{ once: true }
);
return [userContextId, true, workspace.uuid];
}
}