Use a table for the filepicker list and add size column

Signed-off-by: Robin Appelman <robin@icewind.nl>

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,40 @@ 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 {
-	overflow-y:auto;
+#oc-dialog-filepicker-content .filelist-container {
+	display: inline-block;
+	overflow-y: auto;
 	height: 290px;
+	width: 100%;
+	border-top: 1px solid #eee;
+}
+#oc-dialog-filepicker-content .filelist {
 	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;
+#oc-dialog-filepicker-content .filelist td {
+	padding: 14px;
 	border-bottom: 1px solid #eee;
 }
 #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;
-	width: 32px;
-}
+
+#oc-dialog-filepicker-content .filelist .filesize,
 #oc-dialog-filepicker-content .filelist .date {
-	float: right;
-	margin-right: 10px;
-	margin-top: 0;
-	padding-top: 9px;
+	width: 80px;
+}
+
+#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/oc-dialogs.js

@@ -173,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('');
@@ -188,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');
@@ -685,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) {
@@ -770,30 +770,35 @@ var OCdialogs = {
 
 			$.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.MimeType.getIconUrl(entry.mimetype));
-				}
-				self.$filelist.append($li);
+				self.$filelist.append($row);
 			});
 
 			self.$filelist.removeClass('icon-loading');

core/templates/filepicker.html

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