mirror of
https://github.com/zen-browser/desktop.git
synced 2025-10-13 21:36:11 +00:00
feat: part 2 - Finish workspace creation form, refactor collapsed toolbar and update motion to v12.16.0, b=no-bug, c=workspaces, common, tabs, vendor
This commit is contained in:
Mr. M
@@ -1,3 +1,7 @@
|
||||
# This Source Code Form is subject to the terms of the Mozilla Public
|
||||
# License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
# file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
|
||||
<commandset id="zenCommandSet">
|
||||
<command id="cmd_zenCompactModeToggle" />
|
||||
<command id="cmd_zenCompactModeShowSidebar" />
|
||||
|
||||
@@ -1,3 +1,6 @@
|
||||
# This Source Code Form is subject to the terms of the Mozilla Public
|
||||
# License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
# file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
|
||||
<link rel="localization" href="browser/zen-workspaces.ftl"/>
|
||||
<link rel="localization" href="browser/zen-split-view.ftl"/>
|
||||
|
||||
11
src/browser/base/content/zen-panels/emojis-picker.inc
Normal file
11
src/browser/base/content/zen-panels/emojis-picker.inc
Normal file
@@ -0,0 +1,11 @@
|
||||
# This Source Code Form is subject to the terms of the Mozilla Public
|
||||
# License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
# file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
|
||||
<panel type="arrow" orient="vertical" id="PanelUI-zen-emojis-picker" position="bottomright topright" side="bottom">
|
||||
<hbox id="PanelUI-zen-emojis-picker-header">
|
||||
<html:input type="search" id="PanelUI-zen-emojis-picker-search" placeholder="Search emojis" />
|
||||
<toolbarbutton id="PanelUI-zen-emojis-picker-none" class="toolbarbutton-1" />
|
||||
</hbox>
|
||||
<hbox id="PanelUI-zen-emojis-picker-list" />
|
||||
</panel>
|
||||
61
src/browser/base/content/zen-panels/gradient-generator.inc
Normal file
61
src/browser/base/content/zen-panels/gradient-generator.inc
Normal file
@@ -0,0 +1,61 @@
|
||||
# This Source Code Form is subject to the terms of the Mozilla Public
|
||||
# License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
# file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
|
||||
<panel flip="side" type="arrow" popupalign="center" orient="vertical" id="PanelUI-zen-gradient-generator" position="bottomright topright" mainview="true" side="left">
|
||||
<panelmultiview id="PanelUI-zen-gradient-generator-multiview" mainViewId="PanelUI-zen-gradient-generator-view">
|
||||
<panelview id="PanelUI-zen-gradient-generator-view" class="PanelUI-subView zen-theme-picker" role="document" mainview-with-header="true" has-custom-header="true">
|
||||
<hbox>
|
||||
<hbox id="PanelUI-zen-gradient-generator-predefined">
|
||||
<box data-algo="analogous" data-num-dots="3" data-position="219,99" style="background: linear-gradient(135deg, rgb(117, 255, 136), rgb(60, 66, 58));"></box>
|
||||
<box data-algo="analogous" data-num-dots="3" data-position="167,201" style="background: linear-gradient(135deg, #a03fe0, #382b5c);"></box>
|
||||
<box data-algo="analogous" data-num-dots="3" data-position="90,170" style="background: linear-gradient(135deg, #c57aa3, #af824f);"></box>
|
||||
<box data-algo="splitComplementary" data-num-dots="3" data-position="83,103" style="background: linear-gradient(135deg, #1e90ff, #968a4a);"></box>
|
||||
<box data-algo="analogous" data-num-dots="3" data-position="186,186" style="background: linear-gradient(135deg, #a07a48, #ab80e4);"></box>
|
||||
<box data-algo="float" data-num-dots="1" data-position="196,176" style="background: #7bcbda;"></box>
|
||||
<box data-algo="float" data-num-dots="1" data-position="116,167" style="background: #be9ac9;"></box>
|
||||
<box data-algo="float" data-num-dots="1" data-position="122,110" style="background: #cdcea1;"></box>
|
||||
<box data-algo="float" data-num-dots="1" data-position="181,83" style="background: #6ac593;"></box>
|
||||
<box data-algo="complementary" data-num-dots="2" data-position="82,112" style="background: linear-gradient(135deg, #1e90ff, #cfb179);"></box>
|
||||
</hbox>
|
||||
</hbox>
|
||||
<hbox class="zen-theme-picker-gradient">
|
||||
<box id="PanelUI-zen-gradient-generator-rotation-dot"></box>
|
||||
<box id="PanelUI-zen-gradient-generator-rotation-line"></box>
|
||||
<box id="PanelUI-zen-gradient-generator-color-actions">
|
||||
<button id="PanelUI-zen-gradient-generator-color-add" class="subviewbutton">
|
||||
</button>
|
||||
<button id="PanelUI-zen-gradient-generator-color-remove" class="subviewbutton">
|
||||
</button>
|
||||
<html:div class="separator"></html:div>
|
||||
<button id="PanelUI-zen-gradient-generator-color-toggle-algo" class="subviewbutton" data-l10n-id="zen-panel-ui-gradient-generator-algo-floating">
|
||||
</button>
|
||||
</box>
|
||||
<label data-l10n-id="zen-panel-ui-gradient-click-to-add" id="PanelUI-zen-gradient-generator-color-click-to-add"></label>
|
||||
</hbox>
|
||||
<hbox id="PanelUI-zen-gradient-generator-controls">
|
||||
<hbox id="PanelUI-zen-gradient-colors-wrapper">
|
||||
<vbox flex="1">
|
||||
<label data-l10n-id="zen-panel-ui-gradient-generator-opacity-text"></label>
|
||||
<html:input type="range" min="0" max="1" value="0.5" step="0.05" id="PanelUI-zen-gradient-generator-opacity" />
|
||||
</vbox>
|
||||
<vbox id="PanelUI-zen-gradient-generator-texture-wrapper">
|
||||
</vbox>
|
||||
</hbox>
|
||||
</hbox>
|
||||
<vbox id="PanelUI-zen-gradient-generator-custom-colors">
|
||||
<vbox id="zen-theme-picker-color">
|
||||
<label data-l10n-id="zen-panel-ui-gradient-generator-custom-color"></label>
|
||||
<hbox>
|
||||
<html:input type="text" placeholder="#000000" id="PanelUI-zen-gradient-generator-custom-input" />
|
||||
<toolbarbutton id="PanelUI-zen-gradient-generator-color-custom-add" class="subviewbutton">
|
||||
<image></image>
|
||||
</toolbarbutton>
|
||||
</hbox>
|
||||
</vbox>
|
||||
<vbox id="PanelUI-zen-gradient-generator-custom-list">
|
||||
</vbox>
|
||||
</vbox>
|
||||
</panelview>
|
||||
</panelmultiview>
|
||||
</panel>
|
||||
29
src/browser/base/content/zen-panels/popups.inc
Normal file
29
src/browser/base/content/zen-panels/popups.inc
Normal file
@@ -0,0 +1,29 @@
|
||||
# This Source Code Form is subject to the terms of the Mozilla Public
|
||||
# License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
# file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
|
||||
<menupopup id="zenCreateNewPopup">
|
||||
<menuitem data-l10n-id="tabs-toolbar-new-tab" command="cmd_newNavigatorTab" image="chrome://browser/skin/zen-icons/plus.svg" />
|
||||
<menuseparator/>
|
||||
<menuitem data-l10n-id="zen-panel-ui-workspaces-create" command="cmd_zenOpenWorkspaceCreation" image="chrome://browser/skin/zen-icons/duplicate-tab.svg" />
|
||||
</menupopup>
|
||||
|
||||
<menupopup id="zenWorkspaceMoreActions">
|
||||
<menuitem id="context_zenEditWorkspace" data-l10n-id="zen-panel-ui-workspaces-create" command="cmd_zenChangeWorkspaceName"/>
|
||||
<menuitem id="context_zenEditWorkspaceIcon" data-l10n-id="zen-workspaces-panel-change-icon" command="cmd_zenChangeWorkspaceIcon"/>
|
||||
<menuitem class="zenToolbarThemePicker"
|
||||
data-l10n-id="zen-workspaces-change-theme"
|
||||
command="cmd_zenOpenZenThemePicker"/>
|
||||
<menu id="context_zenWorkspacesOpenInContainerTab"
|
||||
data-l10n-id="zen-workspaces-panel-context-open-in-container-tab"
|
||||
selection-type="single"
|
||||
node-type="link"
|
||||
hide-if-private-browsing="true"
|
||||
hide-if-usercontext-disabled="true">
|
||||
<menupopup />
|
||||
</menu>
|
||||
<menuseparator/>
|
||||
<menuitem id="context_zenOpenWorkspacePanel" data-l10n-id="zen-workspaces-panel-context-manage" command="cmd_zenOpenWorkspacePanel"/>
|
||||
<menuseparator/>
|
||||
<menuitem id="context_zenDeleteWorkspace" data-l10n-id="zen-workspaces-panel-context-delete" command="cmd_zenCtxDeleteWorkspace"/>
|
||||
</menupopup>
|
||||
23
src/browser/base/content/zen-panels/workspaces-panel.inc
Normal file
23
src/browser/base/content/zen-panels/workspaces-panel.inc
Normal file
@@ -0,0 +1,23 @@
|
||||
# This Source Code Form is subject to the terms of the Mozilla Public
|
||||
# License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
# file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
|
||||
<panel flip="slide" type="arrow" orient="vertical" id="PanelUI-zen-workspaces" position="bottomright topright" mainview="true" side="left">
|
||||
<panelmultiview id="PanelUI-zen-workspaces-multiview" mainViewId="PanelUI-zen-workspaces-view">
|
||||
<panelview id="PanelUI-zen-workspaces-view" class="PanelUI-subView" role="document" mainview-with-header="true" has-custom-header="true" closemenu="none">
|
||||
<vbox>
|
||||
<hbox>
|
||||
<h3 data-l10n-id="zen-panel-ui-workspaces-text" id="PanelUI-zen-workspaces-header"></h3>
|
||||
<toolbarbutton id="PanelUI-zen-workspaces-reorder-mode" class="subviewbutton">
|
||||
<image></image>
|
||||
</toolbarbutton>
|
||||
<toolbarbutton id="PanelUI-zen-workspaces-new" class="subviewbutton" command="cmd_zenOpenWorkspaceCreation">
|
||||
<image></image>
|
||||
</toolbarbutton>
|
||||
</hbox>
|
||||
</vbox>
|
||||
<html:div id="PanelUI-zen-workspaces-list">
|
||||
</html:div>
|
||||
</panelview>
|
||||
</panelmultiview>
|
||||
</panel>
|
||||
@@ -1,112 +1,9 @@
|
||||
# This Source Code Form is subject to the terms of the Mozilla Public
|
||||
# License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
# file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
|
||||
<panel flip="side" type="arrow" orient="vertical" id="PanelUI-zen-gradient-generator" position="bottomright topright" mainview="true" side="left">
|
||||
<panelmultiview id="PanelUI-zen-gradient-generator-multiview" mainViewId="PanelUI-zen-gradient-generator-view">
|
||||
<panelview id="PanelUI-zen-gradient-generator-view" class="PanelUI-subView zen-theme-picker" role="document" mainview-with-header="true" has-custom-header="true">
|
||||
<hbox>
|
||||
<hbox id="PanelUI-zen-gradient-generator-predefined">
|
||||
<box data-algo="analogous" data-num-dots="3" data-position="219,99" style="background: linear-gradient(135deg, rgb(117, 255, 136), rgb(60, 66, 58));"></box>
|
||||
<box data-algo="analogous" data-num-dots="3" data-position="167,201" style="background: linear-gradient(135deg, #a03fe0, #382b5c);"></box>
|
||||
<box data-algo="analogous" data-num-dots="3" data-position="90,170" style="background: linear-gradient(135deg, #c57aa3, #af824f);"></box>
|
||||
<box data-algo="splitComplementary" data-num-dots="3" data-position="83,103" style="background: linear-gradient(135deg, #1e90ff, #968a4a);"></box>
|
||||
<box data-algo="analogous" data-num-dots="3" data-position="186,186" style="background: linear-gradient(135deg, #a07a48, #ab80e4);"></box>
|
||||
<box data-algo="float" data-num-dots="1" data-position="196,176" style="background: #7bcbda;"></box>
|
||||
<box data-algo="float" data-num-dots="1" data-position="116,167" style="background: #be9ac9;"></box>
|
||||
<box data-algo="float" data-num-dots="1" data-position="122,110" style="background: #cdcea1;"></box>
|
||||
<box data-algo="float" data-num-dots="1" data-position="181,83" style="background: #6ac593;"></box>
|
||||
<box data-algo="complementary" data-num-dots="2" data-position="82,112" style="background: linear-gradient(135deg, #1e90ff, #cfb179);"></box>
|
||||
</hbox>
|
||||
</hbox>
|
||||
<hbox class="zen-theme-picker-gradient">
|
||||
<box id="PanelUI-zen-gradient-generator-rotation-dot"></box>
|
||||
<box id="PanelUI-zen-gradient-generator-rotation-line"></box>
|
||||
<box id="PanelUI-zen-gradient-generator-color-actions">
|
||||
<button id="PanelUI-zen-gradient-generator-color-add" class="subviewbutton">
|
||||
</button>
|
||||
<button id="PanelUI-zen-gradient-generator-color-remove" class="subviewbutton">
|
||||
</button>
|
||||
<html:div class="separator"></html:div>
|
||||
<button id="PanelUI-zen-gradient-generator-color-toggle-algo" class="subviewbutton" data-l10n-id="zen-panel-ui-gradient-generator-algo-floating">
|
||||
</button>
|
||||
</box>
|
||||
<label data-l10n-id="zen-panel-ui-gradient-click-to-add" id="PanelUI-zen-gradient-generator-color-click-to-add"></label>
|
||||
</hbox>
|
||||
<hbox id="PanelUI-zen-gradient-generator-controls">
|
||||
<hbox id="PanelUI-zen-gradient-colors-wrapper">
|
||||
<vbox flex="1">
|
||||
<label data-l10n-id="zen-panel-ui-gradient-generator-opacity-text"></label>
|
||||
<html:input type="range" min="0" max="1" value="0.5" step="0.05" id="PanelUI-zen-gradient-generator-opacity" />
|
||||
</vbox>
|
||||
<vbox id="PanelUI-zen-gradient-generator-texture-wrapper">
|
||||
</vbox>
|
||||
</hbox>
|
||||
</hbox>
|
||||
<vbox id="PanelUI-zen-gradient-generator-custom-colors">
|
||||
<vbox id="zen-theme-picker-color">
|
||||
<label data-l10n-id="zen-panel-ui-gradient-generator-custom-color"></label>
|
||||
<hbox>
|
||||
<html:input type="text" placeholder="#000000" id="PanelUI-zen-gradient-generator-custom-input" />
|
||||
<toolbarbutton id="PanelUI-zen-gradient-generator-color-custom-add" class="subviewbutton">
|
||||
<image></image>
|
||||
</toolbarbutton>
|
||||
</hbox>
|
||||
</vbox>
|
||||
<vbox id="PanelUI-zen-gradient-generator-custom-list">
|
||||
</vbox>
|
||||
</vbox>
|
||||
</panelview>
|
||||
</panelmultiview>
|
||||
</panel>
|
||||
#include zen-panels/gradient-generator.inc
|
||||
#include zen-panels/workspaces-panel.inc
|
||||
#include zen-panels/emojis-picker.inc
|
||||
|
||||
<panel flip="slide" type="arrow" orient="vertical" id="PanelUI-zen-workspaces" position="bottomright topright" mainview="true" side="left">
|
||||
<panelmultiview id="PanelUI-zen-workspaces-multiview" mainViewId="PanelUI-zen-workspaces-view">
|
||||
<panelview id="PanelUI-zen-workspaces-view" class="PanelUI-subView" role="document" mainview-with-header="true" has-custom-header="true" closemenu="none">
|
||||
<vbox>
|
||||
<hbox>
|
||||
<h3 data-l10n-id="zen-panel-ui-workspaces-text" id="PanelUI-zen-workspaces-header"></h3>
|
||||
<toolbarbutton id="PanelUI-zen-workspaces-reorder-mode" class="subviewbutton">
|
||||
<image></image>
|
||||
</toolbarbutton>
|
||||
<toolbarbutton id="PanelUI-zen-workspaces-new" class="subviewbutton" command="cmd_zenOpenWorkspaceCreation">
|
||||
<image></image>
|
||||
</toolbarbutton>
|
||||
</hbox>
|
||||
</vbox>
|
||||
<html:div id="PanelUI-zen-workspaces-list">
|
||||
</html:div>
|
||||
</panelview>
|
||||
</panelmultiview>
|
||||
</panel>
|
||||
|
||||
<panel type="arrow" orient="vertical" id="PanelUI-zen-emojis-picker" position="bottomright topright" side="bottom">
|
||||
<hbox id="PanelUI-zen-emojis-picker-header">
|
||||
<html:input type="search" id="PanelUI-zen-emojis-picker-search" placeholder="Search emojis" />
|
||||
<toolbarbutton id="PanelUI-zen-emojis-picker-none" class="toolbarbutton-1" />
|
||||
</hbox>
|
||||
<hbox id="PanelUI-zen-emojis-picker-list" />
|
||||
</panel>
|
||||
|
||||
<menupopup id="zenCreateNewPopup">
|
||||
<menuitem data-l10n-id="tabs-toolbar-new-tab" command="cmd_newNavigatorTab" image="chrome://browser/skin/zen-icons/plus.svg" />
|
||||
<menuseparator/>
|
||||
<menuitem data-l10n-id="zen-panel-ui-workspaces-create" command="cmd_zenOpenWorkspaceCreation" image="chrome://browser/skin/zen-icons/duplicate-tab.svg" />
|
||||
</menupopup>
|
||||
|
||||
<menupopup id="zenWorkspaceMoreActions">
|
||||
<menuitem id="context_zenEditWorkspace" data-l10n-id="zen-panel-ui-workspaces-create" command="cmd_zenChangeWorkspaceName"/>
|
||||
<menuitem id="context_zenEditWorkspaceIcon" data-l10n-id="zen-workspaces-panel-change-icon" command="cmd_zenChangeWorkspaceIcon"/>
|
||||
<menuitem class="zenToolbarThemePicker"
|
||||
data-l10n-id="zen-workspaces-change-theme"
|
||||
command="cmd_zenOpenZenThemePicker"/>
|
||||
<menu id="context_zenWorkspacesOpenInContainerTab"
|
||||
data-l10n-id="zen-workspaces-panel-context-open-in-container-tab"
|
||||
selection-type="single"
|
||||
node-type="link"
|
||||
hide-if-private-browsing="true"
|
||||
hide-if-usercontext-disabled="true">
|
||||
<menupopup />
|
||||
</menu>
|
||||
<menuseparator/>
|
||||
<menuitem id="context_zenOpenWorkspacePanel" data-l10n-id="zen-workspaces-panel-context-manage" command="cmd_zenOpenWorkspacePanel"/>
|
||||
<menuseparator/>
|
||||
<menuitem id="context_zenDeleteWorkspace" data-l10n-id="zen-workspaces-panel-context-delete" command="cmd_zenCtxDeleteWorkspace"/>
|
||||
</menupopup>
|
||||
#include zen-panels/popups.inc
|
||||
|
||||
@@ -1,3 +1,7 @@
|
||||
# This Source Code Form is subject to the terms of the Mozilla Public
|
||||
# License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
# file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
|
||||
# This needs to be here, before all the other scripts, because it's used before
|
||||
# the window is fully loaded.
|
||||
# Make sure they are loaded before the global-scripts.inc file.
|
||||
|
||||
@@ -1,6 +1,11 @@
|
||||
# This Source Code Form is subject to the terms of the Mozilla Public
|
||||
# License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
# file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
|
||||
#include ../../../zen/media/zen-media-controls.inc.xhtml
|
||||
|
||||
<toolbar brighttext="true"
|
||||
id="zen-sidebar-bottom-buttons"
|
||||
id="zen-sidebar-foot-buttons"
|
||||
fullscreentoolbar="true"
|
||||
class="browser-toolbar customization-target"
|
||||
data-l10n-id="tabs-toolbar"
|
||||
|
||||
@@ -1,3 +1,7 @@
|
||||
# This Source Code Form is subject to the terms of the Mozilla Public
|
||||
# License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
# file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
|
||||
<vbox id="zen-toast-container"></vbox>
|
||||
|
||||
#include ../../../zen/split-view/zen-splitview-overlay.inc.xhtml
|
||||
|
||||
@@ -20,7 +20,7 @@ export var ZenCustomizableUI = new (class {
|
||||
true
|
||||
);
|
||||
CustomizableUIInternal.registerArea(
|
||||
'zen-sidebar-bottom-buttons',
|
||||
'zen-sidebar-foot-buttons',
|
||||
{
|
||||
type: this.TYPE_TOOLBAR,
|
||||
defaultPlacements: this.defaultSidebarIcons,
|
||||
@@ -148,7 +148,7 @@ export var ZenCustomizableUI = new (class {
|
||||
}
|
||||
|
||||
_hideToolbarButtons(window) {
|
||||
const wrapper = window.document.getElementById('zen-sidebar-bottom-buttons');
|
||||
const wrapper = window.document.getElementById('zen-sidebar-foot-buttons');
|
||||
const elementsToHide = ['new-tab-button'];
|
||||
for (let id of elementsToHide) {
|
||||
const elem = window.document.getElementById(id);
|
||||
@@ -167,7 +167,7 @@ export var ZenCustomizableUI = new (class {
|
||||
window.document.getElementById('zen-sidebar-top-buttons')
|
||||
);
|
||||
window.CustomizableUI.registerToolbarNode(
|
||||
window.document.getElementById('zen-sidebar-bottom-buttons')
|
||||
window.document.getElementById('zen-sidebar-foot-buttons')
|
||||
);
|
||||
}
|
||||
})();
|
||||
|
||||
@@ -423,20 +423,18 @@
|
||||
/* ==========================================================================
|
||||
Sidebar Bottom Buttons Area
|
||||
========================================================================== */
|
||||
#zen-sidebar-bottom-buttons {
|
||||
#zen-sidebar-foot-buttons {
|
||||
background: transparent;
|
||||
gap: 5px; /* Spacing between buttons */
|
||||
align-items: center; /* Center vertically */
|
||||
padding-top: var(--zen-element-separation); /* Add padding above */
|
||||
--toolbarbutton-inner-padding: 5px; /* Define inner padding for buttons */
|
||||
gap: 5px;
|
||||
align-items: center;
|
||||
padding-top: var(--zen-element-separation);
|
||||
--toolbarbutton-inner-padding: 5px;
|
||||
|
||||
/* Remove padding from direct children (except workspaces button) */
|
||||
& > toolbarbutton:not(#zen-workspaces-button) {
|
||||
padding: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Hide the default new tab button container */
|
||||
#newtab-button-container {
|
||||
display: none !important;
|
||||
}
|
||||
@@ -445,7 +443,6 @@
|
||||
Tab Arrow Scrollbox Adjustments
|
||||
========================================================================== */
|
||||
#tabbrowser-arrowscrollbox {
|
||||
/* Remove gap within the scrollbox part */
|
||||
&::part(scrollbox) {
|
||||
gap: 0px !important;
|
||||
}
|
||||
@@ -561,10 +558,10 @@
|
||||
}
|
||||
|
||||
/* Style bottom buttons area when expanded */
|
||||
& #zen-sidebar-bottom-buttons {
|
||||
& #zen-sidebar-foot-buttons {
|
||||
display: flex;
|
||||
flex-direction: row; /* Arrange buttons horizontally */
|
||||
justify-content: space-between; /* Distribute space */
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
@@ -780,10 +777,27 @@
|
||||
}
|
||||
|
||||
/* Ensure bottom buttons container fits content during customization */
|
||||
:root[customizing] & #zen-sidebar-bottom-buttons {
|
||||
:root[customizing] & #zen-sidebar-foot-buttons {
|
||||
min-width: unset !important;
|
||||
}
|
||||
|
||||
#zen-sidebar-foot-buttons {
|
||||
& > .toolbarbutton-1 {
|
||||
min-height: var(--tab-min-height);
|
||||
line-height: var(--tab-label-line-height);
|
||||
border-radius: var(--border-radius-medium);
|
||||
padding: 0 calc(var(--tab-inline-padding) - var(--tab-inner-inline-margin));
|
||||
width: var(--tab-collapsed-background-width);
|
||||
margin-inline: var(--tab-inner-inline-margin);
|
||||
|
||||
& .toolbarbutton-badge-stack {
|
||||
justify-content: center;
|
||||
padding: 8px;
|
||||
width: var(--tab-collapsed-background-width);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Center top buttons container */
|
||||
& #zen-sidebar-top-buttons {
|
||||
justify-content: center;
|
||||
@@ -805,7 +819,7 @@
|
||||
}
|
||||
|
||||
/* Style bottom buttons area when collapsed */
|
||||
& #zen-sidebar-bottom-buttons {
|
||||
& #zen-sidebar-foot-buttons {
|
||||
display: flex;
|
||||
flex-direction: column; /* Stack vertically */
|
||||
padding-top: var(--zen-element-separation);
|
||||
|
||||
1
src/zen/vendor/motion.dep
vendored
Normal file
1
src/zen/vendor/motion.dep
vendored
Normal file
@@ -0,0 +1 @@
|
||||
https://cdn.jsdelivr.net/npm/motion@latest/+esm: v12.16.0
|
||||
4
src/zen/vendor/motion.min.mjs
vendored
4
src/zen/vendor/motion.min.mjs
vendored
File diff suppressed because one or more lines are too long
@@ -76,13 +76,13 @@
|
||||
}
|
||||
|
||||
openThemePicker(event) {
|
||||
const target = event.explicitOriginalTarget?.classList?.contains(
|
||||
const position = event.explicitOriginalTarget?.classList?.contains(
|
||||
'zen-workspace-creation-edit-theme-button'
|
||||
)
|
||||
? event.explicitOriginalTarget
|
||||
: this.toolbox;
|
||||
PanelMultiView.openPopup(this.panel, target, {
|
||||
position: 'bottomright topright',
|
||||
? 'end_before'
|
||||
: 'topright topleft';
|
||||
PanelMultiView.openPopup(this.panel, this.toolbox, {
|
||||
position,
|
||||
triggerEvent: event,
|
||||
});
|
||||
}
|
||||
|
||||
@@ -59,6 +59,18 @@
|
||||
return this.getAttribute('workspace-id');
|
||||
}
|
||||
|
||||
get elementsToAnimate() {
|
||||
return [
|
||||
this.querySelector('.zen-workspace-creation-title'),
|
||||
this.querySelector('.zen-workspace-creation-label'),
|
||||
this.querySelector('.zen-workspace-creation-name-wrapper'),
|
||||
this.querySelector('.zen-workspace-creation-profile-wrapper'),
|
||||
this.querySelector('.zen-workspace-creation-edit-theme-button'),
|
||||
this.createButton,
|
||||
this.cancelButton,
|
||||
];
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
if (this.delayConnectedCallback()) {
|
||||
// If we are not ready yet, or if we have already connected, we
|
||||
@@ -71,6 +83,16 @@
|
||||
this.appendChild(this.constructor.fragment);
|
||||
this.initializeAttributeInheritance();
|
||||
|
||||
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');
|
||||
this.createButton = this.querySelector('.zen-workspace-creation-create-button');
|
||||
this.cancelButton = this.querySelector('.zen-workspace-creation-cancel-button');
|
||||
|
||||
for (const element of this.elementsToAnimate) {
|
||||
element.style.opacity = 0;
|
||||
}
|
||||
|
||||
this.#wasInCollapsedMode =
|
||||
document.documentElement.getAttribute('zen-sidebar-expanded') !== 'true';
|
||||
|
||||
@@ -103,12 +125,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
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');
|
||||
this.createButton = this.querySelector('.zen-workspace-creation-create-button');
|
||||
this.cancelButton = this.querySelector('.zen-workspace-creation-cancel-button');
|
||||
|
||||
this.createButton.addEventListener('command', this.onCreateButtonCommand.bind(this));
|
||||
this.cancelButton.addEventListener('command', this.onCancelButtonCommand.bind(this));
|
||||
|
||||
@@ -133,6 +149,20 @@
|
||||
this.inputProfile.parentNode.hidden = true;
|
||||
}
|
||||
|
||||
gZenUIManager.motion.animate(
|
||||
this.elementsToAnimate,
|
||||
{
|
||||
y: [20, 0],
|
||||
opacity: [0, 1],
|
||||
},
|
||||
{
|
||||
duration: 0.9,
|
||||
type: 'spring',
|
||||
bounce: 0,
|
||||
delay: gZenUIManager.motion.stagger(0.05, { startDelay: 0.2 }),
|
||||
}
|
||||
);
|
||||
|
||||
this.resolveInitialized();
|
||||
}
|
||||
|
||||
@@ -143,7 +173,7 @@
|
||||
workspace.containerTabId = this.currentProfile;
|
||||
await gZenWorkspaces.saveWorkspace(workspace);
|
||||
|
||||
this.#cleanup();
|
||||
await this.#cleanup();
|
||||
|
||||
await gZenWorkspaces._organizeWorkspaceStripLocations(workspace, true);
|
||||
await gZenWorkspaces.updateTabsContainers();
|
||||
@@ -208,10 +238,24 @@
|
||||
|
||||
async handleZenWorkspacesChange() {
|
||||
await gZenWorkspaces.removeWorkspace(this.workspaceId);
|
||||
this.#cleanup();
|
||||
await this.#cleanup();
|
||||
}
|
||||
|
||||
#cleanup() {
|
||||
async #cleanup() {
|
||||
await gZenUIManager.motion.animate(
|
||||
this.elementsToAnimate.reverse(),
|
||||
{
|
||||
y: [0, 20],
|
||||
opacity: [1, 0],
|
||||
},
|
||||
{
|
||||
duration: 0.9,
|
||||
type: 'spring',
|
||||
bounce: 0,
|
||||
delay: gZenUIManager.motion.stagger(0.05),
|
||||
}
|
||||
);
|
||||
|
||||
gZenWorkspaces.removeChangeListeners(this.handleZenWorkspacesChangeBind);
|
||||
for (const element of this.constructor.elementsToDisable) {
|
||||
const el = document.getElementById(element);
|
||||
|
||||
@@ -643,7 +643,7 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
|
||||
|
||||
_handleSwipeMayStart(event) {
|
||||
if (this.privateWindowOrDisabled || this._inChangingWorkspace) return;
|
||||
if (event.target.closest('#zen-sidebar-bottom-buttons')) return;
|
||||
if (event.target.closest('#zen-sidebar-foot-buttons')) return;
|
||||
|
||||
// Only handle horizontal swipes
|
||||
if (event.direction === event.DIRECTION_LEFT || event.direction === event.DIRECTION_RIGHT) {
|
||||
@@ -2627,6 +2627,7 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
|
||||
|
||||
_initializeWorkspaceTabContextMenus() {
|
||||
if (this.privateWindowOrDisabled) {
|
||||
document.getElementById('cmd_zenOpenWorkspaceCreation').setAttribute('disabled', true);
|
||||
return;
|
||||
}
|
||||
const menu = document.createXULElement('menu');
|
||||
@@ -2639,10 +2640,6 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
|
||||
menu.appendChild(menuPopup);
|
||||
|
||||
document.getElementById('context_closeDuplicateTabs').after(menu);
|
||||
|
||||
document
|
||||
.getElementById('cmd_zenOpenWorkspaceCreation')
|
||||
.setAttribute('disabled', this.privateWindowOrDisabled);
|
||||
}
|
||||
|
||||
async changeTabWorkspace(workspaceID) {
|
||||
|
||||
@@ -6,29 +6,30 @@
|
||||
|
||||
zen-workspace-creation {
|
||||
flex: 1;
|
||||
max-width: calc(var(--zen-sidebar-width) - var(--zen-toolbox-padding) * 2);
|
||||
max-width: calc(var(--zen-sidebar-width) - var(--zen-toolbox-padding));
|
||||
|
||||
& .zen-workspace-creation {
|
||||
justify-content: center;
|
||||
|
||||
& .zen-workspace-creation-title {
|
||||
font-size: large;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
& .zen-workspace-creation-label {
|
||||
margin: 0;
|
||||
opacity: 0.6;
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
& 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.15), rgba(255, 255, 255, 0.15));
|
||||
--input-bgcolor: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: calc(100% - 10px);
|
||||
margin: auto;
|
||||
gap: 1rem;
|
||||
gap: 1.2rem;
|
||||
|
||||
& .zen-workspace-creation-form {
|
||||
gap: 0.6rem;
|
||||
|
||||
Reference in New Issue
Block a user