all lists on lists.proxmox.com
 help / color / mirror / Atom feed
From: Dominik Csapak <d.csapak@proxmox.com>
To: pve-devel@lists.proxmox.com
Subject: [pve-devel] [PATCH manager v2 2/2] ui: add tooltips to non-full tags globally
Date: Thu,  9 Nov 2023 11:56:24 +0100	[thread overview]
Message-ID: <20231109105624.2337910-2-d.csapak@proxmox.com> (raw)
In-Reply-To: <20231109105624.2337910-1-d.csapak@proxmox.com>

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





  reply	other threads:[~2023-11-09 10:56 UTC|newest]

Thread overview: 3+ messages / expand[flat|nested]  mbox.gz  Atom feed  top
2023-11-09 10:56 [pve-devel] [PATCH manager v2 1/2] ui: resource tree: limit tooltip to icon and text Dominik Csapak
2023-11-09 10:56 ` Dominik Csapak [this message]
2023-11-09 12:00 ` [pve-devel] applied: " Thomas Lamprecht

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=20231109105624.2337910-2-d.csapak@proxmox.com \
    --to=d.csapak@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 an external index of several public inboxes,
see mirroring instructions on how to clone and mirror
all data and code used by this external index.
Service provided by Proxmox Server Solutions GmbH | Privacy | Legal