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

Use notices instead of drawer heading

Browse Source
This commit is contained in:
rijkvanzanten
2020-10-16 15:10:27 -04:00
parent c8a176cdb1
commit d65af41258
26 changed files with 217 additions and 328 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
app/src/modules/settings/routes/data-model/field-detail/components/display.vue
View File

@@ -1,6 +1,6 @@
<template>
<div>
<h2 class="type-title">{{ $t('display_setup_title') }}</h2>
<v-notice type="info">{{ $t('display_setup_title') }}</v-notice>
<v-fancy-select class="select" :items="selectItems" v-model="fieldData.meta.display" />
@@ -130,4 +130,8 @@ export default defineComponent({
text-decoration: underline;
}
}
.v-notice {
margin-bottom: 36px;
}
</style>

6
app/src/modules/settings/routes/data-model/field-detail/components/field.vue
View File

@@ -1,6 +1,6 @@
<template>
<div>
<h2 class="type-title">{{ $t('schema_field_title') }}</h2>
<v-notice type="info">{{ $t('schema_field_title') }}</v-notice>
<div class="form">
<div class="field half-left" v-if="fieldData.meta">
@@ -103,4 +103,8 @@ export default defineComponent({
.required {
--v-icon-color: var(--primary);
}
.v-notice {
margin-bottom: 36px;
}
</style>

6
app/src/modules/settings/routes/data-model/field-detail/components/interface.vue
View File

@@ -1,6 +1,6 @@
<template>
<div>
<h2 class="type-title">{{ $t('interface_setup_title') }}</h2>
<v-notice type="info">{{ $t('interface_setup_title') }}</v-notice>
<v-fancy-select class="select" :items="selectItems" v-model="fieldData.meta.interface" />
@@ -139,4 +139,8 @@ export default defineComponent({
text-decoration: underline;
}
}
.v-notice {
margin-bottom: 36px;
}
</style>

145
app/src/modules/settings/routes/data-model/field-detail/components/languages.vue
View File

@@ -1,145 +0,0 @@
<template>
<div>
<h2 class="type-title">{{ $t('configure_languages') }}</h2>
<div class="grid">
<div class="field">
<div class="type-label">{{ $t('translations_collection') }}</div>
<v-input disabled :value="relations[1].many_collection" />
</div>
<div class="field">
<div class="type-label">{{ $t('languages_collection') }}</div>
<v-input :class="{ matches: languagesCollectionExists }" db-safe key="languages-collection" v-model="relations[1].one_collection" :disabled="isExisting" :placeholder="$t('collection') + '...'">
<template #append>
<v-menu show-arrow placement="bottom-end">
<template #activator="{ toggle }">
<v-icon name="list_alt" @click="toggle" v-tooltip="$t('select_existing')" :disabled="isExisting" />
</template>
<v-list class="monospace">
<v-list-item
v-for="item in items"
:key="item.value"
:active="relations[1].one_collection === item.value"
:disabled="item.disabled"
@click="relations[1].one_collection = item.value"
>
<v-list-item-content>
{{ item.text }}
</v-list-item-content>
</v-list-item>
</v-list>
</v-menu>
</template>
</v-input>
</div>
<v-input :value="relations[1].many_field" :placeholder="$t('foreign_key') + '...'"/>
<v-input db-safe :disabled="languagesCollectionExists" v-model="relations[1].one_primary" :placeholder="$t('primary_key') + '...'" />
<v-icon class="arrow" name="arrow_back" />
</div>
</div>
</template>
<script lang="ts">
import { defineComponent, computed, watch } from '@vue/composition-api';
import { Relation } from '@/types';
import { Field } from '@/types';
import { orderBy } from 'lodash';
import useSync from '@/composables/use-sync';
import { useCollectionsStore, useFieldsStore } from '@/stores';
import i18n from '@/lang';
import { state } from '../store';
export default defineComponent({
props: {
type: {
type: String,
required: true,
},
collection: {
type: String,
required: true,
},
isExisting: {
type: Boolean,
default: false,
},
},
setup(props, { emit }) {
const collectionsStore = useCollectionsStore();
const fieldsStore = useFieldsStore();
const { items } = useRelation();
const languagesCollectionExists = computed(() => {
return !!collectionsStore.getCollection(state.relations[1].one_collection);
});
return {
relations: state.relations,
items,
fieldData: state.fieldData,
languagesCollectionExists,
};
function useRelation() {
const availableCollections = computed(() => {
return orderBy(
collectionsStore.state.collections.filter((collection) => {
return collection.collection.startsWith('directus_') === false;
}),
['collection'],
['asc']
);
});
const items = computed(() =>
availableCollections.value.map((collection) => ({
text: collection.collection,
value: collection.collection,
}))
);
return { items };
}
},
});
</script>
<style lang="scss" scoped>
.grid {
--v-select-font-family: var(--family-monospace);
--v-input-font-family: var(--family-monospace);
position: relative;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px 32px;
margin-top: 48px;
.v-input.matches {
--v-input-color: var(--primary);
}
.arrow {
--v-icon-color: var(--primary);
position: absolute;
bottom: 14px;
left: 50%;
transform: translateX(-50%);
}
}
.v-list {
--v-list-item-content-font-family: var(--family-monospace);
}
.v-divider {
margin: 48px 0;
}
.type-label {
margin-bottom: 8px;
}
</style>

7
app/src/modules/settings/routes/data-model/field-detail/components/relationship-m2m.vue
View File

@@ -1,6 +1,7 @@
<template>
<div>
<h2 class="type-title">{{ $t('configure_m2m') }}</h2>
<v-notice type="info">{{ $t('configure_m2m') }}</v-notice>
<div class="grid">
<div class="field">
<div class="type-label">{{ $t('this_collection') }}</div>
@@ -452,4 +453,8 @@ export default defineComponent({
transform: translateX(-50%);
}
}
.v-notice {
margin-bottom: 36px;
}
</style>

7
app/src/modules/settings/routes/data-model/field-detail/components/relationship-m2o.vue
View File

@@ -1,6 +1,7 @@
<template>
<div>
<h2 class="type-title">{{ $t('configure_m2o') }}</h2>
<v-notice type="info">{{ $t('configure_m2o') }}</v-notice>
<div class="grid">
<div class="field">
<div class="type-label">{{ $t('this_collection') }}</div>
@@ -255,4 +256,8 @@ export default defineComponent({
.type-label {
margin-bottom: 8px;
}
.v-notice {
margin-bottom: 36px;
}
</style>

7
app/src/modules/settings/routes/data-model/field-detail/components/relationship-o2m.vue
View File

@@ -1,6 +1,7 @@
<template>
<div>
<h2 class="type-title">{{ $t('configure_o2m') }}</h2>
<v-notice type="info">{{ $t('configure_o2m') }}</v-notice>
<div class="grid">
<div class="field">
<div class="type-label">{{ $t('this_collection') }}</div>
@@ -380,4 +381,8 @@ export default defineComponent({
transform: translateX(-50%);
}
}
.v-notice {
margin-bottom: 36px;
}
</style>

12
app/src/modules/settings/routes/data-model/field-detail/components/schema.vue
View File

@@ -1,6 +1,8 @@
<template>
<div>
<h2 class="type-title">{{ $t('schema_setup_title') }}</h2>
<v-notice type="info">
{{ $t('schema_setup_title') }}
</v-notice>
<div class="form">
<div class="field">
@@ -392,10 +394,6 @@ export default defineComponent({
@import '@/styles/mixins/breakpoint';
@import '@/styles/mixins/form-grid';
.type-title {
margin-bottom: 32px;
}
.form {
--v-form-vertical-gap: 32px;
--v-form-horizontal-gap: 32px;
@@ -416,4 +414,8 @@ export default defineComponent({
grid-gap: 12px;
grid-template-columns: 1fr 1fr;
}
.v-notice {
margin-bottom: 36px;
}
</style>

7
app/src/modules/settings/routes/data-model/field-detail/components/translations.vue
View File

@@ -1,6 +1,7 @@
<template>
<div>
<h2 class="type-title">{{ $t('configure_m2m') }}</h2>
<v-notice type="info">{{ $t('configure_m2m') }}</v-notice>
<div class="grid">
<div class="field">
<div class="type-label">{{ $t('this_collection') }}</div>
@@ -349,4 +350,8 @@ export default defineComponent({
.v-list {
--v-list-item-content-font-family: var(--family-monospace);
}
.v-notice {
margin-bottom: 36px;
}
</style>

80
app/src/modules/settings/routes/data-model/field-detail/field-detail.vue
View File

@@ -45,47 +45,49 @@
<setup-tabs :current.sync="currentTab" :tabs="tabs" :type="localType" />
</template>
<setup-schema
v-if="currentTab[0] === 'schema'"
:is-existing="field !== '+'"
:collection="collection"
:type="localType"
/>
<div class="content">
<setup-schema
v-if="currentTab[0] === 'schema'"
:is-existing="field !== '+'"
:collection="collection"
:type="localType"
/>
<setup-field
v-if="currentTab[0] === 'field'"
:is-existing="field !== '+'"
:collection="collection"
:type="localType"
/>
<setup-field
v-if="currentTab[0] === 'field'"
:is-existing="field !== '+'"
:collection="collection"
:type="localType"
/>
<setup-relationship
v-if="currentTab[0] === 'relationship'"
:is-existing="field !== '+'"
:collection="collection"
:type="localType"
/>
<setup-relationship
v-if="currentTab[0] === 'relationship'"
:is-existing="field !== '+'"
:collection="collection"
:type="localType"
/>
<setup-translations
v-if="currentTab[0] === 'translations'"
:is-existing="field !== '+'"
:collection="collection"
:type="localType"
/>
<setup-translations
v-if="currentTab[0] === 'translations'"
:is-existing="field !== '+'"
:collection="collection"
:type="localType"
/>
<setup-interface
v-if="currentTab[0] === 'interface'"
:is-existing="field !== '+'"
:collection="collection"
:type="localType"
/>
<setup-interface
v-if="currentTab[0] === 'interface'"
:is-existing="field !== '+'"
:collection="collection"
:type="localType"
/>
<setup-display
v-if="currentTab[0] === 'display'"
:is-existing="field !== '+'"
:collection="collection"
:type="localType"
/>
<setup-display
v-if="currentTab[0] === 'display'"
:is-existing="field !== '+'"
:collection="collection"
:type="localType"
/>
</div>
<template #actions>
<setup-actions
@@ -404,4 +406,10 @@ export default defineComponent({
color: var(--primary);
}
}
.content {
padding: var(--content-padding);
padding-top: 0;
padding-bottom: var(--content-padding);
}
</style>

18
app/src/modules/settings/routes/data-model/new-collection.vue
View File

@@ -29,9 +29,10 @@
</v-tabs>
</template>
<v-tabs-items v-model="currentTab">
<v-tabs-items class="content" v-model="currentTab">
<v-tab-item value="collection">
<h2 class="type-title">{{ $t('creating_collection_info') }}</h2>
<v-notice type="info">{{ $t('creating_collection_info') }}</v-notice>
<div class="grid">
<div>
<div class="type-label">
@@ -83,7 +84,8 @@
</div>
</v-tab-item>
<v-tab-item value="system">
<h2 class="type-title">{{ $t('creating_collection_system') }}</h2>
<v-notice type="info">{{ $t('creating_collection_system') }}</v-notice>
<div class="grid system">
<div v-for="(info, field) in systemFields" :key="field">
<div class="type-label">{{ $t(info.label) }}</div>
@@ -475,4 +477,14 @@ export default defineComponent({
.required {
color: var(--primary);
}
.content {
padding: var(--content-padding);
padding-top: 0;
padding-bottom: var(--content-padding);
}
.v-notice {
margin-bottom: 36px;
}
</style>

13
app/src/modules/settings/routes/roles/permissions-detail/components/fields.vue
View File

@@ -1,13 +1,14 @@
<template>
<div>
<v-drawer-heading
:heading="
<v-notice type="info">
{{
$t('fields_for_role', {
role: role ? role.name : $t('public'),
action: $t(permission.action).toLowerCase(),
})
"
/>
}}
</v-notice>
<p class="type-label">{{ $tc('field', 0) }}</p>
<interface-checkboxes v-model="fields" type="json" :choices="fieldsInCollection" />
</div>
@@ -83,4 +84,8 @@ export default defineComponent({
.type-label {
margin-bottom: 8px;
}
.v-notice {
margin-bottom: 36px;
}
</style>

15
app/src/modules/settings/routes/roles/permissions-detail/components/permissions.vue
View File

@@ -1,13 +1,14 @@
<template>
<div>
<v-drawer-heading
:heading="
<v-notice type="info">
{{
$t('permissions_for_role', {
action: $t(permission.action).toLowerCase(),
role: role ? role.name : $t('public'),
})
"
/>
}}
</v-notice>
<interface-code v-model="permissions" language="json" type="json" />
</div>
</template>
@@ -47,3 +48,9 @@ export default defineComponent({
},
});
</script>
<style lang="scss" scoped>
.v-notice {
margin-bottom: 36px;
}
</style>

14
app/src/modules/settings/routes/roles/permissions-detail/components/presets.vue
View File

@@ -1,13 +1,13 @@
<template>
<div>
<v-drawer-heading
:heading="
<v-notice type="info">
{{
$t('presets_for_role', {
action: $t(permission.action).toLowerCase(),
role: role ? role.name : $t('public'),
})
"
/>
}}
</v-notice>
<interface-code v-model="presets" language="json" type="json" />
</div>
</template>
@@ -47,3 +47,9 @@ export default defineComponent({
},
});
</script>
<style lang="scss" scoped>
.v-notice {
margin-bottom: 36px;
}
</style>

15
app/src/modules/settings/routes/roles/permissions-detail/components/validation.vue
View File

@@ -1,13 +1,14 @@
<template>
<div>
<v-drawer-heading
:heading="
<v-notice type="info">
{{
$t('validation_for_role', {
action: $t(permission.action).toLowerCase(),
role: role ? role.name : $t('public'),
})
"
/>
}}
</v-notice>
<interface-code v-model="validation" language="json" type="json" />
</div>
</template>
@@ -47,3 +48,9 @@ export default defineComponent({
},
});
</script>
<style lang="scss" scoped>
.v-notice {
margin-bottom: 36px;
}
</style>