From 3960582302b7cb900361106e0eef67f5367e10e4 Mon Sep 17 00:00:00 2001
From: Nitwel <mail@nitwel.de>
Date: Thu, 3 Feb 2022 23:09:58 +0100
Subject: [PATCH] Fix translations layout (#9421)

* fix translations layout

* fix lang names not being shown

* fix lint warnings

* both versions of field here need to test

* lgtg?

* Persist icon on open popover

Co-authored-by: Azri Kahar <azrikahar@outlook.com>
Co-authored-by: Jay Cammarano <jaycammarano@gmail.com>
Co-authored-by: jaycammarano <jay.cammarano@gmail.com>
Co-authored-by: rijkvanzanten <rijkvanzanten@me.com>
---
 app/src/displays/translations/index.ts        |  8 +--
 .../displays/translations/translations.vue    | 63 ++++++++++++-------
 2 files changed, 44 insertions(+), 27 deletions(-)

diff --git a/app/src/displays/translations/index.ts b/app/src/displays/translations/index.ts
index ae8b0bcf80..067106137a 100644
--- a/app/src/displays/translations/index.ts
+++ b/app/src/displays/translations/index.ts
@@ -1,8 +1,8 @@
-import { defineDisplay } from '@directus/shared/utils';
-import adjustFieldsForDisplays from '@/utils/adjust-fields-for-displays';
-import { getFieldsFromTemplate } from '@directus/shared/utils';
+import { defineDisplay, getFieldsFromTemplate } from '@directus/shared/utils';
 import DisplayTranslations from './translations.vue';
-import { useFieldsStore, useRelationsStore } from '@/stores';
+import { useFieldsStore } from '@/stores';
+import { useRelationsStore } from '@/stores';
+import adjustFieldsForDisplays from '@/utils/adjust-fields-for-displays';
 
 type Options = {
 	template: string;
diff --git a/app/src/displays/translations/translations.vue b/app/src/displays/translations/translations.vue
index 88ffa3df0a..890b3451c9 100644
--- a/app/src/displays/translations/translations.vue
+++ b/app/src/displays/translations/translations.vue
@@ -1,30 +1,32 @@
 <template>
 	<value-null v-if="!junctionCollection.collection" />
-	<v-menu v-else show-arrow :disabled="value.length === 0">
-		<template #activator="{ toggle }">
-			<render-template
-				:template="internalTemplate"
-				:item="displayItem"
-				:collection="junctionCollection.collection"
-				@click.stop="toggle"
-			/>
-		</template>
+	<div v-else class="display-translations">
+		<render-template :template="internalTemplate" :item="displayItem" :collection="junctionCollection.collection" />
+		<v-menu class="menu" show-arrow :disabled="value.length === 0">
+			<template #activator="{ toggle, deactivate, active }">
+				<v-icon small class="icon" :class="{ active }" name="info" @click.stop="toggle" @focusout="deactivate"></v-icon>
+			</template>
 
-		<v-list class="links">
-			<v-list-item v-for="item in translations" :key="item.id">
-				<v-list-item-content>
-					<div class="header">
-						<div class="lang">
-							<v-icon name="translate" small />
-							{{ item.lang }}
+			<v-list class="links">
+				<v-list-item v-for="item in translations" :key="item.id">
+					<v-list-item-content>
+						<div class="header">
+							<div class="lang">
+								<v-icon name="translate" small />
+								{{ item.lang }}
+							</div>
+							<v-progress-linear v-tooltip="`${item.progress}%`" :value="item.progress" colorful />
 						</div>
-						<v-progress-linear v-tooltip="`${item.progress}%`" :value="item.progress" colorful />
-					</div>
-					<render-template :template="internalTemplate" :item="item.item" :collection="junctionCollection.collection" />
-				</v-list-item-content>
-			</v-list-item>
-		</v-list>
-	</v-menu>
+						<render-template
+							:template="internalTemplate"
+							:item="item.item"
+							:collection="junctionCollection.collection"
+						/>
+					</v-list-item-content>
+				</v-list-item>
+			</v-list>
+		</v-menu>
+	</div>
 </template>
 
 <script lang="ts">
@@ -134,6 +136,21 @@ export default defineComponent({
 	width: 300px;
 }
 
+.display-translations {
+	display: flex;
+
+	.icon {
+		color: var(--foreground-subdued);
+		opacity: 0;
+		transition: opacity var(--fast) var(--transition);
+	}
+
+	&:hover .icon,
+	.icon.active {
+		opacity: 1;
+	}
+}
+
 .header {
 	display: flex;
 	gap: 20px;