[pve-devel] [PATCH widget-toolkit] fix #6312: limit consent window to viewport size

[pve-devel] [PATCH widget-toolkit] fix #6312: limit consent window to viewport size

[Dominik Csapak]

The consent window will try to size itself according to the max/min
constraints set, but those might be too large for some viewport sizes.

Since it's not possible to set those to relative viewport sizes (ExtJS
does it's own layout, so we can't use CSS), we have to save the original
size (while factoring in the constraints) and on resize of the viewport
(or the window) limit ourselves to that (minus 10 px safety margin).

Even with that the window will adhere to the set constraint sizes,
but it should be viewable with any sensible display/viewport size.

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
we could think about implementing such a limit for all of our windows
in e.g. Toolkit.js, but I'm not sure if that's wise, since not all
windows are as flexible with the size as the consent window.

 src/window/ConsentModal.js | 33 +++++++++++++++++++++++++++++++++
 1 file changed, 33 insertions(+)

diff --git a/src/window/ConsentModal.js b/src/window/ConsentModal.js
index 2826899..184933d 100644
--- a/src/window/ConsentModal.js
+++ b/src/window/ConsentModal.js
@@ -32,5 +32,38 @@ Ext.define('Proxmox.window.ConsentModal', {
 	    text: gettext('OK'),
 	},
     ],
+
+    onResize: function() {
+	let me = this;
+	let viewportSize = Ext.getBody().getViewSize();
+
+	// limit to viewport size - 10px for safety
+	let newSize = {
+	    width: Math.min(me.originalSize.width, viewportSize.width - 10),
+	    height: Math.min(me.originalSize.height, viewportSize.height - 10),
+	};
+
+	me.setSize(newSize);
+	me.alignTo(Ext.getBody(), 'c-c');
+    },
+
+    listeners: {
+	resize: 'onResize',
+	afterRender: function(win) {
+	    let size = win.getSize();
+	    // save the original size, but factor in the constraints, since
+	    // those will be applied by extjs later
+	    win.originalSize = {
+		width: Math.min(Math.max(size.width, win.minWidth), win.maxWidth),
+		height: Math.min(Math.max(size.height, win.minHeight), win.maxHeight),
+	    };
+	},
+    },
+
+    initComponent: function() {
+	let me = this;
+	me.callParent();
+	me.mon(Ext.getBody(), 'resize', me.onResize, me);
+    },
 });
 
-- 
2.39.5



_______________________________________________
pve-devel mailing list
pve-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel