Skip to content

Added Material Design Icons as assets#377

Draft
gensyn wants to merge 7 commits into
StreamController:mainfrom
gensyn:mdi
Draft

Added Material Design Icons as assets#377
gensyn wants to merge 7 commits into
StreamController:mainfrom
gensyn:mdi

Conversation

@gensyn

@gensyn gensyn commented Apr 10, 2025

Copy link
Copy Markdown
Contributor

This is something I have been sorely missing: the option to use any Material Design Icon in any color and any opacity as the icon for a key.

I added a new Tab to the AssetManager where you can search for an icon and set a color and opacity. It's not working 100% as I would like, but it's functional and I'd like to see it included in a future release.

Icons are only shown after entering at least 3 letters into the searchbar, otherwise building the icons would take too long.

Points that bug me:

  • When searching for icons I use self.set_loading(True) but there seems to be a problem with the threads because the overlay is never shown.
  • At the moment there is one icon per row - I could not figure out how to pack multiple icons in one row.

@Core447: You are more then welcome to have a look into these cosmetics.

There's also another reason I would like to see this included: If these changes make it into StreamController, I could remove the MDI related code from my plugin and use the native implementation.

@gensyn gensyn requested a review from Core447 April 10, 2025 10:47
@gensyn

gensyn commented Apr 11, 2025

Copy link
Copy Markdown
Contributor Author

I changed the asset to a paginated view and removed the requirement to enter 3 letters. I'm much happier now as you can now browse all icons and it feels more responsive. If we could now figure out how to pack multiple items in every row ....

@G4PLS

G4PLS commented Apr 11, 2025

Copy link
Copy Markdown
Member

Could you maybe add some images to how it looks atm?

I also am not the biggest fan of using abbreviations in variable names etc, but that could just me as im used to not use abbreviations that are not commonly known.
So maybe changing md -> material_design

@G4PLS G4PLS left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Those should be changed as the app doesnt launch otherwise

There could also be some smaller UI changes aswell like these buttons not being two distinct buttons:
image
You could make them look more like this:
image

Otherwise as you already said you should look how to get rows and columns working.
Maybe a Gtk Grid or taking a deeper look at how IconPacks and WallpaperPacks achieve that behavior

Comment thread src/windows/AssetManager/MaterialDesignIconAssets/Chooser.py Outdated
Comment thread src/windows/AssetManager/MaterialDesignIconAssets/Paginator.py Outdated
@gensyn

gensyn commented Apr 12, 2025

Copy link
Copy Markdown
Contributor Author

You could make them look more like this: image

Do you have a code example on how to achieve this look?

@gensyn

gensyn commented Apr 12, 2025

Copy link
Copy Markdown
Contributor Author

Otherwise as you already said you should look how to get rows and columns working. Maybe a Gtk Grid or taking a deeper look at how IconPacks and WallpaperPacks achieve that behavior

Yeah, I had a look but could not find any code influencing the size of the preview. Maybe it's because of how sizes work with actual images and with images created from SVG....

@gensyn

gensyn commented Apr 12, 2025

Copy link
Copy Markdown
Contributor Author

Could you maybe add some images to how it looks atm?

image

image

image

@G4PLS

G4PLS commented Apr 12, 2025

Copy link
Copy Markdown
Member

You could make them look more like this: image

Do you have a code example on how to achieve this look?

You can look at the code for the EventAssigner as this is the Button that I took the screenshot from

@G4PLS

G4PLS commented Apr 12, 2025

Copy link
Copy Markdown
Member

Otherwise as you already said you should look how to get rows and columns working. Maybe a Gtk Grid or taking a deeper look at how IconPacks and WallpaperPacks achieve that behavior

Yeah, I had a look but could not find any code influencing the size of the preview. Maybe it's because of how sizes work with actual images and with images created from SVG....

Doesnt stuff get converted to an image either way? So svgs or pngs are in the end the same?
Maybe I can take a look how to change that but that probably wont happen today

@gensyn

gensyn commented Apr 12, 2025

Copy link
Copy Markdown
Contributor Author

You can look at the code for the EventAssigner as this is the Button that I took the screenshot from

Thanks, they now look like this:

image

@G4PLS

G4PLS commented Apr 12, 2025

Copy link
Copy Markdown
Member

Looks so much better!

@gensyn

gensyn commented Apr 12, 2025

Copy link
Copy Markdown
Contributor Author

And I figured out where to set the size. I'm pretty happy with it now!

image

@G4PLS

G4PLS commented Apr 12, 2025

Copy link
Copy Markdown
Member

You could maybe make the images smaller and increase the items per page to 50?

@gensyn

gensyn commented Apr 12, 2025

Copy link
Copy Markdown
Contributor Author

You could maybe make the images smaller

I couldn't get it to more then 3 entries per row. I think there is still some setting I haven't found.

and increase the items per page to 50?

Not sure about that. Every item adds 0.01 second of loading time, so going from 20 to 50 items increases the loading time from 0.2 to 0.5 seconds. I'll play around with it and see how it feels.

@G4PLS

G4PLS commented Apr 12, 2025

