Skip to content

Commit 997f2a2

Browse files
authored
fix(ui5-dialog): improved shrinking dialog when resizing (#5291)
When resizing the dialog to its smallest possible size, the header and footer slot now retain their height. It is assumed that the header or footer will not change their dimensions while the user is resizing. Fixes: #5265
1 parent 8eea51e commit 997f2a2

File tree

3 files changed

+32
-14
lines changed

3 files changed

+32
-14
lines changed

packages/main/src/Dialog.js

Lines changed: 27 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -271,6 +271,22 @@ class Dialog extends Popup {
271271
return this.resizable && this.onDesktop;
272272
}
273273

274+
get _minHeight() {
275+
let minHeight = Number.parseInt(window.getComputedStyle(this.contentDOM).minHeight);
276+
277+
const header = this._root.querySelector(".ui5-popup-header-root");
278+
if (header) {
279+
minHeight += header.offsetHeight;
280+
}
281+
282+
const footer = this._root.querySelector(".ui5-popup-footer-root");
283+
if (footer) {
284+
minHeight += footer.offsetHeight;
285+
}
286+
287+
return minHeight;
288+
}
289+
274290
_show() {
275291
super._show();
276292
this._center();
@@ -465,7 +481,6 @@ class Dialog extends Popup {
465481
const { top, left } = this.getBoundingClientRect(),
466482
style = window.getComputedStyle(this),
467483
minWidth = Number.parseFloat(style.minWidth),
468-
minHeight = Number.parseFloat(style.minHeight),
469484
maxWidth = window.innerWidth - left,
470485
maxHeight = window.innerHeight - top;
471486

@@ -488,7 +503,7 @@ class Dialog extends Popup {
488503
}
489504

490505
width = clamp(width, minWidth, maxWidth);
491-
height = clamp(height, minHeight, maxHeight);
506+
height = clamp(height, this._minHeight, maxHeight);
492507

493508
Object.assign(this.style, {
494509
width: `${width}px`,
@@ -523,7 +538,6 @@ class Dialog extends Popup {
523538
width,
524539
height,
525540
minWidth,
526-
minHeight,
527541
} = window.getComputedStyle(this);
528542

529543
this._initialX = event.clientX;
@@ -533,7 +547,7 @@ class Dialog extends Popup {
533547
this._initialTop = top;
534548
this._initialLeft = left;
535549
this._minWidth = Number.parseFloat(minWidth);
536-
this._minHeight = Number.parseFloat(minHeight);
550+
this._cachedMinHeight = this._minHeight;
537551

538552
Object.assign(this.style, {
539553
top: `${top}px`,
@@ -571,7 +585,7 @@ class Dialog extends Popup {
571585

572586
const newHeight = clamp(
573587
this._initialHeight + (clientY - this._initialY),
574-
this._minHeight,
588+
this._cachedMinHeight,
575589
window.innerHeight - this._initialTop,
576590
);
577591

@@ -583,14 +597,14 @@ class Dialog extends Popup {
583597
}
584598

585599
_onResizeMouseUp() {
586-
this._initialX = null;
587-
this._initialY = null;
588-
this._initialWidth = null;
589-
this._initialHeight = null;
590-
this._initialTop = null;
591-
this._initialLeft = null;
592-
this._minWidth = null;
593-
this._minHeight = null;
600+
delete this._initialX;
601+
delete this._initialY;
602+
delete this._initialWidth;
603+
delete this._initialHeight;
604+
delete this._initialTop;
605+
delete this._initialLeft;
606+
delete this._minWidth;
607+
delete this._cachedMinHeight;
594608

595609
this._detachMouseResizeHandlers();
596610
}

packages/main/test/pages/Dialog.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -373,7 +373,7 @@
373373
<p>Resize this dialog by dragging it by its resize handle or use shift+arrow keys.</p>
374374
<p>This feature is available only on Desktop.</p>
375375

376-
<div slot="footer" class="dialogFooter">
376+
<div slot="footer" class="dialogFooter tallFooter">
377377
<ui5-button id="draggable-and-resizable-close" design="Emphasized">Close</ui5-button>
378378
</div>
379379
</ui5-dialog>

packages/main/test/pages/styles/Dialog.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,3 +44,7 @@
4444
padding-right: 0;
4545
padding-left: 0;
4646
}
47+
48+
.tallFooter {
49+
height: 4rem;
50+
}

0 commit comments

Comments
 (0)