From: Thomas Lamprecht <t.lamprecht@proxmox.com>
To: Proxmox VE development discussion <pve-devel@lists.proxmox.com>,
Aaron Lauterer <a.lauterer@proxmox.com>
Subject: Re: [pve-devel] [PATCH manager] ui: FirewallRules.js: fix #3049 wider rule number column
Date: Fri, 19 Feb 2021 17:45:01 +0100 [thread overview]
Message-ID: <af16f9bb-ef27-0bd3-371a-12c1440e5942@proxmox.com> (raw)
In-Reply-To: <f673b117-0035-6264-6725-f9d255dda54d@proxmox.com>
On 02.10.20 14:52, Aaron Lauterer wrote:
>
> On 10/1/20 5:10 PM, Thomas Lamprecht wrote:
>> oh, and maybe you can try to switch that whole column definition away from fixed
>> widths to relative "flex" only. Just needs to look OK on 720p and quite good on
>> 1080p. It's not always possible, but most of the time it works out well and not
>> using fixed widths is always nicer, IMO.
>>
>
> I gave it a quick try and I think adding flex properties does help on large screens but for smaller screens I would keep the former width values as minWidth to keep the table readable and to force extjs to switch it to horizontal scrolling as it is currently doing with the fixed widths. Even 720p is already where the horizontal scroll bar shows up.
>
> This is the git diff I used:
Could you send this as patch?
>
> diff --git a/www/manager6/grid/FirewallRules.js b/www/manager6/grid/FirewallRules.js
> index 42035129..fee9c177 100644
> --- a/www/manager6/grid/FirewallRules.js
> +++ b/www/manager6/grid/FirewallRules.js
> @@ -629,7 +629,8 @@ Ext.define('PVE.FirewallRules', {
> // similar to xtype: 'rownumberer',
> dataIndex: 'pos',
> resizable: false,
> - width: 42,
> + minWidth: 42,
> + flex: 1,
> sortable: false,
> align: 'right',
> hideable: false,
> @@ -660,7 +661,8 @@ Ext.define('PVE.FirewallRules', {
> me.updateRule(data);
> }
> },
> - width: 50
> + minWidth: 50,
> + flex: 2,
> },
> {
> header: gettext('Type'),
> @@ -668,7 +670,8 @@ Ext.define('PVE.FirewallRules', {
> renderer: function(value, metaData, record) {
> return render_errors('type', value, metaData, record);
> },
> - width: 50
> + minWidth: 50,
> + flex: 2,
> },
> {
> header: gettext('Action'),
> @@ -676,7 +679,8 @@ Ext.define('PVE.FirewallRules', {
> renderer: function(value, metaData, record) {
> return render_errors('action', value, metaData, record);
> },
> - width: 80
> + minWidth: 80,
> + flex: 3,
> },
> {
> header: gettext('Macro'),
> @@ -684,7 +688,8 @@ Ext.define('PVE.FirewallRules', {
> renderer: function(value, metaData, record) {
> return render_errors('macro', value, metaData, record);
> },
> - width: 80
> + minWidth: 80,
> + flex: 3,
> }
> ];
>
> @@ -695,7 +700,8 @@ Ext.define('PVE.FirewallRules', {
> renderer: function(value, metaData, record) {
> return render_errors('iface', value, metaData, record);
> },
> - width: 80
> + minWidth: 80,
> + flex: 3,
> });
> }
>
> @@ -706,7 +712,8 @@ Ext.define('PVE.FirewallRules', {
> renderer: function(value, metaData, record) {
> return render_errors('source', value, metaData, record);
> },
> - width: 100
> + minWidth: 100,
> + flex: 4,
> },
> {
> header: gettext('Destination'),
> @@ -714,7 +721,8 @@ Ext.define('PVE.FirewallRules', {
> renderer: function(value, metaData, record) {
> return render_errors('dest', value, metaData, record);
> },
> - width: 100
> + minWidth: 100,
> + flex: 4,
> },
> {
> header: gettext('Protocol'),
> @@ -722,7 +730,8 @@ Ext.define('PVE.FirewallRules', {
> renderer: function(value, metaData, record) {
> return render_errors('proto', value, metaData, record);
> },
> - width: 100
> + minWidth: 100,
> + flex: 3,
> },
> {
> header: gettext('Dest. port'),
> @@ -730,7 +739,8 @@ Ext.define('PVE.FirewallRules', {
> renderer: function(value, metaData, record) {
> return render_errors('dport', value, metaData, record);
> },
> - width: 100
> + minWidth: 100,
> + flex: 4,
> },
> {
> header: gettext('Source port'),
> @@ -738,7 +748,8 @@ Ext.define('PVE.FirewallRules', {
> renderer: function(value, metaData, record) {
> return render_errors('sport', value, metaData, record);
> },
> - width: 100
> + minWidth: 100,
> + flex: 3,
> },
> {
> header: gettext('Log level'),
> @@ -746,12 +757,13 @@ Ext.define('PVE.FirewallRules', {
> renderer: function(value, metaData, record) {
> return render_errors('log', value, metaData, record);
> },
> - width: 100
> + minWidth: 100,
> + flex: 3,
> },
> {
> header: gettext('Comment'),
> dataIndex: 'comment',
> - flex: 1,
> + flex: 6,
> renderer: function(value, metaData, record) {
> return render_errors('comment', Ext.util.Format.htmlEncode(value), metaData, record);
> }
>
>
> _______________________________________________
> pve-devel mailing list
> pve-devel@lists.proxmox.com
> https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel
>
>
prev parent reply other threads:[~2021-02-19 16:45 UTC|newest]
Thread overview: 6+ messages / expand[flat|nested] mbox.gz Atom feed top
2020-10-01 12:18 Aaron Lauterer
2020-10-01 14:44 ` [pve-devel] applied: " Thomas Lamprecht
2020-10-01 15:10 ` [pve-devel] " Thomas Lamprecht
2020-10-01 15:22 ` Aaron Lauterer
2020-10-02 12:52 ` Aaron Lauterer
2021-02-19 16:45 ` Thomas Lamprecht [this message]
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=af16f9bb-ef27-0bd3-371a-12c1440e5942@proxmox.com \
--to=t.lamprecht@proxmox.com \
--cc=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