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

Revert list style for O2M and M2M interfaces (#15267)

Browse Source 
* revert list style for list-o2m

* revert list style for list-m2m
This commit is contained in:
Azri Kahar
2022-08-26 05:19:18 +08:00
committed by GitHub
parent 93954af2e2
commit 08105d0ed2
4 changed files with 92 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
app/src/interfaces/list-m2m/index.ts
View File

@@ -195,6 +195,17 @@ export default defineInterface({
label: '$t:enable_search_filter',
},
width: 'half',
hidden: true,
conditions: [
{
rule: {
layout: {
_eq: 'table',
},
},
hidden: false,
},
],
},
},
{

50
app/src/interfaces/list-m2m/list-m2m.vue
View File

@@ -4,7 +4,7 @@
</v-notice>
<div v-else class="many-to-many">
<div :class="[`layout-${layout}`, { bordered: layout === LAYOUTS.TABLE }]">
<div class="actions" :class="width">
<div v-if="layout === LAYOUTS.TABLE" class="actions" :class="width">
<div class="spacer" />
<div v-if="totalItemCount" class="item-count">
@@ -143,20 +143,34 @@
</draggable>
</v-list>
<div v-if="totalItemCount > 10" class="actions">
<v-pagination
v-if="pageCount > 1"
v-model="page"
:length="pageCount"
:total-visible="width.includes('half') ? 3 : 5"
/>
<div class="actions" :class="layout">
<template v-if="layout === LAYOUTS.TABLE">
<template v-if="totalItemCount > 10">
<v-pagination
v-if="pageCount > 1"
v-model="page"
:length="pageCount"
:total-visible="width.includes('half') ? 3 : 5"
/>
<div class="spacer" />
<div class="spacer" />
<div v-if="loading === false" class="per-page">
<span>{{ t('per_page') }}</span>
<v-select v-model="limit" :items="['10', '20', '30', '50', '100']" inline />
</div>
<div v-if="loading === false" class="per-page">
<span>{{ t('per_page') }}</span>
<v-select v-model="limit" :items="['10', '20', '30', '50', '100']" inline />
</div>
</template>
</template>
<template v-else>
<v-button v-if="enableCreate && createAllowed" :disabled="disabled" @click="createItem">
{{ t('create_new') }}
</v-button>
<v-button v-if="enableSelect && selectAllowed" :disabled="disabled" @click="selectModalActive = true">
{{ t('add_existing') }}
</v-button>
<div class="spacer" />
<v-pagination v-if="pageCount > 1" v-model="page" :length="pageCount" :total-visible="5" />
</template>
</div>
</div>
@@ -649,13 +663,15 @@ const selectAllowed = computed(() => {
gap: var(--v-sheet-padding);
.v-pagination {
margin-top: var(--v-sheet-padding);
:deep(.v-button) {
display: inline-flex;
}
}
.table.v-pagination {
margin-top: var(--v-sheet-padding);
}
.spacer {
flex-grow: 1;
}
@@ -684,6 +700,10 @@ const selectAllowed = computed(() => {
}
}
}
&.list {
margin-top: 8px;
}
}
.item-link {

11
app/src/interfaces/list-o2m/index.ts
View File

@@ -169,6 +169,17 @@ export default defineInterface({
label: '$t:enable_search_filter',
},
width: 'half',
hidden: true,
conditions: [
{
rule: {
layout: {
_eq: 'table',
},
},
hidden: false,
},
],
},
},
{

50
app/src/interfaces/list-o2m/list-o2m.vue
View File

@@ -4,7 +4,7 @@
</v-notice>
<div v-else class="one-to-many">
<div :class="{ bordered: layout === LAYOUTS.TABLE }">
<div class="actions" :class="width">
<div v-if="layout === LAYOUTS.TABLE" class="actions" :class="width">
<div class="spacer" />
<div v-if="totalItemCount" class="item-count">
@@ -142,20 +142,34 @@
</draggable>
</v-list>
<div v-if="totalItemCount > 10" class="actions">
<v-pagination
v-if="pageCount > 1"
v-model="page"
:length="pageCount"
:total-visible="width.includes('half') ? 3 : 5"
/>
<div class="actions" :class="layout">
<template v-if="layout === LAYOUTS.TABLE">
<template v-if="totalItemCount > 10">
<v-pagination
v-if="pageCount > 1"
v-model="page"
:length="pageCount"
:total-visible="width.includes('half') ? 3 : 5"
/>
<div class="spacer" />
<div class="spacer" />
<div v-if="loading === false" class="per-page">
<span>{{ t('per_page') }}</span>
<v-select v-model="limit" :items="['10', '20', '30', '50', '100']" inline />
</div>
<div v-if="loading === false" class="per-page">
<span>{{ t('per_page') }}</span>
<v-select v-model="limit" :items="['10', '20', '30', '50', '100']" inline />
</div>
</template>
</template>
<template v-else>
<v-button v-if="enableCreate && createAllowed && updateAllowed" :disabled="disabled" @click="createItem">
{{ t('create_new') }}
</v-button>
<v-button v-if="enableSelect && updateAllowed" :disabled="disabled" @click="selectModalActive = true">
{{ t('add_existing') }}
</v-button>
<div class="spacer" />
<v-pagination v-if="pageCount > 1" v-model="page" :length="pageCount" :total-visible="5" />
</template>
</div>
</div>
@@ -601,13 +615,15 @@ const updateAllowed = computed(() => {
gap: var(--v-sheet-padding);
.v-pagination {
margin-top: var(--v-sheet-padding);
:deep(.v-button) {
display: inline-flex;
}
}
.table.v-pagination {
margin-top: var(--v-sheet-padding);
}
.spacer {
flex-grow: 1;
}
@@ -636,6 +652,10 @@ const updateAllowed = computed(() => {
}
}
}
&.list {
margin-top: 8px;
}
}
.item-link {