From: Aaron Lauterer <a.lauterer@proxmox.com>
To: pve-devel@lists.proxmox.com
Subject: [pve-devel] [PATCH v2 manager 1/2] ui: ceph: make the warning detail button stand out more
Date: Fri, 3 Mar 2023 16:59:24 +0100 [thread overview]
Message-ID: <20230303155925.1142116-2-a.lauterer@proxmox.com> (raw)
In-Reply-To: <20230303155925.1142116-1-a.lauterer@proxmox.com>
The button for more details is barely noticable as something one can
click on. By making it more obvious that it is a button, users will
hopefully notice it easier.
Signed-off-by: Aaron Lauterer <a.lauterer@proxmox.com>
---
changes since v1:
- use autoShow in the Ext.Create call
www/manager6/ceph/Status.js | 56 +++++++++++++++++++------------------
1 file changed, 29 insertions(+), 27 deletions(-)
diff --git a/www/manager6/ceph/Status.js b/www/manager6/ceph/Status.js
index bdcf3f1b..b223ab35 100644
--- a/www/manager6/ceph/Status.js
+++ b/www/manager6/ceph/Status.js
@@ -101,37 +101,39 @@ Ext.define('PVE.node.CephStatus', {
flex: 1,
},
{
- xtype: 'actioncolumn',
+ xtype: 'widgetcolumn',
width: 40,
align: 'center',
tooltip: gettext('Detail'),
- items: [
- {
- iconCls: 'x-fa fa-info-circle',
- handler: function(grid, rowindex, colindex, item, e, record) {
- var win = Ext.create('Ext.window.Window', {
- title: gettext('Detail'),
- resizable: true,
- modal: true,
- width: 650,
- height: 400,
- layout: {
- type: 'fit',
- },
- items: [{
- scrollable: true,
- padding: 10,
- xtype: 'box',
- html: [
- '<span>' + Ext.htmlEncode(record.data.summary) + '</span>',
- '<pre>' + Ext.htmlEncode(record.data.detail) + '</pre>',
- ],
- }],
- });
- win.show();
- },
+ widget: {
+ xtype: 'button',
+ baseCls: 'x-btn',
+ userCls: 'x-btn-default-toolbar-small',
+ iconCls: 'fa fa-fw fa-info-circle x-btn-icon-el-default-toolbar-small',
+ handler: function() {
+ let record = this.getWidgetRecord();
+ Ext.create('Ext.window.Window', {
+ title: gettext('Detail'),
+ autoShow: true,
+ resizable: true,
+ modal: true,
+ width: 650,
+ height: 400,
+ layout: {
+ type: 'fit',
+ },
+ items: [{
+ scrollable: true,
+ padding: 10,
+ xtype: 'box',
+ html: [
+ `<span>${Ext.htmlEncode(record.data.summary)}</span>`,
+ `<pre>${Ext.htmlEncode(record.data.detail)}</pre>`,
+ ],
+ }],
+ });
},
- ],
+ },
},
],
},
--
2.30.2
next prev parent reply other threads:[~2023-03-03 15:59 UTC|newest]
Thread overview: 5+ messages / expand[flat|nested] mbox.gz Atom feed top
2023-03-03 15:59 [pve-devel] [PATCH v2 manager 0/2] ui: ceph: improve discoverability of warning details Aaron Lauterer
2023-03-03 15:59 ` Aaron Lauterer [this message]
2023-03-03 15:59 ` [pve-devel] [PATCH v2 manager 2/2] ui: ceph status: add tooltip with details to warnings Aaron Lauterer
2023-03-08 9:27 ` Dominik Csapak
2023-03-08 12:03 ` Aaron Lauterer
Reply instructions:
You may reply publicly to this message via plain-text email
using any one of the following methods:
* Save the following mbox file, import it into your mail client,
and reply-to-all from there: mbox
Avoid top-posting and favor interleaved quoting:
https://en.wikipedia.org/wiki/Posting_style#Interleaved_style
* Reply using the --to, --cc, and --in-reply-to
switches of git-send-email(1):
git send-email \
--in-reply-to=20230303155925.1142116-2-a.lauterer@proxmox.com \
--to=a.lauterer@proxmox.com \
--cc=pve-devel@lists.proxmox.com \
/path/to/YOUR_REPLY
https://kernel.org/pub/software/scm/git/docs/git-send-email.html
* If your mail client supports setting the In-Reply-To header
via mailto: links, try the mailto: link
Be sure your reply has a Subject: header at the top and a blank line
before the message body.
This is a public inbox, see mirroring instructions
for how to clone and mirror all data and code used for this inbox