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:
parent
7bf0b42afd
commit
4da5a40419
9 changed files with 48 additions and 31 deletions
2
l10n
2
l10n
|
@ -1 +1 @@
|
|||
Subproject commit bd878687ab8509747761395e8eb8853d804dd3a8
|
||||
Subproject commit a33517969f5b377654c006994a675ece4cd785d8
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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)
|
||||
|
|
1
src/browser/themes/shared/zen-icons/lin/trash.svg
Normal file
1
src/browser/themes/shared/zen-icons/lin/trash.svg
Normal 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 |
|
@ -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');
|
||||
|
|
|
@ -786,7 +786,7 @@
|
|||
if (!this.enabled) {
|
||||
return false;
|
||||
}
|
||||
movingTabs = [...movingTabs]
|
||||
movingTabs = [...movingTabs];
|
||||
try {
|
||||
const pinnedTabsTarget =
|
||||
event.target.closest('.zen-workspace-pinned-tabs-section') ||
|
||||
|
|
|
@ -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,
|
||||
});
|
||||
|
|
|
@ -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],
|
||||
},
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue