Merge pull request #1768 from nextcloud/more-filepicker

More filepicker improvements

2 files changed, 48 insertions, 31 deletions

diff --git a/core/js/jquery.ocdialog.js b/core/js/jquery.ocdialog.js
index 15b58f9e086..66c7d9bd7f1 100644
--- a/core/js/jquery.ocdialog.js
+++ b/core/js/jquery.ocdialog.js
@@ -101,9 +101,9 @@
 					if(this.$title) {
 						this.$title.text(value);
 					} else {
-						var $title = $('<h3 class="oc-dialog-title">'
+						var $title = $('<h2 class="oc-dialog-title">'
 							+ value
-							+ '</h3>');
+							+ '</h2>');
 						this.$title = $title.prependTo(this.$dialog);
 					}
 					this._setSizes();
@@ -184,11 +184,11 @@
 			if (content_height> 0) {
 				this.element.css({
 					height: content_height + 'px',
-					width: this.$dialog.innerWidth()-20 + 'px'
+					width: this.$dialog.innerWidth() - 30 + 'px'
 				});
 			} else {
 				this.element.css({
-					width : this.$dialog.innerWidth() - 20 + 'px'
+					width : this.$dialog.innerWidth() - 30 + 'px'
 				});
 			}
 		},
diff --git a/core/js/oc-dialogs.js b/core/js/oc-dialogs.js
index 87d16a1394a..7a7876bf30f 100644
--- a/core/js/oc-dialogs.js
+++ b/core/js/oc-dialogs.js
@@ -148,6 +148,7 @@ var OCdialogs = {
 			return;
 		}
 		this.filepicker.loading = true;
