Model icons

[Marty]

Hi all,

Recently, it's trend to use icons or emoji before menu items and I like this idea because  IMHO people orient better and more quickly when they see picture.

What about to add this feature to native django? I thought the easiest way would be to add new Meta option to Model. The default Meta icon would be empty string so everything would work like now. If I want to make menu more readable, I just add emoji (🔨) or html (Awesome font - <i class="fa-solid fa-hammer"></i> , Bootstrap icon - <i class="bi bi-hammer"></i>, etc.) to Meta icon.

Code example:

Model:

class Hammer(models.Model):

    ...

    Meta:

        icon = '<i class="fa-solid fa-hammer"></i>'

app_list.html template:

...

<th scope="row">{{model.icon}} {{model.name}}</th>

...

Final result:

Maybe own icon could have even the parent app (AppConfig). And the model icon could be in breadcrumbs.

What do you think about this idea? 🙂

[Yeonggwang Yang]

that sounds good with me

2023년 2월 5일 일요일 오전 9시 36분 17초 UTC+9에 Marty님이 작성:

[Adam Johnson]

Putting HTML for the admin in model definitions is a bit too coupled.

I think you may be able to add icons already by overriding the admin template - can you try playing around with that?

--
You received this message because you are subscribed to the Google Groups "Django developers (Contributions to Django itself)" group.
To unsubscribe from this group and stop receiving emails from it, send an email to django-develop...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/django-developers/6c859cc5-ea41-4695-9fcf-5cd435310364n%40googlegroups.com.

[Arthur Pemberton]

I too find the idea of hard coded HTML in a Python file to be inelegant, for what it's worth.

Arthur Pemberton

To view this discussion on the web visit https://groups.google.com/d/msgid/django-developers/CAMyDDM1L4rmQ3qomxOqD%2BmugXcsmx7NrOPAh8a53wR9G5q%3D3Gw%40mail.gmail.com.

[Marty]

Yeah, I've tried to create templatetag like this:

@register.simple_tag
def get_module_icon(model, app):
    if app == 'auth':
        if model == 'Groups':
            return '<i class="fas fa-users"></i>'
        elif model == 'Users':
            return '<i class="fas fa-user"></i>'
    elif app == 'core':
        elif model == 'Generations':
            return '<i class="fas fa-layer-group"></i>'
        elif model == 'Product models':
            return '<i class="fas fa-server"></i>'
    elif app == 'bto':
        if model == 'Components':
            return '<i class="fas fa-microchip"></i>'
        elif model == 'Layouts':
            return '<i class="fas fa-drafting-compass"></i>'
        elif model == 'SKU configurations':
            return '<i class="fas fa-gavel"></i>'
        elif model == 'XML component definitions':
            return '<i class="fas fa-cubes"></i>'
    return ''

I don't like this way so much and I thought it would be easier even for other potentional developers who would like to use icons so it seemed putting it to Meta would be better. However I get mixing HTML to model is not good. 🙂

What would be the most clean way to use icons like that?

[Mark Niehues]

If we are talking only about icons in Django Admin: Wagtail (a CMS based on Django) solves it for their custom Admin Views in a similar way to your proposed Meta attribute [0].

The analog solution for django admin would be, that the ModelAdmin gets an 'icon' attribute, which does not contain the whole html-snippet, but instead only the icon specific class name:

For Example:

from django.contrib import admin
from .models import Author

@admin.register(Author)
class AuthorAdmin(admin.ModelAdmin):
   icon = 'fa-user'

That would be a nicer solution in my point of view, especially I find this level of coupling acceptable.

Cheers,

Mark

[0] https://docs.wagtail.org/en/stable/reference/contrib/modeladmin/index.html#a-more-complicated-example

Am 18.02.23 um 21:31 schrieb Marty:

To view this discussion on the web visit https://groups.google.com/d/msgid/django-developers/1f461742-7fe6-4798-97e9-a8133bd2364bn%40googlegroups.com.

[Jacob Rief]

I agree with Adam Johnson that adding HTML to the model class is a bit too coupled.

But I like the idea of Mark Niehues to add them to the ModelAdmin class, although I would allow a HTML/SVG snippet rather than a CSS class.

• How would we then handle 3rd party apps providing their own SVG file to be used as icon?
• Shouldn't that icon definition be part of the ModelAdmin's Media subclass?  

