Plugins Úteis - Color picker no Django Admin

Que tal um color picker parao admin quando precisar selecionar uma cor e ter certeza que o usuário não faz ideia do que #0000FF quer dizer?

Simples.

Você vai precisar de um plugin:

pip install django-paintstore

models.py

No seu models.py deixe como a seguir:

# coding: utf-8
from django.db import models
from paintstore.fields import ColorPickerField

# Create your models here.
class SUA_CLASSE(models.Model):
 """(SUA_CLASSE description)"""
 ...
 cor = ColorPickerField(help_text="Clique no campo para abrir o colorpicker.", max_length=7)
 ...

admin.py

E deixe o admin.py deixa como abaixo:

# coding: utf-8
from django.contrib import admin
from django import forms

from .models import *
# Register your models here.

class SUA_CLASSEForm(forms.ModelForm):

 class Media:
  css = {'all': ('/static/paintstore/css/colorpicker.css','/static/site/js/plugins/paintstore/init.css')}
  js = (
   '/static/paintstore/jquery_1.7.2.js',
   '/static/paintstore/colorpicker.js',
   '/static/site/js/plugins/paintstore/init.js',
  )
 class Meta:
  model = SUA_CLASSE
  fields = '__all__'

class SUA_CLASSEFormAdmin(admin.ModelAdmin):
 form = SUA_CLASSEForm
 
admin.site.register(SUA_CLASSE, SUA_CLASSEAdmin)

RESOURCES:

Os arquivos referenciados acima estão abaixo, salve-os e altere os caminhos no Form, conforme necessidade:

init.js

jQuery(document).ready(function($) {
 $('#id_cor').ColorPicker({
  onSubmit: function(hsb, hex, rgb, el, parent) {
   $(el).val('#' + hex);
   $(el).ColorPickerHide();
   $(el).css({
    color: ''+$('#id_cor_titulo').val(),
    backgroundColor: '#'+hex
   });
  },
  onBeforeShow: function () {
   $(this).ColorPickerSetColor(this.value);
  }
 }).bind('keyup', function(){
  $(this).ColorPickerSetColor(this.value.replace('#', ''));
 });

 $('#id_cor,').css({
  color: ''+$('#id_cor_titulo').val(),
  backgroundColor: $('#id_cor_titulo').val()
 });
});

init.css

#id_cor{
 width:50px;
 background-color:red;
 cursor:pointer;
 color:black;
 border:solid 1px black;
}