diff --git a/apps/files/css/upload.css b/apps/files/css/upload.css index f0ffb9ac99..abc09c3e99 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 a19fa4c52b..0e46ff2015 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 0ef6a08c24..b0f8421345 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 8fa7691ca7..94e60562ad 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 15b58f9e08..66c7d9bd7f 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 = $('

' + var $title = $('

' + value - + '

'); + + ''); 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 87d16a1394..7a7876bf30 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 46d1ca3d52..b665ca2689 100644 --- a/core/templates/filepicker.html +++ b/core/templates/filepicker.html @@ -1,10 +1,19 @@
- +
+ + + + + + + + +
{filename} + + {size} + {date}
+