From mboxrd@z Thu Jan 1 00:00:00 1970
Return-Path: <l.wagner@proxmox.com>
Received: from firstgate.proxmox.com (firstgate.proxmox.com [212.224.123.68])
(using TLSv1.3 with cipher TLS_AES_256_GCM_SHA384 (256/256 bits)
key-exchange X25519 server-signature RSA-PSS (2048 bits))
(No client certificate requested)
by lists.proxmox.com (Postfix) with ESMTPS id 59685F459
for <pve-devel@lists.proxmox.com>; Fri, 21 Jul 2023 11:39:15 +0200 (CEST)
Received: from firstgate.proxmox.com (localhost [127.0.0.1])
by firstgate.proxmox.com (Proxmox) with ESMTP id 41E401D071
for <pve-devel@lists.proxmox.com>; Fri, 21 Jul 2023 11:39:15 +0200 (CEST)
Received: from proxmox-new.maurer-it.com (proxmox-new.maurer-it.com
[94.136.29.106])
(using TLSv1.3 with cipher TLS_AES_256_GCM_SHA384 (256/256 bits)
key-exchange X25519 server-signature RSA-PSS (2048 bits) server-digest SHA256)
(No client certificate requested)
by firstgate.proxmox.com (Proxmox) with ESMTPS
for <pve-devel@lists.proxmox.com>; Fri, 21 Jul 2023 11:39:14 +0200 (CEST)
Received: from proxmox-new.maurer-it.com (localhost.localdomain [127.0.0.1])
by proxmox-new.maurer-it.com (Proxmox) with ESMTP id D377B42555
for <pve-devel@lists.proxmox.com>; Fri, 21 Jul 2023 11:39:13 +0200 (CEST)
From: Lukas Wagner <l.wagner@proxmox.com>
To: pve-devel@lists.proxmox.com
Date: Fri, 21 Jul 2023 11:39:10 +0200
Message-Id: <20230721093910.254158-3-l.wagner@proxmox.com>
X-Mailer: git-send-email 2.39.2
In-Reply-To: <20230721093910.254158-1-l.wagner@proxmox.com>
References: <20230721093910.254158-1-l.wagner@proxmox.com>
MIME-Version: 1.0
Content-Transfer-Encoding: 8bit
X-SPAM-LEVEL: Spam detection results: 0
AWL -0.066 Adjusted score from AWL reputation of From: address
BAYES_00 -1.9 Bayes spam probability is 0 to 1%
DMARC_MISSING 0.1 Missing DMARC policy
KAM_DMARC_STATUS 0.01 Test Rule for DKIM or SPF Failure with Strict Alignment
SPF_HELO_NONE 0.001 SPF: HELO does not publish an SPF Record
SPF_PASS -0.001 SPF: sender matches SPF record
T_SCC_BODY_TEXT_LINE -0.01 -
Subject: [pve-devel] [PATCH manager 3/3] headerbar: center search box,
make it adapt to the width of the browser
X-BeenThere: pve-devel@lists.proxmox.com
X-Mailman-Version: 2.1.29
Precedence: list
List-Id: Proxmox VE development discussion <pve-devel.lists.proxmox.com>
List-Unsubscribe: <https://lists.proxmox.com/cgi-bin/mailman/options/pve-devel>,
<mailto:pve-devel-request@lists.proxmox.com?subject=unsubscribe>
List-Archive: <http://lists.proxmox.com/pipermail/pve-devel/>
List-Post: <mailto:pve-devel@lists.proxmox.com>
List-Help: <mailto:pve-devel-request@lists.proxmox.com?subject=help>
List-Subscribe: <https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel>,
<mailto:pve-devel-request@lists.proxmox.com?subject=subscribe>
X-List-Received-Date: Fri, 21 Jul 2023 09:39:15 -0000
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