Merge pull request #1758 from nextcloud/stable10-backport-1756

[stable10] Filepicker styling

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;

core/css/styles.css

@@ -763,29 +763,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;

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));
 				});
@@ -762,11 +762,18 @@ 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);
+					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));
 				}
@@ -785,8 +792,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) {
@@ -802,15 +810,15 @@ 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);
 	},
 	/**

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 />