Fixed right sidebar compact mode margin and worked more on the rewrite

This commit is contained in:
mr. M
2024-11-25 21:01:14 +01:00
parent 444c9138e0
commit 2ee8b3c111
9 changed files with 64 additions and 43 deletions

View File

@@ -212,8 +212,17 @@ var gZenVerticalTabsManager = {
const buttonsTarget = document.getElementById('zen-sidebar-top-buttons-customization-target'); const buttonsTarget = document.getElementById('zen-sidebar-top-buttons-customization-target');
if (isRightSide && isVerticalTabs) { if (isRightSide && isVerticalTabs) {
this.navigatorToolbox.setAttribute('zen-right-side', 'true'); this.navigatorToolbox.setAttribute('zen-right-side', 'true');
document.documentElement.setAttribute('zen-right-side', 'true');
} else { } else {
this.navigatorToolbox.removeAttribute('zen-right-side'); this.navigatorToolbox.removeAttribute('zen-right-side');
document.documentElement.removeAttribute('zen-right-side');
}
const appContentNavbarContaienr = document.getElementById('zen-appcontent-navbar-container');
if ((!isRightSide && this.isWindowsStyledButtons) || (isRightSide && !this.isWindowsStyledButtons)) {
appContentNavbarContaienr.setAttribute('should-hide', 'true');
} else {
appContentNavbarContaienr.removeAttribute('should-hide');
} }
// Check if the sidebar is in hover mode // Check if the sidebar is in hover mode
@@ -275,13 +284,6 @@ var gZenVerticalTabsManager = {
} }
document.documentElement.removeAttribute("zen-single-toolbar"); document.documentElement.removeAttribute("zen-single-toolbar");
navBar.appendChild(document.getElementById('PanelUI-button')); navBar.appendChild(document.getElementById('PanelUI-button'));
if (!doNotChangeWindowButtons) {
if (this.isWindowsStyledButtons) {
navBar.append(windowButtons);
} else {
navBar.prepend(windowButtons);
}
}
this._toolbarOriginalParent.prepend(navBar); this._toolbarOriginalParent.prepend(navBar);
CustomizableUI.zenInternalCU._rebuildRegisteredAreas(); CustomizableUI.zenInternalCU._rebuildRegisteredAreas();
} }
@@ -294,6 +296,20 @@ var gZenVerticalTabsManager = {
if (doNotChangeWindowButtons) { if (doNotChangeWindowButtons) {
document.getElementById("zen-sidebar-top-buttons-customization-target").appendChild(windowButtons); document.getElementById("zen-sidebar-top-buttons-customization-target").appendChild(windowButtons);
} else if (!isSingleToolbar && !isCompactMode) {
if (this.isWindowsStyledButtons) {
if (isRightSide) {
document.getElementById('zen-appcontent-navbar-container').append(windowButtons);
} else {
navBar.append(windowButtons);
}
} else {
if (isRightSide) {
document.getElementById('zen-appcontent-navbar-container').prepend(windowButtons);
} else {
navBar.prepend(windowButtons);
}
}
} }
// Always move the splitter next to the sidebar // Always move the splitter next to the sidebar

View File

@@ -26,7 +26,7 @@
content/browser/zen-styles/zen-theme.css (content/zen-styles/zen-theme.css) content/browser/zen-styles/zen-theme.css (content/zen-styles/zen-theme.css)
content/browser/zen-styles/zen-buttons.css (content/zen-styles/zen-buttons.css) content/browser/zen-styles/zen-buttons.css (content/zen-styles/zen-buttons.css)
content/browser/zen-styles/zen-tabs.css (content/zen-styles/zen-tabs.css) content/browser/zen-styles/zen-tabs.css (content/zen-styles/zen-tabs.css)
content/browser/zen-styles/zen-tabs/vertical-tabs.css (content/zen-styles/zen-tabs/vertical-tabs.css) * content/browser/zen-styles/zen-tabs/vertical-tabs.css (content/zen-styles/zen-tabs/vertical-tabs.css)
content/browser/zen-styles/zen-tabs/horizontal-tabs.css (content/zen-styles/zen-tabs/horizontal-tabs.css) content/browser/zen-styles/zen-tabs/horizontal-tabs.css (content/zen-styles/zen-tabs/horizontal-tabs.css)
content/browser/zen-styles/zen-browser-ui.css (content/zen-styles/zen-browser-ui.css) content/browser/zen-styles/zen-browser-ui.css (content/zen-styles/zen-browser-ui.css)
content/browser/zen-styles/zen-animations.css (content/zen-styles/zen-animations.css) content/browser/zen-styles/zen-animations.css (content/zen-styles/zen-animations.css)

View File

@@ -9,7 +9,7 @@
overflow: hidden; overflow: hidden;
margin: 1px; margin: 1px;
#browser:has(#navigator-toolbox[zen-right-side='true']) & { :root[zen-right-side='true'] & {
margin-right: 0; margin-right: 0;
margin-left: var(--zen-element-separation); margin-left: var(--zen-element-separation);
} }

View File

@@ -84,7 +84,7 @@
margin-top: 0; margin-top: 0;
} }
& #browser:has(#navigator-toolbox[zen-right-side='true']) #zen-appcontent-wrapper { &[zen-right-side='true'] #zen-appcontent-wrapper {
margin-right: 0; margin-right: 0;
} }
} }

View File

@@ -42,7 +42,7 @@
} }
} }
& #browser:has(#navigator-toolbox[zen-right-side='true']) { &[zen-right-side='true'] {
& #navigator-toolbox { & #navigator-toolbox {
--zen-compact-float: calc(var(--zen-element-separation) + 1px); --zen-compact-float: calc(var(--zen-element-separation) + 1px);
padding-left: unset !important; padding-left: unset !important;
@@ -91,7 +91,7 @@
opacity: 1; opacity: 1;
transform: translateX(calc(100% - var(--zen-element-separation))); transform: translateX(calc(100% - var(--zen-element-separation)));
#browser:has(#navigator-toolbox[zen-right-side='true']) & { :root[zen-right-side='true'] & {
transform: translateX(calc(-100% + var(--zen-element-separation) + 1px)); transform: translateX(calc(-100% + var(--zen-element-separation) + 1px));
} }
} }

View File

@@ -250,7 +250,7 @@
animation: better-sidebar-pinned-hide 0.15s ease-in-out forwards !important; animation: better-sidebar-pinned-hide 0.15s ease-in-out forwards !important;
} }
:root:has(#navigator-toolbox:not([zen-right-side='true'])) { :root:not([zen-right-side='true']) {
#zen-sidebar-web-panel-wrapper:not(:has(#zen-sidebar-web-panel[pinned='true'])) { #zen-sidebar-web-panel-wrapper:not(:has(#zen-sidebar-web-panel[pinned='true'])) {
margin-left: 0 !important; margin-left: 0 !important;
} }

View File

@@ -60,11 +60,11 @@
overflow: hidden; overflow: hidden;
border: 1px solid var(--zen-colors-border); border: 1px solid var(--zen-colors-border);
:root:has(#navigator-toolbox:not([zen-right-side='true'])) &[positionend='true'] { :root:not([zen-right-side='true']) &[positionend='true'] {
margin-right: var(--zen-element-separation); margin-right: var(--zen-element-separation);
} }
:root:has(#navigator-toolbox[zen-right-side='true']) & { :root[zen-right-side='true'] & {
margin-left: var(--zen-element-separation); margin-left: var(--zen-element-separation);
} }
} }

View File

@@ -0,0 +1,23 @@
height: var(--zen-toolbar-height);
@media (-moz-bool-pref: 'zen.view.hide-window-controls') {
& {
transition: height 0.2s ease-out, opacity 0.2s ease-out;
transition-delay: 0.05s;
}
&:not([zen-has-hover='true']):not([has-popup-menu]):not(:focus-within) {
transition-delay: 0.2s;
height: var(--zen-element-separation);
overflow: hidden;
opacity: 0;
& > * {
pointer-events: none;
}
}
}
:root:not([zen-window-buttons-reversed='true']) & .titlebar-buttonbox-container {
margin-left: auto;
width: fit-content;
}

View File

@@ -119,11 +119,12 @@
display: none; display: none;
} }
:root[zen-single-toolbar='true'] { :root[zen-single-toolbar='true']:not([customizing]) {
#zen-appcontent-navbar-container { #zen-appcontent-navbar-container {
display: flex; display: flex;
-moz-window-dragging: drag; -moz-window-dragging: drag;
min-height: var(--zen-element-separation); min-height: var(--zen-element-separation);
height: var(--zen-element-separation);
& #PersonalToolbar { & #PersonalToolbar {
width: -moz-available; width: -moz-available;
@@ -134,31 +135,12 @@
* - We are on a Linux with reversed CSD * - We are on a Linux with reversed CSD
* - If we are not in any of the above, we can still enable it if the user has bookmarks toolbar enabled * - If we are not in any of the above, we can still enable it if the user has bookmarks toolbar enabled
*/ */
:root:is( &:has(#PersonalToolbar[collapsed='false']) {
[zen-window-buttons-reversed='true']:has(#TabsToolbar:not([collapsed='true'])), %include vertical-tabs-topbar.inc.css
:not([zen-window-buttons-reversed='false'])
):not([customizing]) & {
@media (-moz-bool-pref: 'zen.view.hide-window-controls') {
& {
transition: height 0.2s ease-out, opacity 0.2s ease-out;
transition-delay: 0.05s;
} }
&:not([zen-has-hover='true']):not([has-popup-menu]):not(:focus-within) { &[should-hide='true'] {
transition-delay: 0.2s; %include vertical-tabs-topbar.inc.css
height: var(--zen-element-separation);
overflow: hidden;
opacity: 0;
& > * {
pointer-events: none;
}
}
}
& .titlebar-buttonbox-container {
margin-left: auto;
width: fit-content;
}
} }
:root[zen-window-buttons-reversed='true'] & { :root[zen-window-buttons-reversed='true'] & {
@@ -355,7 +337,7 @@
padding-left: 2px; padding-left: 2px;
} }
#browser:has(#navigator-toolbox[zen-right-side='true']) & { :root[zen-right-side='true'] & {
margin-left: 0; margin-left: 0;
margin-right: var(--zen-toolbox-padding); margin-right: var(--zen-toolbox-padding);
@@ -516,7 +498,7 @@
} }
/* Mark: Move sidebar to the right */ /* Mark: Move sidebar to the right */
#browser:has(#navigator-toolbox[zen-right-side='true']) { :root[zen-right-side='true'] {
& #navigator-toolbox { & #navigator-toolbox {
order: 3 !important; order: 3 !important;
} }
@@ -630,7 +612,7 @@
padding-inline-start: var(--toolbarbutton-outer-padding); padding-inline-start: var(--toolbarbutton-outer-padding);
} }
#browser:has(#navigator-toolbox[zen-right-side='true']) & { :root[zen-right-side='true'] & {
padding-inline-start: 0; padding-inline-start: 0;
padding-inline-end: var(--zen-toolbox-padding); padding-inline-end: var(--zen-toolbox-padding);
} }