Move file thumbnail into the label element

3 files changed, 42 insertions, 18 deletions

diff --git a/apps/files/css/files.css b/apps/files/css/files.css
index 60afcf9b579..20f402e90b6 100644
--- a/apps/files/css/files.css
+++ b/apps/files/css/files.css
@@ -244,6 +244,15 @@ table td.filename a.name {
 	line-height: 50px;
 	padding: 0;
 }
+table td.filename .thumbnail {
+	display: inline-block;
+	width: 32px;
+	height: 32px;
+	margin-left: 8px;
+	margin-top: 9px;
+	cursor: pointer;
+	float: left;
+}
 table td.filename input.filename {
 	width: 70%;
 	margin-top: 1px;
@@ -383,6 +392,7 @@ table td.filename .uploadtext {
 	/* sometimes checkbox height is bigger (KDE/Qt), so setting to absolute
 	 * to prevent it to increase the height */
 	position: absolute;
+	z-index: 10;
 }
 #fileList tr td.filename>input[type="checkbox"] + label {
 	left: 0;
@@ -395,6 +405,7 @@ table td.filename .uploadtext {
 	position: absolute;
 	top: 18px;
 	left: 18px;
+	z-index: 10;
 }
 
 #fileList tr td.filename {
diff --git a/apps/files/js/filelist.js b/apps/files/js/filelist.js
index 6ffc10cdcbd..15f257bba92 100644
--- a/apps/files/js/filelist.js
+++ b/apps/files/js/filelist.js
@@ -94,6 +94,12 @@
 		fileActions: null,
 
 		/**
+		 * Whether selection is allowed, checkboxes and selection overlay will
+		 * be rendered
+		 */
+		_allowSelection: true,
+
+		/**
 		 * Map of file id to file data
 		 * @type Object.<int, Object>
 		 */
@@ -679,10 +685,8 @@
 			}
 
 			// filename td
