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

Update props of v-list

Browse Source
This commit is contained in:
Nitwel
2020-10-05 18:13:56 +02:00
parent 5c011af6f4
commit de55e1a18e
39 changed files with 111 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/src/components/v-field-select/v-field-select.vue
View File

@@ -22,7 +22,7 @@
</v-button>
</template>
<v-list dense>
<v-list>
<field-list-item
v-for="field in availableFields"
:key="field.field"

2
app/src/components/v-field-template/v-field-template.vue
View File

@@ -21,7 +21,7 @@
</v-input>
</template>
<v-list dense>
<v-list>
<field-list-item @add="addField" v-for="field in tree" :key="field.field" :field="field" :depth="depth" />
</v-list>
</v-menu>

2
app/src/components/v-form/form-field-menu.vue
View File

@@ -1,5 +1,5 @@
<template>
<v-list dense>
<v-list>
<v-list-item :disabled="value === null" @click="$emit('input', null)">
<v-list-item-icon><v-icon name="delete_outline" /></v-list-item-icon>
<v-list-item-content>{{ $t('clear_value') }}</v-list-item-content>

4
app/src/components/v-list/v-list-item-content.vue
View File

@@ -42,8 +42,8 @@ body {
}
}
.v-list.dense &,
.v-list-item.dense & {
.v-list:not(.large) &,
.v-list-item:not(.large) & {
--v-list-item-content-padding: 4px 0;
}
}

34
app/src/components/v-list/v-list-item-hint.vue
View File

