Replace ListItemIcon with ListItem and fix styles

Signed-off-by: julia.kirschenheuter <julia.kirschenheuter@nextcloud.com>

2 files changed, 47 insertions, 30 deletions

diff --git a/src/components/ContactsList.vue b/src/components/ContactsList.vue
index 5a7e5e0c..76d31d91 100644
--- a/src/components/ContactsList.vue
+++ b/src/components/ContactsList.vue
@@ -21,7 +21,7 @@
   -->
 
 <template>
-	<AppContentList>
+	<AppContentList class="content-list">
 		<div class="contacts-list__header">
 			<div class="search-contacts-field">
 				<input v-model="query" type="text" :placeholder="t('contacts', 'Search contacts …')">
@@ -181,4 +181,10 @@ export default {
 		width: 100%;
 	}
 }
+
+.content-list {
+	overflow-y: auto;
+	padding: 0 4px;
+}
+
 </style>
diff --git a/src/components/ContactsList/ContactsListItem.vue b/src/components/ContactsList/ContactsListItem.vue
index dd11c0ff..9252e4bc 100644
--- a/src/components/ContactsList/ContactsListItem.vue
+++ b/src/components/ContactsList/ContactsListItem.vue
@@ -1,28 +1,37 @@
 <template>
-	<ListItemIcon
+	<ListItem
 		:id="id"
 		:key="source.key"
-		:avatar-size="44"
-		:class="{'contacts-list__item--active': selectedContact === source.key}"
-		:display-name="source.displayName"
-		:is-no-user="true"
-		:subtitle="source.email"
+		class="list-item-style envelope"
 		:title="source.displayName"
-		:url="avatarUrl"
-		class="contacts-list__item"
-		tabindex="0"
-		@click.prevent.stop="selectContact"
-		@keypress.enter.prevent.stop="selectContact" />
+		:to="{ name: 'contact', params: { selectedGroup: selectedGroup, selectedContact: source.key } }">
+		<!-- @slot Icon slot -->
+
+		<template #icon>
+			<div class="app-content-list-item-icon">
+				<BaseAvatar :display-name="source.displayName" :url="avatarUrl" :size="40" />
+			</div>
+		</template>
+		<template #subtitle>
+			<div class="envelope__subtitle">
+				<span class="envelope__subtitle__subject">
+					{{ source.email }}
+				</span>
+			</div>
+		</template>
+	</ListItem>
 </template>
 
 <script>
-import ListItemIcon from '@nextcloud/vue/dist/Components/NcListItemIcon'
+import { NcListItem as ListItem } from '@nextcloud/vue'
+import BaseAvatar from '@nextcloud/vue/dist/Components/NcAvatar'
 
 export default {
 	name: 'ContactsListItem',
 
 	components: {
-		ListItemIcon,
+		ListItem,
+		BaseAvatar,
 	},
 
 	props: {
@@ -76,29 +85,31 @@ export default {
 				this.avatarUrl = `${this.source.url}?photo`
 			}
 		},
-
-		/**
-		 * Select this contact within the list
-		 */
-		selectContact() {
-			// change url with router
-			this.$router.push({ name: 'contact', params: { selectedGroup: this.selectedGroup, selectedContact: this.source.key } })
-		},
 	},
 }
 </script>
 <style lang="scss" scoped>
-.contacts-list__item {
-	padding: 8px;
 
-	&--active,
-	&:focus,
-	&:hover {
-		background-color: var(--color-background-hover);
+.envelope {
+	.app-content-list-item-icon {
+		height: 40px; // To prevent some unexpected spacing below the avatar
 	}
 
-	&, ::v-deep * {
-		cursor: pointer;
+	&__subtitle {
+		display: flex;
+		gap: 4px;
+
+		&__subject {
+			color: var(--color-main-text);
+			line-height: 130%;
+			overflow: hidden;
+			text-overflow: ellipsis;
+		}
 	}
 }
+
+.list-item-style {
+	list-style: none;
+}
+
 </style>