From 9f3d367babb6eacd1eac7399a1e85b084d49e4f9 Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Tue, 11 Aug 2020 11:44:27 -0400
Subject: [PATCH 1/5] Allow exact in parent folder

---
 app/src/components/v-list/v-list-group.vue                | 6 +++++-
 .../files/components/navigation/navigation-folder.vue     | 8 ++------
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/app/src/components/v-list/v-list-group.vue b/app/src/components/v-list/v-list-group.vue
index 3e91a4ed1e..871c062bcc 100644
--- a/app/src/components/v-list/v-list-group.vue
+++ b/app/src/components/v-list/v-list-group.vue
@@ -1,6 +1,6 @@
 <template>
 	<div class="v-list-group">
-		<v-list-item :active="active" class="activator" :to="to" @click="onClick">
+		<v-list-item :active="active" class="activator" :to="to" :exact="exact" @click="onClick">
 			<slot name="activator" :active="groupActive" />
 
 			<v-list-item-icon class="activator-icon" :class="{ active: groupActive }">
@@ -34,6 +34,10 @@ export default defineComponent({
 			type: Boolean,
 			default: false,
 		},
+		exact: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	setup(props, { listeners, emit }) {
 		const { active: groupActive, toggle } = useGroupable();
diff --git a/app/src/modules/files/components/navigation/navigation-folder.vue b/app/src/modules/files/components/navigation/navigation-folder.vue
index aca8606929..273714b1dc 100644
--- a/app/src/modules/files/components/navigation/navigation-folder.vue
+++ b/app/src/modules/files/components/navigation/navigation-folder.vue
@@ -1,13 +1,9 @@
 <template>
-	<v-list-item
-		v-if="folder.children === undefined"
-		:to="`/files?folder=${folder.id}`"
-		exact
-	>
+	<v-list-item v-if="folder.children === undefined" :to="`/files?folder=${folder.id}`" exact>
 		<v-list-item-icon><v-icon name="folder" /></v-list-item-icon>
 		<v-list-item-content>{{ folder.name }}</v-list-item-content>
 	</v-list-item>
-	<v-list-group v-else @click="clickHandler(folder.id)" :active="currentFolder === folder.id">
+	<v-list-group v-else :to="`/files?folder=${folder.id}`" exact>
 		<template #activator="{ active }">
 			<v-list-item-icon>
 				<v-icon :name="active ? 'folder_open' : 'folder'" />

From ce8d0f5ad5bb8476428634a94f7f893cc007760a Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Tue, 11 Aug 2020 13:15:04 -0400
Subject: [PATCH 2/5] Add context menu for folder operations rename/move

---
 app/src/components/v-dialog/v-dialog.vue      |  20 ++-
 .../v-field-template/v-field-template.vue     |   2 +-
 app/src/components/v-form/form-field.vue      |   8 +-
 app/src/components/v-input/v-input.story.ts   |   2 +-
 app/src/components/v-list/v-list-group.vue    |   8 +-
 app/src/components/v-list/v-list.vue          |   2 +-
 app/src/components/v-menu/readme.md           |   2 +-
 app/src/components/v-menu/use-popper.ts       |   6 +
 app/src/components/v-menu/v-menu.vue          |  53 +++---
 app/src/interfaces/file/file.vue              |   2 +-
 app/src/interfaces/icon/icon.vue              |   4 +-
 .../interfaces/many-to-one/many-to-one.vue    |   2 +-
 app/src/interfaces/status/status.vue          |   2 +-
 app/src/interfaces/user/user.vue              |   2 +-
 app/src/lang/en-US/index.json                 |   3 +
 .../folder-picker/folder-picker-list-item.vue |   7 +-
 .../folder-picker/folder-picker.vue           |   7 +-
 .../navigation/navigation-folder.vue          | 167 +++++++++++++++---
 .../modules/files/composables/use-folders.ts  |   7 +-
 .../collection-options/collection-options.vue |   2 +-
 .../components/field-select/field-select.vue  |   2 +-
 .../fields-management/fields-management.vue   |   2 +-
 .../comment-item-header.vue                   |   2 +-
 .../filter-drawer-detail/field-filter.vue     |   2 +-
 .../filter-drawer-detail.vue                  |   2 +-
 .../components/image-editor/image-editor.vue  |   2 +-
 .../revisions-modal-picker.vue                |   2 +-
 27 files changed, 244 insertions(+), 78 deletions(-)

diff --git a/app/src/components/v-dialog/v-dialog.vue b/app/src/components/v-dialog/v-dialog.vue
index bcda688d28..0c2e00976b 100644
--- a/app/src/components/v-dialog/v-dialog.vue
+++ b/app/src/components/v-dialog/v-dialog.vue
@@ -1,9 +1,9 @@
 <template>
 	<div class="v-dialog">
-		<slot name="activator" v-bind="{ on: () => $emit('toggle', true) }" />
+		<slot name="activator" v-bind="{ on: () => (_active = true) }" />
 
 		<portal to="dialog-outlet">
-			<div v-if="active" class="container" :class="[className]" :key="id">
+			<div v-if="_active" class="container" :class="[className]" :key="id">
 				<v-overlay active absolute @click="emitToggle" />
 				<slot />
 			</div>
@@ -23,7 +23,7 @@ export default defineComponent({
 	props: {
 		active: {
 			type: Boolean,
-			default: false,
+			default: undefined,
 		},
 		persistent: {
 			type: Boolean,
@@ -31,10 +31,22 @@ export default defineComponent({
 		},
 	},
 	setup(props, { emit }) {
+		const localActive = ref(false);
+
 		const className = ref<string | null>(null);
 		const id = computed(() => nanoid());
 
-		return { emitToggle, className, nudge, id };
+		const _active = computed({
+			get() {
+				return props.active !== undefined ? props.active : localActive.value;
+			},
+			set(newActive: boolean) {
+				localActive.value = newActive;
+				emit('toggle', newActive);
+			},
+		});
+
+		return { emitToggle, className, nudge, id, _active };
 
 		function emitToggle() {
 			if (props.persistent === false) {
diff --git a/app/src/components/v-field-template/v-field-template.vue b/app/src/components/v-field-template/v-field-template.vue
index 9233740666..4b4330b285 100644
--- a/app/src/components/v-field-template/v-field-template.vue
+++ b/app/src/components/v-field-template/v-field-template.vue
@@ -1,5 +1,5 @@
 <template>
-	<v-menu attached close-on-content-click v-model="menuActive">
+	<v-menu attached v-model="menuActive">
 		<template #activator="{ toggle }">
 			<v-input>
 				<template #input>
diff --git a/app/src/components/v-form/form-field.vue b/app/src/components/v-form/form-field.vue
index c7b697b50d..1b5aa98fe6 100644
--- a/app/src/components/v-form/form-field.vue
+++ b/app/src/components/v-form/form-field.vue
@@ -1,12 +1,6 @@
 <template>
 	<div class="field" :key="field.field" :class="field.meta.width">
-		<v-menu
-			v-if="field.hideLabel !== true"
-			placement="bottom-start"
-			show-arrow
-			close-on-content-click
-			:disabled="isDisabled"
-		>
+		<v-menu v-if="field.hideLabel !== true" placement="bottom-start" show-arrow :disabled="isDisabled">
 			<template #activator="{ toggle, active }">
 				<form-field-label
 					:field="field"
diff --git a/app/src/components/v-input/v-input.story.ts b/app/src/components/v-input/v-input.story.ts
index 6648422c1a..f2e82c0ed2 100644
--- a/app/src/components/v-input/v-input.story.ts
+++ b/app/src/components/v-input/v-input.story.ts
@@ -123,7 +123,7 @@ export const withMenu = () =>
 		components: { VMenu },
 		template: `
 			<div>
-				<v-menu placement="bottom-start" close-on-content-click attached>
+				<v-menu placement="bottom-start" attached>
 					<template #activator="{ toggle, active }">
 						<v-input placeholder="Enter value...">
 							<template #append><v-icon @click="toggle" name="public" :style="{
diff --git a/app/src/components/v-list/v-list-group.vue b/app/src/components/v-list/v-list-group.vue
index 871c062bcc..3fbe65de13 100644
--- a/app/src/components/v-list/v-list-group.vue
+++ b/app/src/components/v-list/v-list-group.vue
@@ -1,10 +1,10 @@
 <template>
 	<div class="v-list-group">
-		<v-list-item :active="active" class="activator" :to="to" :exact="exact" @click="onClick">
+		<v-list-item :active="active" class="activator" :to="to" :exact="exact" @click="onClick" :disabled="disabled">
 			<slot name="activator" :active="groupActive" />
 
 			<v-list-item-icon class="activator-icon" :class="{ active: groupActive }">
-				<v-icon name="chevron_right" @click.stop.prevent="toggle" />
+				<v-icon name="chevron_right" @click.stop.prevent="toggle" :disabled="disabled" />
 			</v-list-item-icon>
 		</v-list-item>
 
@@ -38,6 +38,10 @@ export default defineComponent({
 			type: Boolean,
 			default: false,
 		},
+		disabled: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	setup(props, { listeners, emit }) {
 		const { active: groupActive, toggle } = useGroupable();
diff --git a/app/src/components/v-list/v-list.vue b/app/src/components/v-list/v-list.vue
index eb9b4c1677..a1a4521b41 100644
--- a/app/src/components/v-list/v-list.vue
+++ b/app/src/components/v-list/v-list.vue
@@ -55,7 +55,7 @@ body {
 	--v-list-padding: 4px 0;
 	--v-list-max-height: none;
 	--v-list-max-width: none;
-	--v-list-min-width: none;
+	--v-list-min-width: 220px;
 	--v-list-min-height: none;
 	--v-list-color: var(--foreground-normal);
 	--v-list-color-hover: var(--foreground-normal);
diff --git a/app/src/components/v-menu/readme.md b/app/src/components/v-menu/readme.md
index e71220e8ed..de59faf323 100644
--- a/app/src/components/v-menu/readme.md
+++ b/app/src/components/v-menu/readme.md
@@ -14,7 +14,7 @@ within a menu. If you ever find yourself doing this:
 | `placement`              | Where to position the popper.                                     | `bottom`    |
 | `value`                  | Value to control menu active state                                | `undefined` |
 | `close-on-click`         | Close the menu when clicking outside of the menu                  | `true`      |
-| `close-on-content-click` | Close the menu when clicking the content of the menu              | `false`     |
+| `close-on-content-click` | Close the menu when clicking the content of the menu              | `true`     |
 | `attached`               | Attach the menu to an input                                       | `false`     |
 | `show-arrow`             | Show an arrow pointer                                             | `false`     |
 | `disabled`               | Menu does not appear                                              | `false`     |
diff --git a/app/src/components/v-menu/use-popper.ts b/app/src/components/v-menu/use-popper.ts
index e837914f20..b8521dd6c1 100644
--- a/app/src/components/v-menu/use-popper.ts
+++ b/app/src/components/v-menu/use-popper.ts
@@ -82,6 +82,12 @@ export function usePopper(
 					padding: 8,
 				},
 			},
+			{
+				name: 'arrow',
+				options: {
+					padding: 6,
+				},
+			},
 			computeStyles,
 			flip,
 			eventListeners,
diff --git a/app/src/components/v-menu/v-menu.vue b/app/src/components/v-menu/v-menu.vue
index 334a39264c..2798cf2250 100644
--- a/app/src/components/v-menu/v-menu.vue
+++ b/app/src/components/v-menu/v-menu.vue
@@ -34,12 +34,7 @@
 					events: ['click'],
 				}"
 			>
-				<div
-					class="arrow"
-					:class="{ active: showArrow && isActive }"
-					:style="arrowStyles"
-					data-popper-arrow
-				/>
+				<div class="arrow" :class="{ active: showArrow && isActive }" :style="arrowStyles" data-popper-arrow />
 				<div class="v-menu-content" @click.stop="onContentClick">
 					<slot :active="isActive" />
 				</div>
@@ -55,18 +50,6 @@ import { Placement } from '@popperjs/core';
 import { nanoid } from 'nanoid';
 import Vue from 'vue';
 
-/**
- * @NOTE
- *
- * The framerate takes a little hit when opening menus, as we're rendering the content of it while
- * we're opening it. We could potentially optimize this by rendering the menu content ahead of time,
- * so all the processing power is freed up for the popper calculations and transition logic.
- *
- * However, we _can not_ render all menu content at all times, as that greatly decreases perf in the
- * app. I'm thinking we might be able to pre-render the menu content on hover of the activator, so
- * the actual act of opening the menu is quicker.
- */
-
 export default defineComponent({
 	props: {
 		placement: {
@@ -83,7 +66,7 @@ export default defineComponent({
 		},
 		closeOnContentClick: {
 			type: Boolean,
-			default: false,
+			default: true,
 		},
 		attached: {
 			type: Boolean,
@@ -109,9 +92,19 @@ export default defineComponent({
 	},
 	setup(props, { emit }) {
 		const activator = ref<HTMLElement | null>(null);
+		const reference = ref<HTMLElement | null>(null);
 
-		const reference = computed<HTMLElement | null>(() => {
-			return (activator.value as HTMLElement)?.childNodes[0] as HTMLElement;
+		const virtualReference = ref({
+			getBoundingClientRect() {
+				return {
+					top: 0,
+					left: 0,
+					bottom: 0,
+					right: 0,
+					width: 0,
+					height: 0,
+				};
+			},
 		});
 
 		const id = computed(() => nanoid());
@@ -175,6 +168,8 @@ export default defineComponent({
 					return localIsActive.value;
 				},
 				async set(newActive) {
+					reference.value =
+						((activator.value as HTMLElement)?.childNodes[0] as HTMLElement) || virtualReference.value;
 					localIsActive.value = newActive;
 					emit('input', newActive);
 				},
@@ -194,7 +189,21 @@ export default defineComponent({
 
 			return { isActive, activate, deactivate, toggle };
 
-			function activate() {
+			function activate(event?: MouseEvent) {
+				if (event) {
+					virtualReference.value = {
+						getBoundingClientRect() {
+							return {
+								top: event.clientY,
+								left: event.clientX,
+								bottom: 0,
+								right: 0,
+								width: 0,
+								height: 0,
+							};
+						},
+					};
+				}
 				isActive.value = true;
 			}
 
diff --git a/app/src/interfaces/file/file.vue b/app/src/interfaces/file/file.vue
index a0f6342b72..3a4af23e10 100644
--- a/app/src/interfaces/file/file.vue
+++ b/app/src/interfaces/file/file.vue
@@ -1,6 +1,6 @@
 <template>
 	<div class="file">
-		<v-menu attached close-on-content-click :disabled="disabled || loading">
+		<v-menu attached :disabled="disabled || loading">
 			<template #activator="{ toggle }">
 				<div>
 					<v-skeleton-loader type="input" v-if="loading" />
diff --git a/app/src/interfaces/icon/icon.vue b/app/src/interfaces/icon/icon.vue
index 76fa367649..bb85ace37f 100644
--- a/app/src/interfaces/icon/icon.vue
+++ b/app/src/interfaces/icon/icon.vue
@@ -1,6 +1,6 @@
 <template>
-	<v-menu attached :disabled="disabled" close-on-content-click>
-		<template #activator="{ toggle, active, activate }">
+	<v-menu attached :disabled="disabled">
+		<template #activator="{ active, activate }">
 			<v-input
 				:disabled="disabled"
 				:placeholder="value ? formatTitle(value) : $t('search_for_icon')"
diff --git a/app/src/interfaces/many-to-one/many-to-one.vue b/app/src/interfaces/many-to-one/many-to-one.vue
index 77c4bc452d..c521d4bd81 100644
--- a/app/src/interfaces/many-to-one/many-to-one.vue
+++ b/app/src/interfaces/many-to-one/many-to-one.vue
@@ -6,7 +6,7 @@
 		{{ $t('display_template_not_setup') }}
 	</v-notice>
 	<div class="many-to-one" v-else>
-		<v-menu v-model="menuActive" attached close-on-content-click :disabled="disabled">
+		<v-menu v-model="menuActive" attached :disabled="disabled">
 			<template #activator="{ active }">
 				<v-skeleton-loader type="input" v-if="loadingCurrent" />
 				<v-input
diff --git a/app/src/interfaces/status/status.vue b/app/src/interfaces/status/status.vue
index 288a501a06..f71ec41ed3 100644
--- a/app/src/interfaces/status/status.vue
+++ b/app/src/interfaces/status/status.vue
@@ -2,7 +2,7 @@
 	<v-notice v-if="!statuses">
 		{{ $t('statuses_not_configured') }}
 	</v-notice>
-	<v-menu v-else attached :disabled="disabled" close-on-content-click>
+	<v-menu v-else attached :disabled="disabled">
 		<template #activator="{ toggle, active }">
 			<v-input
 				readonly
diff --git a/app/src/interfaces/user/user.vue b/app/src/interfaces/user/user.vue
index 304c442807..1c00c414d5 100644
--- a/app/src/interfaces/user/user.vue
+++ b/app/src/interfaces/user/user.vue
@@ -1,6 +1,6 @@
 <template>
 	<div class="user">
-		<v-menu v-model="menuActive" attached close-on-content-click :disabled="disabled">
+		<v-menu v-model="menuActive" attached :disabled="disabled">
 			<template #activator="{ active }">
 				<v-skeleton-loader type="input" v-if="loadingCurrent" />
 				<v-input
diff --git a/app/src/lang/en-US/index.json b/app/src/lang/en-US/index.json
index 979f669f6e..64241fbb06 100644
--- a/app/src/lang/en-US/index.json
+++ b/app/src/lang/en-US/index.json
@@ -14,6 +14,8 @@
 	"add_role": "Add Role",
 	"add_user": "Add User",
 
+	"rename_folder": "Rename Folder",
+
 	"uploaded_by": "Uploaded By",
 	"hide_field_on_detail": "Hide Field on Detail",
 	"show_field_on_detail": "Show Field on Detail",
@@ -206,6 +208,7 @@
 	"submit": "Submit",
 
 	"move_to_folder": "Move to Folder",
+	"delete_folder": "Delete Folder",
 	"select_folder": "Select Folder",
 	"move": "Move",
 
diff --git a/app/src/modules/files/components/folder-picker/folder-picker-list-item.vue b/app/src/modules/files/components/folder-picker/folder-picker-list-item.vue
index e9a275172c..da1b4d548f 100644
--- a/app/src/modules/files/components/folder-picker/folder-picker-list-item.vue
+++ b/app/src/modules/files/components/folder-picker/folder-picker-list-item.vue
@@ -3,11 +3,12 @@
 		v-if="folder.children.length === 0"
 		@click="clickHandler(folder.id)"
 		:active="currentFolder === folder.id"
+		:disabled="disabled"
 	>
 		<v-list-item-icon><v-icon :name="currentFolder === folder.id ? 'folder_open' : 'folder'" /></v-list-item-icon>
 		<v-list-item-content>{{ folder.name }}</v-list-item-content>
 	</v-list-item>
-	<v-list-group v-else @click="clickHandler(folder.id)" :active="currentFolder === folder.id">
+	<v-list-group v-else @click="clickHandler(folder.id)" :active="currentFolder === folder.id" :disabled="disabled">
 		<template #activator>
 			<v-list-item-icon>
 				<v-icon :name="currentFolder === folder.id ? 'folder_open' : 'folder'" />
@@ -48,6 +49,10 @@ export default defineComponent({
 			type: Function,
 			default: () => undefined,
 		},
+		disabled: {
+			type: Boolean,
+			default: false,
+		},
 	},
 });
 </script>
diff --git a/app/src/modules/files/components/folder-picker/folder-picker.vue b/app/src/modules/files/components/folder-picker/folder-picker.vue
index a6ba4736a1..eee6d85159 100644
--- a/app/src/modules/files/components/folder-picker/folder-picker.vue
+++ b/app/src/modules/files/components/folder-picker/folder-picker.vue
@@ -16,6 +16,7 @@
 					:folder="folder"
 					:current-folder="value"
 					:click-handler="(id) => $emit('input', id)"
+					:disabled="disabledFolders.includes(folder.id)"
 				/>
 			</v-list-group>
 		</v-list>
@@ -23,7 +24,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, computed } from '@vue/composition-api';
+import { defineComponent, ref, computed, PropType } from '@vue/composition-api';
 import api from '@/api';
 import FolderPickerListItem from './folder-picker-list-item.vue';
 
@@ -42,6 +43,10 @@ type Folder = {
 export default defineComponent({
 	components: { FolderPickerListItem },
 	props: {
+		disabledFolders: {
+			type: Array as PropType<string[]>,
+			default: () => [],
+		},
 		value: {
 			type: String,
 			default: null,
diff --git a/app/src/modules/files/components/navigation/navigation-folder.vue b/app/src/modules/files/components/navigation/navigation-folder.vue
index 273714b1dc..cf96d8a2c6 100644
--- a/app/src/modules/files/components/navigation/navigation-folder.vue
+++ b/app/src/modules/files/components/navigation/navigation-folder.vue
@@ -1,31 +1,103 @@
 <template>
-	<v-list-item v-if="folder.children === undefined" :to="`/files?folder=${folder.id}`" exact>
-		<v-list-item-icon><v-icon name="folder" /></v-list-item-icon>
-		<v-list-item-content>{{ folder.name }}</v-list-item-content>
-	</v-list-item>
-	<v-list-group v-else :to="`/files?folder=${folder.id}`" exact>
-		<template #activator="{ active }">
-			<v-list-item-icon>
-				<v-icon :name="active ? 'folder_open' : 'folder'" />
-			</v-list-item-icon>
+	<div>
+		<v-list-item
+			v-if="folder.children === undefined"
+			:to="`/files?folder=${folder.id}`"
+			exact
+			@contextmenu.native.prevent.stop="$refs.contextMenu.activate"
+		>
+			<v-list-item-icon><v-icon name="folder" /></v-list-item-icon>
 			<v-list-item-content>{{ folder.name }}</v-list-item-content>
-		</template>
-		<navigation-folder
-			v-for="childFolder in folder.children"
-			:key="childFolder.id"
-			:folder="childFolder"
-			:current-folder="currentFolder"
-			:click-handler="clickHandler"
-		/>
-	</v-list-group>
+		</v-list-item>
+
+		<v-list-group
+			v-else
+			:to="`/files?folder=${folder.id}`"
+			exact
+			@contextmenu.native.prevent="$refs.contextMenu.activate"
+		>
+			<template #activator="{ active }">
+				<v-list-item-icon>
+					<v-icon :name="active ? 'folder_open' : 'folder'" />
+				</v-list-item-icon>
+				<v-list-item-content>{{ folder.name }}</v-list-item-content>
+			</template>
+			<navigation-folder
+				v-for="childFolder in folder.children"
+				:key="childFolder.id"
+				:folder="childFolder"
+				:current-folder="currentFolder"
+				:click-handler="clickHandler"
+			/>
+		</v-list-group>
+
+		<v-menu ref="contextMenu" show-arrow placement="bottom-start">
+			<v-list dense>
+				<v-list-item @click="renameActive = true">
+					<v-list-item-icon>
+						<v-icon name="edit" />
+					</v-list-item-icon>
+					<v-list-item-content>
+						{{ $t('rename_folder') }}
+					</v-list-item-content>
+				</v-list-item>
+				<v-list-item @click="moveActive = true">
+					<v-list-item-icon>
+						<v-icon name="folder_move" />
+					</v-list-item-icon>
+					<v-list-item-content>
+						{{ $t('move_to_folder') }}
+					</v-list-item-content>
+				</v-list-item>
+				<v-list-item>
+					<v-list-item-icon>
+						<v-icon name="delete" />
+					</v-list-item-icon>
+					<v-list-item-content>
+						{{ $t('delete_folder') }}
+					</v-list-item-content>
+				</v-list-item>
+			</v-list>
+		</v-menu>
+
+		<v-dialog v-model="renameActive" persistent>
+			<v-card>
+				<v-card-title>{{ $t('rename_folder') }}</v-card-title>
+				<v-card-text>
+					<v-input v-model="renameValue" />
+				</v-card-text>
+				<v-card-actions>
+					<v-button secondary @click="renameActive = false">{{ $t('cancel') }}</v-button>
+					<v-button @click="renameSave" :loading="renameSaving">{{ $t('save') }}</v-button>
+				</v-card-actions>
+			</v-card>
+		</v-dialog>
+
+		<v-dialog v-model="moveActive" persistent>
+			<v-card>
+				<v-card-title>{{ $t('move_to_folder') }}</v-card-title>
+				<v-card-text>
+					<folder-picker v-model="moveValue" :disabled-folders="[folder.id]" />
+				</v-card-text>
+				<v-card-actions>
+					<v-button secondary @click="moveActive = false">{{ $t('cancel') }}</v-button>
+					<v-button @click="moveSave" :loading="moveSaving">{{ $t('save') }}</v-button>
+				</v-card-actions>
+			</v-card>
+		</v-dialog>
+	</div>
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType } from '@vue/composition-api';
-import { Folder } from '../../composables/use-folders';
+import { defineComponent, PropType, ref } from '@vue/composition-api';
+import useFolders, { Folder } from '../../composables/use-folders';
+import notify from '@/utils/notify';
+import api from '@/api';
+import FolderPicker from '../folder-picker';
 
 export default defineComponent({
 	name: 'navigation-folder',
+	components: { FolderPicker },
 	props: {
 		folder: {
 			type: Object as PropType<Folder>,
@@ -40,5 +112,60 @@ export default defineComponent({
 			default: () => undefined,
 		},
 	},
+	setup(props) {
+		const { renameActive, renameValue, renameSave, renameSaving } = useRenameFolder();
+		const { moveActive, moveValue, moveSave, moveSaving } = useMoveFolder();
+		const { fetchFolders } = useFolders();
+
+		return { renameActive, renameValue, renameSave, renameSaving, moveActive, moveValue, moveSave, moveSaving };
+
+		function useRenameFolder() {
+			const renameActive = ref(false);
+			const renameValue = ref(props.folder.name);
+			const renameSaving = ref(false);
+
+			return { renameActive, renameValue, renameSave, renameSaving };
+
+			async function renameSave() {
+				renameSaving.value = true;
+
+				try {
+					await api.patch(`/folders/${props.folder.id}`, {
+						name: renameValue.value,
+					});
+				} catch (error) {
+					console.error(error);
+				} finally {
+					renameSaving.value = false;
+					await fetchFolders();
+					renameActive.value = false;
+				}
+			}
+		}
+
+		function useMoveFolder() {
+			const moveActive = ref(false);
+			const moveValue = ref(props.folder.parent_folder);
+			const moveSaving = ref(false);
+
+			return { moveActive, moveValue, moveSave, moveSaving };
+
+			async function moveSave() {
+				moveSaving.value = true;
+
+				try {
+					await api.patch(`/folders/${props.folder.id}`, {
+						parent_folder: moveValue.value,
+					});
+				} catch (error) {
+					console.error(error);
+				} finally {
+					moveSaving.value = false;
+					await fetchFolders();
+					moveActive.value = false;
+				}
+			}
+		}
+	},
 });
 </script>
diff --git a/app/src/modules/files/composables/use-folders.ts b/app/src/modules/files/composables/use-folders.ts
index 85429cf5f7..689431dd53 100644
--- a/app/src/modules/files/composables/use-folders.ts
+++ b/app/src/modules/files/composables/use-folders.ts
@@ -2,14 +2,15 @@ import api from '@/api';
 import { ref, Ref } from '@vue/composition-api';
 
 type FolderRaw = {
-	id: number;
+	id: string;
 	name: string;
-	parent_folder: number;
+	parent_folder: string;
 };
 
 export type Folder = {
-	id: number;
+	id: string;
 	name: string;
+	parent_folder: string;
 	children?: Folder[];
 };
 
diff --git a/app/src/modules/settings/routes/data-model/collections/components/collection-options/collection-options.vue b/app/src/modules/settings/routes/data-model/collections/components/collection-options/collection-options.vue
index c8326cfcb6..8b22eb68f5 100644
--- a/app/src/modules/settings/routes/data-model/collections/components/collection-options/collection-options.vue
+++ b/app/src/modules/settings/routes/data-model/collections/components/collection-options/collection-options.vue
@@ -11,7 +11,7 @@
 	</v-button>
 
 	<div v-else-if="collection.collection.startsWith('directus_') === false">
-		<v-menu placement="left-start" show-arrow close-on-content-click :disabled="savingManaged">
+		<v-menu placement="left-start" show-arrow :disabled="savingManaged">
 			<template #activator="{ toggle }">
 				<v-progress-circular small v-if="savingManaged" indeterminate />
 				<v-icon v-else name="more_vert" @click="toggle" class="ctx-toggle" />
diff --git a/app/src/modules/settings/routes/data-model/fields/components/field-select/field-select.vue b/app/src/modules/settings/routes/data-model/fields/components/field-select/field-select.vue
index 93f5ac36ad..2e6f29e600 100644
--- a/app/src/modules/settings/routes/data-model/fields/components/field-select/field-select.vue
+++ b/app/src/modules/settings/routes/data-model/fields/components/field-select/field-select.vue
@@ -1,6 +1,6 @@
 <template>
 	<div :class="field.meta.width || 'full'">
-		<v-menu attached close-on-content-click>
+		<v-menu attached>
 			<template #activator="{ toggle, active }">
 				<v-input class="field" :class="{ hidden, active }" readonly @click="toggle">
 					<template #prepend>
diff --git a/app/src/modules/settings/routes/data-model/fields/components/fields-management/fields-management.vue b/app/src/modules/settings/routes/data-model/fields/components/fields-management/fields-management.vue
index 8c5fa6b618..291875a27d 100644
--- a/app/src/modules/settings/routes/data-model/fields/components/fields-management/fields-management.vue
+++ b/app/src/modules/settings/routes/data-model/fields/components/fields-management/fields-management.vue
@@ -42,7 +42,7 @@
 			/>
 		</draggable>
 
-		<v-menu attached close-on-content-click>
+		<v-menu attached>
 			<template #activator="{ toggle, active }">
 				<v-button
 					@click="toggle"
diff --git a/app/src/views/private/components/comments-drawer-detail/comment-item-header.vue b/app/src/views/private/components/comments-drawer-detail/comment-item-header.vue
index 6a2f928058..faac0eb128 100644
--- a/app/src/views/private/components/comments-drawer-detail/comment-item-header.vue
+++ b/app/src/views/private/components/comments-drawer-detail/comment-item-header.vue
@@ -24,7 +24,7 @@
 		</div>
 
 		<div class="header-right">
-			<v-menu show-arrow placement="bottom-end" close-on-content-click>
+			<v-menu show-arrow placement="bottom-end">
 				<template #activator="{ toggle, active }">
 					<v-icon class="more" :class="{ active }" name="more_horiz" @click="toggle" />
 					<div class="time">
diff --git a/app/src/views/private/components/filter-drawer-detail/field-filter.vue b/app/src/views/private/components/filter-drawer-detail/field-filter.vue
index 17f7f49763..73966e20e1 100644
--- a/app/src/views/private/components/filter-drawer-detail/field-filter.vue
+++ b/app/src/views/private/components/filter-drawer-detail/field-filter.vue
@@ -5,7 +5,7 @@
 				<span v-if="filter.field.includes('.')" class="relational-indicator">•</span>
 				{{ name }}
 			</div>
-			<v-menu show-arrow :disabled="disabled" close-on-content-click>
+			<v-menu show-arrow :disabled="disabled">
 				<template #activator="{ toggle }">
 					<div class="operator" @click="toggle">
 						<span>{{ $t(`operators.${activeOperator}`) }}</span>
diff --git a/app/src/views/private/components/filter-drawer-detail/filter-drawer-detail.vue b/app/src/views/private/components/filter-drawer-detail/filter-drawer-detail.vue
index ff138e44ca..06a5fa79b2 100644
--- a/app/src/views/private/components/filter-drawer-detail/filter-drawer-detail.vue
+++ b/app/src/views/private/components/filter-drawer-detail/filter-drawer-detail.vue
@@ -16,7 +16,7 @@
 
 		<v-divider v-if="filters.length" />
 
-		<v-menu attached close-on-content-click :disabled="loading">
+		<v-menu attached :disabled="loading">
 			<template #activator="{ toggle, active }">
 				<v-input @click="toggle" :class="{ active }" readonly :value="$t('add_filter')" :disabled="loading">
 					<template #prepend><v-icon name="add" /></template>
diff --git a/app/src/views/private/components/image-editor/image-editor.vue b/app/src/views/private/components/image-editor/image-editor.vue
index f99b1ae1f0..4767e19ff6 100644
--- a/app/src/views/private/components/image-editor/image-editor.vue
+++ b/app/src/views/private/components/image-editor/image-editor.vue
@@ -45,7 +45,7 @@
 					v-tooltip.bottom.inverted="$t('flip_vertical')"
 				/>
 
-				<v-menu placement="top" show-arrow close-on-content-click>
+				<v-menu placement="top" show-arrow>
 					<template #activator="{ toggle }">
 						<v-icon
 							:name="aspectRatioIcon"
diff --git a/app/src/views/private/components/revisions-drawer-detail/revisions-modal-picker.vue b/app/src/views/private/components/revisions-drawer-detail/revisions-modal-picker.vue
index 214bd77b28..5e60a466ef 100644
--- a/app/src/views/private/components/revisions-drawer-detail/revisions-modal-picker.vue
+++ b/app/src/views/private/components/revisions-drawer-detail/revisions-modal-picker.vue
@@ -1,5 +1,5 @@
 <template>
-	<v-menu close-on-content-click show-arrow>
+	<v-menu show-arrow>
 		<template #activator="{ toggle }">
 			<span @click="toggle" class="picker">
 				{{ selectedOption && selectedOption.text }}

From 48adeac652907124467b8e9542d9c2d37d9c4c98 Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Tue, 11 Aug 2020 13:20:36 -0400
Subject: [PATCH 3/5] Prevent current folder from being picked to move to

---
 .../components/folder-picker/folder-picker-list-item.vue    | 6 ++++++
 .../files/components/folder-picker/folder-picker.vue        | 2 ++
 app/src/modules/files/composables/use-folders.ts            | 2 +-
 3 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/app/src/modules/files/components/folder-picker/folder-picker-list-item.vue b/app/src/modules/files/components/folder-picker/folder-picker-list-item.vue
index da1b4d548f..687079723f 100644
--- a/app/src/modules/files/components/folder-picker/folder-picker-list-item.vue
+++ b/app/src/modules/files/components/folder-picker/folder-picker-list-item.vue
@@ -21,6 +21,8 @@
 			:folder="childFolder"
 			:current-folder="currentFolder"
 			:click-handler="clickHandler"
+			:disabled="disabledFolders.includes(childFolder.id)"
+			:disabled-folders="disabledFolders"
 		/>
 	</v-list-group>
 </template>
@@ -53,6 +55,10 @@ export default defineComponent({
 			type: Boolean,
 			default: false,
 		},
+		disabledFolders: {
+			type: Array as PropType<string[]>,
+			default: () => [],
+		},
 	},
 });
 </script>
diff --git a/app/src/modules/files/components/folder-picker/folder-picker.vue b/app/src/modules/files/components/folder-picker/folder-picker.vue
index eee6d85159..efc87efb8b 100644
--- a/app/src/modules/files/components/folder-picker/folder-picker.vue
+++ b/app/src/modules/files/components/folder-picker/folder-picker.vue
@@ -17,6 +17,7 @@
 					:current-folder="value"
 					:click-handler="(id) => $emit('input', id)"
 					:disabled="disabledFolders.includes(folder.id)"
+					:disabled-folders="disabledFolders"
 				/>
 			</v-list-group>
 		</v-list>
@@ -96,6 +97,7 @@ export default defineComponent({
 				const response = await api.get(`/folders`, {
 					params: {
 						limit: -1,
+						sort: 'name',
 					},
 				});
 
diff --git a/app/src/modules/files/composables/use-folders.ts b/app/src/modules/files/composables/use-folders.ts
index 689431dd53..357f1ebb13 100644
--- a/app/src/modules/files/composables/use-folders.ts
+++ b/app/src/modules/files/composables/use-folders.ts
@@ -64,7 +64,7 @@ export function nestChildren(rawFolder: FolderRaw, rawFolders: FolderRaw[]) {
 	const folder: FolderRaw & Folder = { ...rawFolder };
 
 	const children = rawFolders
-		.filter((childFolder) => childFolder.parent_folder === rawFolder.id)
+		.filter((childFolder) => childFolder.parent_folder === rawFolder.id && childFolder.id !== rawFolder.id)
 		.map((childRawFolder) => nestChildren(childRawFolder, rawFolders));
 
 	if (children.length > 0) {

From 1356816f3998175b0db252210a1fcd5f37b2e586 Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Tue, 11 Aug 2020 14:22:23 -0400
Subject: [PATCH 4/5] Add delete folder

---
 app/src/lang/en-US/index.json                 |  2 +
 .../navigation/navigation-folder.vue          | 83 +++++++++++++++++--
 2 files changed, 78 insertions(+), 7 deletions(-)

diff --git a/app/src/lang/en-US/index.json b/app/src/lang/en-US/index.json
index 64241fbb06..6c6d441892 100644
--- a/app/src/lang/en-US/index.json
+++ b/app/src/lang/en-US/index.json
@@ -16,6 +16,8 @@
 
 	"rename_folder": "Rename Folder",
 
+	"nested_files_folders_will_be_moved": "Nested files and folders will be moved to the File Library.",
+
 	"uploaded_by": "Uploaded By",
 	"hide_field_on_detail": "Hide Field on Detail",
 	"show_field_on_detail": "Show Field on Detail",
diff --git a/app/src/modules/files/components/navigation/navigation-folder.vue b/app/src/modules/files/components/navigation/navigation-folder.vue
index cf96d8a2c6..a5382da79b 100644
--- a/app/src/modules/files/components/navigation/navigation-folder.vue
+++ b/app/src/modules/files/components/navigation/navigation-folder.vue
@@ -49,7 +49,7 @@
 						{{ $t('move_to_folder') }}
 					</v-list-item-content>
 				</v-list-item>
-				<v-list-item>
+				<v-list-item @click="deleteActive = true">
 					<v-list-item-icon>
 						<v-icon name="delete" />
 					</v-list-item-icon>
@@ -73,15 +73,17 @@
 			</v-card>
 		</v-dialog>
 
-		<v-dialog v-model="moveActive" persistent>
+		<v-dialog v-model="deleteActive" persistent>
 			<v-card>
-				<v-card-title>{{ $t('move_to_folder') }}</v-card-title>
+				<v-card-title>{{ $t('delete_folder') }}</v-card-title>
 				<v-card-text>
-					<folder-picker v-model="moveValue" :disabled-folders="[folder.id]" />
+					<v-notice>
+						{{ $t('nested_files_folders_will_be_moved') }}
+					</v-notice>
 				</v-card-text>
 				<v-card-actions>
-					<v-button secondary @click="moveActive = false">{{ $t('cancel') }}</v-button>
-					<v-button @click="moveSave" :loading="moveSaving">{{ $t('save') }}</v-button>
+					<v-button secondary @click="deleteActive = false">{{ $t('cancel') }}</v-button>
+					<v-button @click="deleteSave" :loading="deleteSaving">{{ $t('delete') }}</v-button>
 				</v-card-actions>
 			</v-card>
 		</v-dialog>
@@ -115,9 +117,23 @@ export default defineComponent({
 	setup(props) {
 		const { renameActive, renameValue, renameSave, renameSaving } = useRenameFolder();
 		const { moveActive, moveValue, moveSave, moveSaving } = useMoveFolder();
+		const { deleteActive, deleteSave, deleteSaving } = useDeleteFolder();
+
 		const { fetchFolders } = useFolders();
 
-		return { renameActive, renameValue, renameSave, renameSaving, moveActive, moveValue, moveSave, moveSaving };
+		return {
+			renameActive,
+			renameValue,
+			renameSave,
+			renameSaving,
+			moveActive,
+			moveValue,
+			moveSave,
+			moveSaving,
+			deleteActive,
+			deleteSave,
+			deleteSaving,
+		};
 
 		function useRenameFolder() {
 			const renameActive = ref(false);
@@ -166,6 +182,59 @@ export default defineComponent({
 				}
 			}
 		}
+
+		function useDeleteFolder() {
+			const deleteActive = ref(false);
+			const deleteSaving = ref(false);
+
+			return { deleteActive, deleteSave, deleteSaving };
+
+			async function deleteSave() {
+				deleteSaving.value = true;
+
+				try {
+					const foldersToUpdate = await api.get('/folders', {
+						params: {
+							filter: {
+								parent_folder: {
+									_eq: props.folder.id,
+								},
+							},
+						},
+					});
+
+					const filesToUpdate = await api.get('/files', {
+						params: {
+							filter: {
+								folder: {
+									_eq: props.folder.id,
+								},
+							},
+						},
+					});
+
+					const folderKeys = foldersToUpdate.data.data.map((folder: { id: string }) => folder.id);
+					const fileKeys = filesToUpdate.data.data.map((file: { id: string }) => file.id);
+
+					if (folderKeys.length > 0) {
+						await api.patch(`/folders/${folderKeys.join(',')}`, { parent_folder: null });
+					}
+
+					if (fileKeys.length > 0) {
+						await api.patch(`/files/${fileKeys.join(',')}`, { folder: null });
+					}
+
+					await api.delete(`/folders/${props.folder.id}`);
+
+					deleteActive.value = false;
+				} catch (error) {
+					console.error(error);
+				} finally {
+					await fetchFolders();
+					deleteSaving.value = false;
+				}
+			}
+		}
 	},
 });
 </script>

From 7f815f4631e3bd006354f4aecc829564dbaa24fd Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Tue, 11 Aug 2020 14:25:49 -0400
Subject: [PATCH 5/5] Move one level up instead of to root

---
 app/src/lang/en-US/index.json                 |  2 +-
 .../navigation/navigation-folder.vue          | 19 +++++++++++++++++--
 2 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/app/src/lang/en-US/index.json b/app/src/lang/en-US/index.json
index 6c6d441892..64c4648969 100644
--- a/app/src/lang/en-US/index.json
+++ b/app/src/lang/en-US/index.json
@@ -16,7 +16,7 @@
 
 	"rename_folder": "Rename Folder",
 
-	"nested_files_folders_will_be_moved": "Nested files and folders will be moved to the File Library.",
+	"nested_files_folders_will_be_moved": "Nested files and folders will be moved one level up.",
 
 	"uploaded_by": "Uploaded By",
 	"hide_field_on_detail": "Hide Field on Detail",
diff --git a/app/src/modules/files/components/navigation/navigation-folder.vue b/app/src/modules/files/components/navigation/navigation-folder.vue
index a5382da79b..d0f44a852b 100644
--- a/app/src/modules/files/components/navigation/navigation-folder.vue
+++ b/app/src/modules/files/components/navigation/navigation-folder.vue
@@ -73,6 +73,19 @@
 			</v-card>
 		</v-dialog>
 
+		<v-dialog v-model="moveActive" persistent>
+			<v-card>
+				<v-card-title>{{ $t('move_to_folder') }}</v-card-title>
+				<v-card-text>
+					<folder-picker v-model="moveValue" :disabled-folders="[folder.id]" />
+				</v-card-text>
+				<v-card-actions>
+					<v-button secondary @click="moveActive = false">{{ $t('cancel') }}</v-button>
+					<v-button @click="moveSave" :loading="moveSaving">{{ $t('save') }}</v-button>
+				</v-card-actions>
+			</v-card>
+		</v-dialog>
+
 		<v-dialog v-model="deleteActive" persistent>
 			<v-card>
 				<v-card-title>{{ $t('delete_folder') }}</v-card-title>
@@ -213,15 +226,17 @@ export default defineComponent({
 						},
 					});
 
+					const newParent = props.folder.parent_folder || null;
+
 					const folderKeys = foldersToUpdate.data.data.map((folder: { id: string }) => folder.id);
 					const fileKeys = filesToUpdate.data.data.map((file: { id: string }) => file.id);
 
 					if (folderKeys.length > 0) {
-						await api.patch(`/folders/${folderKeys.join(',')}`, { parent_folder: null });
+						await api.patch(`/folders/${folderKeys.join(',')}`, { parent_folder: newParent });
 					}
 
 					if (fileKeys.length > 0) {
-						await api.patch(`/files/${fileKeys.join(',')}`, { folder: null });
+						await api.patch(`/files/${fileKeys.join(',')}`, { folder: newParent });
 					}
 
 					await api.delete(`/folders/${props.folder.id}`);