[pve-devel] [PATCH manager v2 1/2] ui: resource tree: limit tooltip to icon and text

[pve-devel] [PATCH manager v2 1/2] ui: resource tree: limit tooltip to icon and text

[Dominik Csapak]

and exclude the tags for that, since we want the tags to have their own
tooltips

we use the delegate function of the tooltips for that

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
changes from v1:
* instead of using a custom tree column class, use the same delegate
  mechanism as the next patch
 www/manager6/tree/ResourceTree.js | 40 ++++++++++++++++++++++++-------
 1 file changed, 31 insertions(+), 9 deletions(-)

diff --git a/www/manager6/tree/ResourceTree.js b/www/manager6/tree/ResourceTree.js
index 54c6403d..90f85fba 100644
--- a/www/manager6/tree/ResourceTree.js
+++ b/www/manager6/tree/ResourceTree.js
@@ -122,7 +122,7 @@ Ext.define('PVE.tree.ResourceTree', {
 		status = '<div class="usage-wrapper">';
 		status += `<div class="usage-negative" style="height: ${remainingHeight}%"></div>`;
 		status += `<div class="usage" style="height: ${barHeight}%"></div>`;
-		status += '</div> ';
+		status += '</div>';
 	    }
 	}
 	if (Ext.isNumeric(info.vmid) && info.vmid > 0) {
@@ -130,15 +130,16 @@ Ext.define('PVE.tree.ResourceTree', {
 		info.text = `${info.name} (${String(info.vmid)})`;
 	    }
 	}
-
+	info.text = `<span>${status} ${info.text}</span>`;
 	info.text += PVE.Utils.renderTags(info.tags, PVE.UIOptions.tagOverrides);
-
-	info.text = status + info.text;
     },
 
-    setToolTip: function(info) {
+    getToolTip: function(info) {
+	if (info.tip) {
+	    return info.tip;
+	}
 	if (info.type === 'pool' || info.groupbyid !== undefined) {
-	    return;
+	    return undefined;
 	}
 
 	let qtips = [gettext('Status') + ': ' + (info.qmpstatus || info.status)];
@@ -149,7 +150,9 @@ Ext.define('PVE.tree.ResourceTree', {
 	    qtips.push(gettext('HA State') + ": " + info.hastate);
 	}
 
-	info.qtip = qtips.join(', ');
+	let tip = qtips.join(', ');
+	info.tip = tip;
+	return tip;
     },
 
     // private
@@ -158,7 +161,6 @@ Ext.define('PVE.tree.ResourceTree', {
 
 	me.setIconCls(info);
 	me.setText(info);
-	me.setToolTip(info);
 
 	if (info.groupbyid) {
 	    info.text = info.groupbyid;
@@ -315,7 +317,6 @@ Ext.define('PVE.tree.ResourceTree', {
 		    Ext.apply(info, item.data);
 		    me.setIconCls(info);
 		    me.setText(info);
-		    me.setToolTip(info);
 		    olditem.commit();
 		}
 		if ((!item || moved) && olditem.isLeaf()) {
@@ -403,6 +404,27 @@ Ext.define('PVE.tree.ResourceTree', {
 		    return allow;
 		},
 		itemdblclick: PVE.Utils.openTreeConsole,
+		afterrender: function() {
+		    if (me.tip) {
+			return;
+		    }
+		    let selectors = [
+			'.x-tree-node-text > span:not(.proxmox-tag-dark):not(.proxmox-tag-light)',
+			'.x-tree-icon',
+		    ];
+		    me.tip = Ext.create('Ext.tip.ToolTip', {
+			target: me.el,
+			delegate: selectors.join(', '),
+			trackMouse: true,
+			renderTo: Ext.getBody(),
+			listeners: {
+			    beforeshow: function(tip) {
+				let rec = me.getView().getRecord(tip.triggerElement);
+				tip.update(me.getToolTip(rec.data));
+			    },
+			},
+		    });
+		},
 	    },
 	    setViewFilter: function(view) {
 		me.viewFilter = view;
-- 
2.30.2

[pve-devel] [PATCH manager v2 2/2] ui: add tooltips to non-full tags globally

[Dominik Csapak]

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

[pve-devel] applied: [PATCH manager v2 1/2] ui: resource tree: limit tooltip to icon and text

[Thomas Lamprecht]

Am 09/11/2023 um 11:56 schrieb Dominik Csapak:
> and exclude the tags for that, since we want the tags to have their own
> tooltips
> 
> we use the delegate function of the tooltips for that
> 
> Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
> ---
> changes from v1:
> * instead of using a custom tree column class, use the same delegate
>   mechanism as the next patch
>  www/manager6/tree/ResourceTree.js | 40 ++++++++++++++++++++++++-------
>  1 file changed, 31 insertions(+), 9 deletions(-)
> 
>

applied series, thanks!