+		this.filepicker.filesClient = OC.Files.getClient();
 		$.when(this._getFilePickerTemplate()).then(function($tmpl) {
 			self.filepicker.loading = false;
 			var dialogName = 'oc-dialog-filepicker-content';
@@ -172,10 +173,10 @@ var OCdialogs = {
 			$('body').append(self.$filePicker);
 
 			self.$filePicker.ready(function() {
-				self.$filelist = self.$filePicker.find('.filelist');
+				self.$filelist = self.$filePicker.find('.filelist tbody');
 				self.$dirTree = self.$filePicker.find('.dirtree');
 				self.$dirTree.on('click', 'div:not(:last-child)', self, self._handleTreeListSelect.bind(self));
-				self.$filelist.on('click', 'li', function(event) {
+				self.$filelist.on('click', 'tr', function(event) {
 					self._handlePickerClick(event, $(this));
 				});
 				self._fillFilePicker('');
@@ -187,12 +188,12 @@ var OCdialogs = {
 					var datapath;
 					if (multiselect === true) {
 						datapath = [];
-						self.$filelist.find('.filepicker_element_selected .filename').each(function(index, element) {
-							datapath.push(self.$filePicker.data('path') + '/' + $(element).text());
+						self.$filelist.find('tr.filepicker_element_selected').each(function(index, element) {
+							datapath.push(self.$filePicker.data('path') + '/' + $(element).data('entryname'));
 						});
 					} else {
 						datapath = self.$filePicker.data('path');
-						datapath += '/' + self.$filelist.find('.filepicker_element_selected .filename').text();
+						datapath += '/' + self.$filelist.find('tr.filepicker_element_selected').data('entryname');
 					}
 					callback(datapath);
 					self.$filePicker.ocdialog('close');
@@ -223,7 +224,11 @@ var OCdialogs = {
 			// Hence this is one of the approach to get the choose button.
 			var getOcDialog = self.$filePicker.closest('.oc-dialog');
 			var buttonEnableDisable = getOcDialog.find('.primary');
-			buttonEnableDisable.prop("disabled", "true");
+			if (self.$filePicker.data('mimetype') === "httpd/unix-directory") {
+				buttonEnableDisable.prop("disabled", false);
+			} else {
+				buttonEnableDisable.prop("disabled", true);
+			}
 
 			if (!OC.Util.hasSVGSupport()) {
 				OC.Util.replaceSVG(self.$filePicker.parent());
@@ -680,7 +685,7 @@ var OCdialogs = {
 			var self = this;
 			$.get(OC.filePath('core', 'templates', 'filepicker.html'), function(tmpl) {
 				self.$filePickerTemplate = $(tmpl);
-				self.$listTmpl = self.$filePickerTemplate.find('.filelist li:first-child').detach();
+				self.$listTmpl = self.$filePickerTemplate.find('.filelist tr:first-child').detach();
 				defer.resolve(self.$filePickerTemplate);
 			})
 			.fail(function(jqXHR, textStatus, errorThrown) {
@@ -723,7 +728,7 @@ var OCdialogs = {
 		}
 		return defer.promise();
 	},
-	_getFileList: function(dir, mimeType) {
+	_getFileList: function(dir, mimeType) { //this is only used by the spreedme app atm
 		if (typeof(mimeType) === "string") {
 			mimeType = [mimeType];
 		}
@@ -741,50 +746,62 @@ var OCdialogs = {
 	 * fills the filepicker with files
 	*/
 	_fillFilePicker:function(dir) {
-		var dirs = [];
-		var others = [];
 		var self = this;
 		this.$filelist.empty().addClass('icon-loading');
 		this.$filePicker.data('path', dir);
-		$.when(this._getFileList(dir, this.$filePicker.data('mimetype'))).then(function(response) {
-
-			$.each(response.data.files, function(index, file) {
-				if (file.type === 'dir') {
-					dirs.push(file);
+		var filter = this.$filePicker.data('mimetype');
+		if (typeof(filter) === "string") {
+			filter = [filter];
+		}
+		self.filepicker.filesClient.getFolderContents(dir).then(function(status, files) {
+			if (filter) {
+				files = files.filter(function (file) {
+					return filter == [] || file.type === 'dir' || filter.indexOf(file.mimetype) !== -1;
+				});
+			}
+			files = files.sort(function(a, b) {
+				if (a.type === 'dir' && b.type !== 'dir') {
+					return -1;
+				} else if(a.type !== 'dir' && b.type === 'dir') {
+					return 1;
 				} else {
-					others.push(file);
+					return 0;
 				}
 			});
 
 			self._fillSlug();
-			var sorted = dirs.concat(others);
 
-			$.each(sorted, function(idx, entry) {
+			$.each(files, function(idx, entry) {
 				entry.icon = OC.MimeType.getIconUrl(entry.mimetype);
-				var $li = self.$listTmpl.octemplate({
+				if (typeof(entry.size) !== 'undefined' && entry.size >= 0) {
+					var simpleSize = humanFileSize(parseInt(entry.size, 10), true);
+					var sizeColor = Math.round(160 - Math.pow((entry.size / (1024 * 1024)), 2));
+				} else {
+					simpleSize = t('files', 'Pending');
+				}
+				var $row = self.$listTmpl.octemplate({
 					type: entry.type,
 					dir: dir,
 					filename: entry.name,
-					date: OC.Util.relativeModifiedDate(entry.mtime)
+					date: OC.Util.relativeModifiedDate(entry.mtime),
+					size: simpleSize,
+					sizeColor: sizeColor,
+					icon: entry.icon
 				});
 				if (entry.type === 'file') {
 					var urlSpec = {
 						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);
+							$row.find('td.filename').attr('style', 'background-image:url(' + previewUrl + ')');
 						}
 					};
 					img.src = previewUrl;
 				}
-				else {
-					$li.find('img').attr('src', OC.Util.replaceSVGIcon(entry.icon));
-				}
-				self.$filelist.append($li);
+				self.$filelist.append($row);
 			});
 
 			self.$filelist.removeClass('icon-loading');
@@ -829,7 +846,7 @@ var OCdialogs = {
 		self._fillFilePicker(dir);
 		var getOcDialog = (event.target).closest('.oc-dialog');
 		var buttonEnableDisable = $('.primary', getOcDialog);
-		if (this.$filePicker.data('mimetype') === "http/unix-directory") {
+		if (this.$filePicker.data('mimetype') === "httpd/unix-directory") {
 			buttonEnableDisable.prop("disabled", false);
 		} else {
 			buttonEnableDisable.prop("disabled", true);