diff --git a/api/js/egw_action/egwDragActionImplementation.ts b/api/js/egw_action/egwDragActionImplementation.ts index 3b59173263..48a15ec9bc 100644 --- a/api/js/egw_action/egwDragActionImplementation.ts +++ b/api/js/egw_action/egwDragActionImplementation.ts @@ -44,12 +44,47 @@ export class EgwDragActionImplementation implements EgwActionImplementation { const pseudoNumRows = (_selected[0]?._context?._selectionMgr?._selectAll) ? _selected[0]._context?._selectionMgr?._total : _selected.length; - for (const egwActionObject of _selected) { - const row: Node = (egwActionObject.iface.getDOMNode()).cloneNode(true); - if (row) { - rows.push(row); - table.append(row); - } + // Clone nodes but use copy webComponent properties + const carefulClone = (node) => + { + // Don't clone text nodes, it causes duplication in et2-description + if(node.nodeType == node.TEXT_NODE) + { + return; + } + + let clone = node.cloneNode(); + + let widget_class = window.customElements.get(clone.localName); + let properties = widget_class ? widget_class.properties : []; + for(let key in properties) + { + clone[key] = node[key]; + } + // Children + node.childNodes.forEach(c => + { + const child = carefulClone(c) + if(child) + { + clone.appendChild(child); + } + }) + if(widget_class) + { + clone.requestUpdate(); + } + return clone; + } + + for(const egwActionObject of _selected) + { + const row : Node = carefulClone(egwActionObject.iface.getDOMNode()); + if(row) + { + rows.push(row); + table.append(row); + } index++; if (index == maxRows) { // Label to show number of items @@ -195,9 +230,33 @@ export class EgwDragActionImplementation implements EgwActionImplementation { event.dataTransfer.setData('application/json', JSON.stringify(data)) - event.dataTransfer.setDragImage(ai.helper, 12, 12); + // Wait for any webComponents to finish + let wait = []; + const webComponents = []; + const check = (element) => + { + if(typeof element.updateComplete !== "undefined") + { + webComponents.push(element) + element.requestUpdate(); + wait.push(element.updateComplete); + } + element.childNodes.forEach(child => check(child)); + } + check(ai.helper); + // Clumsily force widget update, since we can't do it async + Promise.all(wait).then(() => + { + wait = []; + webComponents.forEach(e => wait.push(e.updateComplete)); + Promise.all(wait).then(() => + { + event.dataTransfer.setDragImage(ai.helper, 12, 12); + debugger; + }); + }); - this.setAttribute('data-egwActionObjID', JSON.stringify(data.selected)); + this.setAttribute('data-egwActionObjID', JSON.stringify(data.selected)); }; const dragend = (_) => { diff --git a/api/templates/default/etemplate2.css b/api/templates/default/etemplate2.css index 3b8969ada6..62d533cbe0 100644 --- a/api/templates/default/etemplate2.css +++ b/api/templates/default/etemplate2.css @@ -3469,6 +3469,7 @@ div.et2_image_tooltipPopup { div.et2_egw_action_ddHelper { z-index: -100; position: relative; + max-width: fit-content; } /* The last div which shows Ctrl tip to user*/ @@ -3489,6 +3490,7 @@ div.et2_egw_action_ddHelper table.et2_egw_action_ddHelper_row { background-color: rgba(255, 194, 0, 0.70); box-shadow: 6px 6px 8px gray; border: 1px solid black; + max-width: 400px; } table.et2_egw_action_ddHelper_row tr { @@ -3496,10 +3498,10 @@ table.et2_egw_action_ddHelper_row tr { max-height: 20px; } -/* Apply to all displaied rows in order to get same result*/ -table.et2_egw_action_ddHelper_row * { +/* Apply to all displayed rows in order to get same result*/ +table.et2_egw_action_ddHelper_row > *, table.et2_egw_action_ddHelper_row .innerContainer { white-space: nowrap !important; - max-height: 15px; + max-height: 2em; overflow: hidden; text-overflow: ellipsis; max-width: 400px;