Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Adds icons from App_Plugins/**/Icons/*.svg #8884

Merged
merged 6 commits into from
Oct 6, 2020

Conversation

skttl
Copy link
Contributor

@skttl skttl commented Sep 12, 2020

Prerequisites

  • I have added steps to test this contribution in the description below

Description

As mentioned in #5606 (comment) it would be good to have a way of adding icons without having to put them in /umbraco/assets/icons.

So I added the functionality to the IconController, so it can search through ~/App_Plugins/**/Icons/*.svg for more icons to add.

This way it will be a lot easier for packages to add its own icons.

To test

Add some icons in a folder called icons inside an App_Plugin folder.
You can download this one as an example. It contains icons called icon-allen-keys and lego-blocks.

Open something using icons, ie. the doc type editor, and verify that the icons are available:
image
image

Also verify after selecting the icon, saving the doctype, and reloading the browser window, that eg. /umbraco/backoffice/UmbracoApi/Icon/GetIcon?iconName=icon-allen-keys works and returns the desired icon.

Copy link
Member

@nul800sebastiaan nul800sebastiaan left a comment

Choose a reason for hiding this comment

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

Super cool @skttl! It should be the other way around though, if the icon doesn't exist in App_Plugins, then use the one that ships with Umbraco. That way you can override any icon that we ship with. As described here: #5606 (comment)

@skttl
Copy link
Contributor Author

skttl commented Sep 15, 2020

Yup, updated now :)

# Conflicts:
#	src/Umbraco.Web/Editors/IconController.cs
@nul800sebastiaan
Copy link
Member

@skttl Good stuff! I tried to review this yesterday but I got a bit lost in what was happening. So I gave it another try and made the code a bit more clear, so it wasn't doing too many things in the same CreateIconModel method.

Can you give it another look and let me know what you think please?

@nul800sebastiaan
Copy link
Member

Note: the iconpicker panel (for now) doesn't use the SVG icons any more, so to test you will need to observe the icon after it is picked:

image

This now turns interesting because I choose icon-wifi here, but I overruled icon-wifi by having a App_Plugins\CustomIcons\icons\icon-wifi.svg file. So after choosing the icon, it turns into a different icon 😅

In other words, before merging this, we need to make sure the icon picker uses the svg icons again.

@skttl
Copy link
Contributor Author

skttl commented Oct 1, 2020

All good to me. I too noticed that the icon picker wasn't using svg icons earlier. :)

Do you need a PR for reverting that?

@nul800sebastiaan
Copy link
Member

No it's on purpose for now @skttl since we were breaking things for people! We're talking to @MMasey to make this work again.

@nielslyngsoe nielslyngsoe added the category/dx Developer experience label Oct 2, 2020
@MMasey
Copy link
Contributor

MMasey commented Oct 4, 2020

Super excited for this one! For reference, I've created a new PR to reintroduce the svgs to the icon picker, without having to change any legacy integration, as well as adding some lazyload functionality. #9063

@nul800sebastiaan nul800sebastiaan merged commit 3b551bd into umbraco:v8/contrib Oct 6, 2020
@nul800sebastiaan
Copy link
Member

Both Mike's and this PR are now in, 8.8.1 will be a fun release! 🎉 Thanks for the work @skttl! 👍👍👍

nul800sebastiaan pushed a commit that referenced this pull request Oct 6, 2020
@nul800sebastiaan
Copy link
Member

Cherry picked for 8.8.1 in d7bf980

var pluginIcons = appPlugins.Exists == false
? new List<FileInfo>()
: appPlugins.GetDirectories()
// Find all directories in App_Plugins that are named "Icons" and get a list of SVGs from them
Copy link
Contributor

Choose a reason for hiding this comment

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

This could have been made MUCH faster if a real convention was created, like a specific Icon folder within an app plugin like App_Plugin/MyPlugin/BackOffice/Icons but now we have to deep scan every single nested folder in all app plugins which is very costly. I realize we are now having to add caching to this due to performance but this would be one of the reasons why. Being able to just look at the top level app_plugins folders means you'd only iterate as many top level foldres that exist which would be very quick.

This can also be made faster by not allocating DirectoryInfo objects for every folder that is looked at. Use Directory.EnumerateDirectories instead.

It would be ideal to have a real convention for this - at least documented now so that we can make this a real convention with better performance in netcore.

//cc @nul800sebastiaan + @kjac

Copy link
Member

Choose a reason for hiding this comment

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

Yep, I realized that this was not the convention (thought it would be App_Plugin/MyPlugin/Icons but App_Plugin/MyPlugin/BackOffice/Icons is better! 👍 Let's go for that.

Copy link
Contributor

Choose a reason for hiding this comment

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

@Shazwazza agreed. When I was trying to work out the performance issues with icons, I briefly changed this code to simply get all SVG files under app_plugins, and then do a reverse lookup for each file path to see if they were in an "Icons" folder. It was a slight improvement in comparison (since it didn't have to do multiple enumerations over the file system), but still not really good.

This however is already out in the wild. Making a convention at this point would be a breaking change. Question is if we should simply live with this in 8 and make the breaking change in netcore? Or rip the bandaid off now?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I though it would only find icon-folders in the root plugin folder.

I say we should rip the bandaid and get the convention in. I noticed @nul800sebastiaan removed the 8.8.1 tag, so maybe it was postponed to 8.8.2 anyway?

Copy link
Member

Choose a reason for hiding this comment

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

Yes, has been postponed to 8.8.2! No bandaid needs to be ripped, this code is unreleased at the moment, so all good to get it done peacefully! :-)

Copy link
Contributor

@bjarnef bjarnef Nov 7, 2020

Choose a reason for hiding this comment

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

I wonder if it should be possible to have a second level of subfolders inside the "Icons" folder or if it would cause performance issues?

For example if using these icons https://remixicon.com they are grouped in subfolders.

image

We can of course select the specific ones needed unless you want to create a general package to re-use in projects.

It could be nice e.g. to map a specific folder with a name/category (maybe via a package.manifest) so e.g. in icon picker it could should a dropdown to filter icons in this category - a bit similar the property editors, which belong to a group 😎

Just an idea for future improvements 😁🦄

Copy link
Member

Choose a reason for hiding this comment

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

@bjarnef we've already learned from this PR that scanning for icons in folders is expensive and a serious performance concern, it's been rolled back and not released in the current releases yet.

We're talking about icon metadata here: #9122 - that should account for grouping in categories (and maybe even multilingual categories) as well.

nul800sebastiaan added a commit that referenced this pull request Oct 24, 2020
nul800sebastiaan added a commit that referenced this pull request Oct 25, 2020
nul800sebastiaan added a commit that referenced this pull request Nov 4, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

8 participants