Add font-awesome icon picker to app development edit metadata page

[ericfranz]

Can use this: https://farbelous.io/fontawesome-iconpicker but will have to add the old icons. It uses a metadata file for the new icons, so there may be a similar metadata file in a late version of Font AweSim 4 (to build the list of aliases).

It needs some design. Please do a mock design first and attach the image to this issue before proceeding!

1. If the icon.png file is present, it should show this icon as the current icon.png and say "if you want to use font awesome icon, first remove the icon.png from the root of the directory.
2. If no icon.png is present (that means font awesome icon is being used) then show the current icon. Then show the dropdown or inline picker without input.
3. Make sure to indicate "no selection" if there is no icon specified in the metadata file, while showing the gear/cog icon which is default.
4. Supporting 4.0 aliases means: if a valid alias is currently in use, continue to use that alias. Maybe if it is a recognized alias we should show the corresponding FA5 icon selected in the dropdown, but a separate checkbox saying "[*] Use Font Awesome 4 compatible aliases". So if fa://gear is selected, and you select another icon and then select cog again, the FA4 alias "gear" is used. If you uncheck the "Use Font Awesome 4 compatible aliases" then "cog" would be used. The "Use Font Awesome 4 compatible aliases" checkbox can be present in the form at all times, but by default unchecked - unless the metadata file previously had a FA4 alias in use. This means that if the metadata file has fa://gear and I open the edit medatata file to change the title, the title should change, but the fa://gear should stay the same after I save.

[laser505t]

Here is what I have. It detects whether the current icon shown has the class 'fa' and sets the alias checkbox on load (mostly hidden here, but it's right below the text box). Changing the alias checkbox destroys the icon picker instance and creates a new one that has the correct settings for that icon set. I made some significant changes to the original icon picker to support the URIs instead of plain ol' FontAwesome classes, and to allow support for FontAwesome 4.


I have yet to include something that tells if the manifest file doesn't have an icon specified.
I also will probably include a little tag to tell the actual FontAwesome class for the icon, just for clarity.
Should I maybe try an inline icon picker?

[ericfranz]

I would add the same message below the font awesome like you do the icon.png.

This app uses the font-awesome icon as shown. To use a custom image, add an image called "icon.png" to this directory.

[ericfranz]

I also will probably include a little tag to tell the actual FontAwesome class for the icon, just for clarity.

Hmm.. So the original font awesome icon picker actually does this, shows the original FontAwesome class. Push the font-awesome picker changes you made to https://code.osu.edu/wiag/fontawesome-iconpicker and that will give me enough to think about it, then lets discuss tomorrow before I leave.

[laser505t]

Here is what I have. It has been reverted to the original icon picker. Maybe it should make the icon picker a dropdown? I feel like it makes the interface look busy with all the other stuff there.