extern/egroupware_official
1
0
Fork 0
mirror of https://github.com/EGroupware/egroupware.git synced 2025-01-02 20:19:27 +01:00
Code Issues Packages Projects Releases Wiki Activity

Et2Tree: Stop tree item labels from wrapping, they now show ellipsis instead

Browse Source
This commit is contained in:
nathan 2024-02-16 11:57:22 -07:00
parent fd52ed1ffe
commit d5b7ec50d2
1 changed files with 20 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
api/js/etemplate/Et2Tree/Et2Tree.ts
View File

@ -141,11 +141,26 @@ export class Et2Tree extends Et2WidgetWithSelectMixin(LitElement)
::part(expand-button) { ::part(expand-button) {
padding: 0; padding: 0;
} }
`,
css` /* Stop icon from shrinking if there's not enough space */
::part(label):hover {
sl-tree-item sl-icon {
flex: 0 0 1em;
}
::part(label) {
overflow: hidden;
}
::part(label):hover {
text-decoration: underline; text-decoration: underline;
} }
.tree-item__label {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
` `
] ]
} }
@ -622,7 +637,7 @@ export class Et2Tree extends Et2WidgetWithSelectMixin(LitElement)
return html` return html`
<sl-tree-item <sl-tree-item
part="item" part="item"
exportparts="checkbox" exportparts="checkbox, label"
id=${selectOption.id} id=${selectOption.id}
title=${selectOption.tooltip || nothing} title=${selectOption.tooltip || nothing}
?selected=${typeof this.value == "string" && this.value == selectOption.id || typeof this.value?.includes == "function" && this.value.includes(selectOption.id)} ?selected=${typeof this.value == "string" && this.value == selectOption.id || typeof this.value?.includes == "function" && this.value.includes(selectOption.id)}
@ -644,7 +659,7 @@ export class Et2Tree extends Et2WidgetWithSelectMixin(LitElement)
> >
<sl-icon src="${img ?? nothing}"></sl-icon> <sl-icon src="${img ?? nothing}"></sl-icon>
${selectOption.text} <span class="tree-item__label">${selectOption.text}</span>
${selectOption.item ? repeat(selectOption.item, this._optionTemplate) : nothing} ${selectOption.item ? repeat(selectOption.item, this._optionTemplate) : nothing}
</sl-tree-item>` </sl-tree-item>`
} }