feat(contactsmenu): Show user status

Signed-off-by: Christoph Wurst <christoph@winzerhof-wurst.at>

3 files changed, 45 insertions, 44 deletions

diff --git a/core/src/components/ContactsMenu/Contact.vue b/core/src/components/ContactsMenu/Contact.vue
index 84869814c2f..547838d7deb 100644
--- a/core/src/components/ContactsMenu/Contact.vue
+++ b/core/src/components/ContactsMenu/Contact.vue
@@ -25,27 +25,37 @@
 			:href="contact.profileUrl"
 			class="contact__avatar-wrapper">
 			<NcAvatar class="contact__avatar"
-				:is-no-user="true"
+				:size="44"
+				:user="contact.isUser ? contact.uid : undefined"
+				:is-no-user="!contact.isUser"
 				:display-name="contact.avatarLabel"
-				:url="contact.avatar" />
+				:url="contact.avatar"
+				:preloaded-user-status="preloadedUserStatus" />
 		</a>
 		<a v-else-if="contact.profileUrl"
 			:href="contact.profileUrl">
 			<NcAvatar class="contact__avatar"
-				:is-no-user="true"
-				:display-name="contact.avatarLabel" />
+				:size="44"
+				:user="contact.isUser ? contact.uid : undefined"
+				:is-no-user="!contact.isUser"
+				:display-name="contact.avatarLabel"
+				:preloaded-user-status="preloadedUserStatus" />
 		</a>
 		<NcAvatar v-else
+			:size="44"
 			class="contact__avatar"
-			:is-no-user="true"
+			:user="contact.isUser ? contact.uid : undefined"
+			:is-no-user="!contact.isUser"
 			:display-name="contact.avatarLabel"
-			:url="contact.avatar" />
+			:url="contact.avatar"
+			:preloaded-user-status="preloadedUserStatus" />
 
 		<a class="contact__body"
 			:href="contact.profileUrl || contact.topAction?.hyperlink">
 			<div class="contact__body__full-name">{{ contact.fullName }}</div>
 			<div v-if="contact.lastMessage" class="contact__body__last-message">{{ contact.lastMessage }}</div>
-			<div class="contact__body__email-address">{{ contact.emailAddresses[0] }}</div>
+			<div v-if="contact.statusMessage" class="contact__body__status-message">{{ contact.statusMessage }}</div>
+			<div v-else class="contact__body__email-address">{{ contact.emailAddresses[0] }}</div>
 		</a>
 		<NcActions v-if="actions.length"
 			:inline="contact.topAction ? 1 : 0">
@@ -97,6 +107,16 @@ export default {
 			}
 			return this.contact.actions
 		},
+		preloadedUserStatus() {
+			if (this.contact.status) {
+				return {
+					status: this.contact.status,
+					message: this.contact.statusMessage,
+					icon: this.contact.statusIcon,
+				}
+			}
+			return undefined
+		}
 	},
 }
 </script>
@@ -118,18 +138,15 @@ export default {
 	}
 
 	&__avatar-wrapper {
-		height: 32px;
 	}
 
 	&__avatar {
-		height: 32px;
-		width: 32px;
 		display: inherit;
 	}
 
 	&__body {
 		flex-grow: 1;
-		padding-left: 8px;
+		padding-left: 10px;
 		min-width: 0;
 
 		div {
@@ -137,9 +154,16 @@ export default {
 			width: 100%;
 			overflow-x: hidden;
 			text-overflow: ellipsis;
+			margin: -1px 0;
+		}
+		div:first-of-type {
+			margin-top: 0;
+		}
+		div:last-of-type {
+			margin-bottom: 0;
 		}
 
-		.last-message, .email-address {
+		&__last-message, &__status-message, &__email-address {
 			color: var(--color-text-maxcontrast);
 		}
 	}
diff --git a/core/src/tests/views/ContactsMenu.spec.js b/core/src/tests/views/ContactsMenu.spec.js
index 66c0532322b..6b438a4998e 100644
--- a/core/src/tests/views/ContactsMenu.spec.js
+++ b/core/src/tests/views/ContactsMenu.spec.js
@@ -139,7 +139,7 @@ describe('ContactsMenu', function() {
 						emailAddresses: [],
 					}
 				],
-				contactsAppEnabled: false,
+				contactsAppEnabled: true,
 			},
 		})
 
@@ -149,26 +149,6 @@ describe('ContactsMenu', function() {
 		expect(view.vm.contacts.length).toBe(2)
 		expect(view.text()).toContain('Acosta Lancaster')
 		expect(view.text()).toContain('Adeline Snider')
-	})
-
-	it('shows link ot Contacts', async () => {
-		const view = shallowMount(ContactsMenu)
-		axios.post.mockResolvedValue({
-			data: {
-				contacts: [
-					{
-						id: 1,
-					},
-					{
-						id: 2,
-					},
-				],
-				contactsAppEnabled: true,
-			},
-		})
-
-		await view.vm.handleOpen()
-
-		expect(view.text()).toContain('Show all contacts …')
+		expect(view.text()).toContain('Show all contacts')
 	})
 })
diff --git a/core/src/views/ContactsMenu.vue b/core/src/views/ContactsMenu.vue
index fbb040eb860..e3f337d77dc 100644
--- a/core/src/views/ContactsMenu.vue
+++ b/core/src/views/ContactsMenu.vue
@@ -58,10 +58,10 @@
 					</ul>
 				</div>
 				<div v-if="contactsAppEnabled" class="contactsmenu__menu__content__footer">
-					<a :href="contactsAppURL">{{ t('core', 'Show all contacts …') }}</a>
+					<NcButton type="tertiary" :href="contactsAppURL">{{ t('core', 'Show all contacts') }}</NcButton>
 				</div>
 				<div v-else-if="canInstallApp" class="contactsmenu__menu__content__footer">
-					<a :href="contactsAppMgmtURL">{{ t('core', 'Install the Contacts app') }}</a>
+					<NcButton type="tertiary" :href="contactsAppMgmtURL">{{ t('core', 'Install the Contacts app') }}</NcButton>
 				</div>
 			</div>
 		</div>
@@ -75,6 +75,7 @@ import debounce from 'debounce'
 import { getCurrentUser } from '@nextcloud/auth'
 import { generateUrl } from '@nextcloud/router'
 import Magnify from 'vue-material-design-icons/Magnify.vue'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
 import NcHeaderMenu from '@nextcloud/vue/dist/Components/NcHeaderMenu.js'
 import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
@@ -91,6 +92,7 @@ export default {
 		Contact,
 		Contacts,
 		Magnify,
+		NcButton,
 		NcEmptyContent,
 		NcHeaderMenu,
 		NcLoadingIcon,
@@ -178,14 +180,9 @@ export default {
 			overflow-y: auto;
 
 			&__footer {
-				text-align: center;
-
-				a {
-					display: block;
-					width: 100%;
-					padding: 12px 0;
-					opacity: .5;
-				}
+				display: flex;
+				flex-direction: column;
+				align-items: center;
 			}
 		}