Merge pull request #1768 from nextcloud/more-filepicker
More filepicker improvements
This commit is contained in:
commit
5d7e9bb8fc
|
@ -91,6 +91,7 @@
|
||||||
-moz-user-select: none;
|
-moz-user-select: none;
|
||||||
-ms-user-select: none;
|
-ms-user-select: none;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
|
margin-bottom: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.oc-dialog .fileexists .conflict .filename,
|
.oc-dialog .fileexists .conflict .filename,
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
.oc-dialog {
|
.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;
|
padding: 15px;
|
||||||
z-index: 1000;
|
z-index: 1000;
|
||||||
font-size: 100%;
|
font-size: 100%;
|
||||||
|
@ -11,26 +11,26 @@
|
||||||
min-width: 200px;
|
min-width: 200px;
|
||||||
}
|
}
|
||||||
.oc-dialog-title {
|
.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 {
|
.oc-dialog-content {
|
||||||
z-index: 1000;
|
z-index: 1000;
|
||||||
background: white;
|
|
||||||
}
|
}
|
||||||
.oc-dialog-separator {
|
.oc-dialog-separator {
|
||||||
}
|
}
|
||||||
.oc-dialog-buttonrow {
|
.oc-dialog-buttonrow {
|
||||||
background: white;
|
|
||||||
float: right;
|
|
||||||
position: relative;
|
|
||||||
bottom: 5px;
|
|
||||||
display: block;
|
display: block;
|
||||||
margin-top: 10px;
|
background: transparent;
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
padding: 10px;
|
||||||
|
box-sizing: border-box;
|
||||||
width: 100%;
|
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 */
|
/* align primary button to right, other buttons to left */
|
||||||
.oc-dialog-buttonrow.twobuttons button:nth-child(1) {
|
.oc-dialog-buttonrow.twobuttons button:nth-child(1) {
|
||||||
|
@ -45,10 +45,11 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.oc-dialog-close {
|
.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 {
|
.oc-dialog-dim {
|
||||||
|
|
|
@ -141,6 +141,7 @@ table.multiselect thead {
|
||||||
|
|
||||||
|
|
||||||
/* do not show dates in filepicker */
|
/* do not show dates in filepicker */
|
||||||
|
#oc-dialog-filepicker-content .filelist .filesize,
|
||||||
#oc-dialog-filepicker-content .filelist .date {
|
#oc-dialog-filepicker-content .filelist .date {
|
||||||
display: none;
|
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:not(:last-child) { cursor: pointer; }
|
||||||
#oc-dialog-filepicker-content .dirtree span:last-child { font-weight: bold; }
|
#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 .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 {
|
#oc-dialog-filepicker-content .filelist {
|
||||||
overflow-y:auto;
|
|
||||||
height: 290px;
|
|
||||||
background-color:white;
|
background-color:white;
|
||||||
width:100%;
|
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;
|
border-bottom: 1px solid #eee;
|
||||||
}
|
}
|
||||||
|
#oc-dialog-filepicker-content .filelist tr:last-child td {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
#oc-dialog-filepicker-content .filelist .filename {
|
#oc-dialog-filepicker-content .filelist .filename {
|
||||||
position: absolute;
|
|
||||||
padding-top: 9px;
|
|
||||||
max-width: 60%;
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
text-overflow: ellipsis;
|
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 {
|
#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;}
|
#oc-dialog-filepicker-content .filepicker_element_selected { background-color:lightblue;}
|
||||||
.ui-dialog {position:fixed !important;}
|
.ui-dialog {position:fixed !important;}
|
||||||
|
|
|
@ -101,9 +101,9 @@
|
||||||
if(this.$title) {
|
if(this.$title) {
|
||||||
this.$title.text(value);
|
this.$title.text(value);
|
||||||
} else {
|
} else {
|
||||||
var $title = $('<h3 class="oc-dialog-title">'
|
var $title = $('<h2 class="oc-dialog-title">'
|
||||||
+ value
|
+ value
|
||||||
+ '</h3>');
|
+ '</h2>');
|
||||||
this.$title = $title.prependTo(this.$dialog);
|
this.$title = $title.prependTo(this.$dialog);
|
||||||
}
|
}
|
||||||
this._setSizes();
|
this._setSizes();
|
||||||
|
@ -184,11 +184,11 @@
|
||||||
if (content_height> 0) {
|
if (content_height> 0) {
|
||||||
this.element.css({
|
this.element.css({
|
||||||
height: content_height + 'px',
|
height: content_height + 'px',
|
||||||
width: this.$dialog.innerWidth()-20 + 'px'
|
width: this.$dialog.innerWidth() - 30 + 'px'
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
this.element.css({
|
this.element.css({
|
||||||
width : this.$dialog.innerWidth() - 20 + 'px'
|
width : this.$dialog.innerWidth() - 30 + 'px'
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
|
@ -148,6 +148,7 @@ var OCdialogs = {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
this.filepicker.loading = true;
|
this.filepicker.loading = true;
|
||||||
|
this.filepicker.filesClient = OC.Files.getClient();
|
||||||
$.when(this._getFilePickerTemplate()).then(function($tmpl) {
|
$.when(this._getFilePickerTemplate()).then(function($tmpl) {
|
||||||
self.filepicker.loading = false;
|
self.filepicker.loading = false;
|
||||||
var dialogName = 'oc-dialog-filepicker-content';
|
var dialogName = 'oc-dialog-filepicker-content';
|
||||||
|
@ -172,10 +173,10 @@ var OCdialogs = {
|
||||||
$('body').append(self.$filePicker);
|
$('body').append(self.$filePicker);
|
||||||
|
|
||||||
self.$filePicker.ready(function() {
|
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 = self.$filePicker.find('.dirtree');
|
||||||
self.$dirTree.on('click', 'div:not(:last-child)', self, self._handleTreeListSelect.bind(self));
|
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._handlePickerClick(event, $(this));
|
||||||
});
|
});
|
||||||
self._fillFilePicker('');
|
self._fillFilePicker('');
|
||||||
|
@ -187,12 +188,12 @@ var OCdialogs = {
|
||||||
var datapath;
|
var datapath;
|
||||||
if (multiselect === true) {
|
if (multiselect === true) {
|
||||||
datapath = [];
|
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 {
|
} else {
|
||||||
datapath = self.$filePicker.data('path');
|
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);
|
callback(datapath);
|
||||||
self.$filePicker.ocdialog('close');
|
self.$filePicker.ocdialog('close');
|
||||||
|
@ -223,7 +224,11 @@ var OCdialogs = {
|
||||||
// Hence this is one of the approach to get the choose button.
|
// Hence this is one of the approach to get the choose button.
|
||||||
var getOcDialog = self.$filePicker.closest('.oc-dialog');
|
var getOcDialog = self.$filePicker.closest('.oc-dialog');
|
||||||
var buttonEnableDisable = getOcDialog.find('.primary');
|
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()) {
|
if (!OC.Util.hasSVGSupport()) {
|
||||||
OC.Util.replaceSVG(self.$filePicker.parent());
|
OC.Util.replaceSVG(self.$filePicker.parent());
|
||||||
|
@ -680,7 +685,7 @@ var OCdialogs = {
|
||||||
var self = this;
|
var self = this;
|
||||||
$.get(OC.filePath('core', 'templates', 'filepicker.html'), function(tmpl) {
|
$.get(OC.filePath('core', 'templates', 'filepicker.html'), function(tmpl) {
|
||||||
self.$filePickerTemplate = $(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);
|
defer.resolve(self.$filePickerTemplate);
|
||||||
})
|
})
|
||||||
.fail(function(jqXHR, textStatus, errorThrown) {
|
.fail(function(jqXHR, textStatus, errorThrown) {
|
||||||
|
@ -723,7 +728,7 @@ var OCdialogs = {
|
||||||
}
|
}
|
||||||
return defer.promise();
|
return defer.promise();
|
||||||
},
|
},
|
||||||
_getFileList: function(dir, mimeType) {
|
_getFileList: function(dir, mimeType) { //this is only used by the spreedme app atm
|
||||||
if (typeof(mimeType) === "string") {
|
if (typeof(mimeType) === "string") {
|
||||||
mimeType = [mimeType];
|
mimeType = [mimeType];
|
||||||
}
|
}
|
||||||
|
@ -741,50 +746,62 @@ var OCdialogs = {
|
||||||
* fills the filepicker with files
|
* fills the filepicker with files
|
||||||
*/
|
*/
|
||||||
_fillFilePicker:function(dir) {
|
_fillFilePicker:function(dir) {
|
||||||
var dirs = [];
|
|
||||||
var others = [];
|
|
||||||
var self = this;
|
var self = this;
|
||||||
this.$filelist.empty().addClass('icon-loading');
|
this.$filelist.empty().addClass('icon-loading');
|
||||||
this.$filePicker.data('path', dir);
|
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 {
|
} else {
|
||||||
others.push(file);
|
return 0;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
self._fillSlug();
|
self._fillSlug();
|
||||||
var sorted = dirs.concat(others);
|
|
||||||
|
|
||||||
$.each(sorted, function(idx, entry) {
|
$.each(files, function(idx, entry) {
|
||||||
entry.icon = OC.MimeType.getIconUrl(entry.mimetype);
|
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,
|
type: entry.type,
|
||||||
dir: dir,
|
dir: dir,
|
||||||
filename: entry.name,
|
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') {
|
if (entry.type === 'file') {
|
||||||
var urlSpec = {
|
var urlSpec = {
|
||||||
file: dir + '/' + entry.name,
|
file: dir + '/' + entry.name,
|
||||||
};
|
};
|
||||||
$li.find('img').attr('src', OC.MimeType.getIconUrl(entry.mimetype));
|
|
||||||
var img = new Image();
|
var img = new Image();
|
||||||
var previewUrl = OC.generateUrl('/core/preview.png?') + $.param(urlSpec);
|
var previewUrl = OC.generateUrl('/core/preview.png?') + $.param(urlSpec);
|
||||||
img.onload = function() {
|
img.onload = function() {
|
||||||
if (img.width > 5) {
|
if (img.width > 5) {
|
||||||
$li.find('img').attr('src', previewUrl);
|
$row.find('td.filename').attr('style', 'background-image:url(' + previewUrl + ')');
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
img.src = 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');
|
self.$filelist.removeClass('icon-loading');
|
||||||
|
@ -829,7 +846,7 @@ var OCdialogs = {
|
||||||
self._fillFilePicker(dir);
|
self._fillFilePicker(dir);
|
||||||
var getOcDialog = (event.target).closest('.oc-dialog');
|
var getOcDialog = (event.target).closest('.oc-dialog');
|
||||||
var buttonEnableDisable = $('.primary', getOcDialog);
|
var buttonEnableDisable = $('.primary', getOcDialog);
|
||||||
if (this.$filePicker.data('mimetype') === "http/unix-directory") {
|
if (this.$filePicker.data('mimetype') === "httpd/unix-directory") {
|
||||||
buttonEnableDisable.prop("disabled", false);
|
buttonEnableDisable.prop("disabled", false);
|
||||||
} else {
|
} else {
|
||||||
buttonEnableDisable.prop("disabled", true);
|
buttonEnableDisable.prop("disabled", true);
|
||||||
|
|
|
@ -1,10 +1,19 @@
|
||||||
<div id="{dialog_name}" title="{title}">
|
<div id="{dialog_name}" title="{title}">
|
||||||
<span class="dirtree breadcrumb"></span>
|
<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>
|
</div>
|
||||||
|
|
Loading…
Reference in New Issue