From 8d093e976acd818311e3be97b0d9afd6631632f2 Mon Sep 17 00:00:00 2001
From: Robin Appelman <robin@icewind.nl>
Date: Fri, 14 Oct 2016 17:29:36 +0200
Subject: [PATCH 1/2] use mimetype icons in filepicker if there is no preview

Signed-off-by: Robin Appelman <robin@icewind.nl>
---
 core/js/oc-dialogs.js | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/core/js/oc-dialogs.js b/core/js/oc-dialogs.js
index bdee8a1bb0..edc0b3c797 100644
--- a/core/js/oc-dialogs.js
+++ b/core/js/oc-dialogs.js
@@ -769,10 +769,17 @@ var OCdialogs = {
 				});
 				if (entry.type === 'file') {
 					var urlSpec = {
-						file: dir + '/' + entry.name
+						file: dir + '/' + entry.name,
 					};
+					$li.find('img').attr('src', OC.MimeType.getIconUrl(entry.mimetype));
+					var img = new Image();
 					var previewUrl = OC.generateUrl('/core/preview.png?') + $.param(urlSpec);
-					$li.find('img').attr('src', previewUrl);
+					img.onload = function() {
+						if (img.width > 5) {
+							$li.find('img').attr('src', previewUrl);
+						}
+					};
+					img.src = previewUrl;
 				}
 				else {
 					$li.find('img').attr('src', OC.Util.replaceSVGIcon(entry.icon));

From 6d43942125347a961733845244711a6ea2f6651e Mon Sep 17 00:00:00 2001
From: Robin Appelman <robin@icewind.nl>
Date: Fri, 14 Oct 2016 17:31:10 +0200
Subject: [PATCH 2/2] filepicker styling

Signed-off-by: Robin Appelman <robin@icewind.nl>
---
 core/css/jquery.ocdialog.css   |  3 ++-
 core/css/styles.css            | 22 ++++++++++++++++------
 core/js/oc-dialogs.js          | 13 +++++++------
 core/templates/filepicker.html |  2 +-
 4 files changed, 26 insertions(+), 14 deletions(-)

diff --git a/core/css/jquery.ocdialog.css b/core/css/jquery.ocdialog.css
index b241dcfea6..a19fa4c52b 100644
--- a/core/css/jquery.ocdialog.css
+++ b/core/css/jquery.ocdialog.css
@@ -14,7 +14,8 @@
 	background: white;
 	font-weight: bold;
 	font-size: 110%;
-	margin-bottom: 10px;
+	margin-bottom: 5px;
+	margin-top: -9px;
 }
 .oc-dialog-content {
 	z-index: 1000;
diff --git a/core/css/styles.css b/core/css/styles.css
index 60b325111f..958a93a600 100644
--- a/core/css/styles.css
+++ b/core/css/styles.css
@@ -774,29 +774,39 @@ a.bookmarklet { background-color:#ddd; border:1px solid #ccc; padding:5px;paddin
 .ui-datepicker-prev,.ui-datepicker-next{ border:1px solid #ddd; background:#fff; }
 
 /* ---- DIALOGS ---- */
-#oc-dialog-filepicker-content .dirtree {width:92%; overflow:hidden; }
-#oc-dialog-filepicker-content .dirtree .home {
+#oc-dialog-filepicker-content .dirtree {
+	width:92%;
+	float: left;
+	margin-left: 15px;
+	overflow:hidden;
+}
+#oc-dialog-filepicker-content .dirtree div:first-child a {
 	background-image:url('../img/places/home.svg?v=1');
 	background-repeat:no-repeat;
 	background-position: left center;
-	width: 30px;
-	display: inline-block;
 }
 #oc-dialog-filepicker-content .dirtree span:not(:last-child) { cursor: pointer; }
 #oc-dialog-filepicker-content .dirtree span:last-child { font-weight: bold; }
 #oc-dialog-filepicker-content .dirtree span:not(:last-child)::after { content: '>'; padding: 3px;}
 #oc-dialog-filepicker-content .filelist {
 	overflow-y:auto;
-	height: 300px;
+	height: 290px;
 	background-color:white;
 	width:100%;
 }
+
+#oc-dialog-filepicker-content .filelist li:first-child {
+	border-top: 1px solid #eee;
+}
 #oc-dialog-filepicker-content .filelist li {
 	position: relative;
+	height: 40px;
+	padding: 5px;
+	border-bottom: 1px solid #eee;
 }
 #oc-dialog-filepicker-content .filelist .filename {
 	position: absolute;
-	top: 8px;
+	padding-top: 9px;
 	max-width: 60%;
 	overflow: hidden;
 	white-space: nowrap;
diff --git a/core/js/oc-dialogs.js b/core/js/oc-dialogs.js
index edc0b3c797..87d16a1394 100644
--- a/core/js/oc-dialogs.js
+++ b/core/js/oc-dialogs.js
@@ -174,7 +174,7 @@ var OCdialogs = {
 			self.$filePicker.ready(function() {
 				self.$filelist = self.$filePicker.find('.filelist');
 				self.$dirTree = self.$filePicker.find('.dirtree');
-				self.$dirTree.on('click', 'span:not(:last-child)', self, self._handleTreeListSelect);
+				self.$dirTree.on('click', 'div:not(:last-child)', self, self._handleTreeListSelect.bind(self));
 				self.$filelist.on('click', 'li', function(event) {
 					self._handlePickerClick(event, $(this));
 				});
@@ -799,8 +799,9 @@ var OCdialogs = {
 	_fillSlug: function() {
 		this.$dirTree.empty();
 		var self = this;
+		var dir;
 		var path = this.$filePicker.data('path');
-		var $template = $('<span data-dir="{dir}">{name}</span>');
+		var $template = $('<div data-dir="{dir}"><a>{name}</a></div>').addClass('crumb');
 		if(path) {
 			var paths = path.split('/');
 			$.each(paths, function(index, dir) {
@@ -816,17 +817,17 @@ var OCdialogs = {
 		}
 		$template.octemplate({
 			dir: '',
-			name: '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' // Ugly but works ;)
-		}, {escapeFunction: null}).addClass('home svg').prependTo(this.$dirTree);
+			name: '' // Ugly but works ;)
+		}, {escapeFunction: null}).prependTo(this.$dirTree);
 	},
 	/**
 	 * handle selection made in the tree list
 	*/
 	_handleTreeListSelect:function(event) {
 		var self = event.data;
-		var dir = $(event.target).data('dir');
+		var dir = $(event.target).parent().data('dir');
 		self._fillFilePicker(dir);
-		var getOcDialog = this.closest('.oc-dialog');
+		var getOcDialog = (event.target).closest('.oc-dialog');
 		var buttonEnableDisable = $('.primary', getOcDialog);
 		if (this.$filePicker.data('mimetype') === "http/unix-directory") {
 			buttonEnableDisable.prop("disabled", false);
diff --git a/core/templates/filepicker.html b/core/templates/filepicker.html
index e761fbdb56..46d1ca3d52 100644
--- a/core/templates/filepicker.html
+++ b/core/templates/filepicker.html
@@ -1,5 +1,5 @@
 <div id="{dialog_name}" title="{title}">
-	<span class="dirtree"></span>
+	<span class="dirtree breadcrumb"></span>
 	<ul class="filelist">
 		<li data-entryname="{filename}" data-type="{type}">
 			<img />