Merge pull request #1768 from nextcloud/more-filepicker
More filepicker improvements
This commit is contained in:
Jan-Christoph Borchardt
GitHub
commit
5d7e9bb8fc
|
|
@ -91,6 +91,7 @@
|
|||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.oc-dialog .fileexists .conflict .filename,
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;}
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
});
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue