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

feat: enhance Zen UI manager with new preferences for compact mode and single toolbar; update styles for better layout

Browse Source
This commit is contained in:
mr. M
2024-11-21 21:44:57 +01:00
parent c39253454a
commit 0fba5dc75c
7 changed files with 69 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/browser/base/content/ZenUIManager.mjs
View File

@@ -120,6 +120,8 @@ var gZenVerticalTabsManager = {
var updateEvent = this._updateEvent.bind(this);
Services.prefs.addObserver('zen.tabs.vertical.right-side', updateEvent);
Services.prefs.addObserver('zen.view.sidebar-expanded.max-width', updateEvent);
Services.prefs.addObserver('zen.view.compact', updateEvent);
Services.prefs.addObserver('zen.view.use-single-toolbar', updateEvent);
gZenCompactModeManager.addEventListener(updateEvent);
this._updateEvent();
@@ -181,9 +183,12 @@ var gZenVerticalTabsManager = {
this._updateMaxWidth();
const topButtons = document.getElementById('zen-sidebar-top-buttons');
const customizationTarget = document.getElementById('nav-bar-customization-target');
const isCompactMode = Services.prefs.getBoolPref('zen.view.compact');
const buttonsTarget = document.getElementById('zen-sidebar-top-buttons-customization-target');
if (Services.prefs.getBoolPref('zen.tabs.vertical.right-side')) {
this.navigatorToolbox.setAttribute('zen-right-side', 'true');
} else {
this.navigatorToolbox.removeAttribute('zen-right-side');
}
@@ -191,22 +196,19 @@ var gZenVerticalTabsManager = {
// Check if the sidebar is in hover mode
if (
!this.navigatorToolbox.hasAttribute('zen-right-side') &&
!Services.prefs.getBoolPref('zen.view.compact')
!isCompactMode
) {
this.navigatorToolbox.prepend(topButtons);
// browser.prepend(this.navigatorToolbox);
} else {
customizationTarget.prepend(topButtons);
// customizationTarget.prepend(topButtons);
// tabboxWrapper.prepend(this.navigatorToolbox);
}
if (Services.prefs.getBoolPref('zen.view.use-single-toolbar')) {
if (!topButtons.contains(document.getElementById('nav-bar'))) {
topButtons.after(document.getElementById('nav-bar'));
}
const navBar = document.getElementById('nav-bar');
let elements = document.querySelectorAll('#nav-bar-customization-target > *:is(toolbarbutton, #stop-reload-button)');
elements = Array.from(elements);
const buttonsTarget = document.getElementById('zen-sidebar-top-buttons-customization-target');
// Add separator if it doesn't exist
if (!buttonsTarget.contains(this._topButtonsSeparatorElement)) {
buttonsTarget.append(this._topButtonsSeparatorElement);
@@ -223,6 +225,15 @@ var gZenVerticalTabsManager = {
}
}
document.documentElement.setAttribute("zen-single-toolbar", true);
if (isCompactMode) {
const titlebar = document.getElementById('titlebar');
titlebar.prepend(navBar);
titlebar.prepend(topButtons);
} else {
const titlebar = document.getElementById('titlebar');
titlebar.before(topButtons);
titlebar.before(navBar);
}
}
// Always move the splitter next to the sidebar

1
src/browser/base/content/zen-styles/zen-browser-container.css
View File

@@ -7,6 +7,7 @@
box-shadow: 0 0 1px 1px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.5));
border-radius: var(--zen-border-radius);
overflow: hidden;
margin: 1px;
#browser:has(#navigator-toolbox[zen-right-side='true']) & {
margin-right: 0;

3
src/browser/base/content/zen-styles/zen-browser-ui.css
View File

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

21
src/browser/base/content/zen-styles/zen-compact-mode.css
View File

@@ -26,20 +26,27 @@
z-index: 9;
transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
right: calc(100% - var(--zen-element-separation));
top: 0;
top: var(--zen-element-separation);
bottom: var(--zen-element-separation);
opacity: 0;
padding-left: var(--zen-compact-float) !important;
padding-bottom: 0 !important;
padding-top: 0 !important;
}
#browser:has(#navigator-toolbox[zen-right-side='true']) & {
& #browser:has(#navigator-toolbox[zen-right-side='true']) {
& #navigator-toolbox {
--zen-compact-float: calc(var(--zen-element-separation) + 1px);
padding-left: unset !important;
padding-right: var(--zen-compact-float) !important;
left: calc(100% - var(--zen-element-separation));
right: unset;
}
& .browserSidebarContainer {
margin-left: 0 !important;
margin-right: var(--zen-element-separation) !important;
}
}
#titlebar {
@@ -57,16 +64,6 @@
backdrop-filter: blur(5px) !important;
}
}
/* Mark: toolbox as collapsed */
#zen-tabbox-wrapper > #navigator-toolbox:not(#navigator-toolbox:is(#navigator-toolbox[zen-expanded='true'])) {
max-width: calc(var(--zen-toolbox-max-width) + var(--zen-compact-float)) !important;
min-width: calc(var(--zen-toolbox-max-width) + var(--zen-compact-float)) !important;
& #titlebar {
padding-left: 0 !important;
padding-right: 0 !important;
}
}
@media (-moz-bool-pref: 'zen.view.compact.hide-toolbar') {
#navigator-toolbox {

44
src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css
View File

@@ -128,26 +128,29 @@
width: -moz-available;
}
@media (not (-moz-platform: macos)) and (not (-moz-gtk-csd-reversed-placement)) {
@media (-moz-bool-pref: 'zen.view.hide-window-controls') {
& {
transition: height 0.2s ease-out, opacity 0.2s ease-out;
}
:root:not([customizing]) & {
@media (not (-moz-platform: macos)) and (not (-moz-gtk-csd-reversed-placement)) {
@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;
&: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;
}
}
}
}
& .titlebar-buttonbox-container {
margin-left: auto;
width: fit-content;
& .titlebar-buttonbox-container {
margin-left: auto;
width: fit-content;
}
}
}
@@ -497,6 +500,13 @@
opacity: 0;
width: var(--zen-toolbox-padding);
height: 100%;
transition: opacity 0.2s ease-in-out;
background: var(--zen-colors-border);
appearance: none;
&:hover {
opacity: 1;
}
}
/* Mark: Move sidebar to the right */

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

@@ -41,7 +41,7 @@
#urlbar-background {
border: transparent !important;
margin: 1px;
margin: 1px 0;
box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1);
}

13
src/browser/themes/shared/toolbarbuttons-css.patch Normal file
View File

@@ -0,0 +1,13 @@
diff --git a/browser/themes/shared/toolbarbuttons.css b/browser/themes/shared/toolbarbuttons.css
index ef04ef4eedb984f14ee1196a3f89b026b2d6d587..734985e86b2ee2987461766593ac6902a510e7b6 100644
--- a/browser/themes/shared/toolbarbuttons.css
+++ b/browser/themes/shared/toolbarbuttons.css
@@ -426,7 +426,7 @@ toolbarbutton.bookmark-item:not(.subviewbutton) {
*/
align-items: stretch;
> .toolbarbutton-icon {
- height: auto;
+ margin-top: auto; margin-bottom: auto;
}
> .toolbarbutton-badge-stack {
align-items: center;