Merge pull request #1708 from BrhmDev/feature/make-zen-sidebar-draggable

Make zen sidebar draggable
This commit is contained in:
mauro 🤙
2024-09-25 17:17:00 +02:00
committed by GitHub
2 changed files with 22 additions and 15 deletions

View File

@@ -26,7 +26,9 @@
</toolbar>
<toolbarbutton id="zen-sidebar-add-panel-button" class="zen-sidebar-panel-button toolbarbutton-1 chromeclass-toolbar-additional" onclick="gZenBrowserManagerSidebar._openAddPanelDialog();"/>
</toolbar>
<html:span id="zen-sidebar-web-panel-splitter"></html:span>
<html:span id="zen-sidebar-web-panel-hsplitter"></html:span>
<html:span class="zen-sidebar-web-panel-splitter" side="left"></html:span>
<html:span class="zen-sidebar-web-panel-splitter" side="right"></html:span>
<html:span class="zen-sidebar-web-panel-splitter" orient="horizontal" side="top"></html:span>
<html:span class="zen-sidebar-web-panel-splitter" orient="horizontal" side="bottom"></html:span>
</box>
</hbox>

View File

@@ -70,7 +70,7 @@
#zen-sidebar-web-panel-wrapper:has(#zen-sidebar-web-panel[pinned='true']) {
position: absolute;
z-index: 1;
width: -moz-available;
width: calc(100% - var(--zen-sidebar-web-panel-spacing) * 3);
margin: var(--zen-sidebar-web-panel-spacing);
/* Why times 3?
* + 1 for the top margin, making the element overflow the view.
@@ -101,10 +101,10 @@
height: unset !important;
}
#zen-sidebar-web-panel-splitter {
.zen-sidebar-web-panel-splitter {
position: absolute;
top: 0;
right: 0;
left: 0;
height: 100%;
width: 4px;
background: transparent;
@@ -112,21 +112,26 @@
cursor: ew-resize;
}
#zen-sidebar-web-panel-hsplitter {
position: absolute;
bottom: -2px;
left: 0;
.zen-sidebar-web-panel-splitter[side='right'] {
left: initial;
right: 0;
}
.zen-sidebar-web-panel-splitter[orient='horizontal'] {
width: 100%;
height: 7px;
background: transparent;
border: none;
cursor: ns-resize;
}
#zen-sidebar-web-panel[hidden='true'] #zen-sidebar-web-panel-hsplitter,
#zen-sidebar-web-panel-wrapper[hidden='true'] + #zen-sidebar-web-panel-splitter,
#zen-sidebar-web-panel-wrapper[hidden='true'] + #zen-sidebar-web-panel-hsplitter,
#zen-sidebar-web-panel:not([pinned='true']) #zen-sidebar-web-panel-hsplitter {
.zen-sidebar-web-panel-splitter[side='bottom'] {
top: initial;
bottom: -2px;
}
#zen-sidebar-web-panel[hidden='true'] .zen-sidebar-web-panel-splitter,
#zen-sidebar-web-panel-wrapper[hidden='true'] + .zen-sidebar-web-panel-splitter,
#zen-sidebar-web-panel:not([pinned='true']) .zen-sidebar-web-panel-splitter[orient='horizontal'],
#zen-sidebar-web-panel:not([pinned='true']) .zen-sidebar-web-panel-splitter[side='left'] {
display: none;
margin: 0;
}