From 08436cc4011a6714046d39ec7bc1c71c33f16ae6 Mon Sep 17 00:00:00 2001
From: Azri Kahar <42867097+azrikahar@users.noreply.github.com>
Date: Sat, 19 Feb 2022 00:02:49 +0800
Subject: [PATCH] Show collection notes (#11702)

* add collection note & tweak styles

* fix overflowing collection note

* use em dash

* add min width to align notes

* add directus_shares note

* remove dynamic min width

* remove unused code
---
 app/src/lang/translations/en-US.yaml          |  1 +
 .../data-model/collections/collections.vue    |  5 ---
 .../components/collection-item.vue            | 35 ++++++++++++++-----
 3 files changed, 28 insertions(+), 13 deletions(-)

diff --git a/app/src/lang/translations/en-US.yaml b/app/src/lang/translations/en-US.yaml
index b31f11b561..cfeb677d22 100644
--- a/app/src/lang/translations/en-US.yaml
+++ b/app/src/lang/translations/en-US.yaml
@@ -902,6 +902,7 @@ directus_collection:
   directus_roles: Permission groups for system users
   directus_sessions: User session information
   directus_settings: Project configuration options
+  directus_shares: Tracks externally shared items
   directus_users: System users for the platform
   directus_webhooks: Configuration for event-based HTTP requests
 fields:
diff --git a/app/src/modules/settings/routes/data-model/collections/collections.vue b/app/src/modules/settings/routes/data-model/collections/collections.vue
index e361dda6f1..9d6620f6db 100644
--- a/app/src/modules/settings/routes/data-model/collections/collections.vue
+++ b/app/src/modules/settings/routes/data-model/collections/collections.vue
@@ -236,11 +236,6 @@ export default defineComponent({
 	--v-list-item-color: var(--foreground-subdued);
 }
 
-.collection-name {
-	flex-grow: 1;
-	font-family: var(--family-monospace);
-}
-
 .collection-icon {
 	margin-right: 8px;
 }
diff --git a/app/src/modules/settings/routes/data-model/collections/components/collection-item.vue b/app/src/modules/settings/routes/data-model/collections/components/collection-item.vue
index 98f1b22481..9374e77134 100644
--- a/app/src/modules/settings/routes/data-model/collections/components/collection-item.vue
+++ b/app/src/modules/settings/routes/data-model/collections/components/collection-item.vue
@@ -11,13 +11,14 @@
 			<v-list-item-icon>
 				<v-icon v-if="!disableDrag" class="drag-handle" name="drag_handle" />
 			</v-list-item-icon>
-			<div class="collection-name">
+			<div class="collection-item-detail">
 				<v-icon
 					:color="collection.meta?.hidden ? 'var(--foreground-subdued)' : collection.color"
 					class="collection-icon"
 					:name="collection.meta?.hidden ? 'visibility_off' : collection.icon"
 				/>
-				<span>{{ collection.name }}</span>
+				<span ref="collectionName" class="collection-name">{{ collection.name }}</span>
+				<span v-if="collection.meta?.note" class="collection-note">{{ collection.meta.note }}</span>
 			</div>
 			<template v-if="collection.type === 'alias' || nestedCollections.length">
 				<v-progress-circular v-if="collapseLoading" small indeterminate />
@@ -179,15 +180,38 @@ export default defineComponent({
 	margin-bottom: 8px;
 }
 
-.collection-name {
+.collection-item-detail {
 	display: flex;
 	flex-grow: 1;
 	align-items: center;
 	height: 100%;
+	overflow: hidden;
 	font-family: var(--family-monospace);
 	pointer-events: none;
 }
 
+.collection-name {
+	flex-shrink: 0;
+}
+
+.hidden .collection-name {
+	color: var(--foreground-subdued);
+}
+
+.collection-note {
+	margin-left: 16px;
+	overflow: hidden;
+	color: var(--foreground-subdued);
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	opacity: 0;
+	transition: opacity var(--fast) var(--transition);
+}
+
+.v-list-item:hover .collection-note {
+	opacity: 1;
+}
+
 .collection-icon {
 	margin-right: 8px;
 }
@@ -195,9 +219,4 @@ export default defineComponent({
 .drag-handle {
 	cursor: grab;
 }
-
-.hidden {
-	--v-list-item-color: var(--foreground-subdued);
-	--v-icon-color: var(--foreground-subdued);
-}
 </style>