feat: dashboard widget resize mode

packages/dashboard/src/keyboard-controller.js

@@ -65,7 +65,7 @@ export class KeyboardController {
  /** @private */
  __escape(e) {
  e.preventDefault();
- if (this.host.__moveMode) {
+ if (this.host.__moveMode || this.host.__resizeMode) {
  this.host.__exitMode(true);
  } else {
  this.host.__selected = false;

packages/dashboard/src/vaadin-dashboard-item-mixin.js

@@ -12,7 +12,7 @@ import { html } from 'lit';
 import { FocusTrapController } from '@vaadin/a11y-base/src/focus-trap-controller.js';
 import { ResizeMixin } from '@vaadin/component-base/src/resize-mixin.js';
 import { KeyboardController } from './keyboard-controller.js';
-import { fireMove, fireRemove } from './vaadin-dashboard-helpers.js';
+import { fireMove, fireRemove, fireResize } from './vaadin-dashboard-helpers.js';
 import { dashboardWidgetAndSectionStyles } from './vaadin-dashboard-styles.js';
 
 /**
@@ -50,6 +50,13 @@ export const DashboardItemMixin = (superClass) =>
  reflectToAttribute: true,
  attribute: 'move-mode',
  },
+
+ /** @private */
+ __resizeMode: {
+ type: Boolean,
+ reflectToAttribute: true,
+ attribute: 'resize-mode',
+ },
  };
  }
 
@@ -86,6 +93,16 @@ export const DashboardItemMixin = (superClass) =>
  ></button>`;
  }
 
+ /** @private */
+ __renderResizeHandle() {
+ return html`<button
+ id="resize-handle"
+ class="resize-handle"
+ tabindex="${this.__selected ? 0 : -1}"
+ @click="${() => this.__enterResizeMode()}"
+ ></button>`;
+ }
+
  /** @private */
  __renderModeControls() {
  return html`<div
@@ -100,6 +117,34 @@ export const DashboardItemMixin = (superClass) =>
  </div>`;
  }
 
+ /** @private */
+ __renderResizeControls() {
+ const hasMinRowHeight = getComputedStyle(this).getPropertyValue('--vaadin-dashboard-row-min-height');
+
+ return html`<div
+ id="resize-controls"
+ class="mode-controls"
+ .hidden="${!this.__resizeMode}"
+ @pointerdown="${(e) => e.preventDefault()}"
+ >
+ <button title="Apply" @click="${() => this.__exitMode(true)}" id="resize-apply"></button>
+ <button title="Shrink width" @click="${() => fireResize(this, -1, 0)}" id="resize-shrink-width"></button>
+ <button title="Grow width" @click="${() => fireResize(this, 1, 0)}" id="resize-grow-width"></button>
+ <button
+ title="Shrink height"
+ @click="${() => fireResize(this, 0, -1)}"
+ id="resize-shrink-height"
+ .hidden="${!hasMinRowHeight}"
+ ></button>
+ <button
+ title="Grow height"
+ @click="${() => fireResize(this, 0, 1)}"
+ id="resize-grow-height"
+ .hidden="${!hasMinRowHeight}"
+ ></button>
+ </div>`;
+ }
+
  constructor() {
  super();
  this.__keyboardController = new KeyboardController(this);
@@ -138,6 +183,12 @@ export const DashboardItemMixin = (superClass) =>
  this.$['drag-handle'].focus();
  this.__focusTrapController.trapFocus(this.$.focustrap);
  }
+ } else if (this.__resizeMode) {
+ this.__resizeMode = false;
+ if (focus) {
+ this.$['resize-handle'].focus();
+ this.__focusTrapController.trapFocus(this.$.focustrap);
+ }
  }
  }
 
@@ -156,4 +207,13 @@ export const DashboardItemMixin = (superClass) =>
  this.__focusTrapController.trapFocus(this.$['move-controls']);
  });
  }
+
+ /** @private */
+ __enterResizeMode() {
+ this.__selected = true;
+ this.__resizeMode = true;
+ requestAnimationFrame(() => {
+ this.__focusTrapController.trapFocus(this.$['resize-controls']);
+ });
+ }
  };

packages/dashboard/src/vaadin-dashboard-styles.js

@@ -124,4 +124,58 @@ export const dashboardWidgetAndSectionStyles = css`
  :host([last-child]) #move-forward {
  display: none;
  }
+
+ /* Resize-mode buttons */
+ #resize-shrink-width,
+ #resize-shrink-height,
+ #resize-grow-width,
+ #resize-grow-height,
+ #resize-apply {
+ font-size: 30px;
+ cursor: pointer;
+ position: absolute;
+ }
+
+ #resize-shrink-width::before,
+ #resize-shrink-height::before,
+ #resize-grow-width::before,
+ #resize-grow-height::before,
+ #resize-apply::before {
+ content: var(--content);
+ }
+
+ #resize-shrink-width {
+ inset-inline-end: 0;
+ top: 50%;
+ transform: translateY(-50%);
+ --content: '-';
+ }
+
+ #resize-grow-width {
+ inset-inline-start: 100%;
+ top: 50%;
+ transform: translateY(-50%);
+ --content: '+';
+ }
+
+ #resize-shrink-height {
+ bottom: 0;
+ left: 50%;
+ transform: translateX(-50%);
+ --content: '-';
+ }
+
+ #resize-grow-height {
+ top: 100%;
+ left: 50%;
+ transform: translateX(-50%);
+ --content: '+';
+ }
+
+ #resize-apply {
+ left: 50%;
+ top: 50%;
+ --content: '✔';
+ transform: translate(-50%, -50%);
+ }
 `;

packages/dashboard/src/vaadin-dashboard-widget.js

@@ -105,7 +105,7 @@ class DashboardWidget extends DashboardItemMixin(ControllerMixin(ElementMixin(Po
  /** @protected */
  render() {
  return html`
- ${this.__renderFocusButton()} ${this.__renderModeControls()}
+ ${this.__renderFocusButton()} ${this.__renderModeControls()} ${this.__renderResizeControls()}
 
  <div id="focustrap">
  <header>
@@ -115,7 +115,7 @@ class DashboardWidget extends DashboardItemMixin(ControllerMixin(ElementMixin(Po
  ${this.__renderRemoveButton()}
  </header>
 
- <button id="resize-handle" class="resize-handle" tabindex="${this.__selected ? 0 : -1}"></button>
+ ${this.__renderResizeHandle()}
  </div>
 
  <div id="content">

packages/dashboard/src/widget-resize-controller.js

@@ -85,10 +85,6 @@ export class WidgetResizeController {
  this.__updateResizedItem(-1, 0);
  }
 
- if (!gridStyle.getPropertyValue('--vaadin-dashboard-row-min-height')) {
- return;
- }
-
  const currentElementHeight = itemWrapper.firstElementChild.offsetHeight;
  const rowMinHeight = Math.min(...gridStyle.gridTemplateRows.split(' ').map((height) => parseFloat(height)));
  if (this.__resizeHeight > currentElementHeight + gapSize + rowMinHeight / 2) {
@@ -152,6 +148,11 @@ export class WidgetResizeController {
  }
 
  const gridStyle = getComputedStyle(this.host.$.grid);
+ if (rowspanDelta && !gridStyle.getPropertyValue('--vaadin-dashboard-row-min-height')) {
+ // Do not resize vertically if the min row height is not set
+ return;
+ }
+
  const columns = gridStyle.gridTemplateColumns.split(' ');
  const currentColspan = item.colspan || 1;
  const currentRowspan = item.rowspan || 1;