replace single-used AuthorAvatar component with AvatarWrapper

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
nextcloud · Sep 27, 2023 · 43909bb · 43909bb
1 parent 83833c6
commit 43909bb
Show file tree

Hide file tree

Showing 4 changed files with 71 additions and 147 deletions.
diff --git a/src/components/AvatarWrapper/AvatarWrapper.vue b/src/components/AvatarWrapper/AvatarWrapper.vue
@@ -2,8 +2,9 @@
   - @copyright Copyright (c) 2020 Marco Ambrosini <marcoambrosini@icloud.com>
   -
   - @author Marco Ambrosini <marcoambrosini@icloud.com>
+  - @author Maksim Sukharev <antreesy.web@gmail.com>
   -
-  - @license GNU AGPL version 3 or any later version
+  - @license AGPL-3.0-or-later
   -
   - This program is free software: you can redistribute it and/or modify
   - it under the terms of the GNU Affero General Public License as
@@ -20,14 +21,7 @@
 -->
 
 <template>
-	<div class="avatar-wrapper"
-		:class="{
-			'avatar-wrapper--offline': offline,
-			'avatar-wrapper--small': small,
-			'avatar-wrapper--condensed': condensed,
-			'avatar-wrapper--highlighted': highlighted,
-		}"
-		:style="{'--condensed-overlap': condensedOverlap}">
+	<div class="avatar-wrapper" :class="avatarClass" :style="{'--condensed-overlap': condensedOverlap}">
 		<div v-if="iconClass"
 			class="icon"
 			:class="[`avatar-${size}px`, iconClass]" />
@@ -36,6 +30,11 @@
 			:class="`avatar-${size}px`">
 			{{ firstLetterOfGuestName }}
 		</div>
+		<div v-else-if="isBot"
+			class="bot"
+			:class="`avatar-${size}px`">
+			{{ '>_' }}
+		</div>
 		<NcAvatar v-else
 			:key="id"
 			:user="id"
@@ -54,6 +53,8 @@
 <script>
 import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
 
