mirrors/desktop
1
0
Fork 0
mirror of https://github.com/zen-browser/desktop.git synced 2025-10-17 23:32:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

Rename workspaces button to workspace select button and adjust related styles for consistency

Browse Source
This commit is contained in:
mr. m
2025-01-20 15:38:11 +00:00
parent f000af56e7
commit 0b17ceda90
10 changed files with 37 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/browser/base/content/ZenCustomizableUI.sys.mjs
View File

@@ -4,7 +4,7 @@ export var ZenCustomizableUI = new (class {
constructor() {}
TYPE_TOOLBAR = 'toolbar';
defaultSidebarIcons = ['zen-profile-button', 'zen-workspaces-button', 'downloads-button'];
defaultSidebarIcons = ['zen-profile-button', 'zen-workspace-select-button', 'downloads-button'];
startup(CustomizableUIInternal) {
CustomizableUIInternal.registerArea(
@@ -83,10 +83,6 @@ export var ZenCustomizableUI = new (class {
const newTab = window.document.getElementById('vertical-tabs-newtab-button');
newTab.classList.add('zen-sidebar-action-button');
const wrapper = window.document.createXULElement('toolbarbutton');
wrapper.id = 'zen-workspaces-button';
window.document.getElementById('zen-sidebar-icons-wrapper').prepend(wrapper);
for (let id of this.defaultSidebarIcons) {
const elem = window.document.getElementById(id);
if (!elem) continue;

2
src/browser/base/content/zen-sidebar-icons.inc.xhtml
View File

@@ -9,7 +9,7 @@
mode="icons">
<toolbarbutton 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>
<toolbarbutton removable="true" id="zen-workspaces-button"></toolbarbutton>
<toolbarbutton removable="false" id="zen-workspace-select-button"></toolbarbutton>
<toolbarbutton id="zen-profile-button"
class="zen-sidebar-action-button toolbarbutton-1 chromeclass-toolbar-additional"
delegatesanchor="true"

10
src/browser/base/content/zen-styles/zen-animations.css
View File

@@ -219,16 +219,6 @@
}
}
@keyframes zen-workspaces-button-active {
from {
bottom: -20px;
}
to {
bottom: -2px;
}
}
/* Mark: Zen Glance */
@keyframes zen-glance-overlay-animation {
from {

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

@@ -20,7 +20,7 @@ xul|button {
border: 1px solid var(--zen-colors-border);
}
button:not(#zen-workspaces-button):active {
button:not(#zen-workspace-select-button):active {
transform: scale(0.98);
}

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

@@ -40,7 +40,7 @@
pointer-events: none;
}
#zen-workspaces-button .zen-workspace-sidebar-name {
#zen-workspace-select-button .zen-workspace-sidebar-name {
margin-left: 10px;
display: none;
overflow: hidden;

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

@@ -228,7 +228,7 @@
border-bottom: 0px solid transparent !important;
--tab-block-margin: 2px;
--tab-selected-bgcolor: light-dark(rgba(255, 255, 255, 0.75), rgba(0, 0, 0, 0.11));
--tab-selected-bgcolor: light-dark(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.11));
grid-gap: 0 !important;
&[overflow]::after,
@@ -321,7 +321,7 @@
padding-top: var(--zen-element-separation);
& > toolbarbutton:not(#zen-workspaces-button) {
& > toolbarbutton:not(#zen-workspace-select-button) {
padding: 0 !important;
}
}
@@ -398,7 +398,7 @@
margin-top: 0;
}
& #zen-workspaces-button[as-button='true'] {
& #zen-workspace-select-button[as-button='true'] {
width: calc(100% - 10px) !important;
}
@@ -406,7 +406,7 @@
display: none;
}
& #zen-workspaces-button {
& #zen-workspace-select-button {
margin-left: 2px;
margin-right: 2px;
@@ -453,7 +453,7 @@
bottom: calc(-0.5 * var(--zen-toolbox-padding));
}
& > *:not(tabs):not(#search-container):not(#zen-workspaces-button),
& > *:not(tabs):not(#search-container):not(#zen-workspace-select-button),
& #tabbrowser-arrowscrollbox-periphery > toolbarbutton {
width: 100% !important;
border-radius: var(--tab-border-radius) !important;
@@ -656,7 +656,7 @@
margin-inline-end: 0 !important;
}
}
& #zen-workspaces-button {
& #zen-workspace-select-button {
flex-direction: column;
&:not([as-button='true']) {
& toolbarbutton {

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

@@ -106,7 +106,7 @@
--zen-toolbar-element-filter: brightness(0.95);
@media (prefers-color-scheme: dark) {
--zen-toolbar-element-filter: brightness(1.2);
--zen-toolbar-element-filter: brightness(1.25);
}
/* Toolbar */

18
src/browser/base/content/zen-styles/zen-workspaces.css
View File

@@ -5,7 +5,7 @@
*/
@namespace html 'http://www.w3.org/1999/xhtml';
#zen-workspaces-button {
#zen-workspace-select-button {
justify-content: center;
align-items: center;
display: flex;
@@ -63,7 +63,7 @@
& {
opacity: 0.4;
filter: grayscale(1);
transition: opacity 0.2s;
transition: opacity 0.2s, filter 0.2s;
}
&[active='true'] {
@@ -105,7 +105,7 @@
}
}
#zen-workspaces-button .zen-workspace-sidebar-wrapper {
#zen-workspace-select-button .zen-workspace-sidebar-wrapper {
position: absolute;
width: 100%;
display: flex;
@@ -114,7 +114,7 @@
pointer-events: none;
}
#zen-workspaces-button .zen-workspace-sidebar-name {
#zen-workspace-select-button .zen-workspace-sidebar-name {
margin-left: 0.2rem;
display: none;
overflow: hidden;
@@ -125,18 +125,18 @@
/** Keep these selectors in sync with the ones in vertical-tabs.css */
#navigator-toolbox {
& #zen-workspaces-button[as-button='true'] {
& #zen-workspace-select-button[as-button='true'] {
width: calc(100% - var(--toolbarbutton-outer-padding));
margin: 2px;
min-width: calc(2 * var(--toolbarbutton-inner-padding) + 16px);
height: calc(2 * var(--toolbarbutton-inner-padding) + 16px);
}
& #zen-workspaces-button .zen-workspace-sidebar-name {
& #zen-workspace-select-button .zen-workspace-sidebar-name {
display: block;
}
& #zen-workspaces-button .zen-workspace-sidebar-icon {
& #zen-workspace-select-button .zen-workspace-sidebar-icon {
margin-inline-end: 5px;
& [no-icon='true'] {
@@ -144,11 +144,11 @@
}
}
& #zen-workspaces-button .zen-workspace-sidebar-icon[no-icon='true'] + .zen-workspace-sidebar-name {
& #zen-workspace-select-button .zen-workspace-sidebar-icon[no-icon='true'] + .zen-workspace-sidebar-name {
margin-left: 0;
}
& #zen-workspaces-button {
& #zen-workspace-select-button {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;