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

[Dominik Csapak <d.csapak@proxmox.com>]

one nit inline:

On 2/22/23 10:36, Aaron Lauterer wrote:
> 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>
> ---
> 
> While moving code around I also changed:
> - var -> let
> - string concat to template literals
> 
>   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..45583f51 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();
> +				    let 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();

when touching this, you could add 'autoShow: true' to the properties,
then we don't have to save the window in a variable at all (and don't call .show())

not a reason to send a v2 though

>   				},
> -			    ],
> +			    },
>   			},
>   		    ],
>   		},