search

os-js / osjs-client

OS.js Client Module
https://manual.os-js.org/
Other
30 stars 30 forks source link

Search toolbar item does not follow theme if theme uses SVG icons #172

Closed ShadowEO closed 2 years ago

ShadowEO commented 2 years ago

It seems that the search panel item will not follow themes if the themes use SVGs as icons, I have a working icon pack converted from papirus, however the search icon refuses to use the system-search.svg icon defined. In the HTML while using the browser's DevTools window, I can see that the search panel item seems hard coded to use a system-search.png rather than the OS.js system-search icon defined in CSS.

If I use the DevTools to change the HTML for the icon to point to the correct icon, it does indeed change, however it does not do it automatically. This also affects the desktop shortcut overlay icons.

Edit: A workaround I found was to add the svg-to-png-loader to webpack and just have it convert icons to PNG, unfortunately that doubles the images stored, but it does have the added effect of working around the issue.

andersevenrud commented 2 years ago

There's an open issue about SVG icons here: https://github.com/os-js/osjs-client/issues/150

Feel free to add your findings there with some screenshots or something :)

but it does have the added effect of working around the issue.

glad to hear that you found a way around this for the time being.

ShadowEO commented 2 years ago

I see, I'll try my best to get something substantial. Is there any way currently to have the icon service spit out any debug information? I'd like to look into this further as it appears that the icons are hit or miss if they apply (in one attempt, I have application menu icons, in another I do not though the files are there in both PNG and SVG form)

andersevenrud commented 2 years ago

There's no logging on that, so you'd have to use the browser devtools debugger and step through the code.

I'll have to look at this myself to get a bit more familiar...I haven't spent time with this aspect of the code in some while. But if my notes in the referred issue is correct then the reason why this works in some cases is because they're defined in CSS and not in JS.

For the JS part of things there needs to be some kind of lookup table or something to correctly chose the appropriate file extension (and not just blindly fall back to png if not explicitly set).

ShadowEO commented 2 years ago

What I found odd, was that the icons are specifically set in the CSS generated by the icon pack, as I used the GNOME icon template, modified the icon pack to fit where it was looking for them, and then replaced all ".png" in _icons.scss with ".svg" and compiled it. Yet the 'system-search' icon, which is correctly set when I look at the generated CSS, was still falling back to PNG there.

andersevenrud commented 2 years ago

generated CSS, was still falling back to PNG there.

Yes. This is because some UI elements use CSS (which always works), and some gets icons programatically (JS). It's the latter that needs to be fixed.