github/directus
1
1
Fork 0
mirror of https://github.com/directus/directus.git synced 2026-04-25 03:00:53 -04:00
Code Issues Packages Projects Releases Wiki Activity

Properly truncate large column names

Browse Source 
Fixes #3419
This commit is contained in:
rijkvanzanten
2020-12-14 19:20:55 -05:00
parent f498ed44dd
commit fde6125400
2 changed files with 10 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
app/src/modules/settings/routes/data-model/fields/components/field-select.vue
View File

@@ -63,12 +63,7 @@
<div class="label">
<span class="name" v-tooltip="field.name">
{{ field.field }}
<v-icon
name="star"
class="required"
sup
v-if="field.schema && field.schema.is_nullable === false"
/>
<v-icon name="star" class="required" sup v-if="field.schema && field.schema.is_nullable === false" />
</span>
<span v-if="field.meta" class="interface">{{ interfaceName }}</span>
<span v-else class="interface">{{ $t('db_only_click_to_configure') }}</span>
@@ -90,13 +85,7 @@
small
v-tooltip="$t('db_only_click_to_configure')"
/>
<v-icon
v-if="hidden"
name="visibility_off"
class="hidden-icon"
v-tooltip="$t('hidden_field')"
small
/>
<v-icon v-if="hidden" name="visibility_off" class="hidden-icon" v-tooltip="$t('hidden_field')" small />
<v-menu show-arrow placement="bottom-end">
<template #activator="{ toggle }">
<v-icon @click.stop="toggle" name="more_vert" />
@@ -130,26 +119,17 @@
<v-divider />
<v-list-item
@click="setWidth('half')"
:disabled="field.meta && field.meta.width === 'half'"
>
<v-list-item @click="setWidth('half')" :disabled="field.meta && field.meta.width === 'half'">
<v-list-item-icon><v-icon name="border_vertical" /></v-list-item-icon>
<v-list-item-content>{{ $t('half_width') }}</v-list-item-content>
</v-list-item>
<v-list-item
@click="setWidth('full')"
:disabled="field.meta && field.meta.width === 'full'"
>
<v-list-item @click="setWidth('full')" :disabled="field.meta && field.meta.width === 'full'">
<v-list-item-icon><v-icon name="border_right" /></v-list-item-icon>
<v-list-item-content>{{ $t('full_width') }}</v-list-item-content>
</v-list-item>
<v-list-item
@click="setWidth('fill')"
:disabled="field.meta && field.meta.width === 'fill'"
>
<v-list-item @click="setWidth('fill')" :disabled="field.meta && field.meta.width === 'fill'">
<v-list-item-icon><v-icon name="aspect_ratio" /></v-list-item-icon>
<v-list-item-content>{{ $t('fill_width') }}</v-list-item-content>
</v-list-item>
@@ -390,9 +370,7 @@ export default defineComponent({
if (localType.value !== 'translations') return null;
const relation = relationsStore.state.relations.find((relation: Relation) => {
return (
relation.one_collection === props.field.collection && relation.one_field === props.field.field
);
return relation.one_collection === props.field.collection && relation.one_field === props.field.field;
});
if (!relation) return null;
@@ -499,6 +477,8 @@ export default defineComponent({
.field {
.label {
flex-grow: 1;
overflow: hidden;
text-overflow: ellipsis;
.name {
font-family: var(--family-monospace);

8
app/src/modules/settings/routes/data-model/fields/components/fields-management.vue
View File

@@ -35,11 +35,7 @@
<v-list>
<template v-for="(option, index) in addOptions">
<v-divider v-if="option.divider === true" :key="index" />
<v-list-item
v-else
:key="option.type"
:to="`/settings/data-model/${collection}/+?type=${option.type}`"
>
<v-list-item v-else :key="option.type" :to="`/settings/data-model/${collection}/+?type=${option.type}`">
<v-list-item-icon>
<v-icon :name="option.icon" />
</v-list-item-icon>
@@ -195,7 +191,7 @@ export default defineComponent({
position: relative;
display: grid;
grid-gap: 12px;
grid-template-columns: 1fr 1fr;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
& + & {
margin-top: 12px;