From 74197462c0299a766b33289571dcbdc54b6eeabd Mon Sep 17 00:00:00 2001 From: Florian Schunk Date: Fri, 14 Dec 2018 12:35:15 +0100 Subject: [PATCH 01/10] added button for new folder to interface Signed-off-by: Florian Schunk --- core/css/styles.scss | 27 ++++++++++++++++++++++++++- core/templates/filepicker.html | 1 + 2 files changed, 27 insertions(+), 1 deletion(-) diff --git a/core/css/styles.scss b/core/css/styles.scss index d739bab101..e51352b4b6 100644 --- a/core/css/styles.scss +++ b/core/css/styles.scss @@ -701,7 +701,6 @@ code { position: relative; .dirtree { - width: 100%; flex-wrap: wrap; padding-left: 12px; padding-right: 44px; @@ -746,6 +745,32 @@ 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: 44px; + background-color: var(--color-background-dark); + border: 1px solid var(--color-border-dark); + border-radius: var(--border-radius-pill); + position: static; + + .icon.icon-add{ + background-image: var(--icon-add-000); + background-size: 16px 16px; + max-height:44px; + + } + + a { + width: 44px; + padding: 0px; + position: static; + } + } .filelist-container { box-sizing: border-box; diff --git a/core/templates/filepicker.html b/core/templates/filepicker.html index 2f61d32f3f..bcd901d8a9 100644 --- a/core/templates/filepicker.html +++ b/core/templates/filepicker.html @@ -1,5 +1,6 @@
+
From dba14fac8b394377107cfef3ce8f53c538aebcec Mon Sep 17 00:00:00 2001 From: Florian Schunk Date: Thu, 20 Dec 2018 14:34:26 +0100 Subject: [PATCH 02/10] 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 @@
- + + +
From b61df4e29056437a3f59c48e9d0e404a3fa05359 Mon Sep 17 00:00:00 2001 From: Florian Schunk Date: Sat, 22 Dec 2018 11:31:32 +0100 Subject: [PATCH 03/10] adjust design to match file app Signed-off-by: Florian Schunk --- core/css/styles.scss | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/core/css/styles.scss b/core/css/styles.scss index 145592c778..fd5702787a 100644 --- a/core/css/styles.scss +++ b/core/css/styles.scss @@ -703,7 +703,7 @@ code { .dirtree { flex-wrap: wrap; padding-left: 12px; - padding-right: 44px; + padding-right: 0px; box-sizing: border-box; div:first-child a { @@ -752,24 +752,25 @@ code { box-sizing: border-box; display: inline-flex; float: none; - max-height: 44px; - max-width:44px; + 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: relative; + top: -5px; .icon.icon-add{ background-image: var(--icon-add-000); background-size: 16px 16px; - max-height:44px; - width:44px; + max-height:36px; + width:36px; margin:0px; } a { - width: 44px; + width: 36px; padding: 0px; position: static; } From ff1e0e2302b2cfe0db888dabae7ad2a876425d1f Mon Sep 17 00:00:00 2001 From: Florian Schunk Date: Sat, 22 Dec 2018 12:06:56 +0100 Subject: [PATCH 04/10] reset name of new folder and prevent the form from being submitted twice Signed-off-by: Florian Schunk --- core/js/oc-dialogs.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/core/js/oc-dialogs.js b/core/js/oc-dialogs.js index bf34ac1e55..bf87c8b642 100644 --- a/core/js/oc-dialogs.js +++ b/core/js/oc-dialogs.js @@ -262,6 +262,8 @@ var OCdialogs = { 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(); @@ -275,7 +277,7 @@ var OCdialogs = { var $input = $form.find('input[type=\'text\']'); var $submit = $form.find('input[type=\'submit\']'); $submit.on('click',function(event) { - event.stopPropagation(); + event.stopImmediatePropagation(); event.preventDefault(); $form.submit(); }); @@ -314,10 +316,13 @@ var OCdialogs = { 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(); } }); From b555fb3ff56d77b139f875ff7ea587844afa77b0 Mon Sep 17 00:00:00 2001 From: Florian Schunk Date: Sat, 22 Dec 2018 12:23:59 +0100 Subject: [PATCH 05/10] open name prompt on pressing enter Signed-off-by: Florian Schunk --- core/js/oc-dialogs.js | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/core/js/oc-dialogs.js b/core/js/oc-dialogs.js index bf87c8b642..dcdb339c37 100644 --- a/core/js/oc-dialogs.js +++ b/core/js/oc-dialogs.js @@ -259,6 +259,17 @@ var OCdialogs = { } 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() { From 808cf39961e88352a2d1551a9063f58fb9093e3f Mon Sep 17 00:00:00 2001 From: Florian Schunk Date: Sat, 22 Dec 2018 17:38:51 +0100 Subject: [PATCH 06/10] change menu's orientation to make sure it is completly visible Signed-off-by: Florian Schunk --- core/css/styles.scss | 1 + core/js/oc-dialogs.js | 2 +- core/templates/filepicker.html | 2 +- 3 files changed, 3 insertions(+), 2 deletions(-) diff --git a/core/css/styles.scss b/core/css/styles.scss index fd5702787a..541c0d4a85 100644 --- a/core/css/styles.scss +++ b/core/css/styles.scss @@ -778,6 +778,7 @@ code { .menu { top:100%; margin:10px; + margin-left: 0px; form { display:flex; margin:10px; diff --git a/core/js/oc-dialogs.js b/core/js/oc-dialogs.js index dcdb339c37..0ef371cd75 100644 --- a/core/js/oc-dialogs.js +++ b/core/js/oc-dialogs.js @@ -307,7 +307,7 @@ var OCdialogs = { } } catch (error) { $input.attr('title', error); - $input.tooltip({placement: 'right', trigger: 'manual', 'container': '.newFileMenu'}); + $input.tooltip({placement: 'right', trigger: 'manual', 'container': '.newFolderMenu'}); $input.tooltip('fixTitle'); $input.tooltip('show'); $input.addClass('error'); diff --git a/core/templates/filepicker.html b/core/templates/filepicker.html index d764ff377d..b88c8f308d 100644 --- a/core/templates/filepicker.html +++ b/core/templates/filepicker.html @@ -1,7 +1,7 @@
-