Merge pull request #494 from directus/v-list-subdued

Added subdued and tweak dense prop
2026-02-14 00:05:18 -05:00 · 2020-10-06 17:14:20 -04:00
parent 4e0b08f989 b15539b5d3
commit ff466c2bb7
49 changed files with 157 additions and 1203 deletions
--- a/app/src/modules/activity/components/navigation.vue
+++ b/app/src/modules/activity/components/navigation.vue
@@ -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" />
--- a/app/src/modules/collections/components/navigation-bookmark.vue
+++ b/app/src/modules/collections/components/navigation-bookmark.vue
@@ -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 />
--- a/app/src/modules/collections/components/navigation.vue
+++ b/app/src/modules/collections/components/navigation.vue
@@ -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"
--- a/app/src/modules/docs/components/navigation-item.vue
+++ b/app/src/modules/docs/components/navigation-item.vue
@@ -1,8 +1,8 @@
 <template>
-	<v-list-item v-if="section.children === undefined" :to="section.to" :dense="dense">
+	<v-list-item v-if="section.children === undefined" :to="section.to" :dense="dense" :subdued="subdued">
 		<v-list-item-icon v-if="section.icon !== undefined"><v-icon :name="section.icon" /></v-list-item-icon>
 		<v-list-item-content>
-			<v-list-item-title>{{ section.name }}</v-list-item-title>
+			<v-list-item-text>{{ section.name }}</v-list-item-text>
 		</v-list-item-content>
 	</v-list-item>
 	<div v-else-if="section.flat === true">
@@ -18,7 +18,7 @@
 		<template #activator>
 			<v-list-item-icon v-if="section.icon !== undefined"><v-icon :name="section.icon" /></v-list-item-icon>
 			<v-list-item-content>
-				<v-list-item-title>{{ section.name }}</v-list-item-title>
+				<v-list-item-text>{{ section.name }}</v-list-item-text>
 			</v-list-item-content>
 		</template>
 		<navigation-list-item
@@ -45,6 +45,10 @@ export default defineComponent({
 			type: Boolean,
 			default: false,
 		},
+		subdued: {
+			type: Boolean,
+			default: false,
+		},
 	},
 });
 </script>
--- a/app/src/modules/docs/components/navigation.vue
+++ b/app/src/modules/docs/components/navigation.vue
@@ -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>
--- a/app/src/modules/files/components/folder-picker.vue
+++ b/app/src/modules/files/components/folder-picker.vue
@@ -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
--- a/app/src/modules/files/components/navigation-folder.vue
+++ b/app/src/modules/files/components/navigation-folder.vue
@@ -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 />
--- a/app/src/modules/files/components/navigation.vue
+++ b/app/src/modules/files/components/navigation.vue
@@ -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" />
--- a/app/src/modules/settings/components/navigation.vue
+++ b/app/src/modules/settings/components/navigation.vue
@@ -1,9 +1,9 @@
 <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>
-				<v-list-item-title>{{ item.name }}</v-list-item-title>
+				<v-list-item-text>{{ item.name }}</v-list-item-text>
 			</v-list-item-content>
 		</v-list-item>

@@ -12,14 +12,14 @@
 		<v-list-item v-for="item in externalItems" :href="item.href" :key="item.href">
 			<v-list-item-icon><v-icon :name="item.icon" /></v-list-item-icon>
 			<v-list-item-content>
-				<v-list-item-title>{{ item.name }}</v-list-item-title>
+				<v-list-item-text>{{ item.name }}</v-list-item-text>
 			</v-list-item-content>
 		</v-list-item>

 		<v-list-item href="https://github.com/directus/directus/releases" class="version">
 			<v-list-item-icon><v-icon name="directus" /></v-list-item-icon>
 			<v-list-item-content>
-				<v-list-item-title class="version">Directus {{ version }}</v-list-item-title>
+				<v-list-item-text class="version">Directus {{ version }}</v-list-item-text>
 			</v-list-item-content>
 		</v-list-item>
 	</v-list>
--- a/app/src/modules/settings/routes/data-model/collections/components/collection-options.vue
+++ b/app/src/modules/settings/routes/data-model/collections/components/collection-options.vue
@@ -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 />
--- a/app/src/modules/settings/routes/data-model/field-detail/components/languages.vue
+++ b/app/src/modules/settings/routes/data-model/field-detail/components/languages.vue
@@ -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"
--- a/app/src/modules/settings/routes/data-model/field-detail/components/relationship-m2m.vue
+++ b/app/src/modules/settings/routes/data-model/field-detail/components/relationship-m2m.vue
@@ -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"
--- a/app/src/modules/settings/routes/data-model/field-detail/components/relationship-m2o.vue
+++ b/app/src/modules/settings/routes/data-model/field-detail/components/relationship-m2o.vue
@@ -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"
--- a/app/src/modules/settings/routes/data-model/field-detail/components/relationship-o2m.vue
+++ b/app/src/modules/settings/routes/data-model/field-detail/components/relationship-o2m.vue
@@ -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"
--- a/app/src/modules/settings/routes/data-model/field-detail/components/translations.vue
+++ b/app/src/modules/settings/routes/data-model/field-detail/components/translations.vue
@@ -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"
--- a/app/src/modules/settings/routes/data-model/fields/components/field-select.vue
+++ b/app/src/modules/settings/routes/data-model/fields/components/field-select.vue
@@ -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>
--- a/app/src/modules/settings/routes/data-model/fields/components/fields-management.vue
+++ b/app/src/modules/settings/routes/data-model/fields/components/fields-management.vue
@@ -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
--- a/app/src/modules/settings/routes/roles/detail/components/permissions-overview-toggle.vue
+++ b/app/src/modules/settings/routes/roles/detail/components/permissions-overview-toggle.vue
@@ -10,7 +10,7 @@
 				</div>
 			</template>

-			<v-list dense>
+			<v-list>
 				<v-list-item @click="setFullAccess">
 					<v-list-item-icon>
 						<v-icon name="check" />
--- a/app/src/modules/users/components/navigation.vue
+++ b/app/src/modules/users/components/navigation.vue
@@ -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>