search

OrchardCMS / OrchardCore

Orchard Core is an open-source modular and multi-tenant application framework built with ASP.NET Core, and a content management system (CMS) built on top of that framework.
https://orchardcore.net
BSD 3-Clause "New" or "Revised" License
7.23k stars 2.34k forks source link

Create a font-awesome picker #2347

Closed sebastienros closed 5 years ago

sebastienros commented 5 years ago

Replace a text input with the actual icon, and a selector to display them to chose from a visual list.

Could then be used as an editor for text fields.

agriffard commented 5 years ago

https://farbelous.io/fontawesome-iconpicker/

douwinga commented 5 years ago

We did something like this in O1. Below is an example. Is this what you are thinking?

font-awesome-picker Edit: It looks like I posted around the same time as Antoine. That project looks much better, we never spent much time on the look of it.

sebastienros commented 5 years ago

@douwinga this is exactly what I am thinking about, and the link @agriffard provided is the perfect solution IMO.

plompd commented 5 years ago

I created an Editor for the Text field and I'm currently trying to create a custom field out of it. But for now this works pretty well

2018-09-07_17-41-28

font-picker

sebastienros commented 5 years ago

Looks great! I don't think a custom field is necessary. I know it might not be optimal right now to find it, but we might change how we display the types of fields by exposing the editors directly at some point. The only reason to have a custom field would be to create one called Css Class, but I don't think it makes much sense.

sebastienros commented 5 years ago

When do you create the PR for the editor?

plompd commented 5 years ago

@sebastienros I've some troubles in the case when you use multiple versions of the Icon Picker. For example:

Any idea?

<script asp-name="bootstrap" at="Foot" depends-on="admin"></script>
<script name="fontpickerScript" depends-on="admin" asp-src="/OrchardCore.ContentFields/Scripts/fontawesome-iconpicker.min.js" debug-src="/OrchardCore.ContentFields/Scripts/fontawesome-iconpicker.js" at="Foot"></script>
<style name="fontpickerStyle" at="Head" asp-src="/OrchardCore.ContentFields/Styles/fontawesome-iconpicker-min.css" debug-src="/OrchardCore.ContentFields/Styles/fontawesome-iconpicker.css"></style>
plompd commented 5 years ago

OK, I see that the ResourceManager takes care of this. So, I only have to make my inline javascript a little more intelligent to deal with multiple instances of the picker.