mirror of
https://github.com/EGroupware/egroupware.git
synced 2024-12-22 23:00:56 +01:00
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:
parent
f4bb3d5709
commit
54c3252c45
@ -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
|
||||||
|
Loading…
Reference in New Issue
Block a user