ZenBrowserMirrors/zen-desktop
1
0
Fork 1
mirror of https://github.com/zen-browser/desktop.git synced 2025-07-08 15:19:58 +02:00
Code Releases Wiki Activity

feat: Small tweaks for workspace creation form, b=closes #8974, c=common, tabs, workspaces

Browse source
This commit is contained in:
Mr. M 2025-06-11 21:28:01 +02:00
parent 7bf0b42afd
commit 4da5a40419
No known key found for this signature in database
GPG key ID: 6292C4C8F8652B18
9 changed files with 48 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

2
l10n

@ -1 +1 @@
Subproject commit bd878687ab8509747761395e8eb8853d804dd3a8 Subproject commit a33517969f5b377654c006994a675ece4cd785d8

5
src/browser/themes/shared/zen-icons/icons.css
View file

@ -39,11 +39,14 @@
.close-icon, .close-icon,
#zen-sidebar-web-panel-close, #zen-sidebar-web-panel-close,
#zen-glance-sidebar-close, #zen-glance-sidebar-close,
#PanelUI-zen-emojis-picker-none,
.zen-theme-picker-custom-list-item-remove { .zen-theme-picker-custom-list-item-remove {
list-style-image: url('close.svg') !important; list-style-image: url('close.svg') !important;
} }
#PanelUI-zen-emojis-picker-none {
list-style-image: url('trash.svg');
}
.reset-icon { .reset-icon {
list-style-image: url('reload.svg') !important; list-style-image: url('reload.svg') !important;
} }

3
src/browser/themes/shared/zen-icons/jar.inc.mn
View file

@ -126,6 +126,7 @@
skin/classic/browser/zen-icons/tool-profiler.svg (../shared/zen-icons/lin/tool-profiler.svg) skin/classic/browser/zen-icons/tool-profiler.svg (../shared/zen-icons/lin/tool-profiler.svg)
skin/classic/browser/zen-icons/tracking-protection.svg (../shared/zen-icons/lin/tracking-protection.svg) skin/classic/browser/zen-icons/tracking-protection.svg (../shared/zen-icons/lin/tracking-protection.svg)
skin/classic/browser/zen-icons/translations.svg (../shared/zen-icons/lin/translations.svg) skin/classic/browser/zen-icons/translations.svg (../shared/zen-icons/lin/translations.svg)
skin/classic/browser/zen-icons/trash.svg (../shared/zen-icons/lin/trash.svg)
skin/classic/browser/zen-icons/unpin.svg (../shared/zen-icons/lin/unpin.svg) skin/classic/browser/zen-icons/unpin.svg (../shared/zen-icons/lin/unpin.svg)
skin/classic/browser/zen-icons/video-blocked-fill.svg (../shared/zen-icons/lin/video-blocked-fill.svg) skin/classic/browser/zen-icons/video-blocked-fill.svg (../shared/zen-icons/lin/video-blocked-fill.svg)
skin/classic/browser/zen-icons/video-fill.svg (../shared/zen-icons/lin/video-fill.svg) skin/classic/browser/zen-icons/video-fill.svg (../shared/zen-icons/lin/video-fill.svg)
@ -264,6 +265,7 @@
skin/classic/browser/zen-icons/tool-profiler.svg (../shared/zen-icons/lin/tool-profiler.svg) skin/classic/browser/zen-icons/tool-profiler.svg (../shared/zen-icons/lin/tool-profiler.svg)
skin/classic/browser/zen-icons/tracking-protection.svg (../shared/zen-icons/lin/tracking-protection.svg) skin/classic/browser/zen-icons/tracking-protection.svg (../shared/zen-icons/lin/tracking-protection.svg)
skin/classic/browser/zen-icons/translations.svg (../shared/zen-icons/lin/translations.svg) skin/classic/browser/zen-icons/translations.svg (../shared/zen-icons/lin/translations.svg)
skin/classic/browser/zen-icons/trash.svg (../shared/zen-icons/lin/trash.svg)
skin/classic/browser/zen-icons/unpin.svg (../shared/zen-icons/lin/unpin.svg) skin/classic/browser/zen-icons/unpin.svg (../shared/zen-icons/lin/unpin.svg)
skin/classic/browser/zen-icons/video-blocked-fill.svg (../shared/zen-icons/lin/video-blocked-fill.svg) skin/classic/browser/zen-icons/video-blocked-fill.svg (../shared/zen-icons/lin/video-blocked-fill.svg)
skin/classic/browser/zen-icons/video-fill.svg (../shared/zen-icons/lin/video-fill.svg) skin/classic/browser/zen-icons/video-fill.svg (../shared/zen-icons/lin/video-fill.svg)
@ -402,6 +404,7 @@
skin/classic/browser/zen-icons/tool-profiler.svg (../shared/zen-icons/lin/tool-profiler.svg) skin/classic/browser/zen-icons/tool-profiler.svg (../shared/zen-icons/lin/tool-profiler.svg)
skin/classic/browser/zen-icons/tracking-protection.svg (../shared/zen-icons/lin/tracking-protection.svg) skin/classic/browser/zen-icons/tracking-protection.svg (../shared/zen-icons/lin/tracking-protection.svg)
skin/classic/browser/zen-icons/translations.svg (../shared/zen-icons/lin/translations.svg) skin/classic/browser/zen-icons/translations.svg (../shared/zen-icons/lin/translations.svg)
skin/classic/browser/zen-icons/trash.svg (../shared/zen-icons/lin/trash.svg)
skin/classic/browser/zen-icons/unpin.svg (../shared/zen-icons/lin/unpin.svg) skin/classic/browser/zen-icons/unpin.svg (../shared/zen-icons/lin/unpin.svg)
skin/classic/browser/zen-icons/video-blocked-fill.svg (../shared/zen-icons/lin/video-blocked-fill.svg) skin/classic/browser/zen-icons/video-blocked-fill.svg (../shared/zen-icons/lin/video-blocked-fill.svg)
skin/classic/browser/zen-icons/video-fill.svg (../shared/zen-icons/lin/video-fill.svg) skin/classic/browser/zen-icons/video-fill.svg (../shared/zen-icons/lin/video-fill.svg)

