[pve-devel] [PATCH manager 3/3] headerbar: center search box, make it adapt to the width of the browser

[Lukas Wagner <l.wagner@proxmox.com>]

Also adding a minWidth/maxWidth so that it doesn't become comically
large or small. The minimum size is roughly the same size as the
search bar was before. The maxmium size is the same size as the
results grid, making them align nicely.

Signed-off-by: Lukas Wagner <l.wagner@proxmox.com>
---

Notes:
    Played around a bit and found the centered search visually quite pleasing.
    A few other people in the office also liked it.

 www/manager6/Workspace.js              | 7 +++++--
 www/manager6/form/GlobalSearchField.js | 2 ++
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/www/manager6/Workspace.js b/www/manager6/Workspace.js
index 006e7f29..b8901912 100644
--- a/www/manager6/Workspace.js
+++ b/www/manager6/Workspace.js
@@ -337,12 +337,16 @@ Ext.define('PVE.StdWorkspace', {
 			    },
 			    padding: '0 0 0 5',
 			},
+			{
+			    flex: 0.5,
+			},
 			{
 			    xtype: 'pveGlobalSearchField',
 			    tree: rtree,
+			    flex: 1.60,
 			},
 			{
-			    flex: 1,
+			    flex: 0.5,
 			},
 			{
 			    xtype: 'proxmoxHelpButton',
@@ -530,4 +534,3 @@ Ext.define('PVE.StdWorkspace', {
 	});
     },
 });
-
diff --git a/www/manager6/form/GlobalSearchField.js b/www/manager6/form/GlobalSearchField.js
index 8e5e13c0..ee352cdc 100644
--- a/www/manager6/form/GlobalSearchField.js
+++ b/www/manager6/form/GlobalSearchField.js
@@ -12,6 +12,8 @@ Ext.define('PVE.form.GlobalSearchField', {
     enableKeyEvents: true,
     selectOnFocus: true,
     padding: '0 5 0 5',
+    minWidth: 200,
+    maxWidth: 600,
 
     grid: {
 	xtype: 'gridpanel',
-- 
2.39.2