* [pve-devel] [PATCH v3 manager/widget-toolkit 0/2] ui: replace non-clickable checkboxes with icons @ 2023-01-26 10:47 Lukas Wagner 2023-01-26 10:47 ` [pve-devel] [PATCH v3 widget-toolkit 1/2] repo view: replace non-clickable checkbox " Lukas Wagner 2023-01-26 10:47 ` [pve-devel] [PATCH v3 manager 2/2] ui: backup: replication: " Lukas Wagner 0 siblings, 2 replies; 5+ messages in thread From: Lukas Wagner @ 2023-01-26 10:47 UTC (permalink / raw) To: pve-devel 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. In this patch series, the checkbox is replaced by a checkmark (fa-check) icon if enabled, or by a minus/dash (fa-minus) icon if disabled. Note: Firewall configuration also uses a checkbox, however there it is possible to enable/disable elements by clicking on the checkbox. As mentioned by Thomas in v1, this could be replaced by a more explicit icon-based toggle button in a future series. Changes v2 -> v3: * Fixed typo 'dataindex' -> 'dataIndex' * Use camel case for render function * Use arrow functions * Remove spurious newline proxmox-widget-toolkit: Lukas Wagner (1): repo view: replace non-clickable checkbox with icons src/Utils.js | 2 ++ src/node/APTRepositories.js | 6 ++---- 2 files changed, 4 insertions(+), 4 deletions(-) pve-manager: Lukas Wagner (1): ui: backup: replication: replace non-clickable checkbox with icons www/manager6/dc/Backup.js | 7 +++---- www/manager6/grid/Replication.js | 7 ++++--- 2 files changed, 7 insertions(+), 7 deletions(-) -- 2.30.2 ^ permalink raw reply [flat|nested] 5+ messages in thread
* [pve-devel] [PATCH v3 widget-toolkit 1/2] repo view: replace non-clickable checkbox with icons 2023-01-26 10:47 [pve-devel] [PATCH v3 manager/widget-toolkit 0/2] ui: replace non-clickable checkboxes with icons Lukas Wagner @ 2023-01-26 10:47 ` Lukas Wagner 2023-03-17 11:04 ` [pve-devel] applied: " Thomas Lamprecht 2023-01-26 10:47 ` [pve-devel] [PATCH v3 manager 2/2] ui: backup: replication: " Lukas Wagner 1 sibling, 1 reply; 5+ messages in thread From: Lukas Wagner @ 2023-01-26 10:47 UTC (permalink / raw) To: pve-devel 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/Utils.js | 2 ++ src/node/APTRepositories.js | 6 ++---- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/Utils.js b/src/Utils.js index ef0c2b8..a6dd314 100644 --- a/src/Utils.js +++ b/src/Utils.js @@ -100,6 +100,8 @@ utilities: { return value; }, + renderEnabledIcon: enabled => `<i class="fa fa-${enabled ? 'check' : 'minus'}"></i>`, + language_array: function() { let data = [['__default__', Proxmox.Utils.render_language('')]]; Ext.Object.each(Proxmox.Utils.language_map, function(key, value) { diff --git a/src/node/APTRepositories.js b/src/node/APTRepositories.js index ce8f718..1fb627c 100644 --- a/src/node/APTRepositories.js +++ b/src/node/APTRepositories.js @@ -239,12 +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 - }, + align: 'center', + renderer: Proxmox.Utils.renderEnabledIcon, width: 90, }, { -- 2.30.2 ^ permalink raw reply [flat|nested] 5+ messages in thread
* [pve-devel] applied: [PATCH v3 widget-toolkit 1/2] repo view: replace non-clickable checkbox with icons 2023-01-26 10:47 ` [pve-devel] [PATCH v3 widget-toolkit 1/2] repo view: replace non-clickable checkbox " Lukas Wagner @ 2023-03-17 11:04 ` Thomas Lamprecht 0 siblings, 0 replies; 5+ messages in thread From: Thomas Lamprecht @ 2023-03-17 11:04 UTC (permalink / raw) To: Proxmox VE development discussion, Lukas Wagner On 26/01/2023 11:47, Lukas Wagner wrote: > 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/Utils.js | 2 ++ > src/node/APTRepositories.js | 6 ++---- > 2 files changed, 4 insertions(+), 4 deletions(-) > > applied, thanks! ^ permalink raw reply [flat|nested] 5+ messages in thread
* [pve-devel] [PATCH v3 manager 2/2] ui: backup: replication: replace non-clickable checkbox with icons 2023-01-26 10:47 [pve-devel] [PATCH v3 manager/widget-toolkit 0/2] ui: replace non-clickable checkboxes with icons Lukas Wagner 2023-01-26 10:47 ` [pve-devel] [PATCH v3 widget-toolkit 1/2] repo view: replace non-clickable checkbox " Lukas Wagner @ 2023-01-26 10:47 ` Lukas Wagner 2023-03-17 11:04 ` [pve-devel] applied: " Thomas Lamprecht 1 sibling, 1 reply; 5+ messages in thread From: Lukas Wagner @ 2023-01-26 10:47 UTC (permalink / raw) To: pve-devel 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 | 6 ++---- www/manager6/grid/Replication.js | 7 ++++--- 2 files changed, 6 insertions(+), 7 deletions(-) diff --git a/www/manager6/dc/Backup.js b/www/manager6/dc/Backup.js index 9d305984..4d12e802 100644 --- a/www/manager6/dc/Backup.js +++ b/www/manager6/dc/Backup.js @@ -785,11 +785,9 @@ Ext.define('PVE.dc.BackupView', { header: gettext('Enabled'), width: 80, dataIndex: 'enabled', - xtype: 'checkcolumn', + align: 'center', + renderer: Proxmox.Utils.renderEnabledIcon, 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..1e4e00fc 100644 --- a/www/manager6/grid/Replication.js +++ b/www/manager6/grid/Replication.js @@ -279,11 +279,12 @@ Ext.define('PVE.grid.ReplicaView', { me.columns = [ { - text: gettext('Enabled'), + header: gettext('Enabled'), + width: 80, dataIndex: 'enabled', - xtype: 'checkcolumn', + align: 'center', + renderer: Proxmox.Utils.renderEnabledIcon, sortable: true, - disabled: true, }, { text: 'ID', -- 2.30.2 ^ permalink raw reply [flat|nested] 5+ messages in thread
* [pve-devel] applied: [PATCH v3 manager 2/2] ui: backup: replication: replace non-clickable checkbox with icons 2023-01-26 10:47 ` [pve-devel] [PATCH v3 manager 2/2] ui: backup: replication: " Lukas Wagner @ 2023-03-17 11:04 ` Thomas Lamprecht 0 siblings, 0 replies; 5+ messages in thread From: Thomas Lamprecht @ 2023-03-17 11:04 UTC (permalink / raw) To: Proxmox VE development discussion, Lukas Wagner On 26/01/2023 11:47, Lukas Wagner wrote: > 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 | 6 ++---- > www/manager6/grid/Replication.js | 7 ++++--- > 2 files changed, 6 insertions(+), 7 deletions(-) > > applied, but expanded the calls to renderEnabledIcon for now to avoid doing an immediate widget-toolkit bump + debian/control version dependency bump in manager, thanks! ^ permalink raw reply [flat|nested] 5+ messages in thread
end of thread, other threads:[~2023-03-17 11:04 UTC | newest] Thread overview: 5+ messages (download: mbox.gz / follow: Atom feed) -- links below jump to the message on this page -- 2023-01-26 10:47 [pve-devel] [PATCH v3 manager/widget-toolkit 0/2] ui: replace non-clickable checkboxes with icons Lukas Wagner 2023-01-26 10:47 ` [pve-devel] [PATCH v3 widget-toolkit 1/2] repo view: replace non-clickable checkbox " Lukas Wagner 2023-03-17 11:04 ` [pve-devel] applied: " Thomas Lamprecht 2023-01-26 10:47 ` [pve-devel] [PATCH v3 manager 2/2] ui: backup: replication: " Lukas Wagner 2023-03-17 11:04 ` [pve-devel] applied: " Thomas Lamprecht
This is a public inbox, see mirroring instructions for how to clone and mirror all data and code used for this inbox