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

additional relationship setup styling

Browse Source
This commit is contained in:
Ben Haynes
2020-09-12 08:38:03 -04:00
parent 7af94320a4
commit 1be733c0e2
4 changed files with 29 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
app/src/components/v-input/v-input.vue
View File

@@ -245,6 +245,7 @@ body {
.v-input {
--arrow-color: var(--border-normal);
--v-icon-color: var(--foreground-subdued);
--v-input-color: var(--foreground-normal);
--v-input-border-color-focus: var(--primary);
display: flex;
@@ -262,7 +263,7 @@ body {
align-items: center;
height: 100%;
padding: var(--input-padding);
color: var(--foreground-normal);
color: var(--v-input-color);
font-family: var(--v-input-font-family);
background-color: var(--background-page);
border: var(--border-width) solid var(--border-normal);
@@ -305,7 +306,7 @@ body {
&:hover {
--arrow-color: var(--border-normal-alt);
color: var(--foreground-normal);
color: var(--v-input-color);
background-color: var(--background-page);
border-color: var(--border-normal-alt);
}
@@ -314,7 +315,7 @@ body {
&.active {
--arrow-color: var(--border-normal-alt);
color: var(--foreground-normal);
color: var(--v-input-color);
background-color: var(--background-page);
border-color: var(--v-input-border-color-focus);
}

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

@@ -204,6 +204,10 @@ export default defineComponent({
gap: 12px 28px;
margin-top: 48px;
.v-input.matches {
--v-input-color: var(--primary);
}
.v-icon.arrow {
--v-icon-color: var(--primary);

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

@@ -8,11 +8,11 @@
</div>
<div class="field">
<div class="type-label">{{ $t('related_collection') }}</div>
<v-input db-safe key="related-collection" v-model="relations[0].one_collection" :disabled="isExisting" :placeholder="$t('collection')">
<v-input :class="{ matches: isNewCollection === false }" db-safe key="related-collection" v-model="relations[0].one_collection" :disabled="isExisting" :placeholder="$t('collection') + '...'">
<template #append>
<v-menu show-arrow placement="bottom-end">
<template #activator="{ toggle }">
<v-icon name="box" @click="toggle" v-tooltip="$t('select_existing')" />
<v-icon name="list_alt" @click="toggle" v-tooltip="$t('select_existing')" />
</template>
<v-list dense class="monospace">
@@ -32,7 +32,7 @@
</v-input>
</div>
<v-input disabled :value="relations[0].many_field" />
<v-input db-safe :disabled="isNewCollection === false" v-model="relations[0].one_primary" :placeholder="$t('primary_key')" />
<v-input db-safe :disabled="isNewCollection === false" v-model="relations[0].one_primary" :placeholder="$t('primary_key') + '...'" />
<v-icon class="arrow" name="arrow_back" />
</div>
@@ -45,7 +45,7 @@
</div>
<div class="field">
<div class="type-label">{{ $t('corresponding_field_name') }}</div>
<v-input :disabled="hasCorresponding === false" v-model="correspondingField" db-safe />
<v-input :disabled="hasCorresponding === false" v-model="correspondingField" :placeholder="$t('field_name') + '...'" db-safe />
</div>
<v-icon name="arrow_forward" class="arrow" />
</div>
@@ -186,11 +186,15 @@ export default defineComponent({
position: relative;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px 32px;
gap: 12px 32px;
margin-top: 48px;
.v-input.matches {
--v-input-color: var(--primary);
}
.arrow {
--v-icon-color: var(--foreground-subdued);
--v-icon-color: var(--primary);
position: absolute;
bottom: 14px;

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

@@ -10,14 +10,15 @@
<div class="type-label">{{ $t('related_collection') }}</div>
<v-input
db-safe
:placeholder="$t('collection')"
:placeholder="$t('collection') + '...'"
v-model="relations[0].many_collection"
:disabled="isExisting"
:class="{ matches: isExisting }"
>
<template #append>
<v-menu show-arrow placement="bottom-end">
<template #activator="{ toggle }">
<v-icon name="box" @click="toggle" v-tooltip="$t('select_existing')" />
<v-icon name="list_alt" @click="toggle" v-tooltip="$t('select_existing')" />
</template>
<v-list dense class="monospace">
@@ -41,12 +42,12 @@
db-safe
v-model="relations[0].many_field"
:disabled="isExisting"
:placeholder="$t('foreign_key')"
:placeholder="$t('foreign_key') + '...'"
>
<template #append v-if="fields && fields.length > 0">
<v-menu show-arrow placement="bottom-end">
<template #activator="{ toggle }">
<v-icon name="box" @click="toggle" v-tooltip="$t('select_existing')" />
<v-icon name="list_alt" @click="toggle" v-tooltip="$t('select_existing')" />
</template>
<v-list dense class="monospace">
@@ -167,11 +168,15 @@ export default defineComponent({
position: relative;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px 32px;
gap: 12px 32px;
margin-top: 48px;
.v-input.matches {
--v-input-color: var(--primary);
}
.v-icon.arrow {
--v-icon-color: var(--foreground-subdued);
--v-icon-color: var(--primary);
position: absolute;
bottom: 14px;