mirror of
https://github.com/zen-browser/desktop.git
synced 2025-07-07 21:49:58 +02:00
chore: Refactored vertical tabs css and improved essentials layout, b=(no-bug), c=tabs, workspaces
This commit is contained in:
parent
a35ef0e735
commit
0dac5522fe
5 changed files with 650 additions and 361 deletions
|
@ -22,7 +22,7 @@ docs/issue-metrics/*.md
|
||||||
|
|
||||||
# Some CSS files are preprocessed and prettier doesn't handle them well
|
# Some CSS files are preprocessed and prettier doesn't handle them well
|
||||||
# We also dont want to format the CSS files that are generated by the build
|
# We also dont want to format the CSS files that are generated by the build
|
||||||
src/zen/tabs/zen-tabs/vertical-tabs.css
|
src/zen/tabs/zen-tabs.css
|
||||||
src/zen/compact-mode/zen-compact-mode.css
|
src/zen/compact-mode/zen-compact-mode.css
|
||||||
src/zen/common/ZenEmojies.mjs
|
src/zen/common/ZenEmojies.mjs
|
||||||
|
|
||||||
|
|
|
@ -51,8 +51,8 @@
|
||||||
content/browser/zen-components/ZenTabUnloader.mjs (../../zen/tabs/ZenTabUnloader.mjs)
|
content/browser/zen-components/ZenTabUnloader.mjs (../../zen/tabs/ZenTabUnloader.mjs)
|
||||||
content/browser/zen-components/ZenPinnedTabsStorage.mjs (../../zen/tabs/ZenPinnedTabsStorage.mjs)
|
content/browser/zen-components/ZenPinnedTabsStorage.mjs (../../zen/tabs/ZenPinnedTabsStorage.mjs)
|
||||||
content/browser/zen-components/ZenPinnedTabManager.mjs (../../zen/tabs/ZenPinnedTabManager.mjs)
|
content/browser/zen-components/ZenPinnedTabManager.mjs (../../zen/tabs/ZenPinnedTabManager.mjs)
|
||||||
content/browser/zen-styles/zen-tabs.css (../../zen/tabs/zen-tabs.css)
|
* content/browser/zen-styles/zen-tabs.css (../../zen/tabs/zen-tabs.css)
|
||||||
* content/browser/zen-styles/zen-tabs/vertical-tabs.css (../../zen/tabs/zen-tabs/vertical-tabs.css)
|
content/browser/zen-styles/zen-tabs/vertical-tabs.css (../../zen/tabs/zen-tabs/vertical-tabs.css)
|
||||||
|
|
||||||
content/browser/zen-components/ZenGlanceManager.mjs (../../zen/glance/ZenGlanceManager.mjs)
|
content/browser/zen-components/ZenGlanceManager.mjs (../../zen/glance/ZenGlanceManager.mjs)
|
||||||
content/browser/zen-styles/zen-glance.css (../../zen/glance/zen-glance.css)
|
content/browser/zen-styles/zen-glance.css (../../zen/glance/zen-glance.css)
|
||||||
|
|
|
@ -16,3 +16,100 @@
|
||||||
display: none !important;
|
display: none !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ==========================================================================
|
||||||
|
Single Toolbar Mode - Top Bar Handling (Includes External CSS)
|
||||||
|
========================================================================== */
|
||||||
|
:root[zen-single-toolbar='true']:not([customizing]) {
|
||||||
|
#zen-appcontent-navbar-container {
|
||||||
|
display: flex;
|
||||||
|
-moz-window-dragging: drag; /* Allow dragging the window via this bar */
|
||||||
|
min-height: var(--zen-element-separation);
|
||||||
|
height: var(--zen-element-separation);
|
||||||
|
|
||||||
|
/* Ensure Personal Toolbar takes available width */
|
||||||
|
& #PersonalToolbar {
|
||||||
|
width: -moz-available;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Include styles for the top bar under certain conditions:
|
||||||
|
* - Bookmarks toolbar is visible OR
|
||||||
|
* - The container is explicitly marked to hide controls (e.g., on Linux with reversed controls)
|
||||||
|
*/
|
||||||
|
&:has(#PersonalToolbar[collapsed='false']) {
|
||||||
|
%include zen-tabs/vertical-tabs-topbar.inc.css
|
||||||
|
}
|
||||||
|
&[should-hide='true'] {
|
||||||
|
%include zen-tabs/vertical-tabs-topbar.inc.css
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Hide the top bar completely in fullscreen mode */
|
||||||
|
:root[inDOMFullscreen='true'] & {
|
||||||
|
max-height: 0 !important;
|
||||||
|
min-height: unset !important;
|
||||||
|
opacity: 0 !important;
|
||||||
|
pointer-events: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* ==========================================================================
|
||||||
|
Very Special Occasions - Complex Layout Fixes
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/* Exclude these complex fixes if in compact mode */
|
||||||
|
:root:not([zen-compact-mode='true']) {
|
||||||
|
|
||||||
|
/* --- Fix: Right Sidebar + Collapsed + Standard Window Buttons --- */
|
||||||
|
&[zen-right-side='true']:not([zen-sidebar-expanded='true']):not([zen-window-buttons-reversed='true']) {
|
||||||
|
/* Push toolbox down below the top toolbar */
|
||||||
|
& #navigator-toolbox {
|
||||||
|
margin-top: var(--zen-toolbar-height) !important;
|
||||||
|
}
|
||||||
|
/* Pull window buttons container leftwards over the collapsed sidebar */
|
||||||
|
& .titlebar-buttonbox-container {
|
||||||
|
margin-right: calc(-1 * var(--zen-toolbox-max-width)) !important;
|
||||||
|
}
|
||||||
|
/* Allow overflow for the button box */
|
||||||
|
& #zen-appcontent-wrapper {
|
||||||
|
overflow-x: visible;
|
||||||
|
}
|
||||||
|
/* Reset padding for top buttons */
|
||||||
|
& #zen-sidebar-top-buttons-customization-target {
|
||||||
|
padding-top: 0;
|
||||||
|
}
|
||||||
|
/* Add padding to the left of the nav container */
|
||||||
|
& #zen-appcontent-navbar-container {
|
||||||
|
padding-left: var(--zen-element-separation);
|
||||||
|
}
|
||||||
|
/* Include common fixes for this top-button scenario */
|
||||||
|
%include zen-tabs/vertical-tabs-topbuttons-fix.css
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- Fix: Left Sidebar + Collapsed + Reversed Window Buttons --- */
|
||||||
|
&:not([zen-right-side='true']):not([zen-sidebar-expanded='true'])[zen-window-buttons-reversed='true'] {
|
||||||
|
/* Push toolbox down below the top toolbar */
|
||||||
|
& #navigator-toolbox {
|
||||||
|
margin-top: var(--zen-toolbar-height) !important;
|
||||||
|
}
|
||||||
|
/* Pull window buttons container rightwards over the collapsed sidebar */
|
||||||
|
& .titlebar-buttonbox-container {
|
||||||
|
margin-left: calc(-1 * var(--zen-toolbox-max-width) + var(--zen-toolbox-padding) / 2) !important;
|
||||||
|
}
|
||||||
|
/* Allow overflow for the button box */
|
||||||
|
& #zen-appcontent-wrapper {
|
||||||
|
overflow-x: visible;
|
||||||
|
}
|
||||||
|
/* Reset padding for top buttons */
|
||||||
|
& #zen-sidebar-top-buttons-customization-target {
|
||||||
|
padding-top: 0;
|
||||||
|
}
|
||||||
|
/* Add padding to the right of the nav container */
|
||||||
|
& #zen-appcontent-navbar-container {
|
||||||
|
padding-right: var(--zen-element-separation);
|
||||||
|
}
|
||||||
|
/* Include common fixes for this top-button scenario */
|
||||||
|
%include zen-tabs/vertical-tabs-topbuttons-fix.css
|
||||||
|
}
|
||||||
|
}
|
File diff suppressed because it is too large
Load diff
|
@ -2386,6 +2386,18 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
|
||||||
);
|
);
|
||||||
const workspaceObject = this.getWorkspaceFromId(workspaceId);
|
const workspaceObject = this.getWorkspaceFromId(workspaceId);
|
||||||
const essentialContainer = this.getEssentialsSection(workspaceObject.containerTabId);
|
const essentialContainer = this.getEssentialsSection(workspaceObject.containerTabId);
|
||||||
|
const essentialNumChildren = essentialContainer.children.length;
|
||||||
|
let essentialHackType = 0;
|
||||||
|
if (essentialNumChildren % 3 === 0) {
|
||||||
|
essentialHackType = 3;
|
||||||
|
} else if (essentialNumChildren % 4 === 0 || essentialNumChildren % 4 === 3) {
|
||||||
|
essentialHackType = 4;
|
||||||
|
}
|
||||||
|
if (essentialHackType > 0) {
|
||||||
|
essentialContainer.setAttribute('data-hack-type', essentialHackType);
|
||||||
|
} else {
|
||||||
|
essentialContainer.removeAttribute('data-hack-type');
|
||||||
|
}
|
||||||
this._updateMarginTopPinnedTabs(arrowScrollbox, pinnedContainer, essentialContainer, workspaceIndicator, forAnimation);
|
this._updateMarginTopPinnedTabs(arrowScrollbox, pinnedContainer, essentialContainer, workspaceIndicator, forAnimation);
|
||||||
this.updateShouldHideSeparator(arrowScrollbox, pinnedContainer);
|
this.updateShouldHideSeparator(arrowScrollbox, pinnedContainer);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue