XWIKI-18266: Improve the L&F of the live data macro

* Improve translation keys and messages
* Add missing translation keys
* Remove top bar bottom margin because we have the loader now that takes some space
* Remove leftover console.log()
* Fix responsive mode after merge
* Add hint for column resize and reorder
* Show a background-color on hover for the column resize handler
* Hide the column resize handler on responsive mode

xwiki-platform-core/xwiki-platform-livedata/xwiki-platform-livedata-macro/src/main/resources/ApplicationResources.properties

@@ -65,11 +65,12 @@ rendering.macro.liveData.parameter.pageSizes.description=The comma-separated lis
 #
 
 livedata.dropdownMenu.title=More Actions
-livedata.dropdownMenu.changeLayout=Change Layout
-livedata.dropdownMenu.header.panels=Panels
-livedata.dropdownMenu.panels.properties=Advanced Properties
-livedata.dropdownMenu.panels.sorting=Advanced Sorting
-livedata.dropdownMenu.panels.filtering=Advanced Filtering
+livedata.dropdownMenu.actions=Actions
+livedata.dropdownMenu.layouts=Layouts
+livedata.dropdownMenu.panels=Panels
+livedata.dropdownMenu.panels.properties=Properties...
+livedata.dropdownMenu.panels.sort=Sort...
+livedata.dropdownMenu.panels.filter=Filter...
 
 livedata.selection.selectInAllPages=Select in all pages
 livedata.selection.infoBar.selectedCount={0} entries selected
@@ -84,8 +85,10 @@ livedata.pagination.previous=Previous page
 livedata.pagination.next=Next page
 livedata.pagination.last=Last page
 
-livedata.refresh=Refresh
-livedata.addEntry=Add entry
+livedata.action.refresh=Refresh
+livedata.action.addEntry=Add entry
+livedata.action.reorder.hint=Drag to reorder
+livedata.action.resizeColumn.hint=Drag to resize. Double click to reset.
 
 livedata.panel.filter.title=Filter
 livedata.panel.filter.noneFilterable=None of the displayed properties is filterable.

xwiki-platform-core/xwiki-platform-livedata/xwiki-platform-livedata-webjar/src/main/vue/LivedataDropdownMenu.vue

@@ -47,20 +47,21 @@
     <!-- Drowpdown body -->
     <ul class="dropdown-menu dropdown-menu-right">
 
-      <!-- Refresh -->
-      <li class="dropdown-header">Actions</li>
+      <!-- Actions -->
+      <li class="dropdown-header">{{ $t('livedata.dropdownMenu.actions') }}</li>
 
       <li>
+        <!-- Refresh -->
         <a href="#" @click.prevent="logic.updateEntries()">
-          <span class="fa fa-repeat"></span> Refresh
+          <span class="fa fa-repeat"></span> {{ $t('livedata.action.refresh') }}
         </a>
       </li>
 
 
-      <!-- Change layout Section -->
+      <!-- Layouts -->
       <li role="separator" class="divider"></li>
 
-      <li class="dropdown-header">{{ $t('livedata.dropdownMenu.changeLayout') }}</li>
+      <li class="dropdown-header">{{ $t('livedata.dropdownMenu.layouts') }}</li>
 
       <!-- Layout options -->
       <li
@@ -76,10 +77,10 @@
         </a>
       </li>
 
-      <!-- Advanced panels Section -->
+      <!-- Panels -->
       <li role="separator" class="divider"></li>
 
-      <li class="dropdown-header">{{ $t('livedata.dropdownMenu.header.panels') }}</li>
+      <li class="dropdown-header">{{ $t('livedata.dropdownMenu.panels') }}</li>
 
       <!-- Properties Panel -->
       <li>
@@ -91,14 +92,14 @@
       <!-- Sort Panel -->
       <li>
         <a href="#" @click.prevent="logic.uniqueArrayToggle(logic.openedPanels, 'sortPanel')">
-          <span class="fa fa-sort"></span> {{ $t('livedata.dropdownMenu.panels.sorting') }}
+          <span class="fa fa-sort"></span> {{ $t('livedata.dropdownMenu.panels.sort') }}
         </a>
       </li>
 
       <!-- Filter Panel -->
       <li>
         <a href="#" @click.prevent="logic.uniqueArrayToggle(logic.openedPanels, 'filterPanel')">
-          <span class="fa fa-filter"></span> {{ $t('livedata.dropdownMenu.panels.filtering') }}
+          <span class="fa fa-filter"></span> {{ $t('livedata.dropdownMenu.panels.filter') }}
         </a>
       </li>
 

xwiki-platform-core/xwiki-platform-livedata/xwiki-platform-livedata-webjar/src/main/vue/LivedataTopbar.vue

