cleanup

vaadin · Sep 2, 2024 · ae337ee · ae337ee
1 parent c93363d
commit ae337ee
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 6 deletions.
diff --git a/dev/dashboard.html b/dev/dashboard.html
@@ -17,6 +17,9 @@
 
       vaadin-dashboard {
         --vaadin-dashboard-col-min-width: 300px;
+        --vaadin-dashboard-col-max-width: 500px;
+        --vaadin-dashboard-gap: 20px;
+        --vaadin-dashboard-col-max-count: 3;
       }
 
       .kpi-number {

diff --git a/packages/dashboard/src/vaadin-dashboard-section.js b/packages/dashboard/src/vaadin-dashboard-section.js
@@ -63,6 +63,10 @@ class DashboardSection extends ControllerMixin(ElementMixin(PolylitMixin(LitElem
         header {
           grid-column: var(--_vaadin-dashboard-section-column);
         }
+
+        :host::before {
+          z-index: 2 !important;
+        }
       `,
       hasWidgetWrappers,
       dashboardWidgetAndSectionStyles,

diff --git a/packages/dashboard/src/vaadin-dashboard-styles.js b/packages/dashboard/src/vaadin-dashboard-styles.js
@@ -7,6 +7,7 @@ export const hasWidgetWrappers = css`
 `;
 
 export const dashboardWidgetAndSectionStyles = css`
+  /* Placeholder shown while the widget or section is dragged */
   :host::before {
     content: '';
     z-index: 1;

diff --git a/packages/dashboard/src/widget-reorder-controller.js b/packages/dashboard/src/widget-reorder-controller.js
@@ -5,7 +5,7 @@
  */
 
 const WRAPPER_LOCAL_NAME = 'vaadin-dashboard-widget-wrapper';
-const REORDER_EVENT_TIMEOUT = 300;
+const REORDER_EVENT_TIMEOUT = 200;
 
 /**
  * A controller to widget reordering inside a dashboard.
@@ -170,7 +170,8 @@ export class WidgetReorderController extends EventTarget {
 
   /**
    * Returns the elements (widgets or sections) that are candidates for reordering with the
-   * currently dragged item.
+   * currently dragged item. Effectively, this is the list of child widgets or sections inside
+   * the same parent container (host or a section) as the dragged item.
    * @private
    */
   __getDragContextElements() {

diff --git a/packages/dashboard/test/dashboard-widget-reordering.test.ts b/packages/dashboard/test/dashboard-widget-reordering.test.ts
@@ -12,6 +12,7 @@ import {
   fireDrop,
   getDraggable,
   getElementFromCell,
+  getParentSection,
   resetReorderTimeout,
   setGap,
   setMaximumColumnWidth,
@@ -528,7 +529,7 @@ describe('dashboard - widget reordering', () => {
       });
 
       it('should reorder the sections and widgets', async () => {
-        const section = dashboard.querySelector('vaadin-dashboard-section')!;
+        const section = getParentSection(getElementFromCell(dashboard, 1, 0))!;
         fireDragStart(section);
         await nextFrame();
 

diff --git a/packages/dashboard/test/helpers.ts b/packages/dashboard/test/helpers.ts
@@ -4,13 +4,20 @@ import sinon from 'sinon';
 /**
  * Returns the effective column widths of the dashboard as an array of numbers.
  */
-export function getColumnWidths(dashboard: HTMLElement): number[] {
+export function getColumnWidths(dashboard: Element): number[] {
   return getComputedStyle(dashboard)
     .gridTemplateColumns.split(' ')
     .map((width) => parseFloat(width));
 }
 
-function _getRowHeights(dashboard: HTMLElement): number[] {
+export function getParentSection(element?: Element | null): Element | null {
+  if (!element) {
+    return null;
+  }
+  return element.closest('vaadin-dashboard-section');
+}
+
+function _getRowHeights(dashboard: Element): number[] {
   return getComputedStyle(dashboard)
     .gridTemplateRows.split(' ')
     .map((height) => parseFloat(height));
@@ -38,7 +45,7 @@ export function getRowHeights(dashboard: HTMLElement): number[] {
   const dashboardRowHeights = _getRowHeights(dashboard);
   [...dashboardRowHeights].forEach((_height, index) => {
     const item = _getElementFromCell(dashboard, index, 0, dashboardRowHeights);
-    const parentSection = item?.closest('vaadin-dashboard-section');
+    const parentSection = getParentSection(item);
     if (parentSection) {
       const [headerRowHeight, firstRowHeight, ...remainingRowHeights] = _getRowHeights(parentSection);
       // Merge the first two row heights of the section since the first one is the section header