Show the path, when the filename conflicts

Signed-off-by: Joas Schilling <coding@schilljs.com>

apps/files/css/files.css

@@ -148,10 +148,10 @@ table tr.mouseOver td {
 }
 tbody a { color:#000; }
 
-span.extension, span.uploading, td.date {
+span.conflict-path, span.extension, span.uploading, td.date {
 	color: #999;
 }
-span.extension {
+span.conflict-path, span.extension {
 	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
 	filter: alpha(opacity=70);
 	opacity: .7;
@@ -161,6 +161,8 @@ span.extension {
 	transition: opacity 300ms;
 	vertical-align: top;
 }
+tr:hover span.conflict-path,
+tr:focus span.conflict-path,
 tr:hover span.extension,
 tr:focus span.extension {
 	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";

apps/files/js/filelist.js

@@ -1148,6 +1148,28 @@
 			}
 			var nameSpan=$('<span></span>').addClass('nametext');
 			var innernameSpan = $('<span></span>').addClass('innernametext').text(basename);
+
+			if (path && path !== '/') {
+				var conflictingItems = this.$fileList.find('tr[data-file="' + name.replace( /(:|\.|\[|\]|,|=)/g, "\\$1") + '"]');
+				if (conflictingItems.length !== 0) {
+					if (conflictingItems.length === 1) {
+						// Update the path on the first conflicting item
+						var $firstConflict = $(conflictingItems[0]),
+							firstConflictPath = $firstConflict.attr('data-path') + '/';
+						if (firstConflictPath.charAt(0) === '/') {
+							firstConflictPath = firstConflictPath.substr(1);
+						}
+						$firstConflict.find('td.filename span.innernametext').prepend($('<span></span>').addClass('conflict-path').text(firstConflictPath));
+					}
+
+					var conflictPath = path + '/';
+					if (conflictPath.charAt(0) === '/') {
+						conflictPath = conflictPath.substr(1);
+					}
+					nameSpan.append($('<span></span>').addClass('conflict-path').text(conflictPath));
+				}
+			}
+
 			nameSpan.append(innernameSpan);
 			linkElem.append(nameSpan);
 			if (extension) {