Add zen-expand-sidebar-button and adjust window button positioning; update transition properties and margin styles for improved layout

This commit is contained in:
mr. M
2024-11-28 02:04:14 +01:00
parent 99b2babad4
commit fb2241339d
4 changed files with 12 additions and 4 deletions

View File

@@ -45,6 +45,7 @@ export var ZenCustomizableUI = new (class {
customizationtarget="zen-sidebar-top-buttons-customization-target"
mode="icons">
<hbox id="zen-sidebar-top-buttons-customization-target" class="customization-target" flex="1">
<toolbarbutton hidden="true" removable="true" class="chromeclass-toolbar-additional toolbarbutton-1 zen-sidebar-action-button" id="zen-expand-sidebar-button" data-l10n-id="sidebar-zen-expand" cui-areatype="toolbar" oncommand="gZenVerticalTabsManager.toggleExpand();"></toolbarbutton>
<toolbarbutton removable="true" class="toolbarbutton-1 zen-sidebar-action-button zen-compact-mode-ignore" id="zen-sidepanel-button" data-l10n-id="sidebar-zen-sidepanel" onclick="gZenBrowserManagerSidebar.toggle();"></toolbarbutton>
</hbox>
</toolbar>

View File

@@ -305,7 +305,7 @@ var gZenVerticalTabsManager = {
}
} else {
if (isRightSide) {
document.getElementById('zen-appcontent-navbar-container').prepend(windowButtons);
document.getElementById('zen-appcontent-navbar-container').appendChild(windowButtons);
} else {
topButtons.prepend(windowButtons);
}

View File

@@ -24,7 +24,7 @@
--zen-compact-float: calc(var(--zen-element-separation) - 1px);
position: absolute;
z-index: 10;
transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
transition: top 0.2s ease-in-out, opacity 0.2s ease-in-out;
right: calc(100% - var(--zen-element-separation));
top: 0;
bottom: var(--zen-element-separation);

View File

@@ -27,7 +27,8 @@
#tabbrowser-tabpanels[zen-split-view='true'] > [zen-split='true'], #zen-splitview-dropzone {
flex: 1;
margin: calc(var(--zen-split-column-gap) / 2) calc(var(--zen-split-row-gap) / 2 + 1px);
margin: calc(var(--zen-split-column-gap) / 2) calc(var(--zen-split-row-gap) / 2 + 1px) !important;
margin-bottom: 0 !important;
position: absolute !important;
overflow: hidden;
}
@@ -48,9 +49,15 @@
outline-offset: -1px;
}
#tabbrowser-tabbox {
#tabbrowser-tabbox:has(#tabbrowser-tabpanels[zen-split-view='true']) {
--zen-split-row-gap: calc(var(--zen-element-separation) + 1px);
--zen-split-column-gap: calc(var(--zen-element-separation) + 1px);
margin-right: calc(-1 * var(--zen-split-column-gap));
:root[zen-right-side='true'] & {
margin-right: 0;
margin-left: calc(-1 * var(--zen-split-column-gap));
}
}
#tabbrowser-tabpanels:has(> [zen-split='true']), #zen-splitview-overlay {