Add icon picker in group edit dialog

[tobiasdiez]

As noted recently, the user has to manually lookup the icon-code and put it in the "Edit group" dialog. Instead, we should show a (searchable) list of all available icons.

Example for how the UI can look like: https://itsjavi.com/fontawesome-iconpicker/ (and maybe https://dmdc0de.github.io/material-ui-icon-picker/ )

Example code for a similar implementation in JavaFX: https://github.com/kordamp/ikonli/blob/18b3fb679d358801f5730352014cdbc780aff31a/apps/sampler-javafx/src/main/java/org/kordamp/ikonli/sampler/javafx/Sampler.java#L131-L153

[github-actions]

This issue has been inactive for half a year. Since JabRef is constantly evolving this issue may not be relevant any longer and it will be closed in two weeks if no further activity occurs.

As part of an effort to ensure that the JabRef team is focusing on important and valid issues, we would like to ask if you could update the issue if it still persists. This could be in the following form:

• If there has been a longer discussion, add a short summary of the most important points as a new comment (if not yet existing).
• Provide further steps or information on how to reproduce this issue.
• Upvote the initial post if you like to see it implemented soon. Votes are not the only metric that we use to determine the requests that are implemented, however, they do factor into our decision-making process.
• If all information is provided and still up-to-date, then just add a short comment that the issue is still relevant.

Thank you for your contribution!

[Siedlerchr]

Refs #7058

[Siedlerchr]

As the switch from fontawesomefx to Ikonli is now finished it should be relatively easy to implement an icon picker dialog.
Example from the Ikonli project can probably be adapted
https://github.com/kordamp/ikonli/blob/master/apps/ikonli-browser/src/main/java/org/kordamp/ikonli/browser/IkonPickerDialog.java

[aakarshvats638]

I would like to work on this issue can you please elaborate what is to be done?

[tobiasdiez]

Thanks for your interest. When you right-click a group and choose "Edit group" you get an dialog with an "icon" text field (among other input fields). Right now the user needs to put the name of the icon in this text field. It would be good if there would be a graphical input possibility, similar to

(taken from the link in the issue description)

[srdeotarse]

I want to participate in GSOC 2021, so I would like to work on this issue with dropdown icon combobox as suggested by @tobiasdiez @Siedlerchr

[tobiasdiez]

@srdeotarse Thanks for your interest! @aakarshvats638 do you still plan to work on this, or even already started?

[NicholasBian]

Hi! We are a group of 4 students from the University of Adelaide, and we are learning to contribute to open source projects. Is anyone currently working on this issue? If not, we'd like to help with this issue. Any guidance would be appreciated. Cheers!

[EricLee543]

I have implemented a simple demo like this. However, there is a problem. I can only load 1000 icons. If I load all of the icons, there will be UI lags.
Do you think 1000 icons are enough? Maybe we can keep the previous way, and add a limited(1000 icons) icon picker.
@tobiasdiez @Siedlerchr

[tobiasdiez]

That looks very nice! Good job.

Concerning the performance problem, how did you implement the grid? It might be necessary to use something like https://github.com/FXMisc/Flowless to not create 1000 buttons but only a couple (essentially what fits in the display) and reuse them when scrolling. I would suggest you open a draft PR where we can discuss these things.