|
| Issue Type: |
Improvement Bug |
| Description: |
In a Live Data table, a column can be reordered by dragging its header, but the grab cursor only shows on a small part of that header.
The drag starts from anywhere in the header name area, which spans the full width of the column, while the grab cursor is only set on the column name button, which is as wide as the name and the sort icon. Over the rest of the header, the cursor stays the default arrow even though a drag starts from there, so nothing tells the user that this part of the header can be dragged.
h3. Steps to reproduce
# Open a page holding a Live Data table, for instance the "Children" tab of a page with children.
# Hover the header of a wide column, first over its name, then over the empty space to the right of the name.
# Drag the column header from that empty space.
*Expected:* the grab cursor shows over the whole area a drag can start from.
*Actual:* it only shows over the column name, yet the drag works from the empty space too.
h3. Cause
{{LayoutTableHeaderNames.vue}} sets {{handle=".column-name"}} on the {{draggable}} component, so the whole {{.column-name}} block accepts the drag. The {{cursor: grab}} rule comes from {{XWikiDraggableItem.vue}} and targets {{ {} .draggable-item .handle { }} } , which in the table header is the inner {{<button class="handle">}} only.
Reported by Manuel Leduc [~mleduc] in the forum discussion of XWIKI-24755: [ https://forum.xwiki.org/t/proposal-move-up-move-down-buttons-in-the-class-editor/18809/2
] |
| Priority: |
Major Minor |
|
