From: Dominik Csapak <d.csapak@proxmox.com>
To: pve-devel@lists.proxmox.com
Subject: [pve-devel] [PATCH manager 1/2] ui: resource tree: limit tooltip to icon and text
Date: Wed, 8 Nov 2023 16:49:56 +0100 [thread overview]
Message-ID: <20231108154957.1593434-1-d.csapak@proxmox.com> (raw)
and exclude the tags for that, since we want the tags to have their own
tooltips
Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
not really sure if we want to do this, since creating a custom tree
column type just for that seems overkill. also we have to touch private
properties of that here to change it which i don't really like
www/manager6/tree/ResourceTree.js | 87 ++++++++++++++++++++++++++++---
1 file changed, 80 insertions(+), 7 deletions(-)
diff --git a/www/manager6/tree/ResourceTree.js b/www/manager6/tree/ResourceTree.js
index 54c6403d..f23f9f99 100644
--- a/www/manager6/tree/ResourceTree.js
+++ b/www/manager6/tree/ResourceTree.js
@@ -103,10 +103,15 @@ Ext.define('PVE.tree.ResourceTree', {
},
setIconCls: function(info) {
+ let me = this;
let cls = PVE.Utils.get_object_icon_class(info.type, info);
if (cls !== '') {
info.iconCls = cls;
}
+ let tip = me.getToolTip(info);
+ if (tip) {
+ info.iconAttrs = `data-qtip="${tip}"`;
+ }
},
// add additional elements to text. Currently only the usage indicator for storages
@@ -130,15 +135,22 @@ Ext.define('PVE.tree.ResourceTree', {
info.text = `${info.name} (${String(info.vmid)})`;
}
}
+ info.text = status + info.text;
- info.text += PVE.Utils.renderTags(info.tags, PVE.UIOptions.tagOverrides);
+ let tip = me.getToolTip(info);
+ if (tip) {
+ info.text = `<span data-qtip="${tip}">${info.text}</span>`;
+ }
- info.text = status + info.text;
+ info.text += PVE.Utils.renderTags(info.tags, PVE.UIOptions.tagOverrides);
},
- 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 +161,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 +172,6 @@ Ext.define('PVE.tree.ResourceTree', {
me.setIconCls(info);
me.setText(info);
- me.setToolTip(info);
if (info.groupbyid) {
info.text = info.groupbyid;
@@ -315,7 +328,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()) {
@@ -471,4 +483,65 @@ Ext.define('PVE.tree.ResourceTree', {
rstore.startUpdate();
},
+ hideHeaders: true,
+
+ columns: [
+ {
+ xtype: 'pveResourceTreeColumn',
+ text: 'Name',
+ flex: 1,
+ dataIndex: 'text',
+ },
+ ],
+
+});
+
+// we want to change how the icon div is rendered, so we have to subclass
+// the whole tree column class to change the cellTpl and available data
+Ext.define('PVE.tree.ResourceTreeColumn', {
+ extend: 'Ext.tree.Column',
+ alias: 'widget.pveResourceTreeColumn',
+
+ // copied from Ext.tree.Column source except indentation and one detail (see inline comment)
+ cellTpl: [
+ '<tpl for="lines">',
+ '<div class="{parent.childCls} {parent.elbowCls}-img ',
+ '{parent.elbowCls}-<tpl if=".">line<tpl else>empty</tpl>" role="presentation"></div>',
+ '</tpl>',
+ '<div class="{childCls} {elbowCls}-img {elbowCls}',
+ '<tpl if="isLast">-end</tpl><tpl if="expandable">-plus {expanderCls}</tpl>" role="presentation"></div>',
+ '<tpl if="checked !== null">',
+ '<div role="button" {ariaCellCheckboxAttr}',
+ ' class="{childCls} {checkboxCls}<tpl if="checked"> {checkboxCls}-checked</tpl>"></div>',
+ '</tpl>',
+ '<tpl if="glyph">',
+ '<span class="{baseIconCls}" ',
+ '<tpl if="glyphFontFamily">',
+ 'style="font-family:{glyphFontFamily}"',
+ '</tpl>',
+ '>{glyph}</span>',
+ '<tpl else>',
+ '<tpl if="icon">',
+ '<img src="{blankUrl}"',
+ '<tpl else>',
+ '<div',
+ '</tpl>',
+ ' role="presentation" class="{childCls} {baseIconCls} {customIconCls} ',
+ '{baseIconCls}-<tpl if="leaf">leaf<tpl else><tpl if="expanded">parent-expanded<tpl else>parent</tpl></tpl> {iconCls}" ',
+ // the line below has 'iconAttrs' added to it
+ '<tpl if="icon">style="background-image:url({icon})"/><tpl else>{iconAttrs}></div></tpl>',
+ '</tpl>',
+ '<tpl if="href">',
+ '<a href="{href}" role="link" target="{hrefTarget}" class="{textCls} {childCls}">{value}</a>',
+ '<tpl else>',
+ '<span class="{textCls} {childCls}">{value}</span>',
+ '</tpl>',
+ ],
+
+ initTemplateRendererData: function(value, metaData, record, rowIdx, colIdx, store, view) {
+ let me = this;
+ let data = me.callParent(arguments);
+ data.iconAttrs = record.data.iconAttrs ?? '';
+ return data;
+ },
});
--
2.30.2
next reply other threads:[~2023-11-08 15:49 UTC|newest]
Thread overview: 3+ messages / expand[flat|nested] mbox.gz Atom feed top
2023-11-08 15:49 Dominik Csapak [this message]
2023-11-08 15:49 ` [pve-devel] [PATCH manager 2/2] ui: add tooltips to non-full tags globally Dominik Csapak
2023-11-09 8:04 ` [pve-devel] [PATCH manager 1/2] ui: resource tree: limit tooltip to icon and text Dominik Csapak
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=20231108154957.1593434-1-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 a public inbox, see mirroring instructions
for how to clone and mirror all data and code used for this inbox