mirror of
https://github.com/zen-browser/components.git
synced 2025-07-07 23:29:59 +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 {
|
class ZenEssentialsToolbar extends PlacesViewBase {
|
||||||
constructor(placesUrl, rootElt, viewElt) {
|
constructor(placesUrl) {
|
||||||
|
ZenEssentialsToolbar._initInitialLayout();
|
||||||
|
|
||||||
// We'll initialize the places URL after ensuring the folder exists
|
// 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
|
// Do initialization of properties that don't depend on Places
|
||||||
this._init();
|
this._init();
|
||||||
this._initPlacesFolder();
|
this._initPlacesFolder();
|
||||||
|
@ -117,6 +119,29 @@ class ZenEssentialsToolbar extends PlacesViewBase {
|
||||||
this._addEventListeners(window, ["unload"], false);
|
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 = [
|
_cbEvents = [
|
||||||
"dragstart",
|
"dragstart",
|
||||||
"dragover",
|
"dragover",
|
||||||
|
|
|
@ -783,27 +783,6 @@ class ZenBrowserManagerSidebar extends ZenDOMOperatedFeature {
|
||||||
const url = gContextMenu.linkURL || gContextMenu.target.ownerDocument.location.href;
|
const url = gContextMenu.linkURL || gContextMenu.target.ownerDocument.location.href;
|
||||||
this._createNewPanel(url);
|
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();
|
window.gZenBrowserManagerSidebar = new ZenBrowserManagerSidebar();
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue