Skip to content

Commit 4da5a40

Browse files
mr-cheffymr-cheffy
committed
feat: Small tweaks for workspace creation form, b=closes #8974, c=common, tabs, workspaces
1 parent 7bf0b42 commit 4da5a40

File tree

9 files changed

+48
-31
lines changed

9 files changed

+48
-31
lines changed

‎l10n‎

‎src/browser/themes/shared/zen-icons/icons.css‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,11 +39,14 @@
3939
.close-icon,
4040
#zen-sidebar-web-panel-close,
4141
#zen-glance-sidebar-close,
42-
#PanelUI-zen-emojis-picker-none,
4342
.zen-theme-picker-custom-list-item-remove {
4443
list-style-image: url('close.svg') !important;
4544
}
4645

46+
#PanelUI-zen-emojis-picker-none {
47+
list-style-image: url('trash.svg');
48+
}
49+
4750
.reset-icon {
4851
list-style-image: url('reload.svg') !important;
4952
}

‎src/browser/themes/shared/zen-icons/jar.inc.mn‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -126,6 +126,7 @@
126126
skin/classic/browser/zen-icons/tool-profiler.svg (../shared/zen-icons/lin/tool-profiler.svg)
127127
skin/classic/browser/zen-icons/tracking-protection.svg (../shared/zen-icons/lin/tracking-protection.svg)
128128
skin/classic/browser/zen-icons/translations.svg (../shared/zen-icons/lin/translations.svg)
129+
skin/classic/browser/zen-icons/trash.svg (../shared/zen-icons/lin/trash.svg)
129130
skin/classic/browser/zen-icons/unpin.svg (../shared/zen-icons/lin/unpin.svg)
130131
skin/classic/browser/zen-icons/video-blocked-fill.svg (../shared/zen-icons/lin/video-blocked-fill.svg)
131132
skin/classic/browser/zen-icons/video-fill.svg (../shared/zen-icons/lin/video-fill.svg)
@@ -264,6 +265,7 @@
264265
skin/classic/browser/zen-icons/tool-profiler.svg (../shared/zen-icons/lin/tool-profiler.svg)
265266
skin/classic/browser/zen-icons/tracking-protection.svg (../shared/zen-icons/lin/tracking-protection.svg)
266267
skin/classic/browser/zen-icons/translations.svg (../shared/zen-icons/lin/translations.svg)
268+
skin/classic/browser/zen-icons/trash.svg (../shared/zen-icons/lin/trash.svg)
267269
skin/classic/browser/zen-icons/unpin.svg (../shared/zen-icons/lin/unpin.svg)
268270
skin/classic/browser/zen-icons/video-blocked-fill.svg (../shared/zen-icons/lin/video-blocked-fill.svg)
269271
skin/classic/browser/zen-icons/video-fill.svg (../shared/zen-icons/lin/video-fill.svg)
@@ -402,6 +404,7 @@
402404
skin/classic/browser/zen-icons/tool-profiler.svg (../shared/zen-icons/lin/tool-profiler.svg)
403405
skin/classic/browser/zen-icons/tracking-protection.svg (../shared/zen-icons/lin/tracking-protection.svg)
404406
skin/classic/browser/zen-icons/translations.svg (../shared/zen-icons/lin/translations.svg)
407+
skin/classic/browser/zen-icons/trash.svg (../shared/zen-icons/lin/trash.svg)
405408
skin/classic/browser/zen-icons/unpin.svg (../shared/zen-icons/lin/unpin.svg)
406409
skin/classic/browser/zen-icons/video-blocked-fill.svg (../shared/zen-icons/lin/video-blocked-fill.svg)
407410
skin/classic/browser/zen-icons/video-fill.svg (../shared/zen-icons/lin/video-fill.svg)

‎src/browser/themes/shared/zen-icons/lin/trash.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎src/zen/common/ZenCustomizableUI.sys.mjs‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -107,6 +107,9 @@ export var ZenCustomizableUI = new (class {
107107
_initCreateNewButton(window) {
108108
const button = window.document.getElementById('zen-create-new-button');
109109
button.addEventListener('command', () => {
110+
if (button.hasAttribute('open')) {
111+
return;
112+
}
110113
const image = button.querySelector('image');
111114
const popup = window.document.getElementById('zenCreateNewPopup');
112115
button.setAttribute('open', 'true');

‎src/zen/tabs/ZenPinnedTabManager.mjs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -786,7 +786,7 @@
786786
if (!this.enabled) {
787787
return false;
788788
}
789-
movingTabs = [...movingTabs]
789+
movingTabs = [...movingTabs];
790790
try {
791791
const pinnedTabsTarget =
792792
event.target.closest('.zen-workspace-pinned-tabs-section') ||

‎src/zen/workspaces/ZenGradientGenerator.mjs‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -79,9 +79,8 @@
7979
const fromForm = event.explicitOriginalTarget?.classList?.contains(
8080
'zen-workspace-creation-edit-theme-button'
8181
);
82-
const position = fromForm ? 'bottomleft bottomright' : 'topright topleft';
8382
PanelMultiView.openPopup(this.panel, this.toolbox, {
84-
position,
83+
position: 'topright topleft',
8584
triggerEvent: event,
8685
y: fromForm ? -160 : 0,
8786
});

‎src/zen/workspaces/ZenWorkspaceCreation.mjs‎

Lines changed: 17 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,10 @@
2323
<vbox class="zen-workspace-creation" flex="1">
2424
<form>
2525
<vbox>
26-
<html:h1 data-l10n-id="zen-workspace-creation-title" class="zen-workspace-creation-title" />
27-
<label data-l10n-id="zen-workspace-creation-label" class="zen-workspace-creation-label" />
26+
<html:h1 data-l10n-id="zen-workspace-creation-header" class="zen-workspace-creation-title" />
27+
<html:div>
28+
<label data-l10n-id="zen-workspace-creation-label" class="zen-workspace-creation-label" />
29+
</html:div>
2830
</vbox>
2931
<vbox class="zen-workspace-creation-form">
3032
<hbox class="zen-workspace-creation-name-wrapper">
@@ -68,7 +70,7 @@
6870
get elementsToAnimate() {
6971
return [
7072
this.querySelector('.zen-workspace-creation-title'),
71-
this.querySelector('.zen-workspace-creation-label'),
73+
this.querySelector('.zen-workspace-creation-label').parentElement,
7274
this.querySelector('.zen-workspace-creation-name-wrapper'),
7375
this.querySelector('.zen-workspace-creation-profile-wrapper'),
7476
this.querySelector('.zen-workspace-creation-edit-theme-button'),
@@ -89,8 +91,6 @@
8991
this.appendChild(this.constructor.fragment);
9092
this.initializeAttributeInheritance();
9193

92-
this.style.visibility = 'collapse';
93-
9494
this.inputName = this.querySelector('.zen-workspace-creation-name');
9595
this.inputIcon = this.querySelector('.zen-workspace-creation-icon-label');
9696
this.inputProfile = this.querySelector('.zen-workspace-creation-profile');
@@ -152,12 +152,11 @@
152152
this.inputProfile.parentNode.hidden = true;
153153
}
154154

155+
document.getElementById('zen-sidebar-splitter').style.pointerEvents = 'none';
156+
155157
gZenUIManager.motion
156158
.animate(
157-
[
158-
gBrowser.tabContainer,
159-
...(gZenVerticalTabsManager._hasSetSingleToolbar ? [gURLBar.textbox] : []),
160-
],
159+
[gBrowser.tabContainer, gURLBar.textbox],
161160
{
162161
opacity: [1, 0],
163162
},
@@ -170,17 +169,17 @@
170169
.then(() => {
171170
gBrowser.tabContainer.style.visibility = 'collapse';
172171
if (gZenVerticalTabsManager._hasSetSingleToolbar) {
173-
gURLBar.textbox.style.visibility = 'collapse';
172+
document.getElementById('nav-bar').style.visibility = 'collapse';
174173
}
175-
this.style.visibility = '';
174+
this.style.visibility = 'visible';
176175
gZenUIManager.motion.animate(
177176
this.elementsToAnimate,
178177
{
179178
y: [20, 0],
180179
opacity: [0, 1],
181180
},
182181
{
183-
duration: 0.9,
182+
duration: 0.6,
184183
type: 'spring',
185184
bounce: 0,
186185
delay: gZenUIManager.motion.stagger(0.05, { startDelay: 0.2 }),
@@ -203,7 +202,7 @@
203202
await gZenWorkspaces._organizeWorkspaceStripLocations(workspace, true);
204203
await gZenWorkspaces.updateTabsContainers();
205204

206-
this.tabContainer._invalidateCachedTabs();
205+
gBrowser.tabContainer._invalidateCachedTabs();
207206

208207
if (gZenVerticalTabsManager._canReplaceNewTab) {
209208
BrowserCommands.openTab();
@@ -273,13 +272,15 @@
273272
opacity: [1, 0],
274273
},
275274
{
276-
duration: 0.9,
275+
duration: 0.4,
277276
type: 'spring',
278277
bounce: 0,
279278
delay: gZenUIManager.motion.stagger(0.05),
280279
}
281280
);
282281

282+
document.getElementById('zen-sidebar-splitter').style.pointerEvents = '';
283+
283284
gZenWorkspaces.removeChangeListeners(this.handleZenWorkspacesChangeBind);
284285
for (const element of this.constructor.elementsToDisable) {
285286
const el = document.getElementById(element);
@@ -298,7 +299,7 @@
298299
gBrowser.tabContainer.style.visibility = '';
299300
gBrowser.tabContainer.style.opacity = 0;
300301
if (gZenVerticalTabsManager._hasSetSingleToolbar) {
301-
gURLBar.textbox.style.visibility = '';
302+
document.getElementById('nav-bar').style.visibility = '';
302303
gURLBar.textbox.style.opacity = 0;
303304
}
304305

@@ -309,10 +310,7 @@
309310
await gZenWorkspaces.updateTabsContainers();
310311

311312
await gZenUIManager.motion.animate(
312-
[
313-
gBrowser.tabContainer,
314-
...(gZenVerticalTabsManager._hasSetSingleToolbar ? [gURLBar.textbox] : []),
315-
],
313+
[gBrowser.tabContainer, gURLBar.textbox],
316314
{
317315
opacity: [0, 1],
318316
},

‎src/zen/workspaces/create-workspace-form.css‎

Lines changed: 17 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -7,29 +7,34 @@
77
zen-workspace-creation {
88
flex: 1;
99
max-width: calc(var(--zen-sidebar-width) - var(--zen-toolbox-padding));
10+
padding: 3px;
11+
visibility: collapse;
1012

1113
& .zen-workspace-creation {
1214
justify-content: center;
1315

1416
& .zen-workspace-creation-title {
1517
font-size: large;
1618
margin-bottom: 5px;
19+
text-align: center;
1720
}
1821

1922
& .zen-workspace-creation-label {
2023
margin: 0;
2124
opacity: 0.4;
25+
text-align: center;
2226
}
2327

2428
& form {
25-
--input-border-color: light-dark(rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2));
26-
--input-bgcolor: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
29+
--input-bgcolor: light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.05));
2730

2831
display: flex;
2932
flex-direction: column;
3033
width: calc(100% - 10px);
3134
margin: auto;
32-
gap: 1.2rem;
35+
gap: 2.2rem;
36+
margin-top: 2.2rem;
37+
height: 100%;
3338

3439
& .zen-workspace-creation-form {
3540
gap: 0.6rem;
@@ -38,11 +43,12 @@ zen-workspace-creation {
3843
& xul|button {
3944
border: none;
4045
margin: 0;
46+
font-weight: 400 !important;
4147
}
4248

4349
& .zen-workspace-creation-name-wrapper {
4450
padding: 9px 6px;
45-
border-radius: var(--zen-button-border-radius);
51+
border-radius: 8px !important;
4652
margin: 0;
4753
background-color: var(--input-bgcolor);
4854
gap: 8px;
@@ -94,7 +100,7 @@ zen-workspace-creation {
94100

95101
& .zen-workspace-creation-profile-wrapper {
96102
padding: 4px;
97-
border-radius: var(--zen-button-border-radius);
103+
border-radius: 8px !important;
98104
margin: 0;
99105
background-color: var(--input-bgcolor);
100106
gap: 4px;
@@ -118,18 +124,22 @@ zen-workspace-creation {
118124
}
119125

120126
& .zen-workspace-creation-edit-theme-button {
121-
border-radius: var(--zen-button-border-radius);
127+
border-radius: 8px !important;
122128
margin: 0;
123129
background-color: var(--input-bgcolor);
124130
justify-content: center;
125131
align-items: center;
126132
appearance: none;
127133
padding: 10px !important;
134+
135+
&:hover {
136+
background-color: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
137+
}
128138
}
129139

130140
& .zen-workspace-creation-buttons {
131141
gap: 0.5rem;
132-
margin-top: 2rem;
142+
margin-top: auto;
133143

134144
& .zen-workspace-creation-create-button {
135145
color: var(--button-text-color-primary) !important;

0 commit comments

Comments
 (0)