feat(ui5-dialog): introduce resizable property (#2301)

Fixes #2082

packages/main/src/Dialog.hbs

@@ -19,5 +19,13 @@
 			<slot name="footer"></slot>
 		</footer>
 	{{/if}}
+	{{#if resizable}}
+		<ui5-icon
+			name="resize-corner"
+			dir="{{effectiveDir}}"
+			class="ui5-popup-resize-handle"
+			@mousedown="{{_onResizeMouseDown}}">
+		</ui5-icon>
+	{{/if}}
 {{/inline}}
 

packages/main/src/Dialog.js

@@ -1,5 +1,7 @@
 import { isPhone, isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import Popup from "./Popup.js";
+import "@ui5/webcomponents-icons/dist/icons/resize-corner.js";
+import Icon from "./Icon.js";
 
 // Template
 import DialogTemplate from "./generated/templates/DialogTemplate.lit.js";
@@ -77,6 +79,23 @@ const metadata = {
 			type: Boolean,
 		},
 
+		/**
+		 * Configures the <code>ui5-dialog</code> to be resizable.
+		 * If this property is set to true, the Dialog will have a resize handle in its bottom right corner in LTR languages.
+		 * In RTL languages, the resize handle will be placed in the bottom left corner.
+		 * <br><br>
+		 * <b>Note:</b> The <code>ui5-dialog</code> can be resizable only in desktop mode.
+		 * <br>
+		 * <b>Note:</b> Upon resizing, externally defined height and width styling will be ignored.
+		 * @type {boolean}
+		 * @defaultvalue false
+		 * @since 1.0.0-rc.10
+		 * @public
+		 */
+		resizable: {
+			type: Boolean,
+		},
+
 		/**
 		 * @private
 		 */
@@ -137,6 +156,12 @@ class Dialog extends Popup {
 		return metadata;
 	}
 
+	static get dependencies() {
+		return [
+			Icon,
+		];
+	}
+
 	static get template() {
 		return DialogTemplate;
 	}
@@ -168,14 +193,22 @@ class Dialog extends Popup {
 		};
 	}
 
+	_clamp(val, min, max) {
+		return Math.min(Math.max(val, min), max);
+	}
+
 	onBeforeRendering() {
+		this._isRTL = this.effectiveDir === "rtl";
 		this.onPhone = isPhone();
 		this.onDesktop = isDesktop();
 	}
 
 	onEnterDOM() {
 		this._dragMouseMoveHandler = this._onDragMouseMove.bind(this);
 		this._dragMouseUpHandler = this._onDragMouseUp.bind(this);
+
+		this._resizeMouseMoveHandler = this._onResizeMouseMove.bind(this);
+		this._resizeMouseUpHandler = this._onResizeMouseUp.bind(this);
 	}
 
 	onExitDOM() {
@@ -212,8 +245,8 @@ class Dialog extends Popup {
 			transform: "none",
 			top: `${top}px`,
 			left: `${left}px`,
-			width: `${Math.round(Number(width) * 100) / 100}px`,
-			height: `${Math.round(Number(height) * 100) / 100}px`,
+			width: `${Math.round(Number.parseFloat(width) * 100) / 100}px`,
+			height: `${Math.round(Number.parseFloat(height) * 100) / 100}px`,
 		});
 
 		this._x = event.clientX;
@@ -232,7 +265,6 @@ class Dialog extends Popup {
 			top,
 		} = this.getBoundingClientRect();
 
-
 		Object.assign(this.style, {
 			left: `${Math.floor(left - calcX)}px`,
 			top: `${Math.floor(top - calcY)}px`,
@@ -268,6 +300,116 @@ class Dialog extends Popup {
 		});
 		this.removeEventListener("ui5-before-close", this._recenter);
 	}
+
+	_onResizeMouseDown(event) {
+		if (!(this.resizable && this.onDesktop)) {
+			return;
+		}
+
+		event.preventDefault();
+
+		const {
+			top,
+			left,
+		} = this.getBoundingClientRect();
+		const {
+			width,
+			height,
+			minWidth,
+			minHeight,
+		} = window.getComputedStyle(this);
+
+		this._initialX = event.clientX;
+		this._initialY = event.clientY;
+		this._initialWidth = Number.parseFloat(width);
+		this._initialHeight = Number.parseFloat(height);
+		this._initialTop = top;
+		this._initialLeft = left;
+		this._minWidth = Number.parseFloat(minWidth);
+		this._minHeight = Number.parseFloat(minHeight);
+
+		Object.assign(this.style, {
+			transform: "none",
+			top: `${top}px`,
+			left: `${left}px`,
+		});
+
+		this._attachResizeHandlers();
+	}
+
+	_onResizeMouseMove(event) {
+		const { clientX, clientY } = event;
+
+		let newWidth;
+		let newLeft;
+
+		if (this._isRTL) {
+			newWidth = this._clamp(
+				this._initialWidth - (clientX - this._initialX),
+				this._minWidth,
+				this._initialLeft + this._initialWidth
+			);
+
+			newLeft = this._clamp(
+				this._initialLeft + (clientX - this._initialX),
+				0,
+				this._initialX + this._initialWidth - this._minWidth
+			);
+		} else {
+			newWidth = this._clamp(
+				this._initialWidth + (clientX - this._initialX),
+				this._minWidth,
+				window.innerWidth - this._initialLeft
+			);
+		}
+
+		const newHeight = this._clamp(
+			this._initialHeight + (clientY - this._initialY),
+			this._minHeight,
+			window.innerHeight - this._initialTop
+		);
+
+		Object.assign(this.style, {
+			height: `${newHeight}px`,
+			width: `${newWidth}px`,
+			left: newLeft ? `${newLeft}px` : undefined,
+		});
+	}
+
+	_onResizeMouseUp() {
+		this._initialX = null;
+		this._initialY = null;
+		this._initialWidth = null;
+		this._initialHeight = null;
+		this._initialTop = null;
+		this._initialLeft = null;
+		this._minWidth = null;
+		this._minHeight = null;
+
+		this._detachResizeHandlers();
+	}
+
+	_attachResizeHandlers() {
+		window.addEventListener("mousemove", this._resizeMouseMoveHandler);
+		window.addEventListener("mouseup", this._resizeMouseUpHandler);
+		this.addEventListener("ui5-before-close", this._revertSize);
+	}
+
+	_detachResizeHandlers() {
+		window.removeEventListener("mousemove", this._resizeMouseMoveHandler);
+		window.removeEventListener("mouseup", this._resizeMouseUpHandler);
+	}
+
+	_revertSize() {
+		Object.assign(this.style, {
+			top: "",
+			left: "",
+			width: "",
+			height: "",
+			transform: "",
+		});
+		this.removeEventListener("ui5-before-close", this._revertSize);
+	}
 }
 
 Dialog.define();

packages/main/src/themes/Dialog.css

@@ -3,6 +3,7 @@
 	left: 50%;
 	transform: translate(-50%, -50%);
 	min-width: 20rem;
+	min-height: 6rem;
 	box-shadow: var(--sapContent_Shadow3);
 }
 
@@ -37,5 +38,20 @@
 }
 
 .ui5-popup-content {
+	min-height: var(--_ui5_dialog_content_min_height);
 	flex: 1 1 auto;
+}
+
+.ui5-popup-resize-handle {
+	position: absolute;
+	bottom: -0.0625rem;
+	right: -0.25rem;
+	cursor: se-resize;
+	color: var(--_ui5_dialog_resize_handle_color);
+}
+
+.ui5-popup-resize-handle[dir=rtl] {
+	left: -0.25rem;
+	right: unset;
+	cursor: sw-resize;
 }

