Context menu improvements (#9271)

* add focusout to close context menus

* add "Edit collection" to collections context menu

* disable context menu when nothing to show

* remove obsolete code

Co-authored-by: rijkvanzanten <rijkvanzanten@me.com>

app/src/modules/collections/components/navigation-bookmark.vue

@@ -5,6 +5,7 @@
 		class="bookmark"
 		clickable
 		@contextmenu.prevent.stop="activateContextMenu"
+		@focusout="deactivateContextMenu"
 	>
 		<v-list-item-icon><v-icon name="bookmark_outline" /></v-list-item-icon>
 		<v-list-item-content>
@@ -104,6 +105,7 @@ export default defineComponent({
 			deleteSave,
 			deleteSaving,
 			activateContextMenu,
+			deactivateContextMenu,
 		};
 
 		function useRenameBookmark() {
@@ -165,6 +167,10 @@ export default defineComponent({
 		function activateContextMenu(event: PointerEvent) {
 			contextMenu.value.activate(event);
 		}
+
+		function deactivateContextMenu() {
+			contextMenu.value.deactivate();
+		}
 	},
 });
 </script>

app/src/modules/collections/components/navigation-item.vue

@@ -6,7 +6,8 @@
 		:value="collection.collection"
 		query
 		:arrow-placement="collection.meta?.collapse === 'locked' ? false : 'after'"
-		@contextmenu="activateContextMenu"
+		@contextmenu.prevent.stop="activateContextMenu"
+		@focusout="deactivateContextMenu"
 	>
 		<template #activator>
 			<navigation-item-content
@@ -32,7 +33,8 @@
 		:value="collection.collection"
 		:class="{ hidden: collection.meta?.hidden }"
 		query
-		@contextmenu="activateContextMenu"
+		@contextmenu.prevent.stop="activateContextMenu"
+		@focusout="deactivateContextMenu"
 	>
 		<navigation-item-content
 			:search="search"
@@ -44,7 +46,7 @@
 
 	<v-menu ref="contextMenu" show-arrow placement="bottom-start">
 		<v-list>
-			<v-list-item clickable :to="`/collections/${collection.collection}?archive`" exact query>
+			<v-list-item v-if="hasArchive" clickable :to="`/collections/${collection.collection}?archive`" exact query>
 				<v-list-item-icon>
 					<v-icon name="archive" outline />
 				</v-list-item-icon>
@@ -52,6 +54,14 @@
 					<v-text-overflow :text="t('show_archived_items')" />
 				</v-list-item-content>
 			</v-list-item>
+			<v-list-item v-if="isAdmin" clickable :to="`/settings/data-model/${collection.collection}`">
+				<v-list-item-icon>
+					<v-icon name="list_alt" />
+				</v-list-item-icon>
+				<v-list-item-content>
+					<v-text-overflow :text="t('edit_collection')" />
+				</v-list-item-content>
+			</v-list-item>
 		</v-list>
 	</v-menu>
 </template>
@@ -60,7 +70,7 @@
 import { defineComponent, PropType, computed, ref } from 'vue';
 import { Collection } from '@/types';
 import { Preset } from '@directus/shared/types';
-import { useCollectionsStore, usePresetsStore } from '@/stores';
+import { useUserStore, useCollectionsStore, usePresetsStore } from '@/stores';
 import NavigationItemContent from './navigation-item-content.vue';
 import NavigationBookmark from './navigation-bookmark.vue';
 import { useI18n } from 'vue-i18n';
@@ -86,6 +96,7 @@ export default defineComponent({
 	setup(props) {
 		const { t } = useI18n();
 
+		const { isAdmin } = useUserStore();
 		const collectionsStore = useCollectionsStore();
 		const presetsStore = usePresetsStore();
 
@@ -138,6 +149,8 @@ export default defineComponent({
 			matchesSearch,
 			contextMenu,
 			activateContextMenu,
+			deactivateContextMenu,
+			isAdmin,
 			t,
 			hasArchive,
 		};
@@ -159,12 +172,14 @@ export default defineComponent({
 		}
 
 		function activateContextMenu(event: PointerEvent) {
-			if (hasArchive.value) {
+			if (hasArchive.value || props.collection.schema) {
 				contextMenu.value.activate(event);
-				event.stopPropagation();
-				event.preventDefault();
 			}
 		}
+
+		function deactivateContextMenu() {
+			contextMenu.value.deactivate();
+		}
 	},
 });
 </script>

app/src/modules/collections/components/navigation.vue

@@ -8,10 +8,12 @@
 			v-model="activeGroups"
 			scope="collections-navigation"
 			class="collections-navigation"
+			tabindex="-1"
 			nav
 			:mandatory="false"
 			:dense="dense"
 			@contextmenu.prevent.stop="activateContextMenu"
+			@focusout="deactivateContextMenu"
 		>
 			<navigation-item
 				v-for="collection in rootItems"
@@ -61,7 +63,6 @@ export default defineComponent({
 		const collectionsStore = useCollectionsStore();
 
 		const contextMenu = ref();
-		const contextMenuTarget = ref<undefined | string>();
 
 		const rootItems = computed(() => {
 			const shownCollections = showHidden.value ? collectionsStore.allCollections : collectionsStore.visibleCollections;
@@ -83,16 +84,19 @@ export default defineComponent({
 			rootItems,
 			dense,
 			activateContextMenu,
+			deactivateContextMenu,
 			contextMenu,
-			contextMenuTarget,
 			search,
 			showSearch,
 		};
 
-		function activateContextMenu(event: PointerEvent, target?: string) {
-			contextMenuTarget.value = target;
+		function activateContextMenu(event: PointerEvent) {
 			contextMenu.value.activate(event);
 		}
+
+		function deactivateContextMenu() {
+			contextMenu.value.deactivate();
+		}
 	},
 });
 </script>

app/src/modules/files/components/navigation-folder.vue

@@ -5,6 +5,7 @@
 			:to="`/files/folders/${folder.id}`"
 			:active="currentFolder === folder.id"
 			@contextmenu.prevent.stop="activateContextMenu"
+			@focusout="deactivateContextMenu"
 		>
 			<v-list-item-icon><v-icon name="folder" /></v-list-item-icon>
 			<v-list-item-content>
@@ -20,6 +21,7 @@
 			scope="files-navigation"
 			disable-groupable-parent
 			@contextmenu.prevent.stop="activateContextMenu"
+			@focusout="deactivateContextMenu"
 		>
 			<template #activator>
 				<v-list-item-icon>
@@ -167,6 +169,7 @@ export default defineComponent({
 			deleteSaving,
 			contextMenu,
 			activateContextMenu,
+			deactivateContextMenu,
 		};
 
 		function useRenameFolder() {
@@ -291,6 +294,10 @@ export default defineComponent({
 		function activateContextMenu(event: PointerEvent) {
 			contextMenu.value.activate(event);
 		}
+
+		function deactivateContextMenu() {
+			contextMenu.value.deactivate();
+		}
 	},
 });
 </script>