Merge pull request #3307 from nextcloud/improvements/folder_creation_design

Fix folder creation design

src/components/NavigationAccount.vue

@@ -49,9 +49,13 @@
 			>
 				{{ t('mail', 'Show only subscribed folders') }}
 			</ActionCheckbox>
-			<ActionInput icon="icon-add" @submit="createFolder">
+			<ActionButton v-if="!editing" icon="icon-folder" @click="openCreateFolder">
 				{{ t('mail', 'Add folder') }}
-			</ActionInput>
+			</ActionButton>
+			<ActionInput v-if="editing" icon="icon-folder" @submit.prevent.stop="createFolder" />
+			<ActionText v-if="showSaving" icon="icon-loading-small">
+				{{ t('mail', 'Saving') }}
+			</ActionText>
 			<ActionButton v-if="!isFirst" icon="icon-triangle-n" @click="changeAccountOrderUp">
 				{{ t('mail', 'Move Up') }}
 			</ActionButton>
@@ -117,6 +121,8 @@ export default {
 			},
 			savingShowOnlySubscribed: false,
 			quota: undefined,
+			editing: false,
+			showSaving: false,
 		}
 	},
 	computed: {
@@ -165,6 +171,7 @@ export default {
 	},
 	methods: {
 		createFolder(e) {
+			this.editing = true
 			const name = e.target.elements[1].value
 			logger.info('creating folder ' + name)
 			this.menuOpen = false
@@ -175,6 +182,12 @@ export default {
 					logger.error('could not create folder', {error})
 					throw error
 				})
+			this.editing = false
+			this.showSaving = false
+		},
+		openCreateFolder() {
+			this.editing = true
+			this.showSaving = false
 		},
 		removeAccount() {
 			const id = this.account.id

src/components/NavigationFolder.vue

@@ -25,10 +25,12 @@
 		:id="genId(folder)"
 		:key="genId(folder)"
 		:allow-collapse="true"
+		:menu-open.sync="menuOpen"
 		:force-menu="true"
 		:icon="icon"
 		:title="title"
 		:to="to"
+		:open.sync="showSubFolders"
 		@update:menuOpen="onMenuToggle"
 	>
 		<!-- actions -->
@@ -52,13 +54,17 @@
 					{{ t('mail', 'Mark all messages of this folder as read') }}
 				</ActionButton>
 
-				<ActionInput
-					v-if="top && !account.isUnified && folder.specialRole !== 'flagged'"
-					icon="icon-add"
-					@submit="createFolder"
+				<ActionButton
+					v-if="!editing && top && !account.isUnified && folder.specialRole !== 'flagged'"
+					icon="icon-folder"
+					@click="openCreateFolder"
 				>
 					{{ t('mail', 'Add subfolder') }}
-				</ActionInput>
+				</ActionButton>
+				<ActionInput v-if="editing" icon="icon-folder" @submit.prevent.stop="createFolder" />
+				<ActionText v-if="showSaving" icon="icon-loading-small">
+					{{ t('mail', 'Saving') }}
+				</ActionText>
 
 				<ActionButton
 					v-if="debug && !account.isUnified && folder.specialRole !== 'flagged'"
@@ -133,6 +139,10 @@ export default {
 			folderStats: undefined,
 			loadingMarkAsRead: false,
 			clearingCache: false,
+			showSaving: false,
+			editing: false,
+			showSubFolders: false,
+			menuOpen: false,
 		}
 	},
 	computed: {
@@ -235,21 +245,30 @@ export default {
 			}
 		},
 
-		createFolder(e) {
+		async createFolder(e) {
+			this.editing = true
 			const name = e.target.elements[1].value
 			const withPrefix = atob(this.folder.id) + this.folder.delimiter + name
 			logger.info(`creating folder ${withPrefix} as subfolder of ${this.folder.id}`)
 			this.menuOpen = false
-			this.$store
-				.dispatch('createFolder', {
+			try {
+				await this.$store.dispatch('createFolder', {
 					account: this.account,
 					name: withPrefix,
 				})
-				.then(() => logger.info(`folder ${withPrefix} created`))
-				.catch((error) => {
-					logger.error(`could not create folder ${withPrefix}`, {error})
-					throw error
-				})
+			} catch (error) {
+				logger.error(`could not create folder ${withPrefix}`, {error})
+				throw error
+			} finally {
+				this.editing = false
+				this.showSaving = false
+			}
+			logger.info(`folder ${withPrefix} created`)
+			this.showSubFolders = true
+		},
+		openCreateFolder() {
+			this.editing = true
+			this.showSaving = false
 		},
 		markAsRead() {
 			this.loadingMarkAsRead = true

src/store/actions.js

@@ -150,6 +150,7 @@ export default {
 		return createFolder(account.id, name).then((folder) => {
 			console.debug(`folder ${name} created for account ${account.id}`, {folder})
 			commit('addFolder', {account, folder})
+			commit('expandAccount', account.id)
 		})
 	},
 	moveAccount({commit, getters}, {account, up}) {

src/store/mutations.js

@@ -84,6 +84,9 @@ export default {
 	toggleAccountCollapsed(state, accountId) {
 		state.accounts[accountId].collapsed = !state.accounts[accountId].collapsed
 	},
+	expandAccount(state, accountId) {
+		state.accounts[accountId].collapsed = false
+	},
 	addFolder(state, {account, folder}) {
 		// Flatten the existing ones before updating the hierarchy
 		const existing = account.folders.map((id) => state.folders[id])