packages/main/src/themes/base/Dialog-parameters.css

@@ -0,0 +1,3 @@
+:root {
+	--_ui5_dialog_resize_handle_color: var(--sapButton_Lite_TextColor);
+}

packages/main/src/themes/base/sizes-parameters.css

@@ -17,6 +17,9 @@
 	--_ui5_datetime_timeview_phonemode_width: 19.5rem;
 	--_ui5_datetime_timeview_padding: 1rem;
 
+	/* Dialog */
+	--_ui5_dialog_content_min_height: 2.75rem;
+
 	--_ui5_input_inner_padding: 0 0.625rem;
 	--_ui5_input_inner_padding_with_icon: 0 0.25rem 0 0.625rem;
 	--_ui5_input_value_state_icon_padding: var(--_ui5-input-icon-padding);
@@ -116,6 +119,9 @@
 	--_ui5_datetime_timeview_phonemode_width: 18.5rem;
 	--_ui5_datetime_timeview_padding: 0.5rem;
 
+	/* Dialog */
+	--_ui5_dialog_content_min_height: 2.5rem;
+
 	/* Input */
 	--_ui5_input_height: var(--_ui5_input_compact_height);
 	--_ui5_input_inner_padding: 0 0.5rem;

packages/main/src/themes/sap_belize/Dialog-parameters.css

@@ -0,0 +1,5 @@
+@import "../base/Dialog-parameters.css";
+
+:root {
+	--_ui5_dialog_resize_handle_color: 	var(--sapButton_Emphasized_Background);
+}

packages/main/src/themes/sap_belize/parameters-bundle.css

@@ -4,6 +4,7 @@
 @import "./Button-parameters.css";
 @import "../base/DatePicker-parameters.css";
 @import "../base/DayPicker-parameters.css";
+@import "./Dialog-parameters.css";
 @import "../base/CalendarHeader-parameters.css";
 @import "./Carousel-parameters.css";
 @import "../base/Card-parameters.css";

packages/main/src/themes/sap_belize_hcb/Dialog-parameters.css

