fix: Folder widget had outdated styling (#1371)

* Update folder widget

* Remove debug log

* Satisfy eslint

Author: fsbraun

filer/fields/folder.py

@@ -11,6 +11,7 @@
 from django.utils.safestring import mark_safe
 
 from ..models import Folder
+from ..settings import ICON_CSS_LIB
 from ..utils.compatibility import truncate_words
 from ..utils.model_label import get_model_label
 
@@ -59,7 +60,6 @@ def render(self, name, value, attrs=None, renderer=None):
             'object': obj,
             'clear_id': '%s_clear' % css_id,
             'descid': css_id_description_txt,
-            'noimg': 'filer/icons/nofile_32x32.png',
             'foldid': css_id_folder,
             'id': css_id,
         }
@@ -81,9 +81,8 @@ def obj_for_value(self, value):
         return obj
 
     class Media:
-        js = (
-            'filer/js/addons/popup_handling.js',
-        )
+        css = {"all": ('filer/css/admin_filer.css',) + ICON_CSS_LIB}
+        js = ('filer/js/addons/popup_handling.js',)
 
 
 class AdminFolderFormField(forms.ModelChoiceField):

filer/private/sass/components/_drag-and-drop.scss

@@ -3,6 +3,7 @@
 
 form .form-row {
     &[class*="file"],
+    &[class*="folder"],
     &[class*="img"],
     &[class*="image"],
     &[class*="visual"] {
@@ -332,7 +333,7 @@ form .form-row {
 
         }
         &.filer-dropzone-folder .filerFile {
-            top: 32px !important;
+            top: 8px;
             #id_folder_description_txt {
                 float: left;
             }

filer/static/filer/css/admin_filer.css

@@ -59,12 +59,17 @@ if (django.jQuery) {
     };
     window.dismissRelatedFolderLookupPopup = function (win, chosenId, chosenName) {
         var id = windowname_to_id(win.name);
+        var lookup = $('#' + id);
+        var container = lookup.closest('.filerFile');
+        var image = container.find('.thumbnail_img');
         var clearButton = $('#id_' + id + '_clear');
         var input = $('#id_' + id);
-        var folderName = $('#id_' + id + '_description_txt');
+        var folderName = container.find('.description_text');
         var addFolderButton = $('#' + id);
 
         input.val(chosenId);
+
+        image.removeClass('hidden');
         folderName.text(chosenName);
         clearButton.removeClass('hidden');
         addFolderButton.addClass('hidden');

filer/static/filer/css/maps/admin_filer.css.map

@@ -46,7 +46,7 @@
                             <td class="column-checkbox">
                                 {% if filer_admin_context.pick_folder and item.file_type == 'Folder' %}
                                     <a class="insertlink insertlinkButton"
-                                        href="#" onclick="opener.dismissRelatedFolderLookupPopup(window, '{{ subfolder.pk|safe }}', '{{ subfolder.quoted_logical_path }}'); return false;" >
+                                        href="#" onclick="opener.dismissRelatedFolderLookupPopup(window, '{{ subfolder.pk|safe }}', '{{ subfolder.pretty_logical_path }}'); return false;" >
                                         <span class="fa fa-arrow-left filer-icon cms-icon-select"></span>
                                     </a>
                                 {% elif action_form and item.pk and not is_popup %}

filer/static/filer/js/addons/popup_handling.js

@@ -3,20 +3,22 @@
 {% spaceless %}
     <div class="filer-dropzone filer-dropzone-folder">
         <span class="filerFile">
+            <img src="{% static "filer/icons/folder.svg" %}" class="thumbnail_img{% if not object %} hidden{% endif %}"/>
             <span id="{{ span_id }}" style="margin-left: 15px;">
-                {% trans "Folder" %}:
-                {% if object %}
-                    {{ object.pretty_logical_path }}
-                {% else %}
-                    {% trans "none selected" %}
-                {% endif %}
+                <span class="description_text">
+                    {% if object %}
+                        {{ object.pretty_logical_path }}
+                    {% endif %}
+                </span>
             </span>
             <a href="{{ lookup_url }}" class="related-lookup{% if object %} hidden{% endif %}" id="{{ lookup_name }}" title="{% trans 'Lookup' %}">
-                {% trans "Add Folder" %}
+                <span class="fa fa-search cms-icon cms-icon-search"></span>&nbsp;
+                {% trans "Choose Folder" %}
             </a>
-
-            <img id="{{ clear_id }}" src="{% static 'filer/img/icon_deletelink.gif' %}" width="10" height="10" alt="{% trans 'Clear' %}" title="{% trans 'Clear' %}" class="filerClearer{% if not object %} hidden{% endif %}">
-            {{ hidden_input }}
+            <a class="filerClearer {% if not object %}hidden{% endif %}" id="{{ clear_id }}" title="{% translate 'Clear' %}" href="#">
+                <span class="fa fa-close filer-icon filer-icon-remove-selection"></span>
+            </a>
+            <div class="hidden">{{ hidden_input }}</div>
         </span>
     </div>
     <script type="text/javascript">
@@ -26,13 +28,13 @@
         (function ($) {
             var clearButton = $('#{{ clear_id }}');
             var input = $('#{{ id }}');
-            var folderName = $('#{{ descid }}');
+            var folderName = $('#{{ descid }} .description_text');
             var addFolderButton = $('#{{ lookup_name }}');
 
             clearButton.on('click', function () {
-                folderName.text('{% trans "Folder" %}: {% trans "none selected" %}');
+                folderName.text('');
                 input.removeAttr('value');
-
+                folderName.closest('.filerFile').find('img').addClass('hidden');
                 clearButton.addClass('hidden');
                 addFolderButton.removeClass('hidden');
             });