feat: unified details actions with tabs (#492)

Author: lukasvinclav

src/unfold/templates/admin/change_form.html

@@ -62,22 +62,6 @@
         <form {% if has_file_field %}enctype="multipart/form-data" {% endif %}{% if form_url %}action="{{ form_url }}" {% endif %}method="post" id="{{ opts.model_name }}_form" novalidate>
             {% csrf_token %}
 
-            {% if actions_detail %}
-                <div class="bg-gray-50 flex justify-end mb-4 p-3 rounded-md dark:bg-gray-800">
-                    {% block actions %}
-                        {% for action in actions_detail %}
-                            <a href="{{ action.path }}" class="bg-white text-gray-500 border cursor-pointer flex font-medium items-center px-3 py-2 mr-3 rounded-md shadow-sm text-sm dark:bg-gray-900 dark:border dark:border-gray-700 dark:text-gray-400"
-                                {% for attr_name, attr_value in action.attrs.items %}
-                                    {{ attr_name }}="{{ attr_value }}"
-                                {% endfor %}
-                            >
-                                {{ action.title }}
-                            </a>
-                        {% endfor %}
-                    {% endblock %}
-                </div>
-            {% endif %}
-
             {% block form_top %}{% endblock %}
 
             <div>

src/unfold/templates/unfold/helpers/tab_action.html

@@ -1,5 +1,5 @@
 <li class="border-b flex-grow text-center md:border-b-0 md:border-r last:border-0 dark:border-gray-800">
-    <a href="{{ link }}" class="block px-4 py-2 text-gray-500 text-left whitespace-nowrap hover:text-gray-700 dark:text-gray-400 hover:dark:text-gray-200"{% if blank %} target="_blank"{% endif %}>
+    <a href="{{ link }}" class="block px-4 py-2 text-gray-500 text-left whitespace-nowrap hover:text-gray-700 dark:text-gray-400 hover:dark:text-gray-200"{% if blank %} target="_blank"{% endif %} {% include "unfold/helpers/attrs.html" with attrs=action.attrs %}>
         {{ title }}
     </a>
 </li>

src/unfold/templates/unfold/helpers/tab_list.html

@@ -1,5 +1,5 @@
 {% if not is_popup %}
-    {% if tab_list or actions_list or actions_items or nav_global %}
+    {% if tab_list or actions_list or actions_detail or actions_items or nav_global %}
         <div class="flex items-start flex-col mb-4 text-gray-500 text-sm w-full md:border-b dark:md:border-gray-800 md:border-l-0 md:flex-row md:items-center md:justify-end dark:text-gray-400">
             {% if tab_list %}
                 <ul class="border rounded-md flex flex-col w-full md:flex-row md:border-b-0 md:border-t-0 md:border-l-0 md:border-r-0 dark:border-gray-800">
@@ -15,12 +15,16 @@
                 </ul>
             {% endif %}
 
-            {% if actions_list or actions_items or nav_global %}
+            {% if actions_list or actions_detail or actions_items or nav_global %}
                 <ul class="border flex flex-col mb-4 mt-2 rounded-md shadow-sm md:flex-row md:mb-2 md:mt-0 dark:border-gray-800 max-md:w-full">
                     {% for action in actions_list %}
                         {% include "unfold/helpers/tab_action.html" with title=action.title link=action.path %}
                     {% endfor %}
 
+                    {% for action in actions_detail %}
+                        {% include "unfold/helpers/tab_action.html" with title=action.title link=action.path %}
+                    {% endfor %}
+
                     {% if actions_items %}
                         {{ actions_items }}
                     {% endif %}

src/unfold/templatetags/unfold.py

@@ -26,6 +26,7 @@ def tab_list(context, opts) -> str:
         context={
             "tab_list": tabs,
             "nav_global": context.get("nav_global"),
+            "actions_detail": context.get("actions_detail"),
             "actions_list": context.get("actions_list"),
             "actions_items": context.get("actions_items"),
             "is_popup": context.get("is_popup"),