Fix layout of disabled links in the file list

* also disable download button after click

2 files changed, 27 insertions, 3 deletions

diff --git a/apps/files/css/files.css b/apps/files/css/files.css
index e4bf791761d..a5f72199b11 100644
--- a/apps/files/css/files.css
+++ b/apps/files/css/files.css
@@ -583,8 +583,14 @@ a.action>img {
 #fileList tr:focus a.action,
 #fileList a.action.permanent,
 #fileList tr:hover a.action.no-permission:hover,
-#fileList tr:focus a.action.no-permission:focus
-/*#fileList .name:focus .action*/ {
+#fileList tr:focus a.action.no-permission:focus,
+/*#fileList .name:focus .action,*/
+/* also enforce the low opacity for disabled links that are hovered/focused */
+.ie8 #fileList a.action.disabled:hover img,
+#fileList tr:hover a.action.disabled:hover,
+#fileList tr:focus a.action.disabled:focus,
+#fileList .name:focus a.action.disabled:focus,
+#fileList a.action.disabled img {
 	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
 	filter: alpha(opacity=50);
 	opacity: .5;
@@ -599,6 +605,13 @@ a.action>img {
 	opacity: 1;
 	display:inline;
 }
+#fileList tr a.action.disabled {
+	background: none;
+}
+
+#fileList tr:hover a.action.disabled:hover * {
+	cursor: default;
+}
 
 .summary {
 	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
diff --git a/apps/files/js/fileactions.js b/apps/files/js/fileactions.js
index 9f6a77a3786..ec47534de21 100644
--- a/apps/files/js/fileactions.js
+++ b/apps/files/js/fileactions.js
@@ -479,11 +479,22 @@
 				var dir = context.dir || context.fileList.getCurrentDirectory();
 				var url = context.fileList.getDownloadUrl(filename, dir);
 
-				var icon = $(context.$file).find('.fileactions .action-download img');
+				var downloadFileaction = $(context.$file).find('.fileactions .action-download');
+
+				// don't allow a second click on the download action
+				if(downloadFileaction.hasClass('disabled')) {
+					return;
+				}
+
+				downloadFileaction.addClass('disabled');
+				var icon = downloadFileaction.find('img');
 				var sourceImage = icon.attr('src');
 				icon.attr('src', sourceImage.replace('actions/download.svg', 'loading-small.gif'));
+
+				// TODO proper detection of "download has started"
 				setTimeout(function(){
 					icon.attr('src', sourceImage);
+					downloadFileaction.removeClass('disabled');
 				}, 7000);
 
 				if (url) {