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` css`
:host { :host {
display: block; 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) { .default-item::part(label) {
font-weight: var(--sl-font-weight-bold, bold); 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 { et2-image {
line-height: normal;
width: 1.5em; width: 1.5em;
} }
` `
@ -75,23 +83,26 @@ export class EgwMenuShoelace extends LitElement
this.removeCallback = _onHide; this.removeCallback = _onHide;
if(this.popup == null) if(this.popup == null)
{ {
this.popup = document.createElement("sl-popup"); this.popup = Object.assign(document.createElement("sl-popup"), {
this.popup.placement = "bottom"; placement: "top",
this.popup.autoSize = "vertical"; autoSize: "vertical",
this.popup.flip = true; flip: true,
this.popup.shift = true; flipFallbackPlacements: "right bottom",
this.popup.classList.add("egw_menu") flipFallbackStrategy: "initial",
document.body.append(this.popup); shift: true
});
this.popup.append(this); this.popup.append(this);
this.popup.classList.add("egw_menu");
} }
let menu = this;
this.popup.anchor = { this.popup.anchor = {
getBoundingClientRect() getBoundingClientRect()
{ {
return { return {
x: _x, x: _x,
y: _y, y: _y,
width: 0, width: menu.clientWidth,
height: 0, height: menu.clientHeight,
top: _y, top: _y,
left: _x, left: _x,
right: _x, right: _x,
@ -100,6 +111,7 @@ export class EgwMenuShoelace extends LitElement
} }
}; };
this.popup.active = true; this.popup.active = true;
document.body.append(this.popup);
Promise.all([this.updateComplete, this.popup.updateComplete]).then(() => Promise.all([this.updateComplete, this.popup.updateComplete]).then(() =>
{ {
// Causes scroll issues if we don't position // Causes scroll issues if we don't position