[pve-devel] [PATCH manager/widget-toolkit 0/2] ui: replace non-clickable checkboxes with Yes/No text

[pve-devel] [PATCH manager/widget-toolkit 0/2] ui: replace non-clickable checkboxes with Yes/No text

[Lukas Wagner]

Consider this an RFC to maybe spark up a discussion about this. 

In our UI, we've been a bit inconsistent with the use of checkboxes/text
for `enabled` properties in table views. Looking through the UI, I've
found that the following UI elements use a checkbox UI control to
indicate wheter something is enabled or not:

 * backup job overview
 * APT repository overview
 * replication job overview

While looking sleek, the problem with this is that from a user's
perspective, a checkbox generally implies that it is operable by
clicking on it (which we allow in other places, to make the matter even
more confusing). Now, for the three UI elements mentioned above, I would 
say it is a good thing that they are not manipulateable from the overview,
in order to avoid any accidental modifications.

My suggestion would be, and this is what I've included in this patch
series, to replace those checkboxes with Yes/No text. This is the way
how it is done in many other places of the system.

If we want something prettier, we could replace/augment the text with some
fa-icon, e.g. a check-mark or an X - the important part is that they are
visually distinct from ExtJS's checkboxes.

Note: Firewall configuration also uses a checkbox, however there it is
possible to enable/disable elements by clicking on the checkbox - so
this can stay as IMHO.

pve-manager:

Lukas Wagner (1):
  ui: backup: replication: replace non-clickable checkbox with Yes/No
    text

 www/manager6/dc/Backup.js        | 7 ++-----
 www/manager6/grid/Replication.js | 8 ++++----
 2 files changed, 6 insertions(+), 9 deletions(-)

proxmox-widget-toolkit:

Lukas Wagner (1):
  repo view: replace non-clickable checkbox with Yes/No text

 src/node/APTRepositories.js | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

-- 
2.30.2

[pve-devel] [PATCH manager 1/2] ui: backup: replication: replace non-clickable checkbox with Yes/No text

[Lukas Wagner]

From a usability view, having a checkbox that is not clickable is pretty
misleading, especially if the visual style is exactly the same as in
other places in the UI where the checkbox is functional.

Signed-off-by: Lukas Wagner <l.wagner@proxmox.com>
---
 www/manager6/dc/Backup.js        | 7 ++-----
 www/manager6/grid/Replication.js | 8 ++++----
 2 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/www/manager6/dc/Backup.js b/www/manager6/dc/Backup.js
