Et2Tree: When drag + hover over a leaf, only open it if it actually has children

This commit is contained in:
nathan 2024-11-15 08:49:37 -07:00
parent 65f2eba403
commit 73a606f6ba
2 changed files with 15 additions and 8 deletions

View File

@ -55,6 +55,10 @@ export class EgwDragDropShoelaceTree extends egwActionObjectInterface{
n.classList.remove("draggedOver", "drop-hover"); n.classList.remove("draggedOver", "drop-hover");
}); });
target.target.classList.add("draggedOver", "drop-hover"); target.target.classList.add("draggedOver", "drop-hover");
// Open nodes with children after a wait
if(target.target.hasAttribute("lazy") || target.target.querySelector(target.target.nodeName))
{
this.timeouts[target.target.id] = setTimeout(() => this.timeouts[target.target.id] = setTimeout(() =>
{ {
if(target.target.classList.contains("draggedOver")) if(target.target.classList.contains("draggedOver"))
@ -63,6 +67,7 @@ export class EgwDragDropShoelaceTree extends egwActionObjectInterface{
} }
}, EXPAND_FOLDER_ON_DRAG_DROP_TIMEOUT) }, EXPAND_FOLDER_ON_DRAG_DROP_TIMEOUT)
} }
}
else if(egw_event == EGW_AI_DRAG_OUT) else if(egw_event == EGW_AI_DRAG_OUT)
{ {
target.target.classList.remove("draggedOver", "drop-hover"); target.target.classList.remove("draggedOver", "drop-hover");

View File

@ -23,7 +23,7 @@ import styles from "./Et2Tree.styles";
export type TreeItemData = SelectOption & { export type TreeItemData = SelectOption & {
focused?: boolean; focused?: boolean;
// Has children, but they may not be provided in item // Has children, but they may not be provided in children (lazy loaded)
child: Boolean | 1, child: Boolean | 1,
data?: Object,//{sieve:true,...} or {acl:true} or other data?: Object,//{sieve:true,...} or {acl:true} or other
//this is coming from SelectOption //this is coming from SelectOption
@ -981,8 +981,10 @@ export class Et2Tree extends Et2WidgetWithSelectMixin(LitElement) implements Fin
//fallback to try and set icon if everything else failed //fallback to try and set icon if everything else failed
if (!img) img = selectOption.icon ?? selectOption.im0 ?? selectOption.im1 ?? selectOption.im2; if (!img) img = selectOption.icon ?? selectOption.im0 ?? selectOption.im1 ?? selectOption.im2;
// lazy iff "child" is set and "item" is empty or item does not exist in the first place // lazy iff "child" is set and "children" is empty or children does not exist in the first place
const lazy = (selectOption.item?.length === 0 && selectOption.child) || (selectOption.child && !selectOption.item) const lazy = typeof selectOption.item !== "undefined" ?
(selectOption.item?.length === 0 && selectOption.child) || (selectOption.child && !selectOption.item) :
(selectOption.children?.length == 0 && selectOption.child);
const value = selectOption.value ?? selectOption.id; const value = selectOption.value ?? selectOption.id;
if(expandState && this.autoloading && lazy) if(expandState && this.autoloading && lazy)
{ {