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

expanding Tree folder now works everywhere left of the label

Browse Source 
--fixes expand bug
This commit is contained in:
milan 2024-06-27 14:48:41 +02:00
parent f4b8025cf5
commit 7262028539
1 changed files with 34 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -196,14 +196,12 @@ export class Et2Tree extends Et2WidgetWithSelectMixin(LitElement)
//Sl-Trees handle their own onClick events //Sl-Trees handle their own onClick events
_handleClick(_ev) _handleClick(_ev)
{ {
const labelClicked = composedPathContains(_ev,"span","tree-item__label")
if (!labelClicked)
{
this._currentSlTreeItem.expanded = !this._currentSlTreeItem.expanded;
}
// check if not expand icon (> or v) was clicked, we have an onclick handler and a string value // check if not expand icon (> or v) was clicked, we have an onclick handler and a string value
// svg bibi-chevron-right is not necessarily the first element in composedPath if (!(_ev.composedPath()[0].tagName === 'svg' &&
if (!(composedPathContains(_ev,"svg","bi-chevron-right")) && (_ev.composedPath()[0].classList.contains('bi-chevron-right') ||
_ev.composedPath()[0].classList.contains('bi-chevron-down')
)
) &&
typeof this.onclick === "function" && typeof _ev.target.value === "string") typeof this.onclick === "function" && typeof _ev.target.value === "string")
{ {
this.onclick(_ev.target.value, this, _ev.target.value) this.onclick(_ev.target.value, this, _ev.target.value)
@ -222,9 +220,15 @@ export class Et2Tree extends Et2WidgetWithSelectMixin(LitElement)
--sl-spacing-large: 1rem; --sl-spacing-large: 1rem;
} }
::part(expand-button) { ::part(expand-button) {
rotate: none;
padding: 0; padding: 0;
} padding-left: 5em;
padding-right: 1em;
margin-left: -5em;
margin-right: -1em;
}
/* Stop icon from shrinking if there's not enough space */ /* Stop icon from shrinking if there's not enough space */
@ -245,18 +249,21 @@ export class Et2Tree extends Et2WidgetWithSelectMixin(LitElement)
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
sl-tree-item{
sl-tree-item {
background-color: white; background-color: white;
} }
sl-tree-item.drop-hover{
sl-tree-item.drop-hover {
background-color: #0a5ca5; background-color: #0a5ca5;
} }
sl-tree-item.drop-hover sl-tree-item{
background-color: white ; sl-tree-item.drop-hover sl-tree-item {
background-color: white;
} }
sl-badge::part(base){ sl-badge::part(base) {
background-color: rgb(130, 130, 130); background-color: rgb(130, 130, 130);
font-size: 0.75em; font-size: 0.75em;
font-weight: 700; font-weight: 700;
@ -265,15 +272,17 @@ export class Et2Tree extends Et2WidgetWithSelectMixin(LitElement)
right: 0.5em; right: 0.5em;
} }
@media only screen and (max-device-width: 768px) { @media only screen and (max-device-width: 768px) {
:host{ :host {
--sl-font-size-medium: 1.2rem; --sl-font-size-medium: 1.2rem;
} }
sl-tree-item{
sl-tree-item {
padding: 0.1em; padding: 0.1em;
} }
} }
` `
@ -804,7 +813,9 @@ export class Et2Tree extends Et2WidgetWithSelectMixin(LitElement)
}} }}
> >
<sl-icon src="${img ?? nothing}"></sl-icon>
<sl-icon src="${img ?? nothing}"></sl-icon>
<span class="tree-item__label"> <span class="tree-item__label">
${selectOption.label ?? selectOption.text} ${selectOption.label ?? selectOption.text}
</span> </span>
@ -903,6 +914,8 @@ export class Et2Tree extends Et2WidgetWithSelectMixin(LitElement)
} }
> >
<sl-icon name="chevron-right" slot="expand-icon"></sl-icon>
<sl-icon name="chevron-down" slot="collapse-icon"></sl-icon>
${repeat(this._selectOptions, this._optionTemplate)} ${repeat(this._selectOptions, this._optionTemplate)}
</sl-tree> </sl-tree>
`; `;