diff --git a/app/src/lang/en-US/index.json b/app/src/lang/en-US/index.json index 7d68a52c9a..0a7743296c 100644 --- a/app/src/lang/en-US/index.json +++ b/app/src/lang/en-US/index.json @@ -623,7 +623,7 @@ "collections_shown": "Collections Shown", "visible_collections": "Visible Collections", "hidden_collections": "Hidden Collections", - "unmanaged_collections": "Unmanaged Collections", + "unmanaged_collections": "Unconfigured Collections", "system_collections": "System Collections", "slider": "Slider", 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 896c992b71..01deac0f75 100644 --- a/app/src/modules/settings/routes/data-model/collections/collections.vue +++ b/app/src/modules/settings/routes/data-model/collections/collections.vue @@ -40,9 +40,9 @@ @@ -52,9 +52,9 @@ @@ -63,8 +63,11 @@ - - {{ item.note }} + + {{ $t('db_only_click_to_configure') }} + + + {{ item.meta.note }} @@ -122,11 +125,12 @@ export default defineComponent({ { text: i18n.t('name'), value: 'name', - width: 300, + width: 240, }, { text: i18n.t('note'), value: 'note', + width: 360, }, ]); @@ -168,7 +172,7 @@ export default defineComponent({ ); }); - const meta = computed(() => { + const system = computed(() => { return sortBy( collectionsStore.state.collections .filter((collection) => collection.collection.startsWith('directus_') === true) @@ -181,7 +185,8 @@ export default defineComponent({ return sortBy( collectionsStore.state.collections .filter((collection) => collection.collection.startsWith('directus_') === false) - .filter((collection) => collection.meta === null), + .filter((collection) => collection.meta === null) + .map((collection) => ({ ...collection, icon: 'dns' })), 'collection' ); }); @@ -193,16 +198,16 @@ export default defineComponent({ items.push(visible.value); } - if (activeTypes.value.includes('hidden')) { - items.push(hidden.value); - } - if (activeTypes.value.includes('unmanaged')) { items.push(unmanaged.value); } - if (activeTypes.value.includes('meta')) { - items.push(meta.value); + if (activeTypes.value.includes('hidden')) { + items.push(hidden.value); + } + + if (activeTypes.value.includes('system')) { + items.push(system.value); } return items.flat(); @@ -219,6 +224,18 @@ export default defineComponent({ vertical-align: baseline; } +.icon.hidden ::v-deep i { + color: var(--foreground-subdued); +} + +.icon.system ::v-deep i { + color: var(--primary); +} + +// .icon.unmanaged ::v-deep i { +// color: var(--warning); +// } + .collection { font-family: var(--family-monospace); } @@ -227,12 +244,16 @@ export default defineComponent({ color: var(--foreground-subdued); } -.meta { +.system { color: var(--primary); } -.unmanaged { - color: var(--warning); +// .unmanaged { +// color: var(--warning); +// } + +.note { + color: var(--foreground-subdued); } .padding-box { @@ -252,7 +273,7 @@ export default defineComponent({ } .no-meta { - --v-icon-color: var(--foreground-subdued); + --v-icon-color: var(--warning); margin-right: 4px; } diff --git a/app/src/modules/settings/routes/data-model/collections/components/collections-filter.vue b/app/src/modules/settings/routes/data-model/collections/components/collections-filter.vue index c7952c556f..14984957f8 100644 --- a/app/src/modules/settings/routes/data-model/collections/components/collections-filter.vue +++ b/app/src/modules/settings/routes/data-model/collections/components/collections-filter.vue @@ -2,8 +2,8 @@ {{ $t('collections_shown') }} - + diff --git a/app/src/modules/settings/routes/data-model/fields/components/field-select.vue b/app/src/modules/settings/routes/data-model/fields/components/field-select.vue index 5ef482a3d8..0ddc67343a 100644 --- a/app/src/modules/settings/routes/data-model/fields/components/field-select.vue +++ b/app/src/modules/settings/routes/data-model/fields/components/field-select.vue @@ -10,7 +10,8 @@ {{ field.field }} - {{ interfaceName }} + {{ interfaceName }} + {{ $t('db_only_click_to_configure') }} @@ -25,6 +26,7 @@ @@ -309,6 +311,11 @@ export default defineComponent({ &.hidden-icon { --v-icon-color-hover: var(--foreground-subdued); } + + &.unmanaged { + --v-icon-color: var(--warning); + --v-icon-color-hover: var(--warning); + } } .drag-handle {