From 94d04f9056f105d7fd75c94d9221a41731c4ae28 Mon Sep 17 00:00:00 2001
From: Sereza7 <lucas.charpentier@imt-atlantique.net>
Date: Wed, 17 Jan 2024 16:54:21 +0100
Subject: [PATCH 1/4] XWIKI-21009: LiveData alternative to drag controls *
 Fixed the lost pointer cursor on the `sort` caret * Fixed broken translations

---
 .../src/main/vue/layouts/table/LayoutTableHeaderNames.vue      | 1 +
 .../xwiki-platform-livedata-webjar/src/main/webjar/Logic.js    | 3 ++-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/xwiki-platform-core/xwiki-platform-livedata/xwiki-platform-livedata-webjar/src/main/vue/layouts/table/LayoutTableHeaderNames.vue b/xwiki-platform-core/xwiki-platform-livedata/xwiki-platform-livedata-webjar/src/main/vue/layouts/table/LayoutTableHeaderNames.vue
index 8bf3921fa7cf..ab1edd62675f 100644
--- a/xwiki-platform-core/xwiki-platform-livedata/xwiki-platform-livedata-webjar/src/main/vue/layouts/table/LayoutTableHeaderNames.vue
+++ b/xwiki-platform-core/xwiki-platform-livedata/xwiki-platform-livedata-webjar/src/main/vue/layouts/table/LayoutTableHeaderNames.vue
@@ -322,6 +322,7 @@ export default {
   color: currentColor;
   opacity: 0;
   padding-left: @table-cell-padding;
+  cursor: pointer;
 }
 
 .layout-table .property-name .sort-icon {
diff --git a/xwiki-platform-core/xwiki-platform-livedata/xwiki-platform-livedata-webjar/src/main/webjar/Logic.js b/xwiki-platform-core/xwiki-platform-livedata/xwiki-platform-livedata-webjar/src/main/webjar/Logic.js
index 552c287a5ba5..a19265005f6d 100644
--- a/xwiki-platform-core/xwiki-platform-livedata/xwiki-platform-livedata-webjar/src/main/webjar/Logic.js
+++ b/xwiki-platform-core/xwiki-platform-livedata/xwiki-platform-livedata-webjar/src/main/webjar/Logic.js
@@ -230,7 +230,8 @@ define('xwiki-livedata', [
         "pagination.last",
         "action.refresh",
         "action.addEntry",
-        "action.reorder.hint",
+        "action.columnName.sortable.hint",
+        "action.columnName.default.hint",
         "action.resizeColumn.hint",
         "panel.filter.title",
         "panel.filter.noneFilterable",

From fb525eac90ce7be5fe65653904201ebfc3e70cc1 Mon Sep 17 00:00:00 2001
From: Sereza7 <lucas.charpentier@imt-atlantique.net>
Date: Fri, 19 Jan 2024 15:11:03 +0100
Subject: [PATCH 2/4] XWIKI-21009: LiveData alternative to drag controls *
 Fixed the unexpected change in behavior for the resize handle. * Improved
 cursor on various elements to fit the features they should help use.

---
 .../src/main/vue/directives.js                    |  4 ++--
 .../vue/layouts/table/LayoutTableHeaderNames.vue  | 15 +++++----------
 2 files changed, 7 insertions(+), 12 deletions(-)

diff --git a/xwiki-platform-core/xwiki-platform-livedata/xwiki-platform-livedata-webjar/src/main/vue/directives.js b/xwiki-platform-core/xwiki-platform-livedata/xwiki-platform-livedata-webjar/src/main/vue/directives.js
index df76cf30875e..e6b4413997d2 100644
--- a/xwiki-platform-core/xwiki-platform-livedata/xwiki-platform-livedata-webjar/src/main/vue/directives.js
+++ b/xwiki-platform-core/xwiki-platform-livedata/xwiki-platform-livedata-webjar/src/main/vue/directives.js
@@ -50,7 +50,6 @@ export const mousedownmove = {
       const removeMousemoveHandler = () => {
         window.removeEventListener("mousemove", mousemoveHandler);
         window.removeEventListener("mouseup", removeMousemoveHandler);
-        window.removeEventListener("focusout", removeMousemoveHandler);
       };
 
       // If the "immediate" modifiers is set, dispatch the event immediately
@@ -61,7 +60,8 @@ export const mousedownmove = {
       // Bind event listeners
       window.addEventListener("mousemove", mousemoveHandler);
       window.addEventListener("mouseup", removeMousemoveHandler);
-      window.addEventListener("focusout", removeMousemoveHandler);
+      // Stop propagation of the mousedown event
+      e.stopPropagation()
     });
   }
 };
diff --git a/xwiki-platform-core/xwiki-platform-livedata/xwiki-platform-livedata-webjar/src/main/vue/layouts/table/LayoutTableHeaderNames.vue b/xwiki-platform-core/xwiki-platform-livedata/xwiki-platform-livedata-webjar/src/main/vue/layouts/table/LayoutTableHeaderNames.vue
index ab1edd62675f..5045c7f07f93 100644
--- a/xwiki-platform-core/xwiki-platform-livedata/xwiki-platform-livedata-webjar/src/main/vue/layouts/table/LayoutTableHeaderNames.vue
+++ b/xwiki-platform-core/xwiki-platform-livedata/xwiki-platform-livedata-webjar/src/main/vue/layouts/table/LayoutTableHeaderNames.vue
@@ -61,7 +61,7 @@
       <div class="column-name">
         <!-- Property Name -->
         <button 
-          class="property-name handle"
+          class="handle"
           @click="sort(property)"
           @keydown.left="keyboardDragNDrop($event, -1)"
           @keydown.right="keyboardDragNDrop($event, 1)"
@@ -69,7 +69,7 @@
             $t('livedata.action.columnName.sortable.hint') :
             $t('livedata.action.columnName.default.hint')"
         >
-          {{ property.name }}
+          <span class="property-name">{{ property.name }}</span>
           <!--
             Sort icon
             Only show the icon for the first-level sort property
@@ -273,7 +273,6 @@ export default {
 }
 
 .layout-table .column-name {
-  cursor: pointer;
   display: flex;
   justify-content: space-between;
 }
@@ -304,20 +303,16 @@ export default {
   margin-right: -3px;
 }
 
-.layout-table .property-name {
+.layout-table .draggable-item .handle {
+  opacity: 1;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   background: transparent;
   border: 0;
-  width: 100%;
   text-align: left;
 }
 
-.draggable-item .property-name.handle  {
-  opacity: 1;
-}
-
 .layout-table .sort-icon {
   color: currentColor;
   opacity: 0;
@@ -325,7 +320,7 @@ export default {
   cursor: pointer;
 }
 
-.layout-table .property-name .sort-icon {
+.layout-table .property-name + .sort-icon {
   vertical-align: baseline;
 }
 

From 51f8cceb3c159f72a01774a0229555247b96f14f Mon Sep 17 00:00:00 2001
From: Sereza7 <lucas.charpentier@imt-atlantique.net>
Date: Fri, 19 Jan 2024 15:29:16 +0100
Subject: [PATCH 3/4] XWIKI-21009: LiveData alternative to drag controls * Made
 the resize handles invisible when not focused again.

---
 .../src/main/vue/layouts/table/LayoutTableHeaderNames.vue      | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/xwiki-platform-core/xwiki-platform-livedata/xwiki-platform-livedata-webjar/src/main/vue/layouts/table/LayoutTableHeaderNames.vue b/xwiki-platform-core/xwiki-platform-livedata/xwiki-platform-livedata-webjar/src/main/vue/layouts/table/LayoutTableHeaderNames.vue
index 5045c7f07f93..2545356f1f86 100644
--- a/xwiki-platform-core/xwiki-platform-livedata/xwiki-platform-livedata-webjar/src/main/vue/layouts/table/LayoutTableHeaderNames.vue
+++ b/xwiki-platform-core/xwiki-platform-livedata/xwiki-platform-livedata-webjar/src/main/vue/layouts/table/LayoutTableHeaderNames.vue
@@ -278,6 +278,8 @@ export default {
 }
 
 .layout-table .resize-handle {
+  /* TODO: Discussion about the exact display of resize handles. */
+  opacity: 0;
   padding: 0;
   cursor: col-resize;
   min-width: 0;
@@ -289,6 +291,7 @@ export default {
 
 .layout-table .column-name:focus-within .resize-handle,
 .layout-table .column-name:hover .resize-handle {
+  opacity: 1;
   border-color: @text-muted;
   border-width: 3px;
   margin-left: 0;

From fdee55255048626f57e14c36c6db657f7ea4a668 Mon Sep 17 00:00:00 2001
From: Sereza7 <lucas.charpentier@imt-atlantique.net>
Date: Fri, 19 Jan 2024 16:48:24 +0100
Subject: [PATCH 4/4] XWIKI-21009: LiveData alternative to drag controls *
 Moved the resize handle back to where it waws initially * Updated style to
 fit this new position * Removed a useless stoppropagation on an event

---
 .../src/main/vue/directives.js                |  2 -
 .../layouts/table/LayoutTableHeaderNames.vue  | 40 ++++++++++---------
 2 files changed, 22 insertions(+), 20 deletions(-)

diff --git a/xwiki-platform-core/xwiki-platform-livedata/xwiki-platform-livedata-webjar/src/main/vue/directives.js b/xwiki-platform-core/xwiki-platform-livedata/xwiki-platform-livedata-webjar/src/main/vue/directives.js
index e6b4413997d2..b983c620db74 100644
--- a/xwiki-platform-core/xwiki-platform-livedata/xwiki-platform-livedata-webjar/src/main/vue/directives.js
+++ b/xwiki-platform-core/xwiki-platform-livedata/xwiki-platform-livedata-webjar/src/main/vue/directives.js
@@ -60,8 +60,6 @@ export const mousedownmove = {
       // Bind event listeners
       window.addEventListener("mousemove", mousemoveHandler);
       window.addEventListener("mouseup", removeMousemoveHandler);
-      // Stop propagation of the mousedown event
-      e.stopPropagation()
     });
   }
 };
diff --git a/xwiki-platform-core/xwiki-platform-livedata/xwiki-platform-livedata-webjar/src/main/vue/layouts/table/LayoutTableHeaderNames.vue b/xwiki-platform-core/xwiki-platform-livedata/xwiki-platform-livedata-webjar/src/main/vue/layouts/table/LayoutTableHeaderNames.vue
index 2545356f1f86..3835730f00ba 100644
--- a/xwiki-platform-core/xwiki-platform-livedata/xwiki-platform-livedata-webjar/src/main/vue/layouts/table/LayoutTableHeaderNames.vue
+++ b/xwiki-platform-core/xwiki-platform-livedata/xwiki-platform-livedata-webjar/src/main/vue/layouts/table/LayoutTableHeaderNames.vue
@@ -79,20 +79,19 @@
             :icon-descriptor="{name: isFirstSortLevel(property) && firstSortLevel.descending? 'caret-down': 'caret-up'}"
             :class="['sort-icon',  isFirstSortLevel(property)? 'sorted': '']"/>
         </button>
-
-        <!--
+      </div>
+      <!--
           Specify the handle to resize properties
         -->
-        <button class="resize-handle btn btn-xs btn-default" :title="$t('livedata.action.resizeColumn.hint')"
-          v-mousedownmove="mouseResizeColumnInit"
-          @mousedownmove="mouseResizeColumn"
-          @keydown.left="keyboardResizeColumn($event, -10)"
-          @keydown.right="keyboardResizeColumn($event, 10)"
-          @dblclick="resetColumnSize"
-          @keydown.esc="resetColumnSize"
-        >
-        </button>
-      </div>
+      <button class="resize-handle btn btn-xs btn-default" :title="$t('livedata.action.resizeColumn.hint')"
+              v-mousedownmove="mouseResizeColumnInit"
+              @mousedownmove="mouseResizeColumn"
+              @keydown.left="keyboardResizeColumn($event, -10)"
+              @keydown.right="keyboardResizeColumn($event, 10)"
+              @dblclick="resetColumnSize"
+              @keydown.esc="resetColumnSize"
+      >
+      </button>
     </th>
 
   </XWikiDraggable>
@@ -277,8 +276,13 @@ export default {
   justify-content: space-between;
 }
 
-.layout-table .resize-handle {
-  /* TODO: Discussion about the exact display of resize handles. */
+.layout-table .draggable-item .resize-handle {
+  position: absolute;
+  right: 0;
+  top: 0.5rem;
+  bottom: 0.5rem;
+  /* TODO: Discussion about the exact display of resize handles.
+      See https://jira.xwiki.org/browse/XWIKI-21816 */
   opacity: 0;
   padding: 0;
   cursor: col-resize;
@@ -289,8 +293,8 @@ export default {
   margin-left: 2px;
 }
 
-.layout-table .column-name:focus-within .resize-handle,
-.layout-table .column-name:hover .resize-handle {
+.layout-table .draggable-item:focus-within .resize-handle,
+.layout-table .draggable-item:hover .resize-handle {
   opacity: 1;
   border-color: @text-muted;
   border-width: 3px;
@@ -301,8 +305,8 @@ export default {
   margin-right: -2px;
 }
 
-.layout-table .draggable-item:not(:last-child) .column-name:focus-within .resize-handle,
-.layout-table .draggable-item:not(:last-child) .column-name:hover .resize-handle {
+.layout-table .draggable-item:not(:last-child):focus-within .resize-handle,
+.layout-table .draggable-item:not(:last-child):hover .resize-handle {
   margin-right: -3px;
 }