diff --git a/core/css/styles.scss b/core/css/styles.scss index d739bab101..9ac41b3f02 100644 --- a/core/css/styles.scss +++ b/core/css/styles.scss @@ -701,10 +701,9 @@ code { position: relative; .dirtree { - width: 100%; flex-wrap: wrap; padding-left: 12px; - padding-right: 44px; + padding-right: 0px; box-sizing: border-box; div:first-child a { @@ -746,6 +745,47 @@ code { #picker-showgridview:focus + #picker-view-toggle { opacity: 1; } + + .actions.creatable { + flex-wrap: wrap; + padding: 0px; + box-sizing: border-box; + display: inline-flex; + float: none; + max-height: 36px; + max-width: 36px; + background-color: var(--color-background-dark); + border: 1px solid var(--color-border-dark); + border-radius: var(--border-radius-pill); + position: absolute; + top: 4px; + + .icon.icon-add{ + background-image: var(--icon-add-000); + background-size: 16px 16px; + max-height:36px; + width:36px; + margin:0px; + + } + + a { + width: 36px; + padding: 0px; + position: static; + } + + .menu { + top:100%; + margin:10px; + margin-left: 0px; + form { + display:flex; + margin:10px; + } + } + + } .filelist-container { box-sizing: border-box; diff --git a/core/js/jquery.ocdialog.js b/core/js/jquery.ocdialog.js index 02bd3069c5..1610d8ac46 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..ed09b4121a 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,86 @@ var OCdialogs = { self._getGridSettings(); } + var newButton = self.$filePicker.find('.actions.creatable .button-add'); + newButton.on('focus', function() { + self.$filePicker.ocdialog('setEnterCallback', function() { + event.stopImmediatePropagation(); + event.preventDefault(); + newButton.click(); + }); + }); + newButton.on('blur', function() { + self.$filePicker.ocdialog('unsetEnterCallback'); + }); + + OC.registerMenu(newButton,self.$filePicker.find('.menu'),function () { + $input.focus(); + self.$filePicker.ocdialog('setEnterCallback', function() { + event.stopImmediatePropagation(); + event.preventDefault(); + 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.stopImmediatePropagation(); + 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': '.newFolderMenu'}); + $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') + newname ); + }); + OC.hideMenus(); + self.$filePicker.ocdialog('unsetEnterCallback'); + self.$filePicker.click(); + $input.val(newText); + } + }); + $input.keypress(function(event) { + if (event.keyCode === 13 || event.which === 13) { + event.stopImmediatePropagation(); + event.preventDefault(); + $form.submit(); + } + }); + self.$filePicker.ready(function() { self.$fileListHeader = self.$filePicker.find('.filelist thead tr'); self.$filelist = self.$filePicker.find('.filelist tbody'); @@ -912,6 +996,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 2f61d32f3f..b88c8f308d 100644 --- a/core/templates/filepicker.html +++ b/core/templates/filepicker.html @@ -1,5 +1,15 @@
+ + +