feat: actions icons (#1070)

Author: lukasvinclav

src/unfold/templates/admin/submit_line.html

@@ -12,7 +12,13 @@
                     {% endif %}
 
                     {% for action in actions_submit_line %}
-                        <button type="submit" {% if not action.attrs.name %}name="{{ action.action_name }}"{% endif %} class="border border-base-200 font-medium px-3 py-2 rounded transition-all w-full hover:bg-base-50 lg:w-auto dark:border-base-700 dark:hover:text-base-200 dark:hover:bg-base-900" {% include "unfold/helpers/attrs.html" with attrs=action.attrs %}>
+                        <button type="submit" {% if not action.attrs.name %}name="{{ action.action_name }}"{% endif %} class="border border-base-200 flex font-medium gap-2 items-center px-3 py-2 rounded transition-all w-full hover:bg-base-50 lg:w-auto dark:border-base-700 dark:hover:text-base-200 dark:hover:bg-base-900" {% include "unfold/helpers/attrs.html" with attrs=action.attrs %}>
+                            {% if action.icon %}
+                                <span class="material-symbols-outlined">
+                                    {{ action.icon }}
+                                </span>
+                            {% endif %}
+
                             {{ action.description }}
                         </button>
                     {% endfor %}

src/unfold/templates/unfold/helpers/actions_row.html

@@ -11,10 +11,18 @@
                 </span>
 
                 <template x-teleport="body">
-                    <nav x-anchor.bottom-end.offset.4="$refs.rowDropdown{{ action_id }}" class="bg-white border flex flex-col leading-none py-1 rounded shadow-lg text-sm top-7 z-50 w-48 dark:bg-base-800 dark:border-base-700" x-cloak x-show="openActionsId{{ action_id }}" x-transition x-on:click.outside="openActionsId{{ action_id }} = false">
+                    <nav x-anchor.bottom-end.offset.4="$refs.rowDropdown{{ action_id }}" class="bg-white border flex flex-col py-1 rounded shadow-lg text-sm top-7 z-50 w-48 dark:bg-base-800 dark:border-base-700" x-cloak x-show="openActionsId{{ action_id }}" x-transition x-on:click.outside="openActionsId{{ action_id }} = false">
                         {% for action in actions %}
-                            <a href="{% url action.raw_path instance_pk %}" class="mx-1 px-3 py-2 rounded truncate hover:bg-base-100 dark:hover:bg-base-700 dark:hover:text-base-200"{% for attr_name, attr_value in action.attrs.items %} {{ attr_name }}="{{ attr_value }}"{% endfor %}>
-                                {{ action.title }}
+                            <a href="{% url action.raw_path instance_pk %}" class="flex items-center gap-2 mx-1 px-3 py-2 max-h-[30px] rounded hover:bg-base-100 dark:hover:bg-base-700 dark:hover:text-base-200"{% for attr_name, attr_value in action.attrs.items %} {{ attr_name }}="{{ attr_value }}"{% endfor %}>
+                                {% if action.icon %}
+                                    <span class="material-symbols-outlined">
+                                        {{ action.icon }}
+                                    </span>
+                                {% endif %}
+
+                                <span class="grow truncate">
+                                    {{ action.title }}
+                                </span>
                             </a>
                         {% endfor %}
                     </nav>