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

Add hover states to field-select icons + move add new out of draggable area

Browse Source
This commit is contained in:
rijkvanzanten
2020-09-02 12:29:41 -04:00
parent 8fe92b5d97
commit 9925822e14
3 changed files with 51 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
app/src/components/v-icon/v-icon.vue
View File

@@ -129,6 +129,7 @@ export default defineComponent({
<style>
body {
--v-icon-color: currentColor;
--v-icon-color-hover: currentColor;
--v-icon-size: 24px;
}
</style>
@@ -172,6 +173,11 @@ body {
&.has-click {
cursor: pointer;
transition: color var(--fast) var(--transition);
&:hover {
color: var(--v-icon-color-hover);
}
}
&.sup {

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

@@ -254,6 +254,7 @@ export default defineComponent({
.v-icon {
--v-icon-color: var(--foreground-subdued);
--v-icon-color-hover: var(--foreground);
}
.drag-handle {

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

@@ -9,45 +9,43 @@
@change="handleChange"
>
<field-select v-for="field in sortedFields" :key="field.field" :field="field" />
<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>
</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>
<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>
</div>
</template>
@@ -195,15 +193,18 @@ export default defineComponent({
margin: 32px 0;
}
.fields-management {
margin-bottom: 24px;
padding: 12px;
background-color: var(--background-subdued);
border-radius: var(--border-radius);
}
.field-grid {
position: relative;
display: grid;
grid-gap: 12px;
grid-template-columns: 1fr 1fr;
margin-bottom: 24px;
padding: 12px;
background-color: var(--background-subdued);
border-radius: var(--border-radius);
}
.add-field {
@@ -211,8 +212,7 @@ export default defineComponent({
--v-button-background-color: var(--primary);
--v-button-background-color-hover: var(--primary-125);
grid-column: 1 / span 2;
max-width: 50%;
margin-top: 12px;
.v-icon {
margin-right: 8px;