fix: import_export actions form styling (#279)

Author: lukasvinclav

README.md

@@ -702,6 +702,18 @@ class ExampleAdmin(ModelAdmin, ImportExportModelAdmin):
     export_form_class = ExportForm
 ```
 
+When implementing `import_export.admin.ExportActionModelAdmin` class in admin panel, import_export plugin adds its own implementation of action form which is not incorporating Unfold CSS classes. For this reason, `unfold.contrib.import_export.admin` contains class with the same name `ExportActionModelAdmin` which inherits behavior of parent form and adds appropriate CSS classes.
+
+```python
+admin.py
+
+from unfold.admin import ModelAdmin
+from unfold.contrib.import_export import ExportActionModelAdmin
+
+class ExampleAdmin(ModelAdmin, ExportActionModelAdmin):
+    pass
+```
+
 ### django-modeltranslation
 
 By default, Unfold supports django-modeltranslation and `TabbedTranslationAdmin` admin class for the tabbed navigation is implemented with custom styling as well.

src/unfold/contrib/import_export/admin.py

@@ -0,0 +1,37 @@
+from django import forms
+from django.utils.translation import gettext_lazy as _
+from import_export.admin import ExportActionModelAdmin as BaseExportActionModelAdmin
+from unfold.admin import ActionForm
+from unfold.widgets import SELECT_CLASSES
+
+
+def export_action_form_factory(formats):
+    class _ExportActionForm(ActionForm):
+        file_format = forms.ChoiceField(
+            label=" ",
+            choices=formats,
+            required=False,
+            widget=forms.Select(
+                {"class": " ".join([*SELECT_CLASSES, "ml-3", "!w-auto", "lg:!w-40"])}
+            ),
+        )
+
+    _ExportActionForm.__name__ = "ExportActionForm"
+
+    return _ExportActionForm
+
+
+class ExportActionModelAdmin(BaseExportActionModelAdmin):
+    def __init__(self, *args, **kwargs):
+        super().__init__(*args, **kwargs)
+
+        choices = []
+        formats = self.get_export_formats()
+        if formats:
+            for i, f in enumerate(formats):
+                choices.append((str(i), f().get_title()))
+
+        if len(formats) > 1:
+            choices.insert(0, ("", _("Select format")))
+
+        self.action_form = export_action_form_factory(choices)

src/unfold/static/unfold/css/styles.css

@@ -19,15 +19,15 @@
             {% endblock %}
 
             {% block actions-submit %}
-                <button type="submit" class="bg-white border flex items-center h-9.5 ml-1 px-2 rounded shadow-sm text-gray-400 w-9.5 hover:text-gray-700 focus:outline-none dark:bg-gray-900 dark:border-gray-700 dark:text-gray-500 dark:hover:text-gray-200" title="{% translate "Run the selected action" %}" name="index" value="{{ action_index|default:0 }}">
+                <button type="submit" class="bg-white border flex items-center h-9.5 ml-3 px-2 rounded shadow-sm text-gray-400 w-9.5 hover:text-gray-700 focus:outline-none dark:bg-gray-900 dark:border-gray-700 dark:text-gray-500 dark:hover:text-gray-200" title="{% translate "Run the selected action" %}" name="index" value="{{ action_index|default:0 }}">
                     <span class="material-symbols-outlined md-18">chevron_right</span>
                 </button>
             {% endblock %}
         </div>
 
         {% block actions-counter %}
             {% if actions_selection_counter %}
-                <div class="hidden md:block">
+                <div class="hidden truncate md:block">
                     <span class="action-counter ml-4 text-sm text-gray-500 dark:text-gray-400" data-actions-icnt="{{ cl.result_list|length }}">
                         {{ selection_note }}
                     </span>