Copy link
Copy Markdown
Member

Not sure about that. Every item adds 0.01 second of loading time, so going from 20 to 50 items increases the loading time from 0.2 to 0.5 seconds. I'll play around with it and see how it feels.

Could you maybe load the Icons threaded? Basically split the loading into two thread groups both loading 25 items
Idk how easy you can actually add that tho

@gensyn

gensyn commented Apr 13, 2025

Copy link
Copy Markdown
Contributor Author

I found some more settings influencing the layout and changed them:

image

@gensyn

gensyn commented Apr 13, 2025

Copy link
Copy Markdown
Contributor Author

Could you maybe load the Icons threaded? Basically split the loading into two thread groups both loading 25 items Idk how easy you can actually add that tho

I probably could but I don't want to get into that now. I increased the items to 50 per page and the loading time is tolerable. On my machine at least; useres with a weaker rig might be more annoyed. But the current state is damn near perfect for me.

@Core447

Core447 commented Apr 18, 2025

Copy link
Copy Markdown
Member

@gensyn I really like the feature, but tbh I don't like that it's a tab in the AssetManager. Instead I would prefer something more generic that works for most svg icons. Then we could move it to the sidebar of the app and only show it if we detect that the current icon is a compatible svg.

@gensyn

gensyn commented Apr 18, 2025

Copy link
Copy Markdown
Contributor Author

and only show it if we detect that the current icon is a compatible svg.

You mean only offer to change color and opacity? I would still like to be able to pick any Material Design Icon from a list without having to obtain it somewhere else first.

@Core447

Core447 commented Apr 19, 2025

Copy link
Copy Markdown
Member

I would still like to be able to pick any Material Design Icon from a list without having to obtain it somewhere else first.

We already have an icon pack feature in the app that we could use for that.

@gensyn

gensyn commented Apr 19, 2025

Copy link
Copy Markdown
Contributor Author

I get what you are saying and it's your call. But I see some benefits in the current implementation:

  • The size of the single text file is negligible for the amount of icons compared to needing an image file for every icon.
  • Plugins can use the helper to manage their icons. But that would probably only benefit me.

What do you think of that: we could remove the new tab in the AssetManager and instead show the Material Design Icons as a built-in default icon pack. Whether we offer the option to change color and opacity in the sidebar for all SVGs or within the icon pack is up to you.

@G4PLS

G4PLS commented Apr 19, 2025

Copy link
Copy Markdown
Member

I think the Icon Pack is a nice Idea.
@gensyn you currently use the .json to store the svg paths right? Meaning we could extend the IconPack to be able to read a .json file for SVGs only. That way you dont have like 7k images to download, instead you have a single file.

This could be made even faster by compressing the json file, meaning something like gzip for simple compression or actually looking at Binary formats like MessagePack or CBOR

@gensyn

gensyn commented Apr 19, 2025

Copy link
Copy Markdown
Contributor Author

I think the Icon Pack is a nice Idea. @gensyn you currently use the .json to store the svg paths right? Meaning we could extend the IconPack to be able to read a .json file for SVGs only. That way you dont have like 7k images to download, instead you have a single file.

This could be made even faster by compressing the json file, meaning something like gzip for simple compression or actually looking at Binary formats like MessagePack or CBOR

Sure, you could load any .json file this way. The one I commited for Material Design Icons is 2.63 MB. We could try to reduce the size further, but I don't think it's really necessary.

@Core447

Core447 commented Apr 19, 2025

Copy link
Copy Markdown
Member

I think the Icon Pack is a nice Idea. @gensyn you currently use the .json to store the svg paths right? Meaning we could extend the IconPack to be able to read a .json file for SVGs only. That way you dont have like 7k images to download, instead you have a single file.

This could be made even faster by compressing the json file, meaning something like gzip for simple compression or actually looking at Binary formats like MessagePack or CBOR

I like the idea.

@gensyn

gensyn commented Apr 19, 2025

Copy link
Copy Markdown
Contributor Author

I'll look into it next week and probably set up a new branch and create a new PR.

@gensyn

gensyn commented Jun 5, 2025

Copy link
Copy Markdown
Contributor Author

I finally started working on this and ran into a problem. In ImageEditor.py I added a new OpacityRow to Layout. It is pretty similar to the SizeRow.

When the opacity is changed in the UI I update the SVG string path to reflect the change and call

active_page.set_media_path(identifier=self.active_identifier, state=self.active_state, path=path)

This implicitly does an update but my changes are not applied. If I restart StreamController the new opacity is visible, so the path is correct. Do you have - from this rough explanation - an idea why set_media_path does not update the key or should I go more into detail?

@Core447

Core447 commented Dec 30, 2025

Copy link
Copy Markdown
Member

Do you have - from this rough explanation - an idea why set_media_path does not update the key or should I go more into detail?

Sorry for the late response. No, set_media_path should refresh the icon, no idea why this isn't happening.

@Core447 Core447 marked this pull request as draft December 30, 2025 11:16
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

Status: No status

Development

Successfully merging this pull request may close these issues.

3 participants