From 046ec35b110712c8d3d53755d3409e3af43c4792 Mon Sep 17 00:00:00 2001 From: Thomas Lamprecht Date: Sat, 20 Apr 2024 15:17:07 +0200 Subject: [PATCH] fix #5277: move reset button into window header toolbar MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The 'Reset' button, which can be used to reset the form to its original values when editing an existing resource or property, was located at the right to the submit button since its initial addition (before the git epoch started at Proxmox). As it had the exact same form and color as the 'OK' submit button, it is easy to press by accident, which then resets the pending changes one wanted to submit – while not catastrophic it's just needlessly bad UX. As this UX-mishap is something one gets used too relatively fast, especially as developer due to frequently opening such dialogues to test changes, its something that mostly newer users will run into. Luckily one took the effort to actually open an enhancement request, providing ample resources to underline their point. While there where quite a few proposals to improve this, most of them had some (smaller) disadvantage (e.g., potentially jumping location, confusion with other buttons like the help one). Moving the reset functionality as as icon-only + tooltip button into the window header title bar was the proposal that had no real disadvantage and solved the underlying UX issue by cleanly separating submit from reset. Having reset near the close-window tool has no negative implications, as both have a similar effect, the discard the current pending changes that the user did not yet submit, so if one mistakenly hits close instead of reset, or vice-versa, nothing is lost. A nice side-benefit of that option is that the change is really small code wise. Closes: #5277 Reported-by: Tristan Harward Signed-off-by: Thomas Lamprecht --- src/window/Edit.js | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) diff --git a/src/window/Edit.js b/src/window/Edit.js index c555e73..17b57a6 100644 --- a/src/window/Edit.js +++ b/src/window/Edit.js @@ -318,19 +318,21 @@ Ext.define('Proxmox.window.Edit', { }, }); - let resetBtn = Ext.create('Ext.Button', { - text: 'Reset', - disabled: true, - handler: function() { - form.reset(); + let resetTool = Ext.create('Ext.panel.Tool', { + glyph: 'xf0e2@FontAwesome', // fa-undo + tooltip: gettext('Reset form data'), + callback: () => form.reset(), + style: { + paddingRight: '2px', // just slightly more room to breathe }, + disabled: true, }); let set_button_status = function() { let valid = form.isValid(); let dirty = form.isDirty(); submitBtn.setDisabled(!valid || !(dirty || me.isCreate)); - resetBtn.setDisabled(!dirty); + resetTool.setDisabled(!dirty); }; form.on('dirtychange', set_button_status); @@ -350,7 +352,8 @@ Ext.define('Proxmox.window.Edit', { if (me.isCreate || !me.showReset) { me.buttons = [submitBtn]; } else { - me.buttons = [submitBtn, resetBtn]; + me.buttons = [submitBtn]; + me.tools = [resetTool]; } if (inputPanel && inputPanel.hasAdvanced) {