Change shoelace contextmenu style & position

- Reduced line height
- Align labels with/without icon
- Position to side when there's insufficient space above / below
This commit is contained in:
nathan 2024-07-11 11:27:31 -06:00
parent f4bb3d5709
commit 54c3252c45

View File

@ -14,17 +14,25 @@ export class EgwMenuShoelace extends LitElement
css`
:host {
display: block;
/* Fit in popup, scroll if not enough height */
max-height: var(--auto-size-available-height, auto);
overflow-y: auto;
}
.default-item::part(label) {
font-weight: var(--sl-font-weight-bold, bold);
}
sl-menu-item::part(base) {
height: 1.6em;
line-height: var(--sl-line-height-dense);
align-items: center;
padding: 0;
}
sl-menu-item::part(prefix) {
min-width: var(--sl-spacing-2x-large);
}
et2-image {
line-height: normal;
width: 1.5em;
}
`
@ -75,23 +83,26 @@ export class EgwMenuShoelace extends LitElement
this.removeCallback = _onHide;
if(this.popup == null)
{
this.popup = document.createElement("sl-popup");
this.popup.placement = "bottom";
this.popup.autoSize = "vertical";
this.popup.flip = true;
this.popup.shift = true;
this.popup.classList.add("egw_menu")
document.body.append(this.popup);
this.popup = Object.assign(document.createElement("sl-popup"), {
placement: "top",
autoSize: "vertical",
flip: true,
flipFallbackPlacements: "right bottom",
flipFallbackStrategy: "initial",
shift: true
});
this.popup.append(this);
this.popup.classList.add("egw_menu");
}
let menu = this;
this.popup.anchor = {
getBoundingClientRect()
{
return {
x: _x,
y: _y,
width: 0,
height: 0,
width: menu.clientWidth,
height: menu.clientHeight,
top: _y,
left: _x,
right: _x,
@ -100,6 +111,7 @@ export class EgwMenuShoelace extends LitElement
}
};
this.popup.active = true;
document.body.append(this.popup);
Promise.all([this.updateComplete, this.popup.updateComplete]).then(() =>
{
// Causes scroll issues if we don't position