-			td = $('<td></td>').attr({
-				"class": "filename",
-				"style": 'background-image:url(' + icon + '); background-size: 32px;'
-			});
+			td = $('<td class="filename"></td>');
+
 
 			// linkUrl
 			if (type === 'dir') {
@@ -691,8 +695,16 @@
 			else {
 				linkUrl = this.getDownloadUrl(name, path);
 			}
-			td.append('<input id="select-' + this.id + '-' + fileData.id +
-				'" type="checkbox" /><label for="select-' + this.id + '-' + fileData.id + '"></label>');
+			if (this._allowSelection) {
+				td.append(
+					'<input id="select-' + this.id + '-' + fileData.id +
+					'" type="checkbox" /><label for="select-' + this.id + '-' + fileData.id + '">' +
+					'<div class="thumbnail" style="background-image:url(' + icon + '); background-size: 32px;"></div>' +
+					'</label>'
+				);
+			} else {
+				td.append('<div class="thumbnail" style="background-image:url(' + icon + '); background-size: 32px;"></div>');
+			}
 			var linkElem = $('<a></a>').attr({
 				"class": "name",
 				"href": linkUrl
@@ -888,6 +900,7 @@
 			this.fileActions.display(filenameTd, !options.silent, this);
 
 			if (fileData.isPreviewAvailable) {
+				var iconDiv = filenameTd.find('.thumbnail');
 				// lazy load / newly inserted td ?
 				if (options.animate) {
 					this.lazyLoadPreview({
@@ -895,7 +908,7 @@
 						mime: mime,
 						etag: fileData.etag,
 						callback: function(url) {
-							filenameTd.css('background-image', 'url(' + url + ')');
+							iconDiv.css('background-image', 'url(' + url + ')');
 						}
 					});
 				}
@@ -907,7 +920,7 @@
 						};
 					var previewUrl = this.generatePreviewUrl(urlSpec);
 					previewUrl = previewUrl.replace('(', '%28').replace(')', '%29');
-					filenameTd.css('background-image', 'url(' + previewUrl + ')');
+					iconDiv.css('background-image', 'url(' + previewUrl + ')');
 				}
 			}
 			return tr;
diff --git a/apps/files/tests/js/filelistSpec.js b/apps/files/tests/js/filelistSpec.js
index 21f8a12f4b5..83ff532313c 100644
--- a/apps/files/tests/js/filelistSpec.js
+++ b/apps/files/tests/js/filelistSpec.js
@@ -955,8 +955,8 @@ describe('OCA.Files.FileList tests', function() {
 				name: 'testFile.txt'
 			};
 			var $tr = fileList.add(fileData);
-			var $td = $tr.find('td.filename');
-			expect(OC.TestUtil.getImageUrl($td)).toEqual(OC.webroot + '/core/img/filetypes/file.svg');
+			var $imgDiv = $tr.find('td.filename .thumbnail');
+			expect(OC.TestUtil.getImageUrl($imgDiv)).toEqual(OC.webroot + '/core/img/filetypes/file.svg');
 			expect(previewLoadStub.notCalled).toEqual(true);
 		});
 		it('renders default icon for dir when none provided and no preview is available', function() {
@@ -965,8 +965,8 @@ describe('OCA.Files.FileList tests', function() {
 				name: 'test dir'
 			};
 			var $tr = fileList.add(fileData);
-			var $td = $tr.find('td.filename');
-			expect(OC.TestUtil.getImageUrl($td)).toEqual(OC.webroot + '/core/img/filetypes/folder.svg');
+			var $imgDiv = $tr.find('td.filename .thumbnail');
+			expect(OC.TestUtil.getImageUrl($imgDiv)).toEqual(OC.webroot + '/core/img/filetypes/folder.svg');
 			expect(previewLoadStub.notCalled).toEqual(true);
 		});
 		it('renders provided icon for file when provided', function() {
@@ -976,8 +976,8 @@ describe('OCA.Files.FileList tests', function() {
 				icon: OC.webroot + '/core/img/filetypes/application-pdf.svg'
 			};
 			var $tr = fileList.add(fileData);
-			var $td = $tr.find('td.filename');
-			expect(OC.TestUtil.getImageUrl($td)).toEqual(OC.webroot + '/core/img/filetypes/application-pdf.svg');
+			var $imgDiv = $tr.find('td.filename .thumbnail');
+			expect(OC.TestUtil.getImageUrl($imgDiv)).toEqual(OC.webroot + '/core/img/filetypes/application-pdf.svg');
 			expect(previewLoadStub.notCalled).toEqual(true);
 		});
 		it('renders preview when no icon was provided and preview is available', function() {
@@ -988,11 +988,11 @@ describe('OCA.Files.FileList tests', function() {
 			};
 			var $tr = fileList.add(fileData);
 			var $td = $tr.find('td.filename');
-			expect(OC.TestUtil.getImageUrl($td)).toEqual(OC.webroot + '/core/img/filetypes/file.svg');
+			expect(OC.TestUtil.getImageUrl($td.find('.thumbnail'))).toEqual(OC.webroot + '/core/img/filetypes/file.svg');
 			expect(previewLoadStub.calledOnce).toEqual(true);
 			// third argument is callback
 			previewLoadStub.getCall(0).args[0].callback(OC.webroot + '/somepath.png');
-			expect(OC.TestUtil.getImageUrl($td)).toEqual(OC.webroot + '/somepath.png');
+			expect(OC.TestUtil.getImageUrl($td.find('.thumbnail'))).toEqual(OC.webroot + '/somepath.png');
 		});
 		it('renders default file type icon when no icon was provided and no preview is available', function() {
 			var fileData = {
@@ -1001,8 +1001,8 @@ describe('OCA.Files.FileList tests', function() {
 				isPreviewAvailable: false
 			};
 			var $tr = fileList.add(fileData);
-			var $td = $tr.find('td.filename');
-			expect(OC.TestUtil.getImageUrl($td)).toEqual(OC.webroot + '/core/img/filetypes/file.svg');
+			var $imgDiv = $tr.find('td.filename .thumbnail');
+			expect(OC.TestUtil.getImageUrl($imgDiv)).toEqual(OC.webroot + '/core/img/filetypes/file.svg');
 			expect(previewLoadStub.notCalled).toEqual(true);
 		});
 	});