Fix hidden image preview and overwrite prompt, add styling and file name

laposa · Mar 4, 2024 · c360272 · c360272
1 parent f74e92d
commit c360272
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 16 deletions.
diff --git a/share/css/backoffice.css b/share/css/backoffice.css
@@ -1036,7 +1036,10 @@ div.file-list-icon div.item a.image {display: block; max-height: 120px; overflow
 #server-browser-file-list div.server-browser div[id^="file-"] > div.file_delete::before {content:'\f00d'; font-family: 'onyx'; font-size: 20px; color: #cc0000;}
 #server-browser-file-list div.server-browser div[id^="file-"] > div.file_delete::after {content:'Deleted'; font-size: 10px; color: #cc0000; text-transform: uppercase; }
 
-
+#server-browser-file-list .file-uploads {display: flex;justify-content: center;flex-wrap: wrap;gap: 10px; margin-top: 20px;overflow-y: auto;}
+#server-browser-file-list .file-upload-preview {width: 200px; height: 200px; position: relative; background-color: white;}
+#server-browser-file-list .file-upload-preview img {position: absolute; height: 100%; width: 100%; object-fit: contain; top: 0; left: 0;}
+#server-browser-file-list .file-upload-preview .file-overlay {position: absolute; width: 100%; z-index: 100; bottom: 0; padding: 10px 0; background-color: rgba(0,0,0,0.5);}
 
 
 /**

diff --git a/templates/bo/component/server_browser_file_list.html b/templates/bo/component/server_browser_file_list.html
@@ -60,6 +60,7 @@ <h2>Drop files here or click to upload.</h2>
         <div class="wrapper">
             <p>Please wait, uploading <span class="num">0</span> file(s)...</p>
             <progress value="0" max="100">0%</progress>
+            <div class="file-uploads"></div>
         </div>
     </div>
 
@@ -70,7 +71,7 @@ <h2>Drop files here or click to upload.</h2>
             <div id="file-{ITEM.file_path_encoded_relative}">
                 <!-- BEGIN: thumbnail --><img src="/thumbnail/200/{BASE}{FOLDER}{ITEM.name}" alt="{ITEM.name}" /><!-- END: thumbnail -->
                 <div class="overlay">
-                    <!--<a href="/download/{BASE}{FOLDER}{ITEM.name}" title="Download {ITEM.name} ({ITEM.size})" style="display: block;">{ITEM.name|str_replace('_', ' ', %s)}</a>-->
+                    <p style="display: block;">{ITEM.name|str_replace('_', ' ', %s)}</p>
                     <div class="file-info">
                         <a class="view" title="View {ITEM.name} ({ITEM.size})" href="/view/{BASE}{FOLDER}{ITEM.name}" target="_blank"><span>View</span></a>
                         <a class="download" title="Download {ITEM.name} ({ITEM.size})" href="/download/{BASE}{FOLDER}{ITEM.name}"><span>Download</span></a>
@@ -149,25 +150,23 @@ <h2>Drop files here or click to upload.</h2>
     function allFilesUploaded() {
 
         makeAjaxRequest("#server-browser-file-list", "/request/bo/component/server_browser_file_list~open={GET.open}:type={GET.type}:relation={GET.relation}:node_id={GET.node_id}~");
-        growlMessage("Uploaded completed.");
+        growlMessage("Upload completed.");
 
     }
 
     var template =
-        '<tr id="file-id">' +
-            '<td><img/></td>' +
-            '<td>' +
+        '<div class="file-upload-preview">' +
+            '<img/>' +
+            '<div class="file-overlay">' +
                 '<span class="title"></span>&nbsp;<small class="speed"></small><br />' +
                 '<progress value="0" max="100">0%</progress>' +
                 '<div class="overwrite" style="display: none;">' +
-                'File already exists. Do you want to overwrite it?<br/>' +
-                '<button class="overwrite">Yes</button>' +
-                '<button class="keep">No</button>' +
+                    'File already exists. Do you want to overwrite it?<br/>' +
+                    '<button class="overwrite">Yes</button>' +
+                    '<button class="keep">No</button>' +
                 '</div>' +
-            '</td>' +
-            '<td>' +
-            '</td>' +
-        '</tr>';
+            '</div>' +
+        '</div>';
 
     function createImage(file) {
 
@@ -176,13 +175,11 @@ <h2>Drop files here or click to upload.</h2>
 
         var reader = new FileReader();
 
-        image.css('width', 50);
-        image.css('height', 50);
         $(".title", preview).text(file.name);
 
         reader.onload = function(e) { image.attr('src', e.target.result); };
         reader.readAsDataURL(file);
-        $('table.server-browser tbody').prepend(preview);
+        $('.progress-total .file-uploads').prepend(preview);
         $.data(file, preview);
     }