added folder icons support

[Mirza-Glitch]

Removed icons.json file, bcoz I was having some problems with it (maybe some json syntax error) so I wrote it again as fileIcons.json.

Added folderIcons.json file, which contains folder icon name with folders name. Also added folder icons in icons directory !

Created a utility function to generate css style as string in js. My way of creating styles for folder icons might look kinda messy, change the way if you have any better idea ! Also added bunch of not so useful comments for you, remove them once you test the plugin in your Acode app.

Also, you had some previous commits, where you modified icons.json file, added few new icons if I remember. You have to do that again now... Sorry for that 🙂

[sebastianjnuwu]

Removed icons.json file, bcoz I was having some problems with it (maybe some json syntax error) so I wrote it again as fileIcons.json.

Added folderIcons.json file, which contains folder icon name with folders name. Also added folder icons in icons directory !

Created a utility function to generate css style as string in js. My way of creating styles for folder icons might look kinda messy, change the way if you have any better idea ! Also added bunch of not so useful comments for you, remove them once you test the plugin in your Acode app.

Also, you had some previous commits, where you modified icons.json file, added few new icons if I remember. You have to do that again now... Sorry for that 🙂

Thank you very much for your contribution, Stan's icon ahhh okay tomorrow I will post the new version in bad country it's late aiai

[Mirza-Glitch]

Oops, i forgot to explain you how it works.

Since we don't have any helper function to set folder icon, we need to expicitly add css styling in the head element, which will be later taken as styling for folder icons...

For file icons we had some helper function which allowed us to give custom class names to a file, and then style it. But for folder icons, we neither have a helper function nor a way to set custom class names.

We need to first get to parent element, for example .list.collapsible.hidden will select a list item. Then select the child element which is a div, and it contains some very important information, like what is the type of item (file/folder), and what is the name of the item. We can simply get it by data attributes like data-name for item name and data-type to know is it a dir or file. Now we have the information of item, so select the first child element, or .icon.folder in our case which holds the styling for folder icon. Simply set the css psuedo-selector styling. Remember to set content property as content: " " !important;. Setting that !important is really important (use it with background-url property too), else the styles won't work perfectly.

You'll probably understand more when you look at the code. Or maybe this is actually very simple to anyone who knows how to code...

I just felt like explaining all this here, so whoever comes here would understand how this works...

[sebastianjnuwu]

Oops, i forgot to explain you how it works.

Since we don't have any helper function to set folder icon, we need to expicitly add css styling in the head element, which will be later taken as styling for folder icons...

For file icons we had some helper function which allowed us to give custom class names to a file, and then style it. But for folder icons, we neither have a helper function nor a way to set custom class names.

We need to first get to parent element, for example .list.collapsible.hidden will select a list item. Then select the child element which is a div, and it contains some very important information, like what is the type of item (file/folder), and what is the name of the item. We can simply get it by data attributes like data-name for item name and data-type to know is it a dir or file. Now we have the information of item, so select the first child element, or .icon.folder in our case which holds the styling for folder icon. Simply set the css psuedo-selector styling. Remember to set content property as content: " " !important;. Setting that !important is really important (use it with background-url property too), else the styles won't work perfectly.

You'll probably understand more when you look at the code. Or maybe this is actually very simple to anyone who knows how to code...

I just felt like explaining all this here, so whoever comes here would understand how this works...

Great explanation, I think I'll learn it over time!

[sebastianjnuwu]

Contraseña

?