extern/egroupware_official
1
0
Fork 0
mirror of https://github.com/EGroupware/egroupware.git synced 2024-11-21 23:43:17 +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 // Reference to the widget that's handling actions for us
public findActionTargetHandler : FindActionTarget; 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) constructor(_tree : Et2Tree)
{ {
@ -33,16 +34,17 @@ export class EgwDragDropShoelaceTree extends egwActionObjectInterface{
super(); super();
this.tree = _tree this.tree = _tree
this.findActionTargetHandler = _tree; this.findActionTargetHandler = _tree;
this.timeouts = {};
} }
public doTriggerEvent(egw_event : number, data : any) public doTriggerEvent(egw_event : number, data : any)
{ {
let dom_event = data.event ?? data; let dom_event = data.event ?? data;
const target = this.findActionTargetHandler.findActionTarget(dom_event); 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"); target.target.classList.add("draggedOver", "drop-hover");
this.timeout = setTimeout(() => this.timeouts[target.target.id] = setTimeout(() =>
{ {
if(target.target.classList.contains("draggedOver")) if(target.target.classList.contains("draggedOver"))
{ {
@ -53,7 +55,7 @@ export class EgwDragDropShoelaceTree extends egwActionObjectInterface{
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");
clearTimeout(this.timeout) clearTimeout(this.timeouts[target.target.id])
} }
return true 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); 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*/ /*Mail specific style TODO move it out of the component*/
sl-tree-item.unread > .tree-item__label { sl-tree-item.unread > .tree-item__label {
font-weight: bold; font-weight: bold;
@ -843,8 +847,29 @@ export class Et2Tree extends Et2WidgetWithSelectMixin(LitElement) implements Fin
{ {
return; 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 = { const typeMap = {
dragenter: EGW_AI_DRAG_ENTER, dragenter: EGW_AI_DRAG_ENTER,