Merge pull request #11234 from owncloud/fix-icon-classes

Fix icon classes, disappeared delete icon

apps/files/css/files.css

@@ -393,6 +393,15 @@ table td.filename .uploadtext {
 	font-size: 11px;
 }
 
+
+/* force show the loading icon, not only on hover */
+#fileList .icon-loading-small {
+	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
+	filter:alpha(opacity=100);
+	opacity: 1 !important;
+	display: inline !important;
+}
+
 #fileList img.move2trash { display:inline; margin:-8px 0; padding:16px 8px 16px 8px !important; float:right; }
 #fileList a.action.delete {
 	position: absolute;

apps/files/js/fileactions.js

@@ -304,7 +304,7 @@
 				if (img.call) {
 					img = img(file);
 				}
-				html = '<a href="#" original-title="' + escapeHTML(deleteTitle) + '" class="action delete delete-icon" />';
+				html = '<a href="#" original-title="' + escapeHTML(deleteTitle) + '" class="action delete icon-delete" />';
 				var element = $(html);
 				element.data('action', actions['Delete']);
 				element.on('click', {a: null, elem: parent, actionFunc: actions['Delete'].action}, actionHandler);

apps/files/js/filelist.js

@@ -1427,7 +1427,7 @@
 			if (files) {
 				for (var i=0; i<files.length; i++) {
 					var deleteAction = this.findFileEl(files[i]).children("td.date").children(".action.delete");
-					deleteAction.removeClass('delete-icon').addClass('progress-icon');
+					deleteAction.removeClass('icon-delete').addClass('icon-loading-small');
 				}
 			}
 			// Finish any existing actions
@@ -1445,7 +1445,7 @@
 				// no files passed, delete all in current dir
 				params.allfiles = true;
 				// show spinner for all files
-				this.$fileList.find('tr>td.date .action.delete').removeClass('delete-icon').addClass('progress-icon');
+				this.$fileList.find('tr>td.date .action.delete').removeClass('icon-delete').addClass('icon-loading-small');
 			}
 
 			$.post(OC.filePath('files', 'ajax', 'delete.php'),
@@ -1489,7 +1489,7 @@
 							else {
 								$.each(files,function(index,file) {
 									var deleteAction = self.findFileEl(file).find('.action.delete');
-									deleteAction.removeClass('progress-icon').addClass('delete-icon');
+									deleteAction.removeClass('icon-loading-small').addClass('icon-delete');
 								});
 							}
 						}

apps/files/tests/js/filelistSpec.js

@@ -421,15 +421,15 @@ describe('OCA.Files.FileList tests', function() {
 			fileList.setFiles(testFiles);
 			doDelete();
 
-			expect(fileList.findFileEl('One.txt').find('.progress-icon:not(.delete-icon)').length).toEqual(1);
+			expect(fileList.findFileEl('One.txt').find('.icon-loading-small:not(.icon-delete)').length).toEqual(1);
-			expect(fileList.findFileEl('Three.pdf').find('.delete-icon:not(.progress-icon)').length).toEqual(1);
+			expect(fileList.findFileEl('Three.pdf').find('.icon-delete:not(.icon-loading-small)').length).toEqual(1);
 		});
 		it('shows spinner on all files when deleting all', function() {
 			fileList.setFiles(testFiles);
 
 			fileList.do_delete();
 
-			expect(fileList.$fileList.find('tr .progress-icon:not(.delete-icon)').length).toEqual(4);
+			expect(fileList.$fileList.find('tr .icon-loading-small:not(.icon-delete)').length).toEqual(4);
 		});
 		it('updates summary when deleting last file', function() {
 			var $summary;

apps/files_trashbin/js/app.js

@@ -41,7 +41,7 @@ OCA.Trashbin.App = {
 			var fileList = context.fileList;
 			var tr = fileList.findFileEl(filename);
 			var deleteAction = tr.children("td.date").children(".action.delete");
-			deleteAction.removeClass('delete-icon').addClass('progress-icon');
+			deleteAction.removeClass('icon-delete').addClass('icon-loading-small');
 			fileList.disableActions();
 			$.post(OC.filePath('files_trashbin', 'ajax', 'undelete.php'), {
 					files: JSON.stringify([filename]),
@@ -58,7 +58,7 @@ OCA.Trashbin.App = {
 			$('.tipsy').remove();
 			var tr = fileList.findFileEl(filename);
 			var deleteAction = tr.children("td.date").children(".action.delete");
-			deleteAction.removeClass('delete-icon').addClass('progress-icon');
+			deleteAction.removeClass('icon-delete').addClass('icon-loading-small');
 			fileList.disableActions();
 			$.post(OC.filePath('files_trashbin', 'ajax', 'delete.php'), {
 					files: JSON.stringify([filename]),

apps/files_trashbin/js/filelist.js

@@ -148,7 +148,7 @@
 				files = _.pluck(this.getSelectedFiles(), 'name');
 				for (var i = 0; i < files.length; i++) {
 					var deleteAction = this.findFileEl(files[i]).children("td.date").children(".action.delete");
-					deleteAction.removeClass('delete-icon').addClass('progress-icon');
+					deleteAction.removeClass('icon-delete').addClass('icon-loading-small');
 				}
 				params = {
 					files: JSON.stringify(files),
@@ -202,7 +202,7 @@
 			else {
 				for (var i = 0; i < files.length; i++) {
 					var deleteAction = this.findFileEl(files[i]).children("td.date").children(".action.delete");
-					deleteAction.removeClass('delete-icon').addClass('progress-icon');
+					deleteAction.removeClass('icon-delete').addClass('icon-loading-small');
 				}
 			}
 

core/css/fixes.css

@@ -15,8 +15,8 @@ select {
     font-family: Frutiger, Calibri, 'Myriad Pro', Myriad, Arial, sans-serif;
 }
 
-.lte8 .delete-icon { background-image: url('../img/actions/delete.png'); }
+.lte8 .icon-delete { background-image: url('../img/actions/delete.png'); }
-.lte8 .delete-icon:hover, .delete-icon:focus {
+.lte8 .icon-delete:hover, .icon-delete:focus {
 	background-image: url('../img/actions/delete-hover.png');
 }
 

tests/acceptance/tests/pages/files.page.js

@@ -78,7 +78,7 @@
   };
 
   FilesPage.prototype.deleteButtonId = function(fileName) {
-    return by.css("tr[data-file='" + fileName +  "'] .action.delete.delete-icon");
+    return by.css("tr[data-file='" + fileName +  "'] .action.delete.icon-delete");
   };
 
 //================ SHARED ===============================================//