index 9d305984..284fead7 100644
--- a/www/manager6/dc/Backup.js
+++ b/www/manager6/dc/Backup.js
@@ -784,12 +784,9 @@ Ext.define('PVE.dc.BackupView', {
 		{
 		    header: gettext('Enabled'),
 		    width: 80,
-		    dataIndex: 'enabled',
-		    xtype: 'checkcolumn',
+		    dataindex: 'enabled',
+		    renderer: Proxmox.Utils.format_boolean,
 		    sortable: true,
-		    disabled: true,
-		    disabledCls: 'x-item-enabled',
-		    stopSelection: false,
 		},
 		{
 		    header: gettext('ID'),
diff --git a/www/manager6/grid/Replication.js b/www/manager6/grid/Replication.js
index b17288b9..18f273d4 100644
--- a/www/manager6/grid/Replication.js
+++ b/www/manager6/grid/Replication.js
@@ -279,11 +279,11 @@ Ext.define('PVE.grid.ReplicaView', {
 
 	me.columns = [
 	    {
-		text: gettext('Enabled'),
-		dataIndex: 'enabled',
-		xtype: 'checkcolumn',
+		header: gettext('Enabled'),
+		width: 80,
+		dataindex: 'enabled',
+		renderer: Proxmox.Utils.format_boolean,
 		sortable: true,
-		disabled: true,
 	    },
 	    {
 		text: 'ID',
-- 
2.30.2

[pve-devel] [PATCH widget-toolkit 2/2] repo view: replace non-clickable checkbox with Yes/No text

[Lukas Wagner]

From a usability view, having a checkbox that is not clickable is pretty
misleading, especially if the visual style is exactly the same as in
other places in the UI where the checkbox is functional.

Signed-off-by: Lukas Wagner <l.wagner@proxmox.com>
---
 src/node/APTRepositories.js | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/node/APTRepositories.js b/src/node/APTRepositories.js
index ce8f718..1c4a08c 100644
--- a/src/node/APTRepositories.js
+++ b/src/node/APTRepositories.js
@@ -239,11 +239,10 @@ Ext.define('Proxmox.node.APTRepositoriesGrid', {
 
     columns: [
 	{
-	    xtype: 'checkcolumn',
 	    header: gettext('Enabled'),
-	    dataIndex: 'Enabled',
-	    listeners: {
-		beforecheckchange: () => false, // veto, we don't want to allow inline change - to subtle
+	    dataindex: 'Enabled',
+	    renderer: function(_a, _b, data) {
+		return data?.data?.Enabled ? Proxmox.Utils.yesText : Proxmox.Utils.noText;
 	    },
 	    width: 90,
 	},
-- 
2.30.2

Re: [pve-devel] [PATCH manager/widget-toolkit 0/2] ui: replace non-clickable checkboxes with Yes/No text

[Thomas Lamprecht]

Am 20/01/2023 um 12:17 schrieb Lukas Wagner:
> Consider this an RFC to maybe spark up a discussion about this. 
> 
> In our UI, we've been a bit inconsistent with the use of checkboxes/text
> for `enabled` properties in table views. Looking through the UI, I've
> found that the following UI elements use a checkbox UI control to
> indicate wheter something is enabled or not:
> 
>  * backup job overview
>  * APT repository overview
>  * replication job overview
> 
> While looking sleek, the problem with this is that from a user's
> perspective, a checkbox generally implies that it is operable by
> clicking on it (which we allow in other places, to make the matter even
> more confusing).

If it's editable it gets a pointer cursor, else not.
I see were you're comming from, but do we also have any complaints on official
channels w.r.t. this?
 > Now, for the three UI elements mentioned above, I would 
> say it is a good thing that they are not manipulateable from the overview,
> in order to avoid any accidental modifications.

yeah, making those editable should be avoided in general, and if over a action
toggle button, not the column that shows its current state.

> 
> My suggestion would be, and this is what I've included in this patch
> series, to replace those checkboxes with Yes/No text. This is the way
> how it is done in many other places of the system.

I would not be completely opposed, and it might be indeed a UX plus for some;
but it also has it's merits to have a language agnostic fixed width icon..

> 
> If we want something prettier, we could replace/augment the text with some
> fa-icon, e.g. a check-mark or an X - the important part is that they are
> visually distinct from ExtJS's checkboxes.

Yeah, I'd have a slight preference towards icons, but using x for disabled
is far from ideal (denotes errors); checkboxes are best for that - and there's
quite some prior art of disabled checkboxes for showing the state..

> 
> Note: Firewall configuration also uses a checkbox, however there it is
> possible to enable/disable elements by clicking on the checkbox - so
> this can stay as IMHO.

might want to move that to a action column with a explicit (but icon only)
toggle button.

Re: [pve-devel] [PATCH manager/widget-toolkit 0/2] ui: replace non-clickable checkboxes with Yes/No text

[Lukas Wagner]

On 1/20/23 15:09, Thomas Lamprecht wrote:
>> While looking sleek, the problem with this is that from a user's
>> perspective, a checkbox generally implies that it is operable by
>> clicking on it (which we allow in other places, to make the matter even
>> more confusing).
> 
> If it's editable it gets a pointer cursor, else not.
> I see were you're comming from, but do we also have any complaints on official
> channels w.r.t. this?

No complaints, it's just something that I've run into myself repeatedly, e.g. when
enabling the no-subscription repo via the GUI. I think it's one of those UX
problems that might be annoying to some users (including myself), however it's not
severe enough that people care to report this in the bug tracker.

>   > Now, for the three UI elements mentioned above, I would
>> say it is a good thing that they are not manipulateable from the overview,
>> in order to avoid any accidental modifications.
> 
> yeah, making those editable should be avoided in general, and if over a action
> toggle button, not the column that shows its current state.
> 
Agreed.

>>
>> My suggestion would be, and this is what I've included in this patch
>> series, to replace those checkboxes with Yes/No text. This is the way
>> how it is done in many other places of the system.
> 
> I would not be completely opposed, and it might be indeed a UX plus for some;
> but it also has it's merits to have a language agnostic fixed width icon..
> 

I have played around a bit with FA icons, and I think I have found something that is visually
appealing, fixed-width and where it is IMO clear that it is not an actionable UI item.
For now, I think the nicest option is `fa-check` for enabled rows and `fa-minus` for disabled ones.
I've created an A:B comparison [1] between the old checkboxes and the new icons.
Please let me know what you think.


>>
>> If we want something prettier, we could replace/augment the text with some
>> fa-icon, e.g. a check-mark or an X - the important part is that they are
>> visually distinct from ExtJS's checkboxes.
> 
> Yeah, I'd have a slight preference towards icons, but using x for disabled
> is far from ideal (denotes errors); checkboxes are best for that - and there's
> quite some prior art of disabled checkboxes for showing the state..
> 

You are right about the `x` symbols; that's why I've settled for `-` in my new approach.


>>
>> Note: Firewall configuration also uses a checkbox, however there it is
>> possible to enable/disable elements by clicking on the checkbox - so
>> this can stay as IMHO.
> 
> might want to move that to a action column with a explicit (but icon only)
> toggle button.

I agree, a button would probably a nice for that.

Thanks!


[1] https://imgur.com/a/tsXegNF

-- 
- Lukas

Re: [pve-devel] [PATCH manager/widget-toolkit 0/2] ui: replace non-clickable checkboxes with Yes/No text

[Thomas Lamprecht]

Am 23/01/2023 um 11:46 schrieb Lukas Wagner:
> On 1/20/23 15:09, Thomas Lamprecht wrote:
>>> While looking sleek, the problem with this is that from a user's
>>> perspective, a checkbox generally implies that it is operable by
>>> clicking on it (which we allow in other places, to make the matter even
>>> more confusing).
>>
>> If it's editable it gets a pointer cursor, else not.
>> I see were you're comming from, but do we also have any complaints on official
>> channels w.r.t. this?
> 
> No complaints, it's just something that I've run into myself repeatedly, e.g. when
> enabling the no-subscription repo via the GUI. I think it's one of those UX
> problems that might be annoying to some users (including myself), however it's not
> severe enough that people care to report this in the bug tracker.
> 

Ok, tbh. I have some faint memory that I saw some comment about this in the
distant past; IIRC it was mostly due to the the "writeable" firewall and the
"read-only" other usages using both the exact same display.

> 
> I have played around a bit with FA icons, and I think I have found something that is visually
> appealing, fixed-width and where it is IMO clear that it is not an actionable UI item.
> For now, I think the nicest option is `fa-check` for enabled rows and `fa-minus` for disabled ones.
> I've created an A:B comparison [1] between the old checkboxes and the new icons.
> Please let me know what you think.
> 

looks better than the status quo, especially UX-wise, and would be an option for
icon only. So, if nobody else has hard feelings (but ideally somewhat rationally
argued) for going with text over icon I'd go for your combination check-mark/minus
icon combination.

> 
> [1] https://imgur.com/a/tsXegNF
> 

Re: [pve-devel] [PATCH manager/widget-toolkit 0/2] ui: replace non-clickable checkboxes with Yes/No text

[Lukas Wagner]

On 1/23/23 11:57, Thomas Lamprecht wrote:
> Ok, tbh. I have some faint memory that I saw some comment about this in the
> distant past; IIRC it was mostly due to the the "writeable" firewall and the
> "read-only" other usages using both the exact same display.
> 
My bad, there actually was a report about this, Leo kindly showed me the entry in Bugzilla just now [1].

>>
>> I have played around a bit with FA icons, and I think I have found something that is visually
>> appealing, fixed-width and where it is IMO clear that it is not an actionable UI item.
>> For now, I think the nicest option is `fa-check` for enabled rows and `fa-minus` for disabled ones.
>> I've created an A:B comparison [1] between the old checkboxes and the new icons.
>> Please let me know what you think.
>>
> 
> looks better than the status quo, especially UX-wise, and would be an option for
> icon only. So, if nobody else has hard feelings (but ideally somewhat rationally
> argued) for going with text over icon I'd go for your combination check-mark/minus
> icon combination.
> 

Ok great, then I'll post a v2 with the icon-version soon.

Thanks!

[1] https://bugzilla.proxmox.com/show_bug.cgi?id=4350

-- 
- Lukas