Merge pull request #1768 from nextcloud/more-filepicker

More filepicker improvements

apps/files/css/upload.css

@@ -91,6 +91,7 @@
 	-moz-user-select: none;
 	-ms-user-select: none;
 	user-select: none;
+	margin-bottom: 30px;
 }
 
 .oc-dialog .fileexists .conflict .filename,

core/css/jquery.ocdialog.css

@@ -1,7 +1,7 @@
 .oc-dialog {
-	background: white;
+	background: #fff;
-	color: #333333;
+	color: #333;
-	border-radius: 3px; box-shadow: 0 0 7px #888888;
+	border-radius: 3px; box-shadow: 0 0 7px #888;
 	padding: 15px;
 	z-index: 1000;
 	font-size: 100%;
@@ -11,26 +11,26 @@
 	min-width: 200px;
 }
 .oc-dialog-title {
-	background: white;
+	background: #fff;
-	font-weight: bold;
+	margin-left: 12px;
-	font-size: 110%;
-	margin-bottom: 5px;
-	margin-top: -9px;
 }
 .oc-dialog-content {
 	z-index: 1000;
-	background: white;
 }
 .oc-dialog-separator {
 }
 .oc-dialog-buttonrow {
-	background: white;
-	float: right;
-	position: relative;
-	bottom: 5px;
 	display: block;
-	margin-top: 10px;
+	background: transparent;
+	position: absolute;
+	right: 0;
+	bottom: 0;
+	padding: 10px;
+	box-sizing: border-box;
 	width: 100%;
+	background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
+	border-bottom-left-radius: 3px;
+	border-bottom-right-radius: 3px;
 }
 /* align primary button to right, other buttons to left */
 .oc-dialog-buttonrow.twobuttons button:nth-child(1) {
@@ -45,10 +45,11 @@
 }
 
 .oc-dialog-close {
-	position:absolute;
+	position: absolute;
-	top:7px; right:7px;
+	top: 0;
-	height:20px; width:20px;
+	right: 0;
-	background:url('../img/actions/close.svg') no-repeat center;
+	padding: 25px;
+	background: url('../img/actions/close.svg') no-repeat center;
 }
 
 .oc-dialog-dim {

core/css/mobile.css

@@ -141,6 +141,7 @@ table.multiselect thead {
 
 
 /* do not show dates in filepicker */
+#oc-dialog-filepicker-content .filelist .filesize,
 #oc-dialog-filepicker-content .filelist .date {
 	display: none;
 }

core/css/styles.css

@@ -774,39 +774,48 @@ a.bookmarklet { background-color:#ddd; border:1px solid #ccc; padding:5px;paddin
 #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-container {
+	box-sizing: border-box;
+	display: inline-block;
+	overflow-y: auto;
+	height: 321px;
+	width: 100%;
+	padding-bottom: 55px;
+}
 #oc-dialog-filepicker-content .filelist {
-	overflow-y:auto;
-	height: 290px;
 	background-color:white;
 	width:100%;
 }
-
+#oc-dialog-filepicker-content #filestable.filelist {
-#oc-dialog-filepicker-content .filelist li:first-child {
+	/* prevent the filepicker to overflow */
-	border-top: 1px solid #eee;
+	min-width: initial;
 }
-#oc-dialog-filepicker-content .filelist li {
+
-	position: relative;
+#oc-dialog-filepicker-content .filelist td {
-	height: 40px;
+	padding: 14px;
-	padding: 5px;
 	border-bottom: 1px solid #eee;
 }
+#oc-dialog-filepicker-content .filelist tr:last-child td {
+	border-bottom: none;
+}
 #oc-dialog-filepicker-content .filelist .filename {
-	position: absolute;
-	padding-top: 9px;
-	max-width: 60%;
 	overflow: hidden;
 	white-space: nowrap;
 	text-overflow: ellipsis;
+	background-size: 32px;
+	background-repeat: no-repeat;
+	padding-left: 51px;
+	background-position: 7px 7px;
+	cursor: pointer;
 }
-#oc-dialog-filepicker-content .filelist img {
+
-	margin: 2px 1em 0 4px;
+#oc-dialog-filepicker-content .filelist .filesize,
-	width: 32px;
-}
 #oc-dialog-filepicker-content .filelist .date {
-	float: right;
+	width: 80px;
-	margin-right: 10px;
+}
-	margin-top: 0;
+
-	padding-top: 9px;
+#oc-dialog-filepicker-content .filelist .filesize {
+	text-align: right;
 }
 #oc-dialog-filepicker-content .filepicker_element_selected { background-color:lightblue;}
 .ui-dialog {position:fixed !important;}

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'
 				});
 			}
 		},

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) {
+						self.$filelist.find('tr.filepicker_element_selected').each(function(index, element) {
-							datapath.push(self.$filePicker.data('path') + '/' + $(element).text());
+							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) {
+		var filter = this.$filePicker.data('mimetype');
-
+		if (typeof(filter) === "string") {
-			$.each(response.data.files, function(index, file) {
+			filter = [filter];
-				if (file.type === 'dir') {
+		}
-					dirs.push(file);
+		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 {
+				self.$filelist.append($row);
-					$li.find('img').attr('src', OC.Util.replaceSVGIcon(entry.icon));
-				}
-				self.$filelist.append($li);
 			});
 
 			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);

core/templates/filepicker.html

@@ -1,10 +1,19 @@
 <div id="{dialog_name}" title="{title}">
 	<span class="dirtree breadcrumb"></span>
-	<ul class="filelist">
+	<div class="filelist-container">
-		<li data-entryname="{filename}" data-type="{type}">
+		<table id="filestable" class="filelist">
-			<img />
+			<tbody>
-			<span class="filename">{filename}</span>
+			<tr data-entryname="{filename}" data-type="{type}">
-			<span class="date">{date}</span>
+				<td class="filename"
-		</li>
+					style="background-image:url({icon})">{filename}
-	</ul>
+				</td>
+				<td class="filesize"
+					style="color:rgb({sizeColor}, {sizeColor}, {sizeColor})">
+					{size}
+				</td>
+				<td class="date">{date}</td>
+			</tr>
+			</tbody>
+		</table>
+	</div>
 </div>