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
xwiki · Jan 19, 2024 · fdee552 · fdee552
1 parent 51f8cce
commit fdee552
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 20 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
@@ -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/...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
@@ -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;
 }