1
0
Fork 1
mirror of https://github.com/zen-browser/desktop.git synced 2025-07-07 23:00:01 +02:00

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

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

2
l10n

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

View file

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

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/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/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/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)
@ -264,6 +265,7 @@
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/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/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)
@ -402,6 +404,7 @@
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/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/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)

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>

After

Width:  |  Height:  |  Size: 748 B

View file

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

View file

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

View file

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

View file

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

View file

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