– Jacob

[Marty]

I really like the idea to add just a simple 'icon' attribute. That's quite elegant solution. Thanks, Mark! 🙂

[Brice Parent]

Hello!

Really useful idea, I think! 2 points about it:

1. Syntax

I would also remove the html from the models, but probably in this way:

class Hammer(models.Model):

    ...

    Meta:

        icon = ModelIcon("🔨")

There would be something like

ModelIcon.as_html(self, model_name:str) -> str:

    """returns whatever html should be used in the admin"""

or a ModelIcon.set_text(self, text: str) and we'd use a simple str(model_icon) in the templates.

That way, it could be extended easily in a FontAwesomeModelIcon("fa-hammer") and a BootstrapModelIcon("bi-hammer") for example, and maybe get whatever extra arguments they may need, like FontAwesomeModelIcon("fa-hammer", thickness="solid").

2. Make it more widely useful

I like the fact that it's in the model itself and not in the modeladmin, as it allows to use it elsewhere, like in the __str__ to quickly add this visual indication of the class. Boostrap and co would have to provide a non-html version of the icon or return an empty string though.

--

You received this message because you are subscribed to the Google Groups "Django developers (Contributions to Django itself)" group.
To unsubscribe from this group and stop receiving emails from it, send an email to django-develop...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/django-developers/45c143cc-2716-430a-93cf-7c2a938640ccn%40googlegroups.com.

[Jacob Rief]

On Thu, Feb 23, 2023 at 7:38 AM Brice Parent <con...@brice.xyz> wrote:

Hello!

Really useful idea, I think! 2 points about it:

1. Syntax

I would also remove the html from the models, but probably in this way:

class Hammer(models.Model):

    ...

    Meta:

        icon = ModelIcon("🔨")

There would be something like

ModelIcon.as_html(self, model_name:str) -> str:

    """returns whatever html should be used in the admin"""

or a ModelIcon.set_text(self, text: str) and we'd use a simple str(model_icon) in the templates.

In my opinion, Django models shall not have to specify parts of their representation layer, such as icons.

This shall be left exclusively to the view layer: The ModelAdmin is such a candidate.

That way, it could be extended easily in a FontAwesomeModelIcon("fa-hammer") and a BootstrapModelIcon("bi-hammer") for example, and maybe get whatever extra arguments they may need, like FontAwesomeModelIcon("fa-hammer", thickness="solid").

I don't like the idea that Django becomes dependent on any UTF-8-Symbol/Dingbats/Emojis/Glyphicon/Font-Awesome/Bootstrap/Remix/etc-Iconset.

Some Models might have a purpose which can not be mapped to any of those icons and need to be custom designed.

 

2. Make it more widely useful

I like the fact that it's in the model itself and not in the modeladmin, as it allows to use it elsewhere, like in the __str__ to quickly add this visual indication of the class. Boostrap and co would have to provide a non-html version of the icon or return an empty string though.

That's a violation of the well established MVC pattern of keeping the visual part in the view, and the "business model" within the model.

Just my 2 cents

– Jacob

[Bogdan Barna]

Hello all,

I've joined this emailing list just to support the fellow users, of not adding this (especially on models.Model) as per their points made.

Thanks,

Bogdan

[Thibaud Colas]

Hi all, I see Wagtail has been mentioned, we actually shipped a lot of improvements to our icons support in our last release, thought I’d share a few details in case it helps in considering this for Django.

Here is Wagtail’s documentation for custom icons: https://docs.wagtail.org/en/stable/advanced_topics/icons.html. The TL;DR; is:

• Icons are SVG files, registered in the CMS with a unique identifier (for example "fa-user-solid")
• This makes it possible to create "icon pack" packages ("django-fontawesome", "django-myiconset"), which register large amounts of icons. And also allows for specific projects to register their own custom icon(s).
• In different parts of the code (Wagtail’s ModelAdmin equivalents), we allow providing an icon identifier.
• We have a set of built-in icons, most from FontAwesome, some custom.
• icons are then loaded as an inline SVG "sprite" (SVG symbol elements).

As an aside, the Django admin’s current iconography is in a dire need of being rebuilt. Its implementation with `img` elements and background images is really less than ideal for accessibility, because it makes it really hard to style icons according to different needs (light theme, dark theme, high contrast mode) and UI states (error, focus, etc).

Cheers,

Thibaud