From f002a2d2f671c7d177fb3c8eb9fa4aad9d3bca7f Mon Sep 17 00:00:00 2001 From: Robin Appelman Date: Mon, 17 Oct 2016 13:08:55 +0200 Subject: [PATCH 1/9] Allow selecting the root folder Signed-off-by: Robin Appelman --- core/js/oc-dialogs.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/core/js/oc-dialogs.js b/core/js/oc-dialogs.js index 87d16a1394..00eb0d70a1 100644 --- a/core/js/oc-dialogs.js +++ b/core/js/oc-dialogs.js @@ -223,7 +223,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()); From b6ce73cf1417a091c231b1367a50946e24c25bdb Mon Sep 17 00:00:00 2001 From: Robin Appelman Date: Mon, 17 Oct 2016 13:09:21 +0200 Subject: [PATCH 2/9] Allow selecting a folder after using the breadcrumb Signed-off-by: Robin Appelman --- core/js/oc-dialogs.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/core/js/oc-dialogs.js b/core/js/oc-dialogs.js index 00eb0d70a1..d4c9a8201b 100644 --- a/core/js/oc-dialogs.js +++ b/core/js/oc-dialogs.js @@ -833,7 +833,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); From 590016a978930b22b603e0b9f8408ee0d83a516d Mon Sep 17 00:00:00 2001 From: Robin Appelman Date: Mon, 17 Oct 2016 13:35:59 +0200 Subject: [PATCH 3/9] use fileclient to get the filelist for the filepicker Signed-off-by: Robin Appelman --- core/js/oc-dialogs.js | 29 +++++++++++++++++------------ 1 file changed, 17 insertions(+), 12 deletions(-) diff --git a/core/js/oc-dialogs.js b/core/js/oc-dialogs.js index d4c9a8201b..2a5e39ad20 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'; @@ -727,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]; } @@ -745,25 +746,29 @@ 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) { + files = files.filter(function(file) { + return file.type === 'dir' || filter.indexOf(file.mimetype) !== -1; + }).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({ type: entry.type, @@ -786,7 +791,7 @@ var OCdialogs = { img.src = previewUrl; } else { - $li.find('img').attr('src', OC.Util.replaceSVGIcon(entry.icon)); + $li.find('img').attr('src', OC.MimeType.getIconUrl(entry.mimetype)); } self.$filelist.append($li); }); From 14f78369d7bc6dcc5e0234aac27e596ed7e92953 Mon Sep 17 00:00:00 2001 From: Robin Appelman Date: Mon, 17 Oct 2016 14:26:25 +0200 Subject: [PATCH 4/9] Use a table for the filepicker list and add size column Signed-off-by: Robin Appelman --- core/css/mobile.css | 1 + core/css/styles.css | 41 +++++++++++++++++----------------- core/js/oc-dialogs.js | 33 +++++++++++++++------------ core/templates/filepicker.html | 23 +++++++++++++------ 4 files changed, 57 insertions(+), 41 deletions(-) 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..1141f0d762 100644 --- a/core/css/styles.css +++ b/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;} diff --git a/core/js/oc-dialogs.js b/core/js/oc-dialogs.js index 2a5e39ad20..8df62a1842 100644 --- a/core/js/oc-dialogs.js +++ b/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'); 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} - {date} -
    • -