+import { ATTENDEE } from '../../constants.js'
+
 export default {
 
 	name: 'AvatarWrapper',
@@ -79,6 +80,10 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+		medium: {
+			type: Boolean,
+			default: false,
+		},
 		condensed: {
 			type: Boolean,
 			default: false,
@@ -122,19 +127,37 @@ export default {
 	},
 	computed: {
 		size() {
-			return this.small ? 22 : 44
+			return this.small ? 22 : this.medium ? 32 : 44
 		},
 		// Determines which icon is displayed
 		iconClass() {
-			if (!this.source || this.source === 'users' || this.isGuest || this.isDeletedUser) {
+			if (!this.source || this.isUser || this.isBot || this.isGuest || this.isDeletedUser) {
 				return ''
 			}
 			if (this.source === 'emails') {
 				return 'icon-mail'
 			}
+			if (this.source === 'bots' && this.id === 'changelog') {
+				return 'icon-changelog'
+			}
 			// source: groups, circles
 			return 'icon-contacts'
 		},
+		avatarClass() {
+			return {
+				'avatar-wrapper--offline': this.offline,
+				'avatar-wrapper--small': this.small,
+				'avatar-wrapper--medium': this.medium,
+				'avatar-wrapper--condensed': this.condensed,
+				'avatar-wrapper--highlighted': this.highlighted,
+			}
+		},
+		isUser() {
+			return this.source === 'users' || this.source === ATTENDEE.ACTOR_TYPE.BRIDGED
+		},
+		isBot() {
+			return this.source === 'bots' && this.id !== 'changelog'
+		},
 		isGuest() {
 			return this.source === 'guests'
 		},
@@ -161,7 +184,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../../assets/avatar.scss';
+@import '../../assets/avatar';
 
 .avatar-wrapper {
 	height: 44px;
@@ -176,6 +199,13 @@ export default {
 		@include avatar-mixin(22px);
 	}
 
+	&--medium {
+		height: 32px;
+		width: 32px;
+		border-radius: 32px;
+		@include avatar-mixin(32px);
+	}
+
 	&--condensed {
 		width: unset;
 		height: unset;

diff --git a/src/components/MessagesList/MessagesGroup/AuthorAvatar.vue b/src/components/MessagesList/MessagesGroup/AuthorAvatar.vue
diff --git a/src/components/MessagesList/MessagesGroup/MessagesGroup.spec.js b/src/components/MessagesList/MessagesGroup/MessagesGroup.spec.js
@@ -82,10 +82,10 @@ describe('MessagesGroup.vue', () => {
 			},
 		})
 
-		const avatarEl = wrapper.findComponent({ name: 'AuthorAvatar' })
-		expect(avatarEl.attributes('authortype')).toBe(ATTENDEE.ACTOR_TYPE.USERS)
-		expect(avatarEl.attributes('authorid')).toBe('actor-1')
-		expect(avatarEl.attributes('displayname')).toBe('actor one')
+		const avatarEl = wrapper.findComponent({ name: 'AvatarWrapper' })
+		expect(avatarEl.attributes('source')).toBe(ATTENDEE.ACTOR_TYPE.USERS)
+		expect(avatarEl.attributes('id')).toBe('actor-1')
+		expect(avatarEl.attributes('name')).toBe('actor one')
 
 		const authorEl = wrapper.find('.messages__author')
 		expect(authorEl.text()).toBe('actor one')
@@ -225,10 +225,10 @@ describe('MessagesGroup.vue', () => {
 			},
 		})
 
-		const avatarEl = wrapper.findComponent({ name: 'AuthorAvatar' })
-		expect(avatarEl.attributes('authortype')).toBe(ATTENDEE.ACTOR_TYPE.GUESTS)
-		expect(avatarEl.attributes('authorid')).toBe('actor-1')
-		expect(avatarEl.attributes('displayname')).toBe('guest-one-display-name')
+		const avatarEl = wrapper.findComponent({ name: 'AvatarWrapper' })
+		expect(avatarEl.attributes('source')).toBe(ATTENDEE.ACTOR_TYPE.GUESTS)
+		expect(avatarEl.attributes('id')).toBe('actor-1')
+		expect(avatarEl.attributes('name')).toBe('guest-one-display-name')
 
 		const authorEl = wrapper.find('.messages__author')
 		expect(authorEl.text()).toBe('guest-one-display-name')
@@ -280,10 +280,10 @@ describe('MessagesGroup.vue', () => {
 			},
 		})
 
-		const avatarEl = wrapper.findComponent({ name: 'AuthorAvatar' })
-		expect(avatarEl.attributes('authortype')).toBe(ATTENDEE.ACTOR_TYPE.USERS)
-		expect(avatarEl.attributes('authorid')).toBe('actor-1')
-		expect(avatarEl.attributes('displayname')).toBe('Deleted user')
+		const avatarEl = wrapper.findComponent({ name: 'AvatarWrapper' })
+		expect(avatarEl.attributes('source')).toBe(ATTENDEE.ACTOR_TYPE.USERS)
+		expect(avatarEl.attributes('id')).toBe('actor-1')
+		expect(avatarEl.attributes('name')).toBe('Deleted user')
 
 		const authorEl = wrapper.find('.messages__author')
 		expect(authorEl.text()).toBe('Deleted user')

diff --git a/src/components/MessagesList/MessagesGroup/MessagesGroup.vue b/src/components/MessagesList/MessagesGroup/MessagesGroup.vue
@@ -3,7 +3,7 @@
   -
   - @author Marco Ambrosini <marcoambrosini@icloud.com>
   -
-  - @license GNU AGPL version 3 or any later version
+  - @license AGPL-3.0-or-later
   -
   - This program is free software: you can redistribute it and/or modify
   - it under the terms of the GNU Affero General Public License as
@@ -22,9 +22,12 @@
 <template>
 	<div class="wrapper">
 		<div class="messages__avatar">
-			<AuthorAvatar :author-type="actorType"
-				:author-id="actorId"
-				:display-name="actorDisplayName" />
+			<AvatarWrapper :id="actorId"
+				:name="actorDisplayName"
+				:source="actorType"
+				:disable-menu="disableMenu"
+				disable-tooltip
+				medium />
 		</div>
 		<ul class="messages">
 			<li class="messages__author" aria-level="4">
@@ -44,7 +47,7 @@
 </template>
 
 <script>
-import AuthorAvatar from './AuthorAvatar.vue'
+import AvatarWrapper from '../../AvatarWrapper/AvatarWrapper.vue'
 import Message from './Message/Message.vue'
 
 import { ATTENDEE } from '../../../constants.js'
@@ -54,7 +57,7 @@ export default {
 	name: 'MessagesGroup',
 
 	components: {
-		AuthorAvatar,
+		AvatarWrapper,
 		Message,
 	},
 	inheritAttrs: false,
@@ -128,6 +131,12 @@ export default {
 
 			return displayName
 		},
+
+		disableMenu() {
+			// disable the menu if accessing the conversation as guest
+			// or the message sender is a bridged user
+			return this.$store.getters.getActorType() === 'guests' || this.actorType === ATTENDEE.ACTOR_TYPE.BRIDGED
+		},
 	},
 
 	methods: {
@@ -151,6 +160,7 @@ export default {
 	display: flex;
 	margin: auto;
 	padding: 0;
+
 	&:focus {
 		background-color: rgba(47, 47, 47, 0.068);
 	}
@@ -163,6 +173,7 @@ export default {
 	flex-direction: column;
 	width: 100%;
 	min-width: 0;
+
 	&__avatar {
 		position: sticky;
 		top: 0;