confirmation dialogs for deletions

files/css/files.css

@@ -51,7 +51,7 @@ table td.delete { background-image:url('../img/delete.png'); }
 #fileList tr input[type=checkbox]:checked, #fileList tr:hover input[type=checkbox] { display:inline; }
 #fileList tr.selected td.filename a, #fileList tr:hover td.filename a { background-image:none !important }
 #select_all { float:left; margin:0.2em; margin-left:0.6em; }
-#uploadsize-message { display:none; }
+#uploadsize-message,#delete-confirm { display:none; }
 .selectedActions a, a.file_action { float:right; display:inline; margin:0 .5em; padding:.3em .3em 0 .3em !important; }
 .selectedActions { display:none; }
 .selectedActions a:hover, a.file_action:hover { background:#fff; -moz-box-shadow:0 0 10px #fff; -webkit-box-shadow:0 0 10px #fff; box-shadow:0 0 10px #fff; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; }

files/js/fileactions.js

@@ -114,13 +114,27 @@ FileActions.register('all','Download',OC.imagePath('core','actions/download'),fu
 });
 
 FileActions.register('all','Delete',OC.imagePath('core','actions/delete'),function(filename){
-	$.ajax({
-		url: 'ajax/delete.php',
-		data: "dir="+encodeURIComponent($('#dir').val())+"&file="+encodeURIComponent(filename),
-		complete: function(data){
-			boolOperationFinished(data, function(){
-				FileList.remove(filename);
-			});
+	$( "#delete-confirm" ).dialog({
+		resizable: false,
+		height:200,
+		title:"Delete "+filename,
+		modal: true,
+		buttons: {
+			"Delete": function() {
+				$( this ).dialog( "close" );
+				$.ajax({
+					url: 'ajax/delete.php',
+					data: "dir="+encodeURIComponent($('#dir').val())+"&file="+encodeURIComponent(filename),
+					complete: function(data){
+						boolOperationFinished(data, function(){
+							FileList.remove(filename);
+						});
+					}
+				});
+			},
+			Cancel: function() {
+				$( this ).dialog( "close" );
+			}
 		}
 	});
 });

files/js/files.js

@@ -100,19 +100,40 @@ $(document).ready(function() {
 	});
 	
 	$('.delete').click(function(event) {
-		var files=getSelectedFiles('name').join(';');
-		
-		$.ajax({
-			url: 'ajax/delete.php',
-			data: "dir="+$('#dir').val()+"&files="+encodeURIComponent(files),
-			complete: function(data){
-				boolOperationFinished(data, function(){
-					var files=getSelectedFiles('name');
-					for(var i=0;i<files.length;i++){
-						FileList.remove(files[i]);
-					}
-					procesSelection();
-				});
+		var fileNames=getSelectedFiles('name');
+		var files=fileNames.join(';');
+		var lastFileName=fileNames.pop();
+		if(fileNames.length>0){
+			fileNames=fileNames.join(', ')+' and '+lastFileName;
+		}else{
+			fileNames=lastFileName;
+		}
+
+		$( "#delete-confirm" ).dialog({
+			resizable: false,
+			height:200,
+			modal: true,
+			title:"Delete "+fileNames,
+			buttons: {
+				"Delete": function() {
+					$( this ).dialog( "close" );
+					$.ajax({
+						url: 'ajax/delete.php',
+						data: "dir="+$('#dir').val()+"&files="+encodeURIComponent(files),
+						complete: function(data){
+							boolOperationFinished(data, function(){
+								var files=getSelectedFiles('name');
+							for(var i=0;i<files.length;i++){
+								FileList.remove(files[i]);
+							}
+							procesSelection();
+							});
+						}
+					});
+				},
+				Cancel: function() {
+					$( this ).dialog( "close" );
+				}
 			}
 		});
 		

files/templates/index.php

@@ -48,4 +48,8 @@
 	</p>
 </div>
 
+<div id="delete-confirm" title="">
+	<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>These items will be permanently deleted and cannot be recovered. Are you sure?</p>
+</div>
+
 <span id="file_menu"/>