mirrors/desktop
1
0
Fork 0
mirror of https://github.com/zen-browser/desktop.git synced 2026-04-22 07:15:41 +00:00
Code Issues Packages Projects 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
9 changed files with 48 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/zen/workspaces/ZenGradientGenerator.mjs
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,
});

36
src/zen/workspaces/ZenWorkspaceCreation.mjs
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],
},

24
src/zen/workspaces/create-workspace-form.css
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;