Include GIF icons - Githubissues

yourlabs / django-autocomplete-light

A fresh approach to autocomplete implementations, specially for Django. Status: v4 alpha, v3 stable, v2 & v1 deprecated.

https://django-autocomplete-light.readthedocs.io

MIT License

1.8k stars 468 forks source link

Include GIF icons #492

Open jonashaag opened 9 years ago

jonashaag commented 9 years ago

The GIF icons have been replaced by SVG ones in Django 1.9

nym commented 9 years ago

Here's a guide to polyfills, including ones for SVG.

https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills

jpic commented 9 years ago

Yeah so i'm not sure how we're going to do that in a backward compatible way ... but we can't miss support for the new awesome admin theme for sure !!!! PR welcome ;)

aidanlister commented 9 years ago

How can we replace the icons currently? e.g. how can I change the HTML to be something like and let font-awesome take care of my icons?

jpic commented 9 years ago

@aidanlister CSS: https://github.com/yourlabs/jquery-autocomplete-light/blob/master/src/style.css#L132

But I see a PNG icon there, @jonashaag what GIF are you talking about exactly ?

jpic commented 9 years ago

Oh, I think you're talking about these:

./templates/autocomplete_light/widget.html:        <img src="{% static 'admin/img/icon_addlink.gif' %}" width="10" height="10" alt="{% trans 'Add another' %}" />
./templates/autocomplete_light/model_template/choice.html:            <img src="{% static 'admin/img/icon_changelink.gif' %}" />

@aidanlister for now you can override the template blocks. A collective solution would be welcome here

jonashaag commented 9 years ago

I'd simply include the new SVG icons in the distribution until support for anything pre 1.9 is dropped.

aidanlister commented 9 years ago

I battled the CSS for a while ... too hard.

.autocomplete-light-widget
  max-width: 375px
  .deck
    .remove
      position: relative
      top: 2px
      display: inline-block
      font-family: 'Glyphicons Halflings'
      font-style: normal
      font-weight: 400
      line-height: 100%
      background-image: none !important
      color: #999 !important
      text-indent: 0 !important
      height: auto !important
      width: auto !important
      &:before
        content: "\e014"
      &:hover
        color: #333 !important

Stuck with the actual content that is added: ˣ

I can't work out how to show my icon but hide the text added.

jpic commented 9 years ago

@aidanlister Docs for this part are not awesome I recon but basically it's taking the .remove:last element it finds in the widget element to create new ones.

So, you can change that in the remove_template block of widget.html.

aidanlister commented 9 years ago

Great thanks for the help. I copied autocomplete_light/widget.html into my app and changed the block to:

{% block remove_template %}
    <span style="display:none" class="remove">
        <i class="fa fa-times-circle"></i>
    </span>
{% endblock %}

And here's the CSS I needed:

.autocomplete-light-widget
  max-width: 375px
  .deck span[data-value] .remove
    background-image: none
    color: #999
    text-indent: 0
    &:hover
      color: #333

It looks very pretty, is consistent with the rest of the site and saves an image load :)