fix broken icons on Django CMS 4.1

Signed-off-by: Florian Scherf <[email protected]>

djangocms_versioning_filer/static/djangocms_versioning_filer/css/admin_filer_list_actions.css

@@ -71,6 +71,10 @@ extending the pagetree classes provided by CMS
 
 
 /* style for each option row */
+td.column-action a.action-button {
+  margin-right: 4px !important;
+}
+
 ul.cms-actions-dropdown-menu-inner {
     margin: 0;
     padding: 0 !important;
@@ -115,10 +119,17 @@ a.cms-actions-dropdown-menu-item-anchor:link:active {
 }
 
 /* align the option text with it's icon */
+a.cms-actions-dropdown-menu-item-anchor {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
 a.cms-actions-dropdown-menu-item-anchor span {
-    line-height: 1rem;
-    vertical-align: 20%;
-    margin-left: 10px;
+    line-height: 1rem !important;
+    width: auto !important;
+    height: auto !important;
+    margin: 0 !important;
 }
 /* disable any inactive option */
 a.cms-actions-dropdown-menu-item-anchor.inactive {

djangocms_versioning_filer/static/djangocms_versioning_filer/js/admin_filer_list_actions.js

@@ -9,14 +9,14 @@
     function createBurgerMenu(row) {
 
       let actions = $(row).children('.column-action');
-      if (!actions.length || !$(actions[0]).children('.action-button').length) {
+      if (!actions.length || !$(actions[0]).children('.action-button:not(.top-level)').length) {
         /* skip any rows without actions to avoid errors */
         return;
       }
 
       /* create burger menu anchor icon */
       let icon = document.createElement('span');
-      icon.setAttribute('class', "fa fa-bars");
+      icon.setAttribute('class', "cms-icon cms-icon-settings");
 
       let anchor = document.createElement('a');
       anchor.setAttribute('class', 'action-button cms-filer-action-btn closed');
@@ -35,7 +35,7 @@
       ul.setAttribute('class', 'cms-actions-dropdown-menu-inner');
 
       /* get the existing actions and move them into the options container */
-      $(actions[0]).children('.action-button').each(function (index, item) {
+      $(actions[0]).children('.action-button:not(.top-level)').each(function (index, item) {
 
         let li = document.createElement('li');
         /* create an anchor from the item */

djangocms_versioning_filer/templates/admin/filer/folder/directory_listing.html

@@ -161,7 +161,7 @@ <h2>&nbsp;</h2>
                     </div>
                     <form class="filter-files-container js-filter-files-container" action="." method="get" class="js-filer-search-form">
                         <div class="filter-filers-container-inner">
-                            <button class="navigator-button filter-files-button" title="{% trans 'Click here to run search for entered phrase' %}"><span class="icon fa fa-search"></span></button>
+                            <button class="navigator-button filter-files-button" title="{% trans 'Click here to run search for entered phrase' %}"><span class="icon fa fa-search cms-icon cms-icon-search"></span></button>
                             <div class="filter-search-wrapper">
                                 {% filer_admin_context_hidden_formfields %}
                                 <input type="text" placeholder="{% trans 'Search' %}" class="filter-files-field js-filter-files" value="{{ search_string }}" size="40" name="q">
@@ -252,7 +252,7 @@ <h2>&nbsp;</h2>
     <div id="content-main">
         {% include "admin/filer/tools/search_form.html" %}
         <div class="js-navigator navigator{% if not actions_on_top and not actions_on_bottom %}navigator-no-actions{% endif %}">
-            <form class="js-navigator-form" method="post">
+            <form id="changelist-form" class="js-navigator-form" method="post">
                 {% csrf_token %}
                 {% filer_admin_context_hidden_formfields %}
                 {% if action_form and actions_on_top and paginator.count and not is_popup %}

djangocms_versioning_filer/templates/admin/filer/folder/directory_table.html

@@ -79,7 +79,7 @@
                             </td>
                             <td class="column-action">
                                 {% if subfolder.file_type == "Folder" %}
-                                    <a href="{% url 'admin:filer_folder_change' subfolder.id %}{% filer_admin_context_url_params %}" title="{% trans 'Change folder details' %}" class="action-button"><span class="fa fa-pencil"></span></a>
+                                    <a href="{% url 'admin:filer_folder_change' subfolder.id %}{% filer_admin_context_url_params %}" title="{% trans 'Change folder details' %}" class="action-button"><span class="cms-icon cms-icon-settings"></span></a>
                                 {% endif %}
                             </td>
                         </tr>

djangocms_versioning_filer/templates/djangocms_versioning_filer/admin/action_buttons/edit.html

@@ -1,7 +1,6 @@
 {% load static djangocms_versioning_filer_tags %}
 
 {% block extrahead %}
-    <link rel="stylesheet" href="{% static 'djangocms_versioning/css/actions.css' %}">
     <script src="{% static 'djangocms_versioning/js/actions.js' %}"></script>
 {% endblock %}
 
@@ -10,19 +9,16 @@
 {% spaceless %}
 <a
     title="{% block title %}{% endblock %}"
-    class="btn
+    class="action-button top-level
+    
 {% if disabled %}
     inactive
 {% endif %}
-    cms-versioning-action-btn
-    cms-versioning-action-edit
-    js-versioning-action-btn
-    js-versioning-action
     {% if keepsideframe|default_if_none:True %} js-versioning-keep-sideframe {% else %}js-versioning-close-sideframe {% endif %}
     "
 {% if not disabled %}
     href="{% get_versioning_filer_edit_url file %}"
 {% endif %}
 >
-    <img src="{% static 'djangocms_versioning/svg/edit.svg' %}">
+    <span class="cms-icon cms-icon-pencil"></span>
 {% endspaceless %}

djangocms_versioning_filer/templates/djangocms_versioning_filer/admin/action_buttons/manage_versions.html

@@ -1,4 +1,4 @@
 {% load i18n %}
 
 <a href="{{ file.grouper.get_absolute_url }}"
-    title="{% blocktrans %}Manage versions{% endblocktrans %}" class="action-button"><span class="fa fa-list-ol"></span></a>
+    title="{% blocktrans %}Manage versions{% endblocktrans %}" class="action-button"><span class="cms-icon cms-icon-manage-versions"></span></a>

djangocms_versioning_filer/templates/djangocms_versioning_filer/admin/directory_table_actions.html

@@ -1,11 +1,13 @@
 {% load i18n djangocms_versioning_filer_tags %}
 
+{% spaceless %}
 <a href="{{ file.canonical_url }}"
-    title="{% blocktrans %}Link{% endblocktrans %}" class="action-button" target="_blank"><span class="fa fa-link"></span></a>
+    title="{% blocktrans %}Link{% endblocktrans %}" class="action-button" target="_blank"><span class="fa fa-link filer-icon filer-icon-link"></span></a>
 <a href="{{ file.url }}" target="_blank"
-    title="{% blocktrans %}Download{% endblocktrans %}" class="action-button"><span class="fa fa-download"></span></a>
+    title="{% blocktrans %}Download{% endblocktrans %}" class="action-button"><span class="fa fa-download filer-icon filer-icon-download"></a>
 
 {% get_versioning_filer_admin_actions as admin_actions  %}
 {% for template_name in admin_actions  %}
     {% include template_name %}
 {% endfor %}
+{% endspaceless %}