[pve-devel] [PATCH follow-up manager] ui: backup: move change detection help tooltip behind field

[Dominik Csapak <d.csapak@proxmox.com>]

instead of having it in a separate line. This could be confusing on
first glance, e.g. if it belongs to the line above or below.

To make it more clear, put it in line with the field itself.

Because this uses a FieldContainer now, we can use that to hide and show
both at the same time, reducing the amount of code a bit.

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
this is a follow up to:
https://lore.proxmox.com/all/20250410083333.1781596-1-d.csapak@proxmox.com/

could be squashed in if wanted

 www/manager6/window/Backup.js | 41 ++++++++++++++++++++---------------
 1 file changed, 24 insertions(+), 17 deletions(-)

diff --git a/www/manager6/window/Backup.js b/www/manager6/window/Backup.js
index 68e9565b..70b51409 100644
--- a/www/manager6/window/Backup.js
+++ b/www/manager6/window/Backup.js
@@ -53,18 +53,10 @@ Ext.define('PVE.window.Backup', {
 	    },
 	});
 
-	let pbsChangeDetectionHelp = Ext.create('Ext.Component', {
-	    hidden: true,
-	    html: `<i class="fa fa-question-circle" data-qtip="
-		${gettext("Mode to detect file changes and switch archive encoding format for container backups to Proxmox Backup Server. Not available for VM backups.")}
-	    "></i>`,
-	});
-
 	let pbsChangeDetectionModeSelector = Ext.create({
 	    xtype: 'proxmoxKVComboBox',
-	    hidden: true,
+	    flex: 1,
 	    disabled: true,
-	    fieldLabel: gettext('PBS change detection mode'),
 	    name: 'pbs-change-detection-mode',
 	    deleteEmpty: true,
 	    value: '__default__',
@@ -75,6 +67,25 @@ Ext.define('PVE.window.Backup', {
 	    ],
 	});
 
+	let pbsChangeDetection = Ext.create('Ext.form.FieldContainer', {
+	    fieldLabel: gettext('PBS change detection mode'),
+	    hidden: true,
+	    layout: {
+		type: 'hbox',
+		align: 'center',
+	    },
+	    items: [
+		pbsChangeDetectionModeSelector,
+		{
+		    xtype: 'box',
+		    html: `<i class="fa fa-question-circle" data-qtip="
+			${gettext("Mode to detect file changes and switch archive encoding format for container backups to Proxmox Backup Server. Not available for VM backups.")}
+		    "></i>`,
+		    padding: 5,
+		},
+	    ],
+	});
+
 	const keepNames = [
 	    ['keep-last', gettext('Keep Last')],
 	    ['keep-hourly', gettext('Keep Hourly')],
@@ -135,20 +146,17 @@ Ext.define('PVE.window.Backup', {
 			if (me.vmtype === 'lxc') {
 			    pbsChangeDetectionModeSelector.setValue('__default__');
 			    pbsChangeDetectionModeSelector.setDisabled(false);
-			    pbsChangeDetectionModeSelector.setHidden(false);
-			    pbsChangeDetectionHelp.setHidden(false);
+			    pbsChangeDetection.setHidden(false);
 			} else {
 			    pbsChangeDetectionModeSelector.setDisabled(true);
-			    pbsChangeDetectionModeSelector.setHidden(true);
-			    pbsChangeDetectionHelp.setHidden(true);
+			    pbsChangeDetection.setHidden(true);
 			}
 		    } else {
 			if (!compressionSelector.getEditable()) {
 			    compressionSelector.setDisabled(false);
 			}
 			pbsChangeDetectionModeSelector.setDisabled(true);
-			pbsChangeDetectionModeSelector.setHidden(true);
-			pbsChangeDetectionHelp.setHidden(true);
+			pbsChangeDetection.setHidden(true);
 		    }
 
 
@@ -231,8 +239,7 @@ Ext.define('PVE.window.Backup', {
 		storagesel,
 		modeSelector,
 		protectedCheckbox,
-		pbsChangeDetectionHelp,
-		pbsChangeDetectionModeSelector,
+		pbsChangeDetection,
 	    ],
 	    column2: [
 		compressionSelector,
-- 
2.39.5



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