From mboxrd@z Thu Jan 1 00:00:00 1970 Return-Path: <d.csapak@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 4A598A0998 for <pve-devel@lists.proxmox.com>; Thu, 9 Nov 2023 11:56:56 +0100 (CET) Received: from firstgate.proxmox.com (localhost [127.0.0.1]) by firstgate.proxmox.com (Proxmox) with ESMTP id 2AC571389D for <pve-devel@lists.proxmox.com>; Thu, 9 Nov 2023 11:56:26 +0100 (CET) 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)) (No client certificate requested) by firstgate.proxmox.com (Proxmox) with ESMTPS for <pve-devel@lists.proxmox.com>; Thu, 9 Nov 2023 11:56:25 +0100 (CET) Received: from proxmox-new.maurer-it.com (localhost.localdomain [127.0.0.1]) by proxmox-new.maurer-it.com (Proxmox) with ESMTP id 681BF47713 for <pve-devel@lists.proxmox.com>; Thu, 9 Nov 2023 11:56:25 +0100 (CET) From: Dominik Csapak <d.csapak@proxmox.com> To: pve-devel@lists.proxmox.com Date: Thu, 9 Nov 2023 11:56:24 +0100 Message-Id: <20231109105624.2337910-2-d.csapak@proxmox.com> X-Mailer: git-send-email 2.30.2 In-Reply-To: <20231109105624.2337910-1-d.csapak@proxmox.com> References: <20231109105624.2337910-1-d.csapak@proxmox.com> MIME-Version: 1.0 Content-Transfer-Encoding: 8bit X-SPAM-LEVEL: Spam detection results: 0 AWL 0.017 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 v2 2/2] ui: add tooltips to non-full tags globally 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: Thu, 09 Nov 2023 10:56:56 -0000 by using the delegate function of ExtJS' tooltips on the global Workspace element and using the proper css selectors this way, we can limit the tooltips to the non-full ones (in contrast to using data-qtip on the element, which would always be show, even for tags with the 'full' style) Signed-off-by: Dominik Csapak <d.csapak@proxmox.com> --- changes from v1: * changed the style to show the tag in full form as tooltip, instead of just the text i did not found any harsh performance impact, the browser performance info was very similar as without it (aside from natural jitter, etc. and the callbacks on the actual tag display ofc) www/css/ext6-pve.css | 10 ++++++++++ www/manager6/Workspace.js | 29 +++++++++++++++++++++++++++++ 2 files changed, 39 insertions(+) diff --git a/www/css/ext6-pve.css b/www/css/ext6-pve.css index 105adc45..782c9044 100644 --- a/www/css/ext6-pve.css +++ b/www/css/ext6-pve.css @@ -726,3 +726,13 @@ table.osds td:first-of-type { .proxmox-tag-fieldset.proxmox-tags-full .x-component.x-column { margin: 2px; } + +/* we have to override some styles for the tag tooltips, + * otherwise extjs styling interferes */ +.pmx-tag-tooltip { + background-color: transparent; +} + +.pmx-tag-tooltip .proxmox-tags-full > span { + margin: 0px; +} diff --git a/www/manager6/Workspace.js b/www/manager6/Workspace.js index 18d574b7..6e465f8d 100644 --- a/www/manager6/Workspace.js +++ b/www/manager6/Workspace.js @@ -526,6 +526,35 @@ Ext.define('PVE.StdWorkspace', { modalWindows.forEach(win => win.alignTo(me, 'c-c')); } }); + + let tagSelectors = []; + ['circle', 'dense'].forEach((style) => { + ['dark', 'light'].forEach((variant) => { + tagSelectors.push(`.proxmox-tags-${style} .proxmox-tag-${variant}`); + }); + }); + + Ext.create('Ext.tip.ToolTip', { + target: me.el, + delegate: tagSelectors.join(', '), + trackMouse: true, + renderTo: Ext.getBody(), + border: 0, + minWidth: 0, + padding: 0, + bodyBorder: 0, + bodyPadding: 0, + dismissDelay: 0, + userCls: 'pmx-tag-tooltip', + shadow: false, + listeners: { + beforeshow: function(tip) { + let tag = Ext.htmlEncode(tip.triggerElement.innerHTML); + let tagEl = Proxmox.Utils.getTagElement(tag, PVE.UIOptions.tagOverrides); + tip.update(`<span class="proxmox-tags-full">${tagEl}</span>`); + }, + }, + }); }, }); -- 2.30.2