Add support for colorized icons

feincms · Jun 13, 2024 · 8678776 · 8678776
1 parent 2714eec
commit 8678776
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 16 deletions.
diff --git a/content_editor/admin.py b/content_editor/admin.py
@@ -87,6 +87,7 @@ class ContentEditorInline(StackedInline):
     regions = None
     button = ""
     icon = ""
+    color = ""
 
     def formfield_for_dbfield(self, db_field, *args, **kwargs):
         """Ensure ``region`` and ``ordering`` use a HiddenInput widget"""
@@ -159,6 +160,7 @@ def _content_editor_context(self, request, context):
                     "regions": list(regions) if regions else None,
                     "prefix": iaf.formset.prefix,
                     "button": button,
+                    "color": iaf.opts.color,
                 }
             )
         regions = [

diff --git a/content_editor/static/content_editor/content_editor.js b/content_editor/static/content_editor/content_editor.js
@@ -56,6 +56,9 @@ django.jQuery(($) => {
       icon.innerHTML =
         iconHTML || '<span class="material-icons">extension</span>'
       button.appendChild(icon)
+      if (plugin.color) {
+        icon.style.color = plugin.color
+      }
 
       const title = document.createElement("span")
       title.className = "plugin-button-title"
@@ -123,6 +126,9 @@ django.jQuery(($) => {
       fragment.innerHTML =
         plugin.button || '<span class="material-icons">extension</span>'
       const button = fragment.content.firstElementChild
+      if (plugin.color) {
+        button.style.color = plugin.color
+      }
       for (const title of qsa(
         `.dynamic-${plugin.prefix} > h3, #${plugin.prefix}-empty > h3`,
       )) {

diff --git a/docs/index.rst b/docs/index.rst
@@ -294,30 +294,19 @@ If you also want nice icons to add new items, you might want to use
 .. code-block:: python
 
     from content_editor.admin import ContentEditor, ContentEditorInline
-    from js_asset import JS
 
     # ... the RichTextInline from above
 
     class ArticleAdmin(ContentEditor):
         inlines = [
-            RichTextInline.create(
-                button='<i class="fas fa-pencil-alt"></i>',
-            ),
-            ContentEditorInline.create(
-                model=Download,
-                button='<i class="fas fa-download"></i>',
-            ),
+            RichTextInline.create(icon="notes"),
+            ContentEditorInline.create(model=Download, icon="download"),
         ]
 
-        class Media:
-            js = (
-                JS("https://use.fontawesome.com/releases/v5.0.10/js/all.js", {
-                    "defer": "defer",
-                    "integrity": "sha384-slN8GvtUJGnv6ca26v8EzVaR9DC58QEwsIk9q1QXdCU8Yu8ck/tL/5szYlBbqmS+",  # noqa
-                    "crossorigin": "anonymous",
-                }, static=False),
-            )
+The content editor bundles the Google material icons font.
 
+Additional options include ``button`` (where you can set the HTML code for the
+icon if you need more control) and ``color`` to set a CSS color for the icon.
 
 Restricting plugins to a subset of all available regions
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~