github/directus
1
0
Fork 0
mirror of https://github.com/directus/directus.git synced 2026-01-27 12:07:56 -05:00
Code Issues Packages Projects Releases Wiki Activity

Move add field button to shade

Browse Source
This commit is contained in:
rijkvanzanten
2020-09-01 18:36:42 -04:00
parent 11ec6f4b5a
commit 011c0a030b
1 changed files with 38 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -9,43 +9,45 @@
@change="handleChange"
>
<field-select v-for="field in sortedFields" :key="field.field" :field="field" />
</draggable>
<v-menu attached>
<template #activator="{ toggle, active }">
<v-button
@click="toggle"
class="add-field"
align="left"
:dashed="!active"
:class="{ active }"
outlined
large
full-width
>
<v-icon name="add" />
{{ $t('create_field') }}
</v-button>
<template #footer>
<v-menu attached>
<template #activator="{ toggle, active }">
<v-button
@click="toggle"
class="add-field"
align="left"
:dashed="!active"
:class="{ active }"
outlined
large
full-width
>
<v-icon name="add" />
{{ $t('create_field') }}
</v-button>
</template>
<v-list dense>
<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-icon>
<v-icon :name="option.icon" />
</v-list-item-icon>
<v-list-item-content>
{{ option.text }}
</v-list-item-content>
</v-list-item>
</template>
</v-list>
</v-menu>
</template>
<v-list dense>
<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-icon>
<v-icon :name="option.icon" />
</v-list-item-icon>
<v-list-item-content>
{{ option.text }}
</v-list-item-content>
</v-list-item>
</template>
</v-list>
</v-menu>
</draggable>
</div>
</template>
@@ -209,6 +211,7 @@ export default defineComponent({
--v-button-background-color: var(--foreground-subdued);
--v-button-background-color-hover: var(--primary);
grid-column: 1 / span 2;
max-width: 50%;
.v-icon {