extern/egroupware_official
1
0
Fork 0
mirror of https://github.com/EGroupware/egroupware.git synced 2024-11-21 15:33:23 +01:00
Code Issues Packages Projects Releases Wiki Activity

Further fixes on tree actions

Browse Source 
- Fix expand on hover
- Fix trouble with dragging over item children
This commit is contained in:
nathan 2024-10-03 10:58:36 -06:00
parent 557e5bd236
commit 1379855543
2 changed files with 33 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
api/js/egw_action/EgwDragDropShoelaceTree.ts
View File

@ -25,7 +25,8 @@ export class EgwDragDropShoelaceTree extends egwActionObjectInterface{
// Reference to the widget that's handling actions for us
public findActionTargetHandler : FindActionTarget;
private timeout : ReturnType<typeof setTimeout>;
// List of timeouts indexed by ID because drag out doesn't always happen before drag in
private timeouts : { [key : string] : ReturnType<typeof setTimeout> };
constructor(_tree : Et2Tree)
{
@ -33,16 +34,17 @@ export class EgwDragDropShoelaceTree extends egwActionObjectInterface{
super();
this.tree = _tree
this.findActionTargetHandler = _tree;
this.timeouts = {};
}
public doTriggerEvent(egw_event : number, data : any)
{
let dom_event = data.event ?? data;
const target = this.findActionTargetHandler.findActionTarget(dom_event);
if(egw_event == EGW_AI_DRAG_ENTER)
if(egw_event == EGW_AI_DRAG_ENTER && !target.target.classList.contains("draggedOver"))
{
target.target.classList.add("draggedOver", "drop-hover");
this.timeout = setTimeout(() =>
this.timeouts[target.target.id] = setTimeout(() =>
{
if(target.target.classList.contains("draggedOver"))
{
@ -53,7 +55,7 @@ export class EgwDragDropShoelaceTree extends egwActionObjectInterface{
else if(egw_event == EGW_AI_DRAG_OUT)
{
target.target.classList.remove("draggedOver", "drop-hover");
clearTimeout(this.timeout)
clearTimeout(this.timeouts[target.target.id])
}
return true
}

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

@ -273,6 +273,10 @@ export class Et2Tree extends Et2WidgetWithSelectMixin(LitElement) implements Fin
background-color: var(--highlight-background-color);
}
sl-tree-item.drop-hover > *:not(sl-tree-item) {
pointer-events: none;
}
/*Mail specific style TODO move it out of the component*/
sl-tree-item.unread > .tree-item__label {
font-weight: bold;
@ -843,8 +847,29 @@ export class Et2Tree extends Et2WidgetWithSelectMixin(LitElement) implements Fin
{
return;
}
let id = option.value ?? (typeof option.id == 'number' ? String(option.id) : option.id);
//console.log(event.type, id);
// Remove drop hover from any parent nodes
if(event.type == "dragenter")
{
event.stopPropagation();
let current = option.parentElement;
while(current)
{
current.classList.remove("draggedOver", "drop-hover");
current = current.parentElement;
}
}
// Ignore/stop events from child nodes, unless it's dragenter and the parent sl-tree-item isn't hovered yet
if(["dragenter", "dragleave"].includes(event.type) && event.target != option && event.composedPath().includes(option))
{
event.stopPropagation();
if(event.type != "dragenter" || option.classList.contains("drop-hover"))
{
return;
}
}
//let id = option.value ?? (typeof option.id == 'number' ? String(option.id) : option.id);
//console.log(event.type, id, event.target);
const typeMap = {
dragenter: EGW_AI_DRAG_ENTER,