@@ -0,0 +1,5 @@
+@import "../base/Dialog-parameters.css";
+
+:root {
+	--_ui5_dialog_resize_handle_color: var(--sapContent_IconColor);
+}

packages/main/src/themes/sap_belize_hcb/parameters-bundle.css

@@ -8,6 +8,7 @@
 @import "./CheckBox-parameters.css";
 @import "./DatePicker-parameters.css";
 @import "./DayPicker-parameters.css";
+@import "./Dialog-parameters.css";
 @import "../base/GroupHeaderListItem-parameters.css";
 @import "./Input-parameters.css";
 @import "./InputIcon-parameters.css";

packages/main/src/themes/sap_belize_hcw/Dialog-parameters.css

@@ -0,0 +1,5 @@
+@import "../base/Dialog-parameters.css";
+
+:root {
+	--_ui5_dialog_resize_handle_color: var(--sapContent_IconColor);
+}

packages/main/src/themes/sap_belize_hcw/parameters-bundle.css

@@ -8,6 +8,7 @@
 @import "./CheckBox-parameters.css";
 @import "./DatePicker-parameters.css";
 @import "./DayPicker-parameters.css";
+@import "./Dialog-parameters.css";
 @import "../base/GroupHeaderListItem-parameters.css";
 @import "./Input-parameters.css";
 @import "./InputIcon-parameters.css";

packages/main/src/themes/sap_fiori_3/parameters-bundle.css

@@ -7,6 +7,7 @@
 @import "./CheckBox-parameters.css";
 @import "../base/DatePicker-parameters.css";
 @import "./DayPicker-parameters.css";
+@import "../base/Dialog-parameters.css";
 @import "../base/GroupHeaderListItem-parameters.css";
 @import "./Input-parameters.css";
 @import "../base/InputIcon-parameters.css";

packages/main/src/themes/sap_fiori_3_dark/parameters-bundle.css

@@ -7,6 +7,7 @@
 @import "./CheckBox-parameters.css";
 @import "../base/DatePicker-parameters.css";
 @import "./DayPicker-parameters.css";
+@import "../base/Dialog-parameters.css";
 @import "../base/GroupHeaderListItem-parameters.css";
 @import "./Input-parameters.css";
 @import "../base/InputIcon-parameters.css";

packages/main/src/themes/sap_fiori_3_hcb/parameters-bundle.css

@@ -8,6 +8,7 @@
 @import "./CheckBox-parameters.css";
 @import "./DatePicker-parameters.css";
 @import "./DayPicker-parameters.css";
+@import "../base/Dialog-parameters.css";
 @import "../base/GroupHeaderListItem-parameters.css";
 @import "./Input-parameters.css";
 @import "./InputIcon-parameters.css";

packages/main/src/themes/sap_fiori_3_hcw/parameters-bundle.css

@@ -8,6 +8,7 @@
 @import "./CheckBox-parameters.css";
 @import "./DatePicker-parameters.css";
 @import "./DayPicker-parameters.css";
+@import "../base/Dialog-parameters.css";
 @import "../base/GroupHeaderListItem-parameters.css";
 @import "./Input-parameters.css";
 @import "./InputIcon-parameters.css";

packages/main/test/pages/Dialog.html

@@ -47,6 +47,9 @@
 	<br>
 	<br>
 	<ui5-button id="draggable-open">Open draggable dialog</ui5-button>
+	<br>
+	<br>
+	<ui5-button id="resizable-open">Open resizable dialog</ui5-button>
 
 	<ui5-block-layer></ui5-block-layer>
 
@@ -200,6 +203,15 @@
 		</div>
 	</ui5-dialog>
 
+	<ui5-dialog id="resizable-dialog" header-text="Resizable dialog" resizable>
+		<p>Resize this dialog by dragging it by its resize handle.</p>
+		<p>This feature available only on Desktop.</p>
+
+		<div slot="footer" style="display: flex; justify-content: flex-end; width: 100%; padding: .25rem 1rem;">
+			<ui5-button id="resizable-close" design="Emphasized">OK</ui5-button>
+		</div>
+	</ui5-dialog>
+
 	<ui5-popover header-text="My Heading" id="pop" style="width: 300px" placement-type="Top">
 		<!-- <div slot="header">
 			Hello World
@@ -316,8 +328,9 @@
 		window["wide-open2"].addEventListener("click", function () { window["wide-dialog2"].open(); });
 		window["draggable-open"].addEventListener("click", function () { window["draggable-dialog"].open(); });
 		window["draggable-close"].addEventListener("click", function () { window["draggable-dialog"].close(); });
-
+		window["resizable-open"].addEventListener("click", function () { window["resizable-dialog"].open(); });
+		window["resizable-close"].addEventListener("click", function () { window["resizable-dialog"].close(); });
 	</script>
 </body>
 
-</html>
+</html>