diff --git a/apps/files/css/upload.css b/apps/files/css/upload.css
index f0ffb9ac99e016b681446cc69bb396ef725e74c6..abc09c3e99cd3776e4183e9fbbc16a1c5fcfde01 100644
--- a/apps/files/css/upload.css
+++ b/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,
diff --git a/core/css/jquery.ocdialog.css b/core/css/jquery.ocdialog.css
index a19fa4c52b582ce0aca43d5cf5213bd3cf90ea4b..0e46ff2015242e9e2f76a2740c7f05b82c4769d6 100644
--- a/core/css/jquery.ocdialog.css
+++ b/core/css/jquery.ocdialog.css
@@ -1,7 +1,7 @@
.oc-dialog {
- background: white;
- color: #333333;
- border-radius: 3px; box-shadow: 0 0 7px #888888;
+ background: #fff;
+ color: #333;
+ 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;
- font-weight: bold;
- font-size: 110%;
- margin-bottom: 5px;
- margin-top: -9px;
+ background: #fff;
+ margin-left: 12px;
}
.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;
- top:7px; right:7px;
- height:20px; width:20px;
- background:url('../img/actions/close.svg') no-repeat center;
+ position: absolute;
+ top: 0;
+ right: 0;
+ padding: 25px;
+ background: url('../img/actions/close.svg') no-repeat center;
}
.oc-dialog-dim {
diff --git a/core/css/mobile.css b/core/css/mobile.css
index 0ef6a08c24fc348f63b55238d53c9f60babdb3b3..b0f8421345c09aa420b387d064928a4a36f30ea5 100644
--- a/core/css/mobile.css
+++ b/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;
}
diff --git a/core/css/styles.css b/core/css/styles.css
index 8fa7691ca7af5636c8cc4a4e222ecae49c032f03..94e60562ad818b2d1ae4fa279fb795d96a7d7e1f 100644
--- a/core/css/styles.css
+++ b/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 .filelist li:first-child {
- border-top: 1px solid #eee;
+#oc-dialog-filepicker-content #filestable.filelist {
+ /* prevent the filepicker to overflow */
+ min-width: initial;
}
-#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 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;
- 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;}
diff --git a/core/js/jquery.ocdialog.js b/core/js/jquery.ocdialog.js
index 15b58f9e08643900da50f64cabb986da873ede9d..66c7d9bd7f1ec7c36ee40b8637c0ba882b3c0a4d 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 87d16a1394a92b0f6f35580624442501b4fb6a05..7a7876bf30f8eaba65eba8b18fae16241b989e3e 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);
diff --git a/core/templates/filepicker.html b/core/templates/filepicker.html
index 46d1ca3d52dd53463da2b425cef7cef84d411d0e..b665ca26893f6ded2ee88ec3f4b7a01e55562356 100644
--- a/core/templates/filepicker.html
+++ b/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>