@@ -38,28 +38,28 @@ export default defineComponent({
@at-root {
.v-list,
.v-list-item {
&.three-line,
&.two-line {
#{$this} {
align-self: flex-start;
&.center {
align-self: center;
#{$this} {
margin-top: 4px;
margin-bottom: 4px;
&:not(:only-child) {
&:first-child {
margin-right: 16px;
}
&:last-child {
margin-left: 16px;
}
}
}
&.dense {
#{$this} {
margin-top: 4px;
margin-bottom: 4px;
&:not(:only-child) {
&:first-child {
margin-right: 16px;
}
&:last-child {
margin-left: 16px;
&.large {
&.three-line,
&.two-line {
#{$this} {
align-self: flex-start;
&.center {
align-self: center;
}
}
}
}
}
}
}

34
app/src/components/v-list/v-list-item-icon.vue
View File

@@ -43,32 +43,32 @@ body {
@at-root {
.v-list,
.v-list-item {
&.three-line,
&.two-line {
#{$this} {
align-self: flex-start;
&.center {
align-self: center;
#{$this} {
margin-top: 4px;
margin-bottom: 4px;
&:not(:only-child) {
&:first-child {
margin-right: 8px;
}
&:last-child {
margin-left: 8px;
}
}
}
&.dense {
#{$this} {
margin-top: 4px;
margin-bottom: 4px;
&:not(:only-child) {
&:first-child {
margin-right: 8px;
}
&:last-child {
margin-left: 8px;
&.large {
&.three-line,
&.two-line {
#{$this} {
align-self: flex-start;
&.center {
align-self: center;
}
}
}
}
&.dense:not(.nav) #{$this} .v-icon {
&:not(.large) #{$this} .v-icon {
--v-icon-color: var(--v-list-item-icon-color);
}

81
app/src/components/v-list/v-list-item.vue
View File

@@ -7,6 +7,7 @@
:to="to"
:class="{
active,
large,
dense,
link: isClickable,
'three-line': lines === 3,
@@ -14,7 +15,6 @@
'one-line': lines === 1,
disabled,
dashed,
subdued,
}"
:href="href"
:download="download"
@@ -31,11 +31,11 @@ import { defineComponent, PropType, computed } from '@vue/composition-api';
export default defineComponent({
props: {
dense: {
large: {
type: Boolean,
default: false,
},
subdued: {
dense: {
type: Boolean,
default: false,
},
@@ -88,15 +88,15 @@ export default defineComponent({
<style>
body {
--v-list-item-one-line-min-height: 40px;
--v-list-item-two-line-min-height: 52px;
--v-list-item-three-line-min-height: 64px;
--v-list-item-one-line-min-height-dense: 32px;
--v-list-item-two-line-min-height-dense: 36px;
--v-list-item-three-line-min-height-dense: 52px;
--v-list-item-padding: 0 16px 0 calc(16px + var(--v-list-item-indent, 0px));
--v-list-item-padding-dense: 0 8px 0 calc(8px + var(--v-list-item-indent, 0px));
--v-list-item-margin-dense: 2px 0;
--v-list-item-one-line-min-height-large: 40px;
--v-list-item-two-line-min-height-large: 52px;
--v-list-item-three-line-min-height-large: 64px;
--v-list-item-one-line-min-height: 32px;
--v-list-item-two-line-min-height: 36px;
--v-list-item-three-line-min-height: 52px;
--v-list-item-padding-large: 0 16px 0 calc(16px + var(--v-list-item-indent, 0px));
--v-list-item-padding: 0 8px 0 calc(8px + var(--v-list-item-indent, 0px));
--v-list-item-margin-large: 2px 0;
--v-list-item-min-width: none;
--v-list-item-max-width: none;
--v-list-item-min-height: var(--v-list-item-one-line-min-height);
@@ -130,7 +130,6 @@ body {
overflow: hidden;
color: var(--v-list-item-color);
text-decoration: none;
border-radius: var(--v-list-item-border-radius);
&.dashed {
&::after {
@@ -152,18 +151,18 @@ body {
transition-property: background-color, color;
user-select: none;
&:not(.disabled):not(.subdued):hover {
&:not(.disabled):not(.dense):hover {
color: var(--v-list-item-color-hover);
background-color: var(--v-list-item-background-color-hover);
}
&:not(.disabled):not(.subdued):active {
&:not(.disabled):not(.dense):active {
color: var(--v-list-item-color-active);
background-color: var(--v-list-item-background-color-active);
}
}
&:not(.subdued).active {
&:not(.dense).active {
color: var(--v-list-item-color-active);
background-color: var(--v-list-item-background-color-active);
}
@@ -174,7 +173,7 @@ body {
cursor: not-allowed;
}
&.subdued {
&.dense {
::v-deep .v-list-item-title {
color: var(--foreground-subdued);
}
@@ -203,49 +202,29 @@ body {
}
}
.v-list.dense {
& #{$this} {
--v-list-item-min-height: var(--v-list-item-one-line-min-height-dense);
margin: var(--v-list-item-margin-dense);
padding: var(--v-list-item-padding-dense);
&.one-line {
--v-list-item-min-height: var(--v-list-item-one-line-min-height-dense);
}
&.two-line {
--v-list-item-min-height: var(--v-list-item-two-line-min-height-dense);
}
&.three-line {
--v-list-item-min-height: var(--v-list-item-three-line-min-height-dense);
}
}
}
.v-list.nav {
.v-list.large {
#{$this} {
--v-list-item-padding: 0 8px;
--v-list-item-border-radius: 4px;
&:not(:last-child):not(:only-child) {
--v-list-item-margin-bottom: 4px;
}
}
&.dense #{$this},
#{$this}.dense {
--v-list-item-min-height: var(--v-list-item-one-line-min-height-dense);
--v-list-item-min-height: var(--v-list-item-one-line-min-height-large);
--v-list-item-padding-large: 0 8px;
--v-list-item-border-radius: 4px;
margin: var(--v-list-item-margin-large);
padding: var(--v-list-item-padding-large);
border-radius: var(--v-list-item-border-radius);
margin: var(--v-list-item-margin-dense);
padding: var(--v-list-item-padding-dense);
&:not(:last-child):not(:only-child) {
--v-list-item-margin-bottom: 4px;
margin-bottom: 4px;
}
&.one-line {
--v-list-item-min-height: var(--v-list-item-one-line-min-height-dense);
--v-list-item-min-height: var(--v-list-item-one-line-min-height-large);
}
&.two-line {
--v-list-item-min-height: var(--v-list-item-two-line-min-height-dense);
--v-list-item-min-height: var(--v-list-item-two-line-min-height-large);
}
&.three-line {
--v-list-item-min-height: var(--v-list-item-three-line-min-height-dense);
--v-list-item-min-height: var(--v-list-item-three-line-min-height-large);
}
}
}

11
app/src/components/v-list/v-list.vue
View File

@@ -2,8 +2,7 @@
<ul
class="v-list"
:class="{
dense,
nav,
large,
'three-line': lines === 3,
'two-line': lines === 2,
'one-line': lines === 1,
@@ -19,11 +18,7 @@ import { useGroupableParent } from '@/composables/groupable';
export default defineComponent({
props: {
dense: {
type: Boolean,
default: false,
},
nav: {
large: {
type: Boolean,
default: false,
},
@@ -79,7 +74,7 @@ body {
line-height: 22px;
border-radius: var(--border-radius);
&.nav {
&.large {
--v-list-padding: 12px;
}

2
app/src/components/v-select/v-select.vue
View File

@@ -26,7 +26,7 @@
</v-input>
</template>
<v-list dense class="list">
<v-list class="list">
<template v-if="showDeselect">
<v-list-item @click="$emit('input', null)" :disabled="value === null">
<v-list-item-icon v-if="multiple === true">

2
app/src/components/v-tabs/v-tabs.vue
View File

@@ -1,5 +1,5 @@
<template>
<v-list class="v-tabs vertical alt-colors" v-if="vertical" nav>
<v-list class="v-tabs vertical alt-colors" v-if="vertical" large>
<slot />
</v-list>
<div v-else class="v-tabs horizontal">

2
app/src/displays/related-values/related-values.vue
View File

@@ -7,7 +7,7 @@
</span>
</template>
<v-list dense>
<v-list>
<v-list-item v-for="item in value" :key="item[primaryKeyField]" :to="getLinkForItem(item)">
<v-list-item-content>
<render-template :template="template" :item="item" :collection="relatedCollection" />

2
app/src/interfaces/file/file.vue
View File

@@ -35,7 +35,7 @@
</div>
</template>
<v-list dense>
<v-list>
<template v-if="file">
<v-list-item :download="file.filename_download" :href="assetURL">
<v-list-item-icon><v-icon name="get_app" /></v-list-item-icon>

2
app/src/interfaces/many-to-one/many-to-one.vue
View File

@@ -54,7 +54,7 @@
</v-input>
</template>
<v-list dense>
<v-list>
<template v-if="itemsLoading">
<v-list-item v-for="n in 10" :key="`loader-${n}`">
<v-list-item-content>

2
app/src/interfaces/user/user.vue
View File

@@ -48,7 +48,7 @@
</v-input>
</template>
<v-list dense>
<v-list>
<template v-if="usersLoading">
<v-list-item v-for="n in 10" :key="`loader-${n}`">
<v-list-item-content>

2
app/src/layouts/cards/components/header.vue
View File

@@ -25,7 +25,7 @@
</div>
</template>
<v-list dense>
<v-list>
<v-list-item
v-for="field in fieldsWithoutFake"
:key="field.field"

2
app/src/modules/activity/components/navigation.vue
View File

@@ -1,5 +1,5 @@
<template>
<v-list nav>
<v-list large>
<v-list-item to="/activity" exact>
<v-list-item-icon>
<v-icon name="access_time" />

2
app/src/modules/collections/components/navigation-bookmark.vue
View File

@@ -7,7 +7,7 @@
</v-list-item-icon>
<v-menu ref="contextMenu" show-arrow placement="bottom-start">
<v-list dense>
<v-list>
<v-list-item @click="renameActive = true" :disabled="isMine === false">
<v-list-item-icon>
<v-icon name="edit" outline />

2
app/src/modules/collections/components/navigation.vue
View File

@@ -1,5 +1,5 @@
<template>
<v-list nav>
<v-list large>
<template v-if="customNavItems && customNavItems.length > 0">
<v-detail
:active="group.accordion === 'always_open' || undefined"

2
app/src/modules/docs/components/navigation.vue
View File

@@ -1,5 +1,5 @@
<template>
<v-list nav>
<v-list large>
<navigation-item v-for="item in sections" :key="item.to" :section="item"></navigation-item>
</v-list>
</template>

2
app/src/modules/files/components/folder-picker.vue
View File

@@ -1,7 +1,7 @@
<template>
<v-skeleton-loader v-if="loading" />
<div class="folder-picker" v-else>
<v-list dense>
<v-list>
<v-item-group scope="folder-picker" multiple v-model="openFolders">
<v-list-group
disable-groupable-parent

2
app/src/modules/files/components/navigation-folder.vue
View File

@@ -38,7 +38,7 @@
</v-list-group>
<v-menu ref="contextMenu" show-arrow placement="bottom-start">
<v-list dense>
<v-list>
<v-list-item @click="renameActive = true">
<v-list-item-icon>
<v-icon name="edit" outline />

2
app/src/modules/files/components/navigation.vue
View File

@@ -1,5 +1,5 @@
<template>
<v-list nav>
<v-list large>
<template v-if="loading && (nestedFolders === null || nestedFolders.length === 0)">
<v-list-item v-for="n in 4" :key="n">
<v-skeleton-loader type="list-item-icon" />

2
app/src/modules/settings/components/navigation.vue
View File

@@ -1,5 +1,5 @@
<template>
<v-list nav>
<v-list large>
<v-list-item v-for="item in navItems" :to="item.to" :key="item.to">
<v-list-item-icon><v-icon :name="item.icon" /></v-list-item-icon>
<v-list-item-content>

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

@@ -4,7 +4,7 @@
<template #activator="{ toggle }">
<v-icon name="more_vert" @click="toggle" class="ctx-toggle" />
</template>
<v-list dense>
<v-list>
<v-list-item @click="deleteActive = true" class="danger">
<v-list-item-icon>
<v-icon name="delete" outline />

2
app/src/modules/settings/routes/data-model/field-detail/components/languages.vue
View File

@@ -15,7 +15,7 @@
<v-icon name="list_alt" @click="toggle" v-tooltip="$t('select_existing')" :disabled="isExisting" />
</template>
<v-list dense class="monospace">
<v-list class="monospace">
<v-list-item
v-for="item in items"
:key="item.value"

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

@@ -26,7 +26,7 @@
/>
</template>
<v-list dense class="monospace">
<v-list class="monospace">
<v-list-item
v-for="collection in availableCollections"
:key="collection.collection"
@@ -79,7 +79,7 @@
/>
</template>
<v-list dense class="monospace">
<v-list class="monospace">
<v-list-item
v-for="collection in availableCollections"
:key="collection.collection"
@@ -130,7 +130,7 @@
/>
</template>
<v-list dense class="monospace">
<v-list class="monospace">
<v-list-item
v-for="item in junctionFields"
:key="item.value"
@@ -166,7 +166,7 @@
/>
</template>
<v-list dense class="monospace">
<v-list class="monospace">
<v-list-item
v-for="item in junctionFields"
:key="item.value"

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

@@ -27,7 +27,7 @@
/>
</template>
<v-list dense class="monospace">
<v-list class="monospace">
<v-list-item
v-for="collection in availableCollections"
:key="collection.collection"

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

@@ -26,7 +26,7 @@
/>
</template>
<v-list dense class="monospace">
<v-list class="monospace">
<v-list-item
v-for="collection in availableCollections"
:key="collection.collection"
@@ -72,7 +72,7 @@
<v-icon name="list_alt" @click="toggle" v-tooltip="$t('select_existing')" />
</template>
<v-list dense class="monospace">
<v-list class="monospace">
<v-list-item
v-for="field in fields"
:key="field.value"

8
app/src/modules/settings/routes/data-model/field-detail/components/translations.vue
View File

@@ -26,7 +26,7 @@
/>
</template>
<v-list dense class="monospace">
<v-list class="monospace">
<v-list-item
v-for="collection in availableCollections"
:key="collection.collection"
@@ -79,7 +79,7 @@
/>
</template>
<v-list dense class="monospace">
<v-list class="monospace">
<v-list-item
v-for="collection in availableCollections"
:key="collection.collection"
@@ -130,7 +130,7 @@
/>
</template>
<v-list dense class="monospace">
<v-list class="monospace">
<v-list-item
v-for="item in junctionFields"
:key="item.value"
@@ -166,7 +166,7 @@
/>
</template>
<v-list dense class="monospace">
<v-list class="monospace">
<v-list-item
v-for="item in junctionFields"
:key="item.value"

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

@@ -13,7 +13,7 @@
</span>
</template>
<v-list dense>
<v-list>
<v-list-item :to="`/settings/data-model/${field.collection}/${field.field}`">
<v-list-item-icon><v-icon name="edit" outline /></v-list-item-icon>
<v-list-item-content>
@@ -82,7 +82,7 @@
<v-icon @click.stop="toggle" name="more_vert" />
</template>
<v-list dense>
<v-list>
<v-list-item :to="`/settings/data-model/${field.collection}/${field.field}`">
<v-list-item-icon><v-icon name="edit" outline /></v-list-item-icon>
<v-list-item-content>

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

@@ -28,7 +28,7 @@
</v-button>
</template>
<v-list dense>
<v-list>
<template v-for="(option, index) in addOptions">
<v-divider v-if="option.divider === true" :key="index" />
<v-list-item

2
app/src/modules/settings/routes/roles/detail/components/permissions-overview-toggle.vue
View File

@@ -10,7 +10,7 @@
</div>
</template>
<v-list dense>
<v-list>
<v-list-item @click="setFullAccess">
<v-list-item-icon>
<v-icon name="check" />

2
app/src/modules/users/components/navigation.vue
View File

@@ -1,5 +1,5 @@
<template>
<v-list nav>
<v-list large>
<v-list-item to="/users" exact :active="currentRole === null">
<v-list-item-icon><v-icon name="folder_shared" outline /></v-list-item-icon>
<v-list-item-content>{{ $t('all_users') }}</v-list-item-content>

2
app/src/views/private/components/comments-drawer-detail/comment-item-header.vue
View File

@@ -33,7 +33,7 @@
</div>
</template>
<v-list dense>
<v-list>
<v-list-item @click="$emit('edit')">
<v-list-item-icon><v-icon name="edit" outline /></v-list-item-icon>
<v-list-item-content>{{ $t('edit') }}</v-list-item-content>

2
app/src/views/private/components/filter-drawer-detail/field-filter.vue
View File

@@ -13,7 +13,7 @@
</div>
</template>
<v-list dense>
<v-list>
<v-list-item
:active="operator === activeOperator"
v-for="operator in parsedField.operators"

2
app/src/views/private/components/filter-drawer-detail/filter-drawer-detail.vue
View File

@@ -24,7 +24,7 @@
</v-input>
</template>
<v-list dense>
<v-list>
<field-list-item
@add="addFilterForField"
v-for="field in fieldTree"

2
app/src/views/private/components/image-editor/image-editor.vue
View File

@@ -54,7 +54,7 @@
/>
</template>
<v-list dense>
<v-list>
<v-list-item @click="aspectRatio = 16 / 9" :active="aspectRatio === 16 / 9">
<v-list-item-icon><v-icon name="crop_16_9" /></v-list-item-icon>
<v-list-item-content>16:9</v-list-item-content>

2
app/src/views/private/components/revisions-drawer-detail/revisions-modal-picker.vue
View File

@@ -7,7 +7,7 @@
</span>
</template>
<v-list class="menu" dense>
<v-list class="menu">
<v-list-item
v-for="option in options"
:key="option.value"

2
app/src/views/private/components/save-options/save-options.vue
View File

@@ -4,7 +4,7 @@
<v-icon :class="{ disabled }" name="more_vert" @click="toggle" />
</template>
<v-list dense>
<v-list>
<v-list-item :disabled="disabled" @click="$emit('save-and-stay')">
<v-list-item-icon><v-icon name="check" /></v-list-item-icon>
<v-list-item-content>{{ $t('save_and_stay') }}</v-list-item-content>