XWIKI-21009: LiveData alternative to drag controls (#2809)

* Fix the lost pointer cursor on the sort caret * Fix broken translations * Fix the unexpected change in behavior for the resize handle * Improve cursor on various elements to fit the features they should help use * Make the resize handles invisible when not focused again
xwiki · Jan 19, 2024 · 3f95f97 · 3f95f97
1 parent 9aeae7b
commit 3f95f97
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 30 deletions.
diff --git a/...rm-core/xwiki-platform-livedata/xwiki-platform-livedata-webjar/src/main/vue/directives.js b/...rm-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,6 @@ export const mousedownmove = {
       // Bind event listeners
       window.addEventListener("mousemove", mousemoveHandler);
       window.addEventListener("mouseup", removeMousemoveHandler);
-      window.addEventListener("focusout", removeMousemoveHandler);
     });
   }
 };
diff --git a/...data/xwiki-platform-livedata-webjar/src/main/vue/layouts/table/LayoutTableHeaderNames.vue b/...data/xwiki-platform-livedata-webjar/src/main/vue/layouts/table/LayoutTableHeaderNames.vue
@@ -61,15 +61,15 @@
       <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)"
           :title="logic.isPropertySortable(property.id) ?
             $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
@@ -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>
@@ -273,12 +272,18 @@ export default {
 }
 
 .layout-table .column-name {
-  cursor: pointer;
   display: flex;
   justify-content: space-between;
 }
 
-.layout-table .resize-handle {
+.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;
   min-width: 0;
@@ -288,8 +293,9 @@ 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;
   margin-left: 0;
@@ -299,32 +305,29 @@ 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;
 }
 
-.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;
   padding-left: @table-cell-padding;
+  cursor: pointer;
 }
 
-.layout-table .property-name .sort-icon {
+.layout-table .property-name + .sort-icon {
   vertical-align: baseline;
 }
 

diff --git a/...form-core/xwiki-platform-livedata/xwiki-platform-livedata-webjar/src/main/webjar/Logic.js b/...form-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",