made trash icon be red/Delete or green/Restore for GUI, plumbed this through modified DelDBox() and hooked it all so that you can either click the button, or right-click context menu and you will get the right del/restore dbox and that routes through via ajax to the right URL and actually deletes/restores. Also tweaked right-click to start context menu so that it is also a way to alter highlighting -- this honours ctrl and shift too

templates/files.html

@@ -17,7 +17,6 @@
                           <i class="fas fa-database"></i>
                           {% set tmp_path=cwd | replace( "static/Storage", "" ) + "/" %}
                         {% else %}
-                          <i class="fas fa-trash-alt"></i>
                           {% set tmp_path=cwd | replace( "static/Bin", "" ) + "/" %}
                         {% endif %}
                         {{tmp_path}}</span>
@@ -47,7 +46,14 @@
                 </div>
                 <div class="col my-auto">
                     <button id="move" name="move" class="sm-txt btn btn-primary ml-4" onClick="MoveDBox(); return false;"><i class="fas fa-folder-plus"></i></button>
-                    <button id="del" name="del" class="sm-txt btn btn-danger mx-1" onClick="DelDBox(); return false;"> <i class="far fa-trash-alt"></i> </button>
+                    {% if "files_rbp" in request.url %}
+                        <button id="del" name="del" class="sm-txt btn btn-success mx-1" onClick="DelDBox('Restore'); return false;">
+                        <i class="fas fa-trash-restore-alt"></i>
+                    {% else %}
+                        <button id="del" name="del" class="sm-txt btn btn-danger mx-1" onClick="DelDBox('Delete'); return false;">
+                        <i class="fas fa-trash-alt"></i>
+                    {% endif %}
+                    </button>
                 </div>
                 <div class="input-group col-lg-3 justify-content-end">
                     <div class="input-group-prepend">
@@ -224,22 +230,26 @@ function GetSelnAsData()
     return to_del
 }
 
-function DelDBox()
+function DelDBox(del_or_undel)
 {
+    console.log(del_or_undel)
     to_del = GetSelnAsData()
-    console.log(to_del)
+    $('#dbox-title').html(del_or_undel+' Selected File(s)')
-    $('#dbox-title').html('Delete Selected File(s)')  
+    div ='<div class="row col-lg-12"><p class="col">' + del_or_undel + ' the following files?</p></div>'
-    div =`
-        <div class="row col-lg-12">
-        <p class="col">Delete the following files?</p>
-        </div>`
     div+=GetSelnAsDiv()
-    div+=`
+    div+=`<div class="row col-lg-12">
-        <div class="row col-lg-12">
             <button onClick="$('#dbox').modal('hide')" class="btn btn-outline-secondary col-lg-2">Cancel</button>
-            <button onClick="$('#dbox').modal('hide'); $.ajax({
+    `
-                                                type: 'POST', url: '/delete_files', data: to_del,
+    div+=`
-                                                success: function(data){ console.log('Delete File(s) succeeded - TODO: need a FE msg' ); $('#status').show(); $('#status').html('TEST'); return false; } })" class="btn btn-outline-danger col-lg-2">Ok</button>
+    <button onClick="$('#dbox').modal('hide'); $.ajax({ type: 'POST', url:
+    `
+    if( del_or_undel == "Delete" )
+        div+="'/delete_files', "
+    else
+        div+="'/undelete_files', "
+    div+=`
+        data: to_del,
+        success: function(data){ console.log('Delete File(s) succeeded - TODO: need a FE msg' ); return false; } })" class="btn btn-outline-danger col-lg-2">Ok</button>
         </div>
     `
     $('#dbox-content').html(div)
@@ -295,6 +305,8 @@ function ChangeSize(clicked_button,sz)
 // whether you click after highlight or before
 function DoSel(e, el)
 {
+    console.log(e)
+    console.log(el)
     if( e.ctrlKey )
     {
         $(el).toggleClass('highlight')
@@ -321,6 +333,7 @@ $(document).on('click', function(e) { $('.highlight').removeClass('highlight') }
 $.contextMenu({
     selector: '.figure',
     build: function($triggerElement, e){
+        DoSel(e, e.currentTarget )
         if (e.currentTarget.getAttribute('path_type') == 'Bin' ) {
             item_list = {
                 details: { name: "Details..." },
@@ -343,9 +356,10 @@ $.contextMenu({
             callback: function( key, options) {
         console.log( $(this).attr('id') )
         console.log( $(this).attr('path_type') )
-                if( key == "view" ) {
+                if( key == "view" ) { document.location.href = $(this).find('a').attr('href'); }
-                    document.location.href = $(this).find('a').attr('href');
+                if( key == "move" ) { MoveDBox() }
-                }
+                if( key == "del" ) { DelDBox('Delete') }
+                if( key == "undel" ) { DelDBox('Restore') }
             },
             items: item_list
         };