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

Render list group arrows on the left of the group checkbox in the tree select interface (#7102)

Browse Source 
* Mark scope as system field

* Render arrows on the left of tree checkbox groups

* Tweak spacing
This commit is contained in:
Rijk van Zanten
2021-07-30 18:28:31 +02:00
committed by GitHub
parent 673818b04e
commit 3192fb2e2d
2 changed files with 27 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
app/src/components/v-checkbox-tree/v-checkbox-tree-checkbox.vue
View File

@@ -4,6 +4,7 @@
v-show="visibleChildrenValues.length > 0"
:value="value"
:open="typeof search === 'string' && search.length > 0"
arrow-placement="before"
>
<template #activator>
<v-checkbox
@@ -34,7 +35,7 @@
/>
</v-list-group>
<v-list-item v-else-if="!children && !hidden">
<v-list-item v-else-if="!children && !hidden" class="item">
<v-checkbox v-model="treeValue" :disabled="disabled" :checked="checked" :label="text" :value="value" />
</v-list-item>
</template>
@@ -442,3 +443,9 @@ export default defineComponent({
},
});
</script>
<style scoped>
.item {
padding-left: 32px;
}
</style>

20
app/src/components/v-list/v-list-group.vue
View File

@@ -10,9 +10,21 @@
clickable
@click="onClick"
>
<v-list-item-icon
v-if="$slots.default && arrowPlacement === 'before'"
class="activator-icon"
:class="{ active: groupActive }"
>
<v-icon name="chevron_right" :disabled="disabled" @click.stop.prevent="toggle" />
</v-list-item-icon>
<slot name="activator" :active="groupActive" />
<v-list-item-icon v-if="$slots.default" class="activator-icon" :class="{ active: groupActive }">
<v-list-item-icon
v-if="$slots.default && arrowPlacement === 'after'"
class="activator-icon"
:class="{ active: groupActive }"
>
<v-icon name="chevron_right" :disabled="disabled" @click.stop.prevent="toggle" />
</v-list-item-icon>
</v-list-item>
@@ -69,6 +81,11 @@ export default defineComponent({
type: Boolean,
default: false,
},
arrowPlacement: {
type: String,
default: 'after',
validator: (val: string) => ['before', 'after'].includes(val),
},
},
emits: ['click'],
setup(props, { emit }) {
@@ -101,6 +118,7 @@ export default defineComponent({
}
.activator-icon {
margin-right: 0 !important;
color: var(--foreground-subdued);
transform: rotate(0deg);
transition: transform var(--medium) var(--transition);