Merge branch 'master' of github.com:DataShades/ckanext-files

DataShades · Aug 29, 2024 · d87c833 · d87c833
2 parents a923c61 + 0718aa7
commit d87c833
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 23 deletions.
diff --git a/ckanext/file_upload_widget/assets/css/styles.css b/ckanext/file_upload_widget/assets/css/styles.css
diff --git a/ckanext/file_upload_widget/assets/js/file-upload-widget.js b/ckanext/file_upload_widget/assets/js/file-upload-widget.js
@@ -96,8 +96,6 @@ ckan.module("file-upload-widget", function ($, _) {
                 this.options.maxFiles = 9999;
             }
 
-            console.log(this.options);
-
             window.fuwProgressBars = window.fuwProgressBars || {};
             window.fuwProgressBars[this.options.instanceId] = {};
 
@@ -440,9 +438,7 @@ ckan.module("file-upload-widget", function ($, _) {
             if (
                 this._isFileNumLimitReached(
                     e,
-                    selectedFiles.length -
-                        (this.options.maxFiles -
-                            this._calculateSelectedFilesNum()),
+                    selectedFiles.length - (this.options.maxFiles - this._calculateSelectedFilesNum()),
                     `You can't select more files than the limit: ${this.options.maxFiles}.`
                 )
             ) {
@@ -577,7 +573,6 @@ ckan.module("file-upload-widget", function ($, _) {
         },
 
         _handleFile: function (file) {
-            console.log(file.type);
             this._addFileItem(
                 file.id,
                 file.name,
@@ -1409,6 +1404,10 @@ ckan.module("file-upload-widget", function ($, _) {
             selectedNum = null,
             message = null
         ) {
+            if (selectedNum < 0) {
+                return false;
+            }
+
             if (
                 selectedNum ||
                 this._calculateSelectedFilesNum() >= this.options.maxFiles

diff --git a/ckanext/file_upload_widget/templates/scheming/form_snippets/files_upload_widget.html b/ckanext/file_upload_widget/templates/scheming/form_snippets/files_upload_widget.html
@@ -1,26 +1,30 @@
 {% import 'macros/form.html' as form %}
-{% from "macros/form/attributes.html" import attributes %}
 
 {% asset "file_upload_widget/css" %}
 {% asset "file_upload_widget/js" %}
 
 
 {% set attrs = field.get('form_attrs', {}) %}
 
-<div class="form-group control-medium file-upload-widget" data-module="file-upload-widget" data-module-instance-id="{{ field.field_name }}" "{{ attributes(attrs) }}">
+<div class="form-group control-medium file-upload-widget" data-module="file-upload-widget" data-module-instance-id="{{ field.field_name }}" "{{ form.attributes(attrs) }}">
     <label class="form-label" for="{{ field.field_name }}">
         {% if field.required %}<span title="{{ _("This field is required") }}" class="control-required">*</span> {% endif %}
         {{ h.scheming_language_text(field.label) }}
     </label>
 
     <div class="controls">
-        <button type="button" class="btn btn-primary fuw-upload-btn" data-bs-toggle="modal" data-bs-target="#uploadWidget-{{ field.field_name }}">
+        <button
+            type="button"
+            class="btn btn-primary fuw-upload-btn"
+            data-bs-toggle="modal" data-bs-target="#uploadWidget-{{ field.field_name }}"
+            data-toggle="modal" data-target="#uploadWidget-{{ field.field_name }}"
+            >
             {{ _("Upload") }}
 
             <span class="fuw-uploaded-files-counter hidden">0</span>
         </button>
 
-        <input id="{{ 'field-' + field.field_name }}-file" type="file" name="{{ field.field_name }}-file" value="" placeholder="" style="display: none">
+        <input id="{{ 'field-' + field.field_name }}-file" type="file" placeholder="" style="display: none">
         <input id="{{ 'field-' + field.field_name }}" type="hidden" name="{{ field.field_name }}" value="{{ data[field.field_name] }}" placeholder="" style="display: none">
 
         {%- if field.help_text -%}
@@ -38,7 +42,7 @@
                 <div class="modal-header">
                     <i class="fa-solid fa-angles-left fuw-cancel-btn hidden"></i>
                     <button type="button" class="btn btn-default fuw-open-selected-btn hidden">{{ _("Selected files:") }} <span>0</span></button>
-                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" data-dismiss="modal" aria-label="Close"></button>
                 </div>
                 <div class="modal-body">
                     <!-- MAIN WINDOW -->
@@ -105,7 +109,7 @@
             <div class="modal-content fuw-selected-files hidden">
                 <div class="modal-header">
                     <i class="fa-solid fa-angles-left fuw-close-selected-btn"></i>
-                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" data-dismiss="modal" aria-label="Close"></button>
                 </div>
 
                 <div class="modal-body">

diff --git a/ckanext/file_upload_widget/theme/styles.scss b/ckanext/file_upload_widget/theme/styles.scss
@@ -36,6 +36,10 @@
 
     .fuw-url-input {
         width: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: end;
+        gap: 1rem;
     }
 
     .fuw-media-input {
@@ -78,6 +82,7 @@
                     align-items: center;
                     gap: 0.5rem;
                     width: 100%;
+                    margin-bottom: 0;
 
                     &:after {
                         display: none;
@@ -92,6 +97,9 @@
                         width: 30px;
                         height: 30px;
                         object-fit: contain;
+                        background: #e8d8d8;
+                        opacity: .5;
+                        border-radius: 5px;
                     }
 
                     // file icon
@@ -115,6 +123,8 @@
 
     .fuw-selected-files {
         position: absolute;
+        top: 0;
+        width: 100%;
 
         ul.fuw-selected-files--list {
             width: 100%;
@@ -129,6 +139,7 @@
                 border-bottom: 1px solid #eaeaea;
                 padding: 0.5rem 0;
                 position: relative;
+                font-size: 14px;
 
                 .fuw-selected-files--file-preview {
                     height: 50px;
@@ -159,14 +170,14 @@
                     .fuw-selected-files--file-name {
                         -webkit-font-smoothing: antialiased;
                         word-wrap: anywhere;
-                        font-size: 1rem;
+                        font-size: 1em;
                         font-weight: bold;
                         line-height: 1.3;
                         word-break: break-all;
                     }
 
                     .fuw-selected-files--file-size {
-                        font-size: 0.8rem;
+                        font-size: 0.8em;
                         color: #757575;
                         font-weight: 400;
                         line-height: 1;
@@ -176,12 +187,12 @@
                 .fuw-selected-files--file-control {
                     display: flex;
                     align-items: center;
+                    gap: 1rem;
+                    margin-left: auto;
 
                     .file-tile--file-remove,
                     .file-tile--file-upload {
                         cursor: pointer;
-                        position: absolute;
-                        right: 0;
                         background: black;
                         color: white;
                         border: 1px solid black;
@@ -193,11 +204,6 @@
                         justify-content: center;
                     }
                 }
-
-
-                .file-tile--file-upload {
-                    right: 30px;
-                }
             }
 
             .fuw-selected-files--progress {
@@ -220,6 +226,24 @@
     .modal {
         .modal-header {
             gap: 0.5rem;
+            display: flex;
+            align-items: center;
+
+            .btn-close {
+                padding: 0;
+                margin: 0;
+                margin-left: auto;
+
+                box-sizing: content-box;
+                width: 1em;
+                height: 1em;
+                padding: 0.25em 0.25em;
+                color: #000;
+                background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center / 1em auto no-repeat;
+                border: 0;
+                border-radius: 0.25rem;
+                opacity: 0.5;
+            }
         }
 
         .modal-body {
@@ -249,7 +273,20 @@
             font-weight: bold;
             width: 22px;
             height: 22px;
-            display: inline-block;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+    }
+
+    @media (min-width: 576px) {
+        .modal-dialog {
+          max-width: 500px;
+          margin: 1.75rem auto;
+        }
+
+        .modal-dialog-centered {
+          min-height: calc(100% - 3.5rem);
         }
     }
 }