add functionality to create new folder in file picker

Signed-off-by: Florian Schunk <[email protected]>

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 {

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;

core/js/oc-dialogs.js

@@ -205,13 +205,16 @@ 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');
 		}
 
 		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;

core/templates/filepicker.html

@@ -1,6 +1,15 @@
 <div id="{dialog_name}" title="{title}">
 	<span class="dirtree breadcrumb"></span>
-	<span class="actions creatable"><a href="#" class="icon icon-add button"></a></span>
+	<span class="actions creatable"><a href="#" class="icon icon-add button button-add"></a>
+	<nav class="menu popovermenu bubble menu-center newFileMenu">
+		<ul><li>
+		<form class="filenameform">
+			<input type="text" value={newtext}>
+			<input class="icon-confirm" type="submit" value="">
+		</form>
+			</li></ul>
+	</nav>
+	</span>
 	<input type="checkbox" class="hidden-visually" id="picker-showgridview" checked="checked" />
 	<label id="picker-view-toggle" for="picker-showgridview" class="button icon-toggle-filelist"></label>
 	<div class="filelist-container">