No hover effect for sidebar icon?

[niccolomineo]

Hi @Gruntfuggly, I reached out to the guys at VSCode asking why some extensions' sidebar icons do not have a proper hover effect like the default ones, and they said it's up to the extension creator to deal with the hover effect.

Would you be able to implement it to make the UI more consistent?

This is what I am talking about:

Any default VSCode sidebar icon:

ToDo Tree's icon:

[Gruntfuggly]

I don't understand - what is wrong with "TODOs"? Do you mean it should be translated?

[niccolomineo]

I don't understand - what is wrong with "TODOs"? Do you mean it should be translated?

Focus on the icon, not on the tooltip. The hover effect on the icon should be to highlight the icon with a lighter color (per the first screenshot).

[Gruntfuggly]

Ah OK - I see what you mean now.

Interestingly I don't get the hover effect on any extensions I have installed. Can you point me to one which does work?

The extension icon follows all the guidelines specified here: https://code.visualstudio.com/api/references/contribution-points#Icon-specifications

Can you point me to any documentation on how to make it work?

To be fair, sandy081 doesn't actually say it's possible.

[Gruntfuggly]

Also, notice that the icon is dimmed when the view is not active, but bright when active. That's entirely controlled by VSCode so I think it's a VSCode problem, not the extension.

[Gruntfuggly]

To be clear - if you can find an example I can copy, or an explanation of how to do it, I'm more than happy to try and make it work 😄

[niccolomineo]

Ah OK - I see what you mean now.

Interestingly I don't get the hover effect on any extensions I have installed. Can you point me to one which does work?

The extension icon follows all the guidelines specified here: https://code.visualstudio.com/api/references/contribution-points#Icon-specifications

Can you point me to any documentation on how to make it work?

To be fair, sandy081 doesn't actually say it's possible.

Uhm, you are right, I clearly misread it. I guess then I'll have to push the guys at VSCode to even this one out.

[Gruntfuggly]

Good luck! I'll leave this open for a while in case you get them to make it possible.

[Gruntfuggly]

Just noticed the gitlens (on my work machine) works as expected, so I'll take a look at what's different.

[Gruntfuggly]

It looks like the way it works in gitlens is using a web font (woff2) with a character for the symbol. This is not in the extension development guide, so I don't know how this was done.

I'll keep investigating, but it doesn't look very promising.

[Gruntfuggly]

Sorry, but I don't think this is going to be possible. I don't have the time to look into creating web fonts to make it work, but if somebody wants to create a PR I'll happily merge it in.

[niccolomineo]

Sorry, but I don't think this is going to be possible. I don't have the time to look into creating web fonts to make it work, but if somebody wants to create a PR I'll happily merge it in.

The following zip contains an .otf, .woff, .woff2. Let me know if there are any further tweaks that need to be made. This is as far as I can go to help you tackling this, I am afraid.

ToDoTree.zip

[Gruntfuggly]

Thanks - I'll try it out at the weekend.

[niccolomineo]

Thanks - I'll try it out at the weekend.

if you need some inspiration, take a look at this discussion.