From 415ac9b3ac0e3f1f563b570f658d2622fee66c3f Mon Sep 17 00:00:00 2001
From: Daniel Calviño Sánchez <danxuliu@gmail.com>
Date: Thu, 28 Sep 2017 14:42:37 +0200
Subject: Move favorite mark to the top right corner of the thumbnail
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The favorite icon was shown on its own "column" (not a real column in
the table, but a visual column achieved through margins and left
positions). Now the icon was moved to the top right corner of the file
thumbnail, and the thumbnail and file name were moved to the left to
fill the space left by the "column".

To keep the markup in line with its visual representation (and to ease
the placing through CSS), the favorite mark is no longer prepended to
the row, but appended to the thumbnail instead. In the same way, the
thumbnail is no longer appended to the checkbox label, but to the link
with the name of the file instead (although the checkbox is still shown
at the bottom right corner of the thumbnail, and clicking on the
thumbnail still selects the file). In order to show the "busy" state on
a file the "icon-loading-small" CSS class is set to the parent element
of the thumbnail, so the thumbnail is also wrapped now by another div
with the same size and position as the label.

Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
---
 apps/files/js/filelist.js | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

(limited to 'apps/files/js/filelist.js')

diff --git a/apps/files/js/filelist.js b/apps/files/js/filelist.js
index c636544e6c2..2c97bf737b3 100644
--- a/apps/files/js/filelist.js
+++ b/apps/files/js/filelist.js
@@ -1207,18 +1207,17 @@
 				td.append(
 					'<input id="select-' + this.id + '-' + fileData.id +
 					'" type="checkbox" class="selectCheckBox checkbox"/><label for="select-' + this.id + '-' + fileData.id + '">' +
-					'<div class="thumbnail" style="background-image:url(' + icon + ');"></div>' +
 					'<span class="hidden-visually">' + t('files', 'Select') + '</span>' +
 					'</label>'
 				);
-			} else {
-				td.append('<div class="thumbnail" style="background-image:url(' + icon + ');"></div>');
 			}
 			var linkElem = $('<a></a>').attr({
 				"class": "name",
 				"href": linkUrl
 			});
 
+			linkElem.append('<div class="thumbnail-wrapper"><div class="thumbnail" style="background-image:url(' + icon + ');"></div></div>');
+
 			// from here work on the display name
 			name = fileData.displayName || name;
 
-- 
cgit v1.2.3