@@ -61,7 +61,6 @@ export default {
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 1rem;
 }
 
 .livedata-topbar-left,

xwiki-platform-core/xwiki-platform-livedata/xwiki-platform-livedata-webjar/src/main/vue/layouts/LayoutLoader.vue

@@ -54,7 +54,6 @@ export default {
       let timeoutId;
 
       this.logic.onEvent(eventBefore, () => {
-        console.log("BEFORE", propertyName, eventBefore, eventAfter);
         clearTimeout(timeoutId);
         timeoutId = setTimeout(() => {
           this[propertyName] = true;
@@ -62,7 +61,6 @@ export default {
       });
 
       this.logic.onEvent(eventAfter, () => {
-        console.log("AFTER", propertyName, eventBefore, eventAfter);
         clearTimeout(timeoutId);
         this[propertyName] = false;
       });

xwiki-platform-core/xwiki-platform-livedata/xwiki-platform-livedata-webjar/src/main/vue/layouts/cards/LayoutCardsNewCard.vue

@@ -37,7 +37,7 @@
     >
       <span class="fa fa-plus-circle fa-3x"></span>
       <span class="add-entry-text">
-        {{ $t('livedata.addEntry') }}
+        {{ $t('livedata.action.addEntry') }}
       </span>
     </a>
 

xwiki-platform-core/xwiki-platform-livedata/xwiki-platform-livedata-webjar/src/main/vue/layouts/table/LayoutTable.vue

@@ -152,7 +152,7 @@ export default {
 
 /* Responsive mode */
 @media screen and (max-width: @screen-xs-max) {
-  .layout-table > .responsive-table > thead {
+  .layout-table .responsive-table > thead {
     /* Show the table header to allow reordering the properties, sorting and filtering the entries. We use flex display
       because we have two rows, property names and filters, that we want to display as two equally sized columns. */
     display: flex;

xwiki-platform-core/xwiki-platform-livedata/xwiki-platform-livedata-webjar/src/main/vue/layouts/table/LayoutTableHeaderNames.vue

@@ -69,6 +69,7 @@
         -->
         <div
           class="handle"
+          :title="$t('livedata.action.reorder.hint')"
           @click.stop
         >
           <span class="fa fa-ellipsis-v"></span>
@@ -94,7 +95,7 @@
         Use the stop propagation modifier on click event
         to prevent sorting the column unintentionally.
       -->
-      <div class="resize-handle"
+      <div class="resize-handle" :title="$t('livedata.action.resizeColumn.hint')"
         v-mousedownmove="resizeColumnInit"
         @mousedownmove="resizeColumn"
         @click.stop
@@ -282,6 +283,10 @@ export default {
   cursor: ew-resize;
   user-select: none;
   z-index: 100;
+
+  &:hover {
+    background-color: @breadcrumb-bg;
+  }
 }
 
 /* Responsive mode */
@@ -302,6 +307,11 @@ export default {
       text-overflow: ellipsis;
     }
   }
+
+  .layout-table .resize-handle {
+    /* The columns cannot be resized in responsive mode. */
+    display: none;
+  }
 }
 
 </style>

xwiki-platform-core/xwiki-platform-livedata/xwiki-platform-livedata-webjar/src/main/vue/layouts/table/LayoutTableNewRow.vue

@@ -46,7 +46,7 @@
         @click.prevent="logic.addEntry()"
       >
         <span class="fa fa-plus-circle"></span>
-        {{ $t('livedata.addEntry') }}
+        {{ $t('livedata.action.addEntry') }}
       </a>
     </td>
 

xwiki-platform-core/xwiki-platform-livedata/xwiki-platform-livedata-webjar/src/main/webjar/Logic.js

@@ -135,11 +135,12 @@ define('xwiki-livedata', [
       prefix: "livedata.",
       keys: [
         "dropdownMenu.title",
-        "dropdownMenu.changeLayout",
-        "dropdownMenu.header.panels",
+        "dropdownMenu.actions",
+        "dropdownMenu.layouts",
+        "dropdownMenu.panels",
         "dropdownMenu.panels.properties",
-        "dropdownMenu.panels.sorting",
-        "dropdownMenu.panels.filtering",
+        "dropdownMenu.panels.sort",
+        "dropdownMenu.panels.filter",
         "selection.selectInAllPages",
         "selection.infoBar.selectedCount",
         "selection.infoBar.allSelected",
@@ -151,8 +152,10 @@ define('xwiki-livedata', [
         "pagination.previous",
         "pagination.next",
         "pagination.last",
-        "refresh",
-        "addEntry",
+        "action.refresh",
+        "action.addEntry",
+        "action.reorder.hint",
+        "action.resizeColumn.hint",
         "panel.filter.title",
         "panel.filter.noneFilterable",
         "panel.filter.addConstraint",