mirror of
https://github.com/zen-browser/components.git
synced 2025-07-07 16:35:30 +02:00
feat(toolbar): Add Zen Essentials Toolbar
This commit adds the Zen Essentials Toolbar to the application. The toolbar is initialized in the `ZenEssentialsToolbar` class constructor by calling the `_initInitialLayout` method. The toolbar is inserted before the `vertical-pinned-tabs-container` element and consists of a scrollable container (`EssentialsToolbarItems`) for toolbar items. The toolbar also includes event listeners for mouse events and commands. The commit also includes a code change in the `ZenSidebarManager` class where the `toggleEssentialsAccordion` method has been removed. This method was responsible for expanding and collapsing the `EssentialsToolbarItems` content based on the state of the header element. These changes enhance the application by adding the Zen Essentials Toolbar and removing the unnecessary `toggleEssentialsAccordion` method.
This commit is contained in:
parent
459880394b
commit
c83a7aa58a
2 changed files with 27 additions and 23 deletions
|
@ -1,8 +1,10 @@
|
|||
|
||||
class ZenEssentialsToolbar extends PlacesViewBase {
|
||||
constructor(placesUrl, rootElt, viewElt) {
|
||||
constructor(placesUrl) {
|
||||
ZenEssentialsToolbar._initInitialLayout();
|
||||
|
||||
// We'll initialize the places URL after ensuring the folder exists
|
||||
super(null, rootElt, viewElt);
|
||||
super(null, document.getElementById("EssentialsToolbarItems"), document.getElementById("EssentialsToolbar"));
|
||||
// Do initialization of properties that don't depend on Places
|
||||
this._init();
|
||||
this._initPlacesFolder();
|
||||
|
@ -117,6 +119,29 @@ class ZenEssentialsToolbar extends PlacesViewBase {
|
|||
this._addEventListeners(window, ["unload"], false);
|
||||
}
|
||||
|
||||
static _initInitialLayout() {
|
||||
const fragment = window.MozXULElement.parseXULToFragment(`
|
||||
<hbox
|
||||
id="EssentialsToolbar"
|
||||
context="placesContext"
|
||||
onmouseup="BookmarksEventHandler.onMouseUp(event);"
|
||||
onclick="BookmarksEventHandler.onClick(event, this._placesView);"
|
||||
oncommand="BookmarksEventHandler.onCommand(event);"
|
||||
tooltip="bhTooltip"
|
||||
popupsinherittooltip="true">
|
||||
<hbox id="EssentialsToolbarDropIndicatorHolder" align="center" collapsed="true">
|
||||
<image id="EssentialsToolbarDropIndicator"
|
||||
collapsed="true"/>
|
||||
</hbox>
|
||||
<scrollbox orient="vertical"
|
||||
id="EssentialsToolbarItems"
|
||||
flex="1"/>
|
||||
</hbox>
|
||||
`);
|
||||
|
||||
document.getElementById("vertical-pinned-tabs-container").before(fragment);
|
||||
}
|
||||
|
||||
_cbEvents = [
|
||||
"dragstart",
|
||||
"dragover",
|
||||
|
|
|
@ -783,27 +783,6 @@ class ZenBrowserManagerSidebar extends ZenDOMOperatedFeature {
|
|||
const url = gContextMenu.linkURL || gContextMenu.target.ownerDocument.location.href;
|
||||
this._createNewPanel(url);
|
||||
}
|
||||
|
||||
toggleEssentialsAccordion(header) {
|
||||
const content = document.getElementById('EssentialsToolbarItems');
|
||||
const isExpanded = header.hasAttribute('expanded');
|
||||
|
||||
if (isExpanded) {
|
||||
// Collapse
|
||||
header.removeAttribute('expanded');
|
||||
content.style.maxHeight = null;
|
||||
content.style.opacity = '0';
|
||||
setTimeout(() => {
|
||||
content.removeAttribute('expanded');
|
||||
}, 300);
|
||||
} else {
|
||||
// Expand
|
||||
header.setAttribute('expanded', 'true');
|
||||
content.setAttribute('expanded', 'true');
|
||||
content.style.maxHeight = content.scrollHeight + "px";
|
||||
content.style.opacity = '1';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
window.gZenBrowserManagerSidebar = new ZenBrowserManagerSidebar();
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue