feat: Styling update

.github/workflows/frontend.yml

@@ -7,7 +7,7 @@ jobs:
     runs-on: ubuntu-20.04
     strategy:
       matrix:
-        node-version: [14.15.x]
+        node-version: [16.20.x]
 
     steps:
     - uses: actions/checkout@v2

CHANGELOG.rst

@@ -2,7 +2,7 @@
 CHANGELOG
 =========
 
-unreleased
+3.0.0rc1
 ==================
 
 * Only show uncategorized files to owner or superuser if permissions are active
@@ -12,6 +12,7 @@ unreleased
 * Add Django 4.2 support
 * Add thumbnail view for faster visual management of image libraries
 * Fix File.objects.only() query required for deleting user who own files.
+* Fix several css quirks
 
 2.2.5 (2023-06-11)
 ==================

docs/upgrading.rst

@@ -7,6 +7,20 @@ Usually upgrade procedure is straightforward: update the package and run migrati
 require special attention from the developer and here we provide upgrade instructions for such cases.
 
 
+from 2.x to 3.0
+---------------
+
+The dependency on django-mptt is dropped as of django-filer 3.0.
+
+This implies that three fields are removed from the `Folder` model:
+* `level`
+* `lft`
+* `rght`
+* `tree_id`
+
+Those fields were used by django-mptt for performance optimization.
+
+
 from 0.9.1 to 0.9.2
 -------------------
 
@@ -108,4 +122,4 @@ Then run this snippet in the django shell::
         f.save()
         sys.stdout.write(u'done\n')
 
-Double access modification is needed to enabled automatic file move.
+Double access modification is needed to enabled automatic file move.

filer/__init__.py

