Et2DropdownButton now working & looking like it belongs

This commit is contained in:
nathan 2022-05-13 11:51:29 -06:00
parent ce922c8816
commit 9e78e35fd3
3 changed files with 92 additions and 14 deletions

View File

@ -42,29 +42,65 @@ export class Et2DropdownButton extends Et2widgetWithSelectMixin(Et2Button)
css`
:host {
display: contents;
/**
Adapt shoelace color variables to what we want
Maybe some logical variables from etemplate2.css here?
*/
--sl-color-primary-50: rgb(244, 246, 247);
--sl-color-primary-100: var(--gray-10);
--sl-color-primary-300: var(--input-border-color);
--sl-color-primary-400: var(--input-border-color);
--sl-color-primary-700: #505050;
}
.menu-item {
width: --sl-input-height-medium;
max-height: var(--sl-input-height-medium)
}
`,
];
}
static get properties()
{
return {
...super.properties
};
}
// Make sure imports stay
private _group : SlButtonGroup;
private _dropdow : SlDropdown;
constructor()
{
super();
// Bind handlers - parent already got click
this._handleSelect = this._handleSelect.bind(this);
}
connectedCallback()
{
super.connectedCallback();
// Rebind click to just the button
// Rebind click to just the main button, not the whole thing
this.removeEventListener("click", this._handleClick);
// Need to wait until update is done and these exist
this.updateComplete.then(() =>
{
this.buttonNode.addEventListener("click", this._handleClick);
this.dropdownNode.addEventListener('sl-select', this._handleSelect);
});
}
disconnectedCallback()
{
super.disconnectedCallback();
if(this.buttonNode)
{
this.buttonNode.removeEventListener("click", this._handleClick);
}
if(this.dropdownNode)
{
this.dropdownNode.removeEventListener('sl-select', this._handleSelect);
}
}
render()
@ -96,9 +132,42 @@ export class Et2DropdownButton extends Et2widgetWithSelectMixin(Et2Button)
</sl-menu-item>`;
}
protected _handleSelect(ev)
{
let oldValue = this._value;
this._value = ev.detail.item.value;
// Trigger a change event
this.dispatchEvent(new Event("change"));
// Let it bubble, if anyone else is interested
}
get value() : string
{
return this._value;
}
set value(new_value)
{
let oldValue = this.value;
this._value = new_value;
this.requestUpdate("value", oldValue);
}
get buttonNode()
{
return this.shadowRoot.querySelector("et2-button");
return this.shadowRoot.querySelector("#main");
}
get triggerButtonNode()
{
return this.shadowRoot.querySelector("[slot='trigger']");
}
get dropdownNode()
{
return this.shadowRoot.querySelector("sl-dropdown");
}
}

View File

@ -1,8 +1,19 @@
import sl_css from '@shoelace-style/shoelace/dist/themes/light.styles.js';
import {css} from "lit";
import {registerIconLibrary} from '@shoelace-style/shoelace/dist/utilities/icon-library.js';
import {egw} from "../../jsapi/egw_global";
/**
* This makes sure the built-in icons can be found
*/
registerIconLibrary('default', {
resolver: name => `${egw.webserverUrl}/node_modules/@shoelace-style/shoelace/dist/assets/icons/${name}.svg`,
});
/**
* Customise shoelace styles to match our stuff
* External CSS will override this
*/
export default [sl_css, css`
:root,
@ -17,8 +28,5 @@ export default [sl_css, css`
--sl-input-border-radius-small: 2px;
--sl-input-border-radius-medium: 3px;
}
.menu-item {
width: --sl-input-height-medium;
max-height: var(--sl-input-height-medium)
}
`];

View File

@ -57,7 +57,8 @@
<buttononly statustext="Tile view" id="button[change_view]" onclick="app.filemanager.change_view" image="list_tile" background_image="true"/>
</template>
<template id="filemanager.index.header_right" template="" lang="" group="0" version="1.9.003">
<dropdown_button id="new" onchange="app.filemanager.create_new" label="New" onclick="app.filemanager.create_new"/>
<et2-dropdown-button id="new" onchange="app.filemanager.create_new" label="New"
onclick="app.filemanager.create_new"/>
<buttononly statustext="Rename, change permissions or ownership" id="button[edit]" onclick="app.filemanager.editprefs();" image="edit" background_image="true"/>
<buttononly statustext="Create directory" id="button[createdir]" onclick="app.filemanager.createdir();" image="button_createdir" background_image="true"/>
<buttononly statustext="Create a link" id="button[symlink]" onclick="app.filemanager.symlink();" image="link" background_image="true"/>