Merge pull request #12795 from owncloud/files-layoutchanges

Move file thumbnail element into the label tag

1 files changed, 27 insertions, 14 deletions

diff --git a/apps/files/js/filelist.js b/apps/files/js/filelist.js
index 7abbf2c80b2..b20bdf23e1f 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>
 		 */
@@ -203,7 +209,7 @@
 			this.$el.on('show', this._onResize);
 
 			this.$fileList.on('click','td.filename>a.name', _.bind(this._onClickFile, this));
-			this.$fileList.on('change', 'td.filename>input:checkbox', _.bind(this._onClickFileCheckbox, this));
+			this.$fileList.on('change', 'td.filename>.selectCheckBox', _.bind(this._onClickFileCheckbox, this));
 			this.$el.on('urlChanged', _.bind(this._onUrlChanged, this));
 			this.$el.find('.select-all').click(_.bind(this._onClickSelectAll, this));
 			this.$el.find('.download').click(_.bind(this._onClickDownloadSelected, this));
@@ -281,7 +287,7 @@
 		 * @param state true to select, false to deselect
 		 */
 		_selectFileEl: function($tr, state) {
-			var $checkbox = $tr.find('td.filename>input:checkbox');
+			var $checkbox = $tr.find('td.filename>.selectCheckBox');
 			var oldData = !!this._selectedFiles[$tr.data('id')];
 			var data;
 			$checkbox.prop('checked', state);
@@ -330,7 +336,7 @@
 				else {
 					this._lastChecked = $tr;
 				}
-				var $checkbox = $tr.find('td.filename>input:checkbox');
+				var $checkbox = $tr.find('td.filename>.selectCheckBox');
 				this._selectFileEl($tr, !$checkbox.prop('checked'));
 				this.updateSelectionSummary();
 			} else {
@@ -372,7 +378,7 @@
 		 */
 		_onClickSelectAll: function(e) {
 			var checked = $(e.target).prop('checked');
-			this.$fileList.find('td.filename>input:checkbox').prop('checked', checked)
+			this.$fileList.find('td.filename>.selectCheckBox').prop('checked', checked)
 				.closest('tr').toggleClass('selected', checked);
 			this._selectedFiles = {};
 			this._selectionSummary.clear();
@@ -560,7 +566,7 @@
 				this.$fileList.append(tr);
 				if (isAllSelected || this._selectedFiles[fileData.id]) {
 					tr.addClass('selected');
-					tr.find('input:checkbox').prop('checked', true);
+					tr.find('.selectCheckBox').prop('checked', true);
 				}
 				if (animate) {
 					tr.addClass('appear transparent');
@@ -685,10 +691,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') {
@@ -697,8 +701,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" class="selectCheckBox"/><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
@@ -894,6 +906,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({
@@ -901,7 +914,7 @@
 						mime: mime,
 						etag: fileData.etag,
 						callback: function(url) {
-							filenameTd.css('background-image', 'url(' + url + ')');
+							iconDiv.css('background-image', 'url(' + url + ')');
 						}
 					});
 				}
@@ -913,7 +926,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;
@@ -1519,7 +1532,7 @@
 									var fileEl = self.remove(file, {updateSummary: false});
 									// FIXME: not sure why we need this after the
 									// element isn't even in the DOM any more
-									fileEl.find('input[type="checkbox"]').prop('checked', false);
+									fileEl.find('.selectCheckBox').prop('checked', false);
 									fileEl.removeClass('selected');
 									self.fileSummary.remove({type: fileEl.attr('data-type'), size: fileEl.attr('data-size')});
 								});