@@ -13,4 +13,6 @@
  8. Publish the release and it will automatically release to pypi
 """
 
-__version__ = '2.3rc1'
+__version__ = '3.0.0rc1'
+
+default_app_config = 'filer.apps.FilerConfig'

filer/admin/fileadmin.py

@@ -26,7 +26,7 @@ class FileAdmin(PrimitivePermissionAwareModelAdmin):
     list_display = ('label',)
     list_per_page = 10
     search_fields = ['name', 'original_filename', 'sha1', 'description']
-    raw_id_fields = ('owner',)
+    autocomplete_fields = ('owner',)
     readonly_fields = ('sha1', 'display_canonical')
 
     form = FileAdminChangeFrom

filer/fields/file.py

@@ -14,6 +14,7 @@
 
 from .. import settings as filer_settings
 from ..models import File
+from ..settings import ICON_CSS_LIB
 from ..utils.compatibility import truncate_words
 from ..utils.model_label import get_model_label
 
@@ -88,9 +89,9 @@ def obj_for_value(self, value):
     class Media:
         extra = '' if settings.DEBUG else '.min'
         css = {
-            'all': [
+            'all': (
                 'filer/css/admin_filer.css',
-            ]
+            ) + ICON_CSS_LIB,
         }
         js = (
             'admin/js/vendor/jquery/jquery%s.js' % extra,

filer/management/commands/import_files.py

@@ -29,7 +29,7 @@ def import_file(self, file_obj, folder):
             iext = os.path.splitext(file_obj.name)[1].lower()
         except:  # noqa
             iext = ''
-        if iext in ['.jpg', '.jpeg', '.png', '.gif']:
+        if iext in ['.jpg', '.jpeg', '.png', '.gif', '.webp']:
             obj, created = Image.objects.get_or_create(
                 original_filename=file_obj.name,
                 file=file_obj,

filer/migrations/0015_alter_file_owner_alter_file_polymorphic_ctype_and_more.py

@@ -1,4 +1,4 @@
-# Generated by Django 4.0.3 on 2022-04-12 12:20
+# Generated by Django 4.1.9 on 2023-06-15 20:03
 
 import django.db.models.deletion
 from django.conf import settings

filer/models/abstract.py

@@ -77,7 +77,7 @@ class Meta:
     @classmethod
     def matches_file_type(cls, iname, ifile, mime_type):
         # source: https://www.freeformatter.com/mime-types-list.html
-        image_subtypes = ['gif', 'jpeg', 'png', 'x-png', 'svg+xml']
+        image_subtypes = ['gif', 'jpeg', 'png', 'x-png', 'svg+xml', 'webp']
         maintype, subtype = mime_type.split('/')
         return maintype == 'image' and subtype in image_subtypes
 

filer/private/sass/admin_filer.cms.icons.scss

@@ -0,0 +1,3 @@
+// @import "components/iconography";
+
+@import "components/iconography";

filer/private/sass/admin_filer.fa.icons.scss

@@ -0,0 +1,3 @@
+// @import "components/iconography";
+
+@import "libs/font-awesome.min";

filer/private/sass/admin_filer.scss

@@ -9,8 +9,6 @@
 
 //##############################################################################
 // IMPORT COMPONENTS
-@import "components/iconography";
-@import "components/icons";
 @import "components/base";
 @import "components/image-info";
 @import "components/action-list";
@@ -22,5 +20,4 @@
 
 //##############################################################################
 // IMPORT LIBS
-@import "libs/font-awesome.min";
 @import "libs/dropzone";

filer/private/sass/components/_base.scss

@@ -36,7 +36,11 @@ body {
     // make sure that paginator has correct font size and color #666
     font-size: $font-size-small;
     color: $gray-light !important;
-    padding: 10px 15px;
+    padding-left: 10px;
+    padding-right: 20px;
+    padding-top: 15px;
+    padding-bottom: 15px;
+    box-sizing: border-box;
     background: $white;
     span {
         // make sure that paginator has correct font size and color #666

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

@@ -84,16 +84,15 @@ form .form-row {
                 }
             }
             .dz-remove {
-                @include icon(trash-o);
+                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-trash' viewBox='0 0 16 16'%3E%3Cpath d='M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5Zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5Zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6Z'/%3E%3Cpath d='M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1ZM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118ZM2.5 3h11V2h-11v1Z'/%3E%3C/svg%3E%0A");
+                background-size:contain;
                 display: inline-block;
                 position: absolute;
                 top: 7px;
                 right: 25px;
                 font: 0/0 a;
-                &:before {
-                    color: $gray;
-                    font-size: 18px;
-                }
+                width: 18px;
+                height: 18px;
             }
             .dz-error-message {
                 top: 65px;
@@ -114,16 +113,18 @@ form .form-row {
                 }
             }
             .dz-success-mark {
-                @include icon(check);
-                &:before {
-                    color: $color-success;
-                }
+                // Check icon
+                width: 16px;
+                height: 16px;
+                background-image: url("data:image/svg+xml,%3Csvg width='13' height='13' viewBox='0 0 1792 1792' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%2370bf2b' d='M1412 734q0-28-18-46l-91-90q-19-19-45-19t-45 19l-408 407-226-226q-19-19-45-19t-45 19l-91 90q-18 18-18 46 0 27 18 45l362 362q19 19 45 19 27 0 46-19l543-543q18-18 18-45zm252 162q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z'/%3E%3C/svg%3E%0A");
+                background-size: contain;
             }
             .dz-error-mark {
-                @include icon(remove);
-                &:before {
-                    color: $color-danger;
-                }
+                // Remove icon
+                background-image: url("data:image/svg+xml,%3Csvg width='13' height='13' viewBox='0 0 1792 1792' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23dd4646' d='M1277 1122q0-26-19-45l-181-181 181-181q19-19 19-45 0-27-19-46l-90-90q-19-19-46-19-26 0-45 19l-181 181-181-181q-19-19-45-19-27 0-46 19l-90 90q-19 19-19 46 0 26 19 45l181 181-181 181q-19 19-19 45 0 27 19 46l90 90q19 19 46 19 26 0 45-19l181-181 181 181q19 19 45 19 27 0 46-19l90-90q19-19 19-46zm387-226q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z'/%3E%3C/svg%3E%0A");
+                width: 16px;
+                height: 16px;
+                background-size: contain;
             }
             &.dz-image-preview,
             &.dz-file-preview {
@@ -174,10 +175,10 @@ form .form-row {
             margin-left: 10px;
             text-align: center !important;
             cursor: pointer;
-            .fa {
+            .cms-icon {
                 color: $white;
                 font-size: 17px;
-                margin: 0 10px 0 0 !important;
+                margin: 0 10px 0 0;
                 vertical-align: middle;
             }
             &:before {
@@ -208,7 +209,7 @@ form .form-row {
                     text-align: center;
                     line-height: 24px;
                 }
-                .fa {
+                .cms-icon {
                     color: $btn-default-color;
                     margin-right: 0 !important;
                 }
@@ -226,6 +227,12 @@ form .form-row {
                 }
             }
         }
+        // makes sure that filer clear button has correct size #669
+        .filerClearer {
+            width: 36px !important;
+            height: 36px !important;
+            color: $color-danger;
+        }
         .filerFile {
             position: absolute;
             top: 9px;
@@ -241,6 +248,8 @@ form .form-row {
                 white-space: nowrap;
                 text-overflow: ellipsis;
                 width: calc(100% - 260px);
+                height: 80px;
+                line-height: 80px;
             }
             // required for django CMS <= 3.1 #673
             img {
@@ -267,7 +276,6 @@ form .form-row {
                 display: inline-block;
                 color: $gray;
                 font-weight: normal;
-                margin-top: 32px;
                 margin-bottom: 6px;
                 text-align: left;
                 &:empty + .related-lookup {
@@ -276,16 +284,17 @@ form .form-row {
                 }
             }
             // required for django CMS <= 3.1 #673
-            .filerClearer {
+            a.filerClearer {
                 @include button-variant($btn-default-color, $btn-default-bgcolor, $btn-default-border, true);
                 float: right;
-                padding: 12px;
+                padding: 5px 0  !important;
                 margin: 24px 0 0 10px;
                 width: 36px;
                 height: 36px;
+                text-align: center;
                 cursor: pointer;
-                &:focus {
-                    background-color: $white;
+                span:before {
+                    color: $color-danger !important;
                 }
                 span {
                     text-align: center;
@@ -313,7 +322,6 @@ form .form-row {
                             text-overflow: ellipsis;
                             width: calc(100% - 250px);
                             overflow: hidden;
-                            height: 20px;
                         }
                     }
                     >span:not(.choose-file):not(.replace-file):not(.edit-file), .dz-name {
@@ -358,8 +366,8 @@ form .form-row {
         margin-right: 10px;
         border: solid 1px $gray-lighter;
         border-radius: 3px;
-        background: $white url("../icons/file-unknown.svg");
-        background-size: cover;
+        background: $white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath fill='%232980b9' d='M5 2c-1.105 0-2 .9-2 2v18c0 1.1.895 2 2 2h14c1.105 0 2-.9 2-2V8l-6-6z'/%3E%3Cpath fill='%233498db' d='M5 1c-1.105 0-2 .9-2 2v18c0 1.1.895 2 2 2h14c1.105 0 2-.9 2-2V7l-6-6z'/%3E%3Cpath fill='%232980b9' d='m21 7-6-6v4c0 1.1.895 2 2 2z'/%3E%3C/svg%3E");
+        background-size: contain;
         img {
             background: $white;
             &[src=""],