Add accessible system tags select

Signed-off-by: Christopher Ng <chrng8@gmail.com>

1 files changed, 29 insertions, 9 deletions

diff --git a/apps/files/src/views/Sidebar.vue b/apps/files/src/views/Sidebar.vue
index 5c3967b1c93..9b43570e345 100644
--- a/apps/files/src/views/Sidebar.vue
+++ b/apps/files/src/views/Sidebar.vue
@@ -36,10 +36,16 @@
 		@closed="handleClosed">
 		<!-- TODO: create a standard to allow multiple elements here? -->
 		<template v-if="fileInfo" #description>
-			<LegacyView v-for="view in views"
-				:key="view.cid"
-				:component="view"
-				:file-info="fileInfo" />
+			<div class="sidebar__description">
+				<SystemTags v-if="isSystemTagsEnabled"
+					v-show="showTags"
+					:file-id="fileInfo.id"
+					@has-tags="value => showTags = value" />
+				<LegacyView v-for="view in views"
+					:key="view.cid"
+					:component="view"
+					:file-info="fileInfo" />
+			</div>
 		</template>
 
 		<!-- Actions menu -->
@@ -96,22 +102,25 @@ import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
 import FileInfo from '../services/FileInfo.js'
 import SidebarTab from '../components/SidebarTab.vue'
 import LegacyView from '../components/LegacyView.vue'
+import SystemTags from '../../../systemtags/src/components/SystemTags.vue'
 
 export default {
 	name: 'Sidebar',
 
 	components: {
+		LegacyView,
 		NcActionButton,
 		NcAppSidebar,
 		NcEmptyContent,
-		LegacyView,
 		SidebarTab,
+		SystemTags,
 	},
 
 	data() {
 		return {
 			// reactive state
 			Sidebar: OCA.Files.Sidebar.state,
+			showTags: false,
 			error: null,
 			loading: true,
 			fileInfo: null,
@@ -410,9 +419,7 @@ export default {
 		 * Toggle the tags selector
 		 */
 		toggleTags() {
-			if (OCA.SystemTags && OCA.SystemTags.View) {
-				OCA.SystemTags.View.toggle()
-			}
+			this.showTags = !this.showTags
 		},
 
 		/**
@@ -505,7 +512,7 @@ export default {
 </script>
 <style lang="scss" scoped>
 .app-sidebar {
-	&--has-preview::v-deep {
+	&--has-preview:deep {
 		.app-sidebar-header__figure {
 			background-size: cover;
 		}
@@ -525,6 +532,12 @@ export default {
 		height: 100% !important;
 	}
 
+	:deep {
+		.app-sidebar-header__description {
+			margin: 0 16px 4px 16px !important;
+		}
+	}
+
 	.svg-icon {
 		::v-deep svg {
 			width: 20px;
@@ -533,4 +546,11 @@ export default {
 		}
 	}
 }
+
+.sidebar__description {
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+	gap: 8px 0;
+}
 </style>