From dba14fac8b394377107cfef3ce8f53c538aebcec Mon Sep 17 00:00:00 2001 From: Florian Schunk Date: Thu, 20 Dec 2018 14:34:26 +0100 Subject: [PATCH] add functionality to create new folder in file picker Signed-off-by: Florian Schunk --- core/css/styles.scss | 15 ++++++- core/js/jquery.ocdialog.js | 13 +++++++ core/js/oc-dialogs.js | 71 +++++++++++++++++++++++++++++++++- core/templates/filepicker.html | 11 +++++- 4 files changed, 107 insertions(+), 3 deletions(-) diff --git a/core/css/styles.scss b/core/css/styles.scss index e51352b4b6..145592c778 100644 --- a/core/css/styles.scss +++ b/core/css/styles.scss @@ -753,15 +753,18 @@ code { display: inline-flex; float: none; max-height: 44px; + max-width:44px; background-color: var(--color-background-dark); border: 1px solid var(--color-border-dark); border-radius: var(--border-radius-pill); - position: static; + position: relative; .icon.icon-add{ background-image: var(--icon-add-000); background-size: 16px 16px; max-height:44px; + width:44px; + margin:0px; } @@ -770,6 +773,16 @@ code { padding: 0px; position: static; } + + .menu { + top:100%; + margin:10px; + form { + display:flex; + margin:10px; + } + } + } .filelist-container { diff --git a/core/js/jquery.ocdialog.js b/core/js/jquery.ocdialog.js index 02bd3069c5..daf6cf3ca5 100644 --- a/core/js/jquery.ocdialog.js +++ b/core/js/jquery.ocdialog.js @@ -34,6 +34,8 @@ position: 'fixed' }); + this.enterCallback = null; + $(document).on('keydown keyup', function(event) { if ( event.target !== self.$dialog.get(0) && @@ -54,6 +56,11 @@ // Enter if(event.keyCode === 13) { event.stopImmediatePropagation(); + if (self.enterCallback != null) { + self.enterCallback(); + event.preventDefault(); + return false; + } if(event.type === 'keyup') { event.preventDefault(); return false; @@ -206,6 +213,12 @@ widget: function() { return this.$dialog; }, + setEnterCallback: function(callback) { + this.enterCallback = callback; + }, + unsetEnterCallback: function() { + this.enterCallback = null; + }, close: function() { this._destroyOverlay(); var self = this; diff --git a/core/js/oc-dialogs.js b/core/js/oc-dialogs.js index 5e1bc42097..bf34ac1e55 100644 --- a/core/js/oc-dialogs.js +++ b/core/js/oc-dialogs.js @@ -205,6 +205,7 @@ var OCdialogs = { } var emptyText = t('core', 'No files in here'); + var newText = t('files', 'New folder'); if (type === this.FILEPICKER_TYPE_COPY || type === this.FILEPICKER_TYPE_MOVE || type === this.FILEPICKER_TYPE_COPY_MOVE) { emptyText = t('core', 'No more subfolders in here'); } @@ -212,6 +213,8 @@ var OCdialogs = { this.filepicker.loading = true; this.filepicker.filesClient = (OCA.Sharing && OCA.Sharing.PublicApp && OCA.Sharing.PublicApp.fileList)? OCA.Sharing.PublicApp.fileList.filesClient: OC.Files.getClient(); + this.filelist = null; + $.when(this._getFilePickerTemplate()).then(function($tmpl) { self.filepicker.loading = false; var dialogName = 'oc-dialog-filepicker-content'; @@ -229,7 +232,8 @@ var OCdialogs = { self.$filePicker = $tmpl.octemplate({ dialog_name: dialogName, title: title, - emptytext: emptyText + emptytext: emptyText, + newtext: newText }).data('path', '').data('multiselect', multiselect).data('mimetype', mimetypeFilter); if (modal === undefined) { @@ -254,6 +258,70 @@ var OCdialogs = { self._getGridSettings(); } + var newButton = self.$filePicker.find('.actions.creatable .button-add'); + OC.registerMenu(newButton,self.$filePicker.find('.menu'),function () { + $input.focus(); + self.$filePicker.ocdialog('setEnterCallback', function() { + self.$form.submit(); + }); + var newName = $input.val(); + lastPos = newName.lastIndexOf('.'); + if (lastPos === -1) { + lastPos = newName.length; + } + $input.selectRange(0, lastPos); + }); + var $form = self.$filePicker.find('.filenameform'); + var $input = $form.find('input[type=\'text\']'); + var $submit = $form.find('input[type=\'submit\']'); + $submit.on('click',function(event) { + event.stopPropagation(); + event.preventDefault(); + $form.submit(); + }); + + var checkInput = function () { + var filename = $input.val(); + try { + if (!Files.isFileNameValid(filename)) { + // Files.isFileNameValid(filename) throws an exception itself + } else if (self.filelist.find(function(file){return file.name == this;},filename)) { + throw t('files', '{newName} already exists', {newName: filename}, undefined, { + escape: false + }); + } else { + return true; + } + } catch (error) { + $input.attr('title', error); + $input.tooltip({placement: 'right', trigger: 'manual', 'container': '.newFileMenu'}); + $input.tooltip('fixTitle'); + $input.tooltip('show'); + $input.addClass('error'); + } + return false; + }; + + $form.on('submit', function(event) { + event.stopPropagation(); + event.preventDefault(); + + if (checkInput()) { + var newname = $input.val(); + self.filepicker.filesClient.createDirectory(self.$filePicker.data('path') + "/" + newname).always(function (status) { + self._fillFilePicker(self.$filePicker.data('path') ); + }); + OC.hideMenus(); + self.$filePicker.ocdialog('unsetEnterCallback'); + self.$filePicker.click(); + } + }); + $input.keypress(function(event) { + if (event.keyCode == 13 || event.which == 13) { + $form.submit(); + } + }); + self.$filePicker.ready(function() { self.$fileListHeader = self.$filePicker.find('.filelist thead tr'); self.$filelist = self.$filePicker.find('.filelist tbody'); @@ -912,6 +980,7 @@ var OCdialogs = { self.$fileListHeader.find('[data-sort=' + self.filepicker.sortField + '] .sort-indicator').addClass('icon-triangle-s'); } self.filepicker.filesClient.getFolderContents(dir).then(function(status, files) { + self.filelist = files; if (filter && filter.length > 0 && filter.indexOf('*') === -1) { files = files.filter(function (file) { return file.type === 'dir' || filter.indexOf(file.mimetype) !== -1; diff --git a/core/templates/filepicker.html b/core/templates/filepicker.html index bcd901d8a9..d764ff377d 100644 --- a/core/templates/filepicker.html +++ b/core/templates/filepicker.html @@ -1,6 +1,15 @@
- + + +