+
+ + + + + + + + +
{filename} + + {size} + {date}
+
From cee7bfef1620287da8e7302d0f4839c33b60cafc Mon Sep 17 00:00:00 2001 From: Jan-Christoph Borchardt Date: Tue, 18 Oct 2016 11:42:13 +0200 Subject: [PATCH 5/9] filepicker: improve layout and style Signed-off-by: Jan-Christoph Borchardt --- core/css/jquery.ocdialog.css | 36 ++++++++++++++++++------------------ core/css/styles.css | 8 ++++++-- core/js/jquery.ocdialog.js | 4 ++-- 3 files changed, 26 insertions(+), 22 deletions(-) diff --git a/core/css/jquery.ocdialog.css b/core/css/jquery.ocdialog.css index a19fa4c52b..98d765e24a 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,25 @@ min-width: 200px; } .oc-dialog-title { - background: white; - font-weight: bold; - font-size: 110%; - margin-bottom: 5px; - margin-top: -9px; + background: #fff; } .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 +44,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/styles.css b/core/css/styles.css index 1141f0d762..aeb2a5a736 100644 --- a/core/css/styles.css +++ b/core/css/styles.css @@ -775,11 +775,12 @@ a.bookmarklet { background-color:#ddd; border:1px solid #ccc; padding:5px;paddin #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: 290px; + height: 321px; width: 100%; - border-top: 1px solid #eee; + padding-bottom: 55px; } #oc-dialog-filepicker-content .filelist { background-color:white; @@ -790,6 +791,9 @@ a.bookmarklet { background-color:#ddd; border:1px solid #ccc; padding:5px;paddin 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 { overflow: hidden; white-space: nowrap; diff --git a/core/js/jquery.ocdialog.js b/core/js/jquery.ocdialog.js index 15b58f9e08..e26555bd63 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(); From 67050fd463181f96a6a351e4fab19dbad65d2dd9 Mon Sep 17 00:00:00 2001 From: Robin Appelman Date: Tue, 18 Oct 2016 14:01:27 +0200 Subject: [PATCH 6/9] fix file exist dialog styling Signed-off-by: Robin Appelman --- apps/files/css/upload.css | 1 + 1 file changed, 1 insertion(+) 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, From 31745d69f724a89e17632c82e7d76e104cc2764f Mon Sep 17 00:00:00 2001 From: Robin Appelman Date: Wed, 19 Oct 2016 14:22:33 +0200 Subject: [PATCH 7/9] fix filepicker with no mimetype filter Signed-off-by: Robin Appelman --- core/js/oc-dialogs.js | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/core/js/oc-dialogs.js b/core/js/oc-dialogs.js index 8df62a1842..7a7876bf30 100644 --- a/core/js/oc-dialogs.js +++ b/core/js/oc-dialogs.js @@ -754,9 +754,12 @@ var OCdialogs = { filter = [filter]; } self.filepicker.filesClient.getFolderContents(dir).then(function(status, files) { - files = files.filter(function(file) { - return file.type === 'dir' || filter.indexOf(file.mimetype) !== -1; - }).sort(function(a, b) { + 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') { From 19e1ff1b0f8db0915921d0a2ecb3f68fa06cf9cb Mon Sep 17 00:00:00 2001 From: Jan-Christoph Borchardt Date: Wed, 19 Oct 2016 14:43:04 +0200 Subject: [PATCH 8/9] add proper left margin for filepicker title Signed-off-by: Jan-Christoph Borchardt --- core/css/jquery.ocdialog.css | 1 + 1 file changed, 1 insertion(+) diff --git a/core/css/jquery.ocdialog.css b/core/css/jquery.ocdialog.css index 98d765e24a..0e46ff2015 100644 --- a/core/css/jquery.ocdialog.css +++ b/core/css/jquery.ocdialog.css @@ -12,6 +12,7 @@ } .oc-dialog-title { background: #fff; + margin-left: 12px; } .oc-dialog-content { z-index: 1000; From b3f2771d3c5feff7c400b0026560c90a58054b2d Mon Sep 17 00:00:00 2001 From: Morris Jobke Date: Thu, 20 Oct 2016 13:10:26 +0200 Subject: [PATCH 9/9] Improve the styling * remove the scrollbar (content did an overflow due to a min-width) * have proper padding on the right too - padding is 15px on all sides for .oc-dialog Signed-off-by: Morris Jobke --- core/css/styles.css | 4 ++++ core/js/jquery.ocdialog.js | 4 ++-- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/core/css/styles.css b/core/css/styles.css index aeb2a5a736..94e60562ad 100644 --- a/core/css/styles.css +++ b/core/css/styles.css @@ -786,6 +786,10 @@ a.bookmarklet { background-color:#ddd; border:1px solid #ccc; padding:5px;paddin background-color:white; width:100%; } +#oc-dialog-filepicker-content #filestable.filelist { + /* prevent the filepicker to overflow */ + min-width: initial; +} #oc-dialog-filepicker-content .filelist td { padding: 14px; diff --git a/core/js/jquery.ocdialog.js b/core/js/jquery.ocdialog.js index e26555bd63..66c7d9bd7f 100644 --- a/core/js/jquery.ocdialog.js +++ b/core/js/jquery.ocdialog.js @@ -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' }); } },