[pve-devel] [PATCH v3 manager 1/2] ui: ceph: make the warning detail button stand out more

[Aaron Lauterer]

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 at proxmox.com>
---

changes since
v2: none
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