mirrors/desktop
1
0
Fork 0
mirror of https://github.com/zen-browser/desktop.git synced 2025-10-06 18:06:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improved stylings for split view goups

Browse Source
This commit is contained in:
mr. M
2025-03-01 14:23:41 +01:00
parent 3eed6de797
commit 595aa9b062
3 changed files with 45 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
src/browser/base/content/zen-styles/zen-folders.css
View File

@@ -1,29 +1,54 @@
tab-group[split-view-group] {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(calc(var(--tab-pinned-min-width-expanded) + 20px), auto));
gap: 1px;
display: flex;
flex-wrap: nowrap;
border-radius: var(--border-radius-medium);
padding: 0;
padding: 0 2px;
margin-inline: var(--tab-block-margin);
margin-block: var(--tab-block-margin);
min-height: var(--tab-min-height);
outline: var(--tab-outline);
outline-offset: var(--tab-outline-offset);
outline-color: var(--tab-selected-outline-color);
padding: 1px;
transition: scale 0.1s ease;
align-items: center;
--zen-split-view-active-tab-bg: color-mix(in srgb, var(--zen-toolbar-element-bg), transparent 40%);
& > * {
--tab-min-height: 32px;
--tab-selected-bgcolor: var(--zen-toolbar-element-bg);
& > .tabbrowser-tab {
--tab-min-height: 28px;
--tab-selected-bgcolor: var(--zen-split-view-active-tab-bg);
--tab-hover-background-color: transparent;
--tab-selected-shadow: none;
--border-radius-medium: var(--tab-border-radius);
--zen-active-tab-scale: 1;
flex: 1 !important;
&:not(:last-child)::after {
content: '';
width: 1px;
height: 16px;
background-color: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.2));
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
}
}
&:has(tab[visuallyselected]) {
&:has(> tab[visuallyselected]) {
background-color: var(--tab-selected-bgcolor);
box-shadow: var(--tab-selected-shadow);
& > .tabbrowser-tab {
--tab-hover-background-color: var(--zen-split-view-active-tab-bg);
& .tab-background {
background-color: var(--zen-split-view-active-tab-bg);
}
&::after {
display: none;
}
}
}
&:active {

2
src/browser/base/content/zen-styles/zen-theme.css
View File

@@ -104,7 +104,7 @@
--zen-button-border-radius: 5px;
--zen-button-padding: 0.6rem 1.2rem;
--zen-toolbar-element-bg: light-dark(rgba(89, 89, 89, 0.1), rgba(255, 255, 255, 0.125));
--zen-toolbar-element-bg: light-dark(rgba(89, 89, 89, 0.1), rgba(255, 255, 255, 0.1));
/* Toolbar */
--zen-toolbar-height: 38px;

17
src/browser/base/zen-components/ZenViewSplitter.mjs
View File

@@ -69,6 +69,8 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
_edgeHoverSize;
minResizeWidth;
MAX_TABS = 4;
init() {
XPCOMUtils.defineLazyPreferenceGetter(this, 'canChangeTabOnHover', 'zen.splitView.change-on-hover', false);
XPCOMUtils.defineLazyPreferenceGetter(this, 'minResizeWidth', 'zen.splitView.min-resize-width', 7);
@@ -673,7 +675,7 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
* @returns {boolean} True if the tabs can be split, false otherwise.
*/
contextCanSplitTabs() {
if (window.gBrowser.selectedTabs.length < 2) {
if (window.gBrowser.selectedTabs.length < 2 || window.gBrowser.selectedTabs.length > this.MAX_TABS) {
return false;
}
for (const tab of window.gBrowser.selectedTabs) {
@@ -707,8 +709,8 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
*/
splitTabs(tabs, gridType) {
const firstisPinned = tabs[0].pinned;
tabs = tabs.filter((t) => t.pinned === firstisPinned);
if (tabs.length < 2) {
tabs = tabs.filter((t) => t.pinned === firstisPinned && !t.hidden && !t.hasAttribute('zen-empty-tab'));
if (tabs.length < 2 || tabs.length > this.MAX_TABS) {
return;
}
@@ -724,9 +726,10 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
group.layoutTree = this.calculateLayoutTree([...new Set(group.tabs.concat(tabs))], gridType);
} else {
// Add any tabs that are not already in the group
for (const tab of tabs) {
if (!group.tabs.includes(tab) && tab.pinned === group.pinned) {
group.tabs.push(tab);
for (let i = 0; i < tabs.length; i++) {
const tab = tabs[i];
if (!group.tabs.includes(tab) && tab.pinned === !!group.pinned) {
gBrowser.moveTabToGroup(tab, this._getSplitViewGroup(tabs));
this.addTabToSplit(tab, group.layoutTree);
}
}
@@ -1302,7 +1305,7 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
const groupIndex = this._data.findIndex((group) => group.tabs.includes(droppedOnTab));
const group = this._data[groupIndex];
if (!group.tabs.includes(draggedTab)) {
if (!group.tabs.includes(draggedTab) && group.tabs.length < this.MAX_TABS) {
// First move the tab to the split view group
let splitGroup = droppedOnTab.group;
if (splitGroup && (!draggedTab.group || draggedTab.group !== splitGroup)) {