Proxmox/proxmox-widget-toolkit
5
0
Fork 0
Code Pull Requests Releases Activity

fix #5277: move reset button into window header toolbar

Browse Source 
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 <trisweb@gmail.com>
Signed-off-by: Thomas Lamprecht <t.lamprecht@proxmox.com>
This commit is contained in:
Thomas Lamprecht 2024-04-20 15:17:07 +02:00
parent b1df1f0efb
commit 046ec35b11
1 changed files with 10 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/window/Edit.js
View File

@ -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) {