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

Various collection/field setup tweaks (#570)

Browse Source 
* Add no collections notice to settings

* Use db safe inputs for name / primary key field

* Only show filter notice when there are items

* Move english strings to translations

* Fix padding top

* Fix dialog in menu

* Add note on dialog in menu

* Save UUID field as type uuid

* Restructure fields management

* Tweak active state / colors

* Fix field-duplicate
This commit is contained in:
Rijk van Zanten
2020-05-13 18:31:22 -04:00
committed by GitHub
parent 63219134b7
commit 276021657d
8 changed files with 188 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/components/v-menu/readme.md
View File

@@ -2,6 +2,29 @@
Renders a dropdown menu. Can be attached to an activator element or free floating.
**NOTE**
Due to the fact that a menu is rendered through a portal, dialogs don't work great when rendered from
within a menu. If you ever find yourself doing this:
```html
<v-menu>
<v-list>
<v-dialog>
<template #activator="{ on }">
<v-list-item @click="on">
```
You're better off doing
```html
<v-dialog v-model="dialogActive">
<v-menu>
<v-list>
<v-list-item @click="dialogActive = true">
```
## Usage
Can be used with an activator in the corresponding slot:

2
src/lang/en-US/index.json
View File

@@ -375,6 +375,8 @@
"layout_type": "{layout} Layout",
"layout_options": "Layout Options",
"setup": "Setup",
"collection_setup": "Collection Setup",
"optional_system_fields": "Optional System Fields",
"none": "None",

6
src/layouts/tabular/tabular.vue
View File

@@ -129,7 +129,11 @@
</template>
</v-table>
<v-info v-else-if="itemCount === 0" :title="$t('no_results')" icon="search">
<v-info
v-else-if="itemCount === 0 && _filters.length > 0"
:title="$t('no_results')"
icon="search"
>
{{ $t('no_results_copy') }}
<template #append>

19
src/modules/settings/routes/data-model/collections/collections.vue
View File

@@ -21,7 +21,21 @@
</template>
<div class="padding-box">
<v-info
type="warning"
icon="box"
:title="$t('no_collections')"
v-if="items.length === 0"
>
{{ $t('no_collections_copy_admin') }}
<template #append>
<v-button @click="addNewActive = true">{{ $t('create_collection') }}</v-button>
</template>
</v-info>
<v-table
v-else
:headers.sync="tableHeaders"
:items="items"
@click:row="openCollection"
@@ -226,6 +240,7 @@ export default defineComponent({
.padding-box {
padding: var(--content-padding);
padding-top: 0;
}
.v-table {
@@ -234,6 +249,10 @@ export default defineComponent({
display: contents;
}
.v-info {
margin: 20vh 0;
}
.header-icon {
--v-button-color-disabled: var(--warning);
--v-button-background-color-disabled: var(--warning-25);

86
src/modules/settings/routes/data-model/collections/components/collection-options/collection-options.vue
View File

@@ -11,51 +11,47 @@
>
{{ $t('manage') }}
</v-button>
<v-menu
v-else-if="collection.collection.startsWith('directus_') === false"
placement="left-start"
show-arrow
close-on-content-click
:disabled="savingManaged"
>
<template #activator="{ toggle }">
<v-progress-circular small v-if="savingManaged" indeterminate />
<v-icon v-else name="more_vert" @click="toggle" class="ctx-toggle" />
</template>
<v-list dense>
<v-list-item @click="toggleManaged(false)">
<v-list-item-icon>
<v-icon name="block" />
</v-list-item-icon>
<v-list-item-content>
{{ $t('unmanage_collection') }}
</v-list-item-content>
</v-list-item>
<v-dialog v-model="deleteActive">
<template #activator="{ on }">
<v-list-item @click="on">
<v-list-item-icon>
<v-icon name="delete" />
</v-list-item-icon>
<v-list-item-content>
{{ $t('delete_collection') }}
</v-list-item-content>
</v-list-item>
</template>
<v-card>
<v-card-title>{{ $t('delete_collection_are_you_sure') }}</v-card-title>
<v-card-actions>
<v-button :disabled="deleting" secondary @click="deleteActive = null">
{{ $t('cancel') }}
</v-button>
<v-button :loading="deleting" class="delete" @click="deleteCollection">
{{ $t('delete_collection') }}
</v-button>
</v-card-actions>
</v-card>
</v-dialog>
</v-list>
</v-menu>
<div v-else-if="collection.collection.startsWith('directus_') === false">
<v-menu placement="left-start" show-arrow close-on-content-click :disabled="savingManaged">
<template #activator="{ toggle }">
<v-progress-circular small v-if="savingManaged" indeterminate />
<v-icon v-else name="more_vert" @click="toggle" class="ctx-toggle" />
</template>
<v-list dense>
<v-list-item @click="toggleManaged(false)">
<v-list-item-icon>
<v-icon name="block" />
</v-list-item-icon>
<v-list-item-content>
{{ $t('unmanage_collection') }}
</v-list-item-content>
</v-list-item>
<v-list-item @click="deleteActive = true">
<v-list-item-icon>
<v-icon name="delete" />
</v-list-item-icon>
<v-list-item-content>
{{ $t('delete_collection') }}
</v-list-item-content>
</v-list-item>
</v-list>
</v-menu>
<v-dialog v-model="deleteActive">
<v-card>
<v-card-title>{{ $t('delete_collection_are_you_sure') }}</v-card-title>
<v-card-actions>
<v-button :disabled="deleting" secondary @click="deleteActive = null">
{{ $t('cancel') }}
</v-button>
<v-button :loading="deleting" class="delete" @click="deleteCollection">
{{ $t('delete_collection') }}
</v-button>
</v-card-actions>
</v-card>
</v-dialog>
</div>
</template>
<script lang="ts">

10
src/modules/settings/routes/data-model/collections/components/new-collection/new-collection.vue
View File

@@ -24,8 +24,8 @@
<template #sidebar>
<v-tabs vertical v-model="currentTab">
<v-tab value="collection">Collection Setup</v-tab>
<v-tab value="system">Optional System Fields</v-tab>
<v-tab value="collection">{{ $t('collection_setup') }}</v-tab>
<v-tab value="system">{{ $t('optional_system_fields') }}</v-tab>
</v-tabs>
</template>
@@ -33,12 +33,12 @@
<v-tab-item value="collection">
<h2 class="type-title">{{ $t('creating_collection_info') }}</h2>
<div class="type-label">{{ $t('name') }}</div>
<v-input class="monospace" v-model="collectionName" />
<v-input class="monospace" v-model="collectionName" db-safe />
<v-divider />
<div class="grid">
<div>
<div class="type-label">{{ $t('primary_key_field') }}</div>
<v-input class="monospace" v-model="primaryKeyFieldName" />
<v-input class="monospace" v-model="primaryKeyFieldName" db-safe />
</div>
<div>
<div class="type-label">{{ $t('type') }}</div>
@@ -241,7 +241,7 @@ export default defineComponent({
return {
...field,
interface: 'text-input',
type: 'string',
type: 'uuid',
datatype: 'VARCHAR',
length: 36,
auto_increment: false,

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

@@ -27,39 +27,12 @@
</v-list-item-content>
</v-list-item>
<v-dialog v-model="duplicateActive">
<template #activator="{ on }">
<v-list-item @click="on">
<v-list-item-icon>
<v-icon name="control_point_duplicate" />
</v-list-item-icon>
<v-list-item-content>{{ $t('duplicate_field') }}</v-list-item-content>
</v-list-item>
</template>
<v-card>
<v-card-title>{{ $t('duplicate_where_to') }}</v-card-title>
<v-card-text>
<span class="label">{{ $tc('collection', 0) }}</span>
<v-select
class="monospace"
:items="collections"
v-model="duplicateTo"
/>
<span class="label">{{ $tc('field', 0) }}</span>
<v-input class="monospace" v-model="duplicateName" />
</v-card-text>
<v-card-actions>
<v-button secondary @click="duplicateActive = false">
{{ $t('cancel') }}
</v-button>
<v-button @click="saveDuplicate" :loading="duplicating">
{{ $t('duplicate') }}
</v-button>
</v-card-actions>
</v-card>
</v-dialog>
<v-list-item @click="duplicateActive = true">
<v-list-item-icon>
<v-icon name="control_point_duplicate" />
</v-list-item-icon>
<v-list-item-content>{{ $t('duplicate_field') }}</v-list-item-content>
</v-list-item>
<v-divider />
<v-list-item @click="setWidth('half')" :disabled="hidden || field.width === 'half'">
<v-list-item-icon><v-icon name="border_vertical" /></v-list-item-icon>
@@ -93,6 +66,28 @@
</v-list-item>
</v-list>
</v-menu>
<v-dialog v-model="duplicateActive">
<v-card class="duplicate">
<v-card-title>{{ $t('duplicate_where_to') }}</v-card-title>
<v-card-text>
<span class="type-label">{{ $tc('collection', 0) }}</span>
<v-select class="monospace" :items="collections" v-model="duplicateTo" />
<span class="type-label">{{ $tc('field', 0) }}</span>
<v-input class="monospace" v-model="duplicateName" />
</v-card-text>
<v-card-actions>
<v-button secondary @click="duplicateActive = false">
{{ $t('cancel') }}
</v-button>
<v-button @click="saveDuplicate" :loading="duplicating">
{{ $t('duplicate') }}
</v-button>
</v-card-actions>
</v-card>
</v-dialog>
<v-dialog v-model="deleteActive">
<v-card>
<v-card-title>Are you sure you want to delete this field?</v-card-title>
@@ -238,6 +233,10 @@ export default defineComponent({
--v-input-font-family: var(--family-monospace);
}
.v-select.monospace {
--v-select-font-family: var(--family-monospace);
}
.v-icon {
--v-icon-color: var(--foreground-subdued);
}
@@ -245,4 +244,14 @@ export default defineComponent({
.drag-handle {
cursor: grab !important;
}
.duplicate {
.text-label {
margin-bottom: 4px;
}
.v-select {
margin-bottom: 32px;
}
}
</style>

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

@@ -1,12 +1,16 @@
<template>
<div class="fields-management">
<draggable
class="visible"
class="field-grid"
:value="sortedVisibleFields"
handle=".drag-handle"
group="fields"
@change="($event) => handleChange($event, 'visible')"
>
<template #header>
<div class="group-name">Visible Fields</div>
</template>
<field-select
v-for="field in sortedVisibleFields"
:key="field.field"
@@ -14,38 +18,42 @@
@toggle-visibility="toggleVisibility($event, 'visible')"
@edit="openFieldSetup(field)"
/>
<template #footer>
<v-button class="add-field" align="left" dashed outlined @click="openFieldSetup()">
<v-icon small name="add" />
{{ $t('add_field') }}
</v-button>
</template>
</draggable>
<v-button
full-width
class="add-field"
align="left"
dashed
outlined
large
@click="openFieldSetup()"
>
<v-icon name="add" />
{{ $t('add_field') }}
</v-button>
<v-divider>{{ $t('hidden_detail') }}</v-divider>
<draggable
class="hidden"
class="field-grid hidden"
:value="sortedHiddenFields"
handle=".drag-handle"
group="fields"
@change="($event) => handleChange($event, 'hidden')"
>
<template #header>
<div class="group-name">Hidden Fields</div>
</template>
<field-select
v-for="field in sortedHiddenFields"
:key="field.field"
:field="field"
hidden
@toggle-visibility="toggleVisibility($event, 'hidden')"
@edit="openFieldSetup(field)"
/>
<template #footer>
<v-button class="add-field" align="left" dashed outlined @click="openFieldSetup()">
<v-icon small name="add" />
{{ $t('add_field') }}
</v-button>
</template>
</draggable>
<field-setup
@@ -246,30 +254,39 @@ export default defineComponent({
margin: 32px 0;
}
.add-field {
margin-top: 24px;
}
.visible,
.hidden {
display: grid;
grid-gap: 12px 12px;
grid-template-columns: 1fr 1fr;
}
.visible {
.field-grid {
position: relative;
padding: 36px 12px 12px 12px;
display: grid;
grid-gap: 12px;
grid-template-columns: 1fr 1fr;
margin-bottom: 24px;
padding: 32px 12px 72px 12px;
background-color: var(--background-subdued);
border-radius: var(--border-radius);
&::before {
.group-name {
position: absolute;
top: 8px;
top: 6px;
left: 12px;
margin-bottom: 8px;
color: var(--foreground-subdued);
content: 'Main Form';
}
.add-field {
--v-button-width: 100%;
--v-button-font-size: 14px;
--v-button-background-color: var(--foreground-subdued);
--v-button-background-color-hover: var(--primary);
position: absolute;
bottom: 12px;
left: 12px;
width: calc(100% - 24px);
}
}
.visible {
margin-bottom: 24px;
}
.list-move {