github/directus
1
0
Fork 0
mirror of https://github.com/directus/directus.git synced 2026-01-30 06:18:09 -05:00
Code Issues Packages Projects Releases Wiki Activity

Fix translations layout (#9421)

Browse Source 
* 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>
This commit is contained in:
Nitwel
2022-02-03 23:09:58 +01:00
committed by GitHub
parent f40a3e94a0
commit 3960582302
2 changed files with 44 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
app/src/displays/translations/index.ts
View File

@@ -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;

63
app/src/displays/translations/translations.vue
View File

@@ -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;