Insert splitters in right location for splitview.

This commit is contained in:
brahim
2024-10-02 21:15:35 +02:00
parent 3105024de4
commit e96a40a545
3 changed files with 41 additions and 8 deletions

View File

@@ -1,8 +1,8 @@
diff --git a/browser/base/content/browser-box.inc.xhtml b/browser/base/content/browser-box.inc.xhtml
index 16559b2c0e3aef391b43e09281aee24007feb0bd..2579cea92a55fabb73fdd130c3706af08c3fd849 100644
index 108160d9469d44f47c93a3808402e4b27ff59777..39a7b691302bf13e1b5990f46428cff6807a8e56 100644
--- a/browser/base/content/browser-box.inc.xhtml
+++ b/browser/base/content/browser-box.inc.xhtml
@@ -21,11 +21,15 @@
@@ -23,11 +23,16 @@
</vbox>
<splitter id="sidebar-splitter" class="chromeclass-extrachrome sidebar-splitter" resizebefore="sibling" resizeafter="none" hidden="true"/>
<vbox id="appcontent" flex="1">
@@ -12,6 +12,7 @@ index 16559b2c0e3aef391b43e09281aee24007feb0bd..2579cea92a55fabb73fdd130c3706af0
<tabbox id="tabbrowser-tabbox"
flex="1" tabcontainer="tabbrowser-tabs">
+#include zen-sidebar-panel.inc.xhtml
+#include zen-splitview-overlay.inc.xhtml
<tabpanels id="tabbrowser-tabpanels"
flex="1" selectedIndex="0"/>
</tabbox>

View File

@@ -0,0 +1,5 @@
<hbox id="zen-splitview-overlay">
<hbox id="zen-splitview-splitterbox">
</hbox>
</hbox>

View File

@@ -30,29 +30,56 @@
--uc-tweak-rounded-corners-shadow-color: var(--zen-primary-color) !important;
}
#tabbrowser-tabpanels:has(> [zen-split='true']) {
#tabbrowser-tabbox {
--zen-split-row-gap: calc(var(--zen-element-separation) + 2px);
--zen-split-column-gap: calc(var(--zen-element-separation) + 1px);
margin-right: calc(var(--zen-element-separation) - var(--zen-split-row-gap)/2);
margin-bottom: calc(var(--zen-element-separation) - var(--zen-split-column-gap)/2);
margin-top: calc(-var(--zen-split-row-gap)/2);
margin-left: calc(-var(--zen-split-row-gap)/2);
}
#tabbrowser-tabpanels:has(> [zen-split='true']) {
margin-right: calc(var(--zen-element-separation) - var(--zen-split-row-gap)/2);
margin-bottom: calc(var(--zen-element-separation) - var(--zen-split-column-gap)/2);
margin-top: calc(var(--zen-split-row-gap)/-2);
margin-left: calc(var(--zen-split-row-gap)/-2);
}
margin-top: calc(-var(--zen-split-row-gap)/2);
margin-left: calc(-var(--zen-split-row-gap)/2);
#tabbrowser-tabpanels[zen-split-view] {
.zen-split-view-splitter {
display: inherit;
}
}
#zen-splitview-overlay {
position: absolute;
width: calc(100% - var(--zen-element-separation));
height: calc(100% - var(--zen-element-separation));
pointer-events: none;
}
#zen-splitview-splitterbox {
position: absolute;
width: 100%;
height: 100%;
z-index: 2;
}
.zen-split-view-splitter {
display: none;
visibility: inherit;
cursor: ew-resize;
-moz-subtree-hidden-only-visually: 0;
position: absolute;
pointer-events: all;
}
.zen-split-view-splitter[orient='vertical'] {
width: var(--zen-split-column-gap);
margin-left: calc(var(--zen-split-row-gap) * -1);
}
.zen-split-view-splitter[orient='horizontal'] {
height: var(--zen-split-column-gap);
margin-top: calc(var(--zen-split-column-gap) * -1);
cursor: n-resize;
}