mirrors/desktop
1
0
Fork 0
mirror of https://github.com/zen-browser/desktop.git synced 2026-02-08 12:57:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added virtual grid to splited tabs!

Browse Source
This commit is contained in:
Mauro Balades
2024-05-20 21:05:29 +02:00
parent 652b577bf2
commit 11467a5126
2 changed files with 35 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/browser/base/content/ZenViewSplitter.mjs
View File

@@ -7,7 +7,8 @@ var gZenViewSplitter = {
* tab1,
* tab2,
* tab3,
* ]
* ],
* gridType: "vsplit" | "hsplit" | "grid",
* }
* ]
*/
@@ -107,8 +108,10 @@ var gZenViewSplitter = {
container.classList.remove("deck-selected");
console.assert(container, "No container found for tab");
container.removeEventListener("click", handleClick(tab));
container.style.gridArea = "";
}
this.tabBrowserPanel.removeAttribute("zen-split-view");
//this.tabBrowserPanel.style.gridTemplateAreas = "";
Services.prefs.setBoolPref("zen.splitView.working", false);
modifyDecks(this._data[this.currentView].tabs, false);
this.currentView = -1;
@@ -119,16 +122,41 @@ var gZenViewSplitter = {
this.tabBrowserPanel.setAttribute("zen-split-view", "true");
Services.prefs.setBoolPref("zen.splitView.working", true);
this.currentView = this._data.indexOf(splitData);
let gridType = splitData.gridType || "grid"; // TODO: let user decide the grid type
let i = 0;
// 2 rows, infinite columns
let currentRowGridArea = ["", ""/* first row, second row */];
let numberOfRows = 0;
for (const _tab of splitData.tabs) {
_tab._zenSplitted = true;
let container = _tab.linkedBrowser.closest(".browserSidebarContainer");
console.assert(container, "No container found for tab");
container.removeAttribute("zen-split-active");
if (_tab == tab) {
container.setAttribute("zen-split-active", "true");
}
container.setAttribute("zen-split-anim", "true");
container.addEventListener("click", handleClick(_tab));
console.assert(container, "No container found for tab");
// Set the grid type for the container. If the grid type is not "grid", then set the grid type contain
// each column or row. If it's "grid", then try to create
if (gridType == "grid") {
// Each 2 tabs, create a new row
if (i % 2 == 0) {
currentRowGridArea[0] += ` tab${i + 1}`;
} else {
currentRowGridArea[1] += ` tab${i + 1}`;
numberOfRows++;
}
container.style.gridArea = `tab${i + 1}`;
}
i++;
}
if (gridType == "grid") {
if (numberOfRows < splitData.tabs.length / 2) {
// Make the last tab occupy the last row
currentRowGridArea[1] += ` tab${i}`;
}
this.tabBrowserPanel.style.gridTemplateAreas = `'${currentRowGridArea[0]}' '${currentRowGridArea[1]}'`;
}
modifyDecks(splitData.tabs, true);
},

5
src/browser/themes/shared/zen-decks.css
View File

@@ -24,6 +24,11 @@
border-color: var(--zen-primary-color) !important;
}
#tabbrowser-tabpanels:has(> [zen-split="true"]) {
display: grid;
grid-gap: 0 10px !important;
}
@keyframes zen-deck-fadeIn {
0% {
transform: scale(0.9);