Merge pull request #4113 from owncloud/delete-fix

Delete icon fix

apps/files/css/files.css

@@ -147,14 +147,14 @@ a.action>img { max-height:16px; max-width:16px; vertical-align:text-bottom; }
 	display:none;
 }
 #fileList tr:hover a.action, #fileList a.action.permanent {
-	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=.5)";
-	filter: alpha(opacity=.5);
+	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
+	filter: alpha(opacity=50);
 	opacity: .5;
 	display:inline;
 }
 #fileList tr:hover a.action:hover {
-	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=1)";
-	filter: alpha(opacity=1);
+	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
+	filter: alpha(opacity=100);
 	opacity: 1;
 	display:inline;
 }

apps/files/js/fileactions.js

@@ -123,14 +123,11 @@ var FileActions = {
 				img = img(file);
 			}
 			if (typeof trashBinApp !== 'undefined' && trashBinApp) {
-				var html = '<a href="#" original-title="' + t('files', 'Delete permanently') + '" class="action delete" />';
+				var html = '<a href="#" original-title="' + t('files', 'Delete permanently') + '" class="action delete delete-icon" />';
 			} else {
-				var html = '<a href="#" original-title="' + t('files', 'Delete') + '" class="action delete" />';
+				var html = '<a href="#" class="action delete delete-icon" />';
 			}
 			var element = $(html);
-			if (img) {
-				element.append($('<img class ="svg" src="' + img + '"/>'));
-			}
 			element.data('action', actions['Delete']);
 			element.on('click', {a: null, elem: parent, actionFunc: actions['Delete']}, actionHandler);
 			parent.parent().children().last().append(element);

apps/files/js/filelist.js

@@ -15,7 +15,7 @@ var FileList={
 		// filename td
 		td = $('<td></td>').attr({
 			"class": "filename",
-			"style": 'background-image:url('+iconurl+')'
+			"style": 'background-image:url('+iconurl+'); background-size: 16px;'
 		});
 		td.append('<input type="checkbox" />');
 		var link_elem = $('<a></a>').attr({
@@ -371,9 +371,7 @@ var FileList={
 		}
 		for (var i=0; i<files.length; i++) {
 			var deleteAction = $('tr').filterAttr('data-file',files[i]).children("td.date").children(".action.delete");
-			var oldHTML = deleteAction.html();
-			var newHTML = '<img class="move2trash" data-action="Delete" title="'+t('files', 'perform delete operation')+'" src="'+ OC.imagePath('core', 'loading.gif') +'"></a>';
-			deleteAction.html(newHTML);
+			deleteAction.removeClass('delete-icon').addClass('progress-icon');
 		}
 		// Finish any existing actions
 		if (FileList.lastAction) {
@@ -395,8 +393,8 @@ var FileList={
 						checkTrashStatus();
 					} else {
 						$.each(files,function(index,file) {
-							var deleteAction = $('tr').filterAttr('data-file',file).children("td.date").children(".move2trash");
-							deleteAction.html(oldHTML);
+							var deleteAction = $('tr').filterAttr('data-file',files[i]).children("td.date").children(".action.delete");
+							deleteAction.removeClass('progress-icon').addClass('delete-icon');
 						});
 					}
 				});

core/css/styles.css

@@ -833,9 +833,25 @@ div.crumb:active {
 }
 
 /* icons */
+.folder-icon, .delete-icon, .edit-icon, .progress-icon {
+	background-repeat: no-repeat;
+	background-position: center;
+}
 .folder-icon { background-image: url('../img/places/folder.svg'); }
 .delete-icon { background-image: url('../img/actions/delete.svg'); }
+.delete-icon:hover, .delete-icon:focus {
+	background-image: url('../img/actions/delete-hover.svg');
+}
 .edit-icon { background-image: url('../img/actions/rename.svg'); }
+.progress-icon {
+	background-image: url('../img/loading.gif');
+	background-size: 16px;
+	/* force show the loading icon, not only on hover */
+	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
+	filter:alpha(opacity=100);
+	opacity: 1 !important;
+	display: inline !important;
+}
 
 /* buttons */
 button.loading {
@@ -855,6 +871,10 @@ button.loading {
 ::-moz-focus-inner {
 	border: 0;
 }
+.lte8 .delete-icon { background-image: url('../img/actions/delete.png'); }
+.lte8 .delete-icon:hover, .delete-icon:focus {
+	background-image: url('../img/actions/delete-hover.png');
+}
 
 /* IE8 needs background to be set to same color to make transparency look good. */
 .lte9 #body-login form input[type="text"] {

core/img/actions/delete-hover.svg

@@ -0,0 +1,12 @@
+<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="16" width="16" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/">
+ <metadata>
+  <rdf:RDF>
+   <cc:Work rdf:about="">
+    <dc:format>image/svg+xml</dc:format>
+    <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
+    <dc:title/>
+   </cc:Work>
+  </rdf:RDF>
+ </metadata>
+ <path fill="#d40000" d="M8,1c-3.866,0-7,3.134-7,7s3.134,7,7,7,7-3.134,7-7-3.134-7-7-7zm-2.8438,2.75l2.8438,2.8438,2.844-2.8438,1.406,1.4062-2.8438,2.8438,2.8438,2.844-1.406,1.406-2.844-2.8438-2.8438,2.8438-1.4062-1.406,2.8438-2.844-2.8438-2.8438,1.4062-1.4062z"/>
+</svg>

core/img/actions/delete.svg

@@ -1,12 +1,6 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="16" width="16" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/">
- <metadata>
-  <rdf:RDF>
-   <cc:Work rdf:about="">
-    <dc:format>image/svg+xml</dc:format>
-    <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
-    <dc:title/>
-   </cc:Work>
-  </rdf:RDF>
- </metadata>
- <path fill="#d40000" d="M8,1c-3.866,0-7,3.134-7,7s3.134,7,7,7,7-3.134,7-7-3.134-7-7-7zm-2.8438,2.75l2.8438,2.8438,2.844-2.8438,1.406,1.4062-2.8438,2.8438,2.8438,2.844-1.406,1.406-2.844-2.8438-2.8438,2.8438-1.4062-1.406,2.8438-2.844-2.8438-2.8438,1.4062-1.4062z"/>
+ <g transform="translate(0 -1036.4)">
+  <path d="m3 1040.4 1-1 4 3 4-3 1 1-3 4 3 4-1 1-4-3-4 3-1-1 3-4z"/>
+ </g>
 </svg>

core/js/js.js

@@ -762,7 +762,6 @@ $(document).ready(function(){
 	$('.password .action').tipsy({gravity:'se', fade:true, live:true});
 	$('#upload').tipsy({gravity:'w', fade:true});
 	$('.selectedActions a').tipsy({gravity:'s', fade:true, live:true});
-	$('a.delete').tipsy({gravity: 'e', fade:true, live:true});
 	$('a.action').tipsy({gravity:'s', fade:true, live:true});
 	$('td .modified').tipsy({gravity:'s', fade:true, live:true});