1
src/browser/themes/shared/zen-icons/lin/trash.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="18px" height="18px" viewBox="0 0 18 18"><path d="m13.474,7.25l-.374,7.105c-.056,1.062-.934,1.895-1.997,1.895h-4.205c-1.064,0-1.941-.833-1.997-1.895l-.374-7.105" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path><line x1="2.75" y1="4.75" x2="15.25" y2="4.75" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" data-color="color-2"></line><path d="m6.75,4.75v-2c0-.552.448-1,1-1h2.5c.552,0,1,.448,1,1v2" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" data-color="color-2"></path></svg>
Side by side

After

Width:  |  Height:  |  Size: 748 B

3
src/zen/common/ZenCustomizableUI.sys.mjs
View file

@ -107,6 +107,9 @@ export var ZenCustomizableUI = new (class {
_initCreateNewButton(window) { _initCreateNewButton(window) {
const button = window.document.getElementById('zen-create-new-button'); const button = window.document.getElementById('zen-create-new-button');
button.addEventListener('command', () => { button.addEventListener('command', () => {
if (button.hasAttribute('open')) {
return;
}
const image = button.querySelector('image'); const image = button.querySelector('image');
const popup = window.document.getElementById('zenCreateNewPopup'); const popup = window.document.getElementById('zenCreateNewPopup');
button.setAttribute('open', 'true'); button.setAttribute('open', 'true');

2
src/zen/tabs/ZenPinnedTabManager.mjs
View file

@ -786,7 +786,7 @@
if (!this.enabled) { if (!this.enabled) {
return false; return false;
} }
movingTabs = [...movingTabs] movingTabs = [...movingTabs];
try { try {
const pinnedTabsTarget = const pinnedTabsTarget =
event.target.closest('.zen-workspace-pinned-tabs-section') || event.target.closest('.zen-workspace-pinned-tabs-section') ||

3
src/zen/workspaces/ZenGradientGenerator.mjs
View file

@ -79,9 +79,8 @@
const fromForm = event.explicitOriginalTarget?.classList?.contains( const fromForm = event.explicitOriginalTarget?.classList?.contains(
'zen-workspace-creation-edit-theme-button' 'zen-workspace-creation-edit-theme-button'
); );
const position = fromForm ? 'bottomleft bottomright' : 'topright topleft';
PanelMultiView.openPopup(this.panel, this.toolbox, { PanelMultiView.openPopup(this.panel, this.toolbox, {
position, position: 'topright topleft',
triggerEvent: event, triggerEvent: event,
y: fromForm ? -160 : 0, y: fromForm ? -160 : 0,
}); });

34
src/zen/workspaces/ZenWorkspaceCreation.mjs
View file

@ -23,8 +23,10 @@
<vbox class="zen-workspace-creation" flex="1"> <vbox class="zen-workspace-creation" flex="1">
<form> <form>
<vbox> <vbox>
<html:h1 data-l10n-id="zen-workspace-creation-title" class="zen-workspace-creation-title" /> <html:h1 data-l10n-id="zen-workspace-creation-header" class="zen-workspace-creation-title" />
<html:div>
<label data-l10n-id="zen-workspace-creation-label" class="zen-workspace-creation-label" /> <label data-l10n-id="zen-workspace-creation-label" class="zen-workspace-creation-label" />
</html:div>
</vbox> </vbox>
<vbox class="zen-workspace-creation-form"> <vbox class="zen-workspace-creation-form">
<hbox class="zen-workspace-creation-name-wrapper"> <hbox class="zen-workspace-creation-name-wrapper">
@ -68,7 +70,7 @@
get elementsToAnimate() { get elementsToAnimate() {
return [ return [
this.querySelector('.zen-workspace-creation-title'), this.querySelector('.zen-workspace-creation-title'),
this.querySelector('.zen-workspace-creation-label'), this.querySelector('.zen-workspace-creation-label').parentElement,
this.querySelector('.zen-workspace-creation-name-wrapper'), this.querySelector('.zen-workspace-creation-name-wrapper'),
this.querySelector('.zen-workspace-creation-profile-wrapper'), this.querySelector('.zen-workspace-creation-profile-wrapper'),
this.querySelector('.zen-workspace-creation-edit-theme-button'), this.querySelector('.zen-workspace-creation-edit-theme-button'),
@ -89,8 +91,6 @@
this.appendChild(this.constructor.fragment); this.appendChild(this.constructor.fragment);
this.initializeAttributeInheritance(); this.initializeAttributeInheritance();
this.style.visibility = 'collapse';
this.inputName = this.querySelector('.zen-workspace-creation-name'); this.inputName = this.querySelector('.zen-workspace-creation-name');
this.inputIcon = this.querySelector('.zen-workspace-creation-icon-label'); this.inputIcon = this.querySelector('.zen-workspace-creation-icon-label');
this.inputProfile = this.querySelector('.zen-workspace-creation-profile'); this.inputProfile = this.querySelector('.zen-workspace-creation-profile');
@ -152,12 +152,11 @@
this.inputProfile.parentNode.hidden = true; this.inputProfile.parentNode.hidden = true;
} }
document.getElementById('zen-sidebar-splitter').style.pointerEvents = 'none';
gZenUIManager.motion gZenUIManager.motion
.animate( .animate(
[ [gBrowser.tabContainer, gURLBar.textbox],
gBrowser.tabContainer,
...(gZenVerticalTabsManager._hasSetSingleToolbar ? [gURLBar.textbox] : []),
],
{ {
opacity: [1, 0], opacity: [1, 0],
}, },
@ -170,9 +169,9 @@
.then(() => { .then(() => {
gBrowser.tabContainer.style.visibility = 'collapse'; gBrowser.tabContainer.style.visibility = 'collapse';
if (gZenVerticalTabsManager._hasSetSingleToolbar) { if (gZenVerticalTabsManager._hasSetSingleToolbar) {
gURLBar.textbox.style.visibility = 'collapse'; document.getElementById('nav-bar').style.visibility = 'collapse';
} }
this.style.visibility = ''; this.style.visibility = 'visible';
gZenUIManager.motion.animate( gZenUIManager.motion.animate(
this.elementsToAnimate, this.elementsToAnimate,
{ {
@ -180,7 +179,7 @@
opacity: [0, 1], opacity: [0, 1],
}, },
{ {
duration: 0.9, duration: 0.6,
type: 'spring', type: 'spring',
bounce: 0, bounce: 0,
delay: gZenUIManager.motion.stagger(0.05, { startDelay: 0.2 }), delay: gZenUIManager.motion.stagger(0.05, { startDelay: 0.2 }),
@ -203,7 +202,7 @@
await gZenWorkspaces._organizeWorkspaceStripLocations(workspace, true); await gZenWorkspaces._organizeWorkspaceStripLocations(workspace, true);
await gZenWorkspaces.updateTabsContainers(); await gZenWorkspaces.updateTabsContainers();
this.tabContainer._invalidateCachedTabs(); gBrowser.tabContainer._invalidateCachedTabs();
if (gZenVerticalTabsManager._canReplaceNewTab) { if (gZenVerticalTabsManager._canReplaceNewTab) {
BrowserCommands.openTab(); BrowserCommands.openTab();
@ -273,13 +272,15 @@
opacity: [1, 0], opacity: [1, 0],
}, },
{ {
duration: 0.9, duration: 0.4,
type: 'spring', type: 'spring',
bounce: 0, bounce: 0,
delay: gZenUIManager.motion.stagger(0.05), delay: gZenUIManager.motion.stagger(0.05),
} }
); );
document.getElementById('zen-sidebar-splitter').style.pointerEvents = '';
gZenWorkspaces.removeChangeListeners(this.handleZenWorkspacesChangeBind); gZenWorkspaces.removeChangeListeners(this.handleZenWorkspacesChangeBind);
for (const element of this.constructor.elementsToDisable) { for (const element of this.constructor.elementsToDisable) {
const el = document.getElementById(element); const el = document.getElementById(element);
@ -298,7 +299,7 @@
gBrowser.tabContainer.style.visibility = ''; gBrowser.tabContainer.style.visibility = '';
gBrowser.tabContainer.style.opacity = 0; gBrowser.tabContainer.style.opacity = 0;
if (gZenVerticalTabsManager._hasSetSingleToolbar) { if (gZenVerticalTabsManager._hasSetSingleToolbar) {
gURLBar.textbox.style.visibility = ''; document.getElementById('nav-bar').style.visibility = '';
gURLBar.textbox.style.opacity = 0; gURLBar.textbox.style.opacity = 0;
} }
@ -309,10 +310,7 @@
await gZenWorkspaces.updateTabsContainers(); await gZenWorkspaces.updateTabsContainers();
await gZenUIManager.motion.animate( await gZenUIManager.motion.animate(
[ [gBrowser.tabContainer, gURLBar.textbox],
gBrowser.tabContainer,
...(gZenVerticalTabsManager._hasSetSingleToolbar ? [gURLBar.textbox] : []),
],
{ {
opacity: [0, 1], opacity: [0, 1],
}, },

24
src/zen/workspaces/create-workspace-form.css
View file

@ -7,6 +7,8 @@
zen-workspace-creation { zen-workspace-creation {
flex: 1; flex: 1;
max-width: calc(var(--zen-sidebar-width) - var(--zen-toolbox-padding)); max-width: calc(var(--zen-sidebar-width) - var(--zen-toolbox-padding));
padding: 3px;
visibility: collapse;
& .zen-workspace-creation { & .zen-workspace-creation {
justify-content: center; justify-content: center;
@ -14,22 +16,25 @@ zen-workspace-creation {
& .zen-workspace-creation-title { & .zen-workspace-creation-title {
font-size: large; font-size: large;
margin-bottom: 5px; margin-bottom: 5px;
text-align: center;
} }
& .zen-workspace-creation-label { & .zen-workspace-creation-label {
margin: 0; margin: 0;
opacity: 0.4; opacity: 0.4;
text-align: center;
} }
& form { & form {
--input-border-color: light-dark(rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)); --input-bgcolor: light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.05));
--input-bgcolor: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: calc(100% - 10px); width: calc(100% - 10px);
margin: auto; margin: auto;
gap: 1.2rem; gap: 2.2rem;
margin-top: 2.2rem;
height: 100%;
& .zen-workspace-creation-form { & .zen-workspace-creation-form {
gap: 0.6rem; gap: 0.6rem;
@ -38,11 +43,12 @@ zen-workspace-creation {
& xul|button { & xul|button {
border: none; border: none;
margin: 0; margin: 0;
font-weight: 400 !important;
} }
& .zen-workspace-creation-name-wrapper { & .zen-workspace-creation-name-wrapper {
padding: 9px 6px; padding: 9px 6px;
border-radius: var(--zen-button-border-radius); border-radius: 8px !important;
margin: 0; margin: 0;
background-color: var(--input-bgcolor); background-color: var(--input-bgcolor);
gap: 8px; gap: 8px;
@ -94,7 +100,7 @@ zen-workspace-creation {
& .zen-workspace-creation-profile-wrapper { & .zen-workspace-creation-profile-wrapper {
padding: 4px; padding: 4px;
border-radius: var(--zen-button-border-radius); border-radius: 8px !important;
margin: 0; margin: 0;
background-color: var(--input-bgcolor); background-color: var(--input-bgcolor);
gap: 4px; gap: 4px;
@ -118,18 +124,22 @@ zen-workspace-creation {
} }
& .zen-workspace-creation-edit-theme-button { & .zen-workspace-creation-edit-theme-button {
border-radius: var(--zen-button-border-radius); border-radius: 8px !important;
margin: 0; margin: 0;
background-color: var(--input-bgcolor); background-color: var(--input-bgcolor);
justify-content: center; justify-content: center;
align-items: center; align-items: center;
appearance: none; appearance: none;
padding: 10px !important; padding: 10px !important;
&:hover {
background-color: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
}
} }
& .zen-workspace-creation-buttons { & .zen-workspace-creation-buttons {
gap: 0.5rem; gap: 0.5rem;
margin-top: 2rem; margin-top: auto;
& .zen-workspace-creation-create-button { & .zen-workspace-creation-create-button {
color: var(--button-text-color-primary) !important; color: var(--button-text-color-primary) !important;