explicitly set size of AvatarWrapper.vue and ConversationIcon.vue

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>

10 files changed, 57 insertions, 28 deletions

diff --git a/src/components/AvatarWrapper/AvatarWrapper.spec.js b/src/components/AvatarWrapper/AvatarWrapper.spec.js
index c7f0eaf9b..1c3216033 100644
--- a/src/components/AvatarWrapper/AvatarWrapper.spec.js
+++ b/src/components/AvatarWrapper/AvatarWrapper.spec.js
@@ -49,17 +49,18 @@ describe('AvatarWrapper.vue', () => {
 			expect(avatar.exists()).toBeFalsy()
 		})
 
-		test('component renders NcAvatar with smaller size', () => {
+		test('component renders NcAvatar with specified size', () => {
+			const size = 22
 			const wrapper = shallowMount(AvatarWrapper, {
 				store,
 				propsData: {
 					name: USER_NAME,
-					small: true,
+					size,
 				},
 			})
 
 			const avatar = wrapper.findComponent(NcAvatar)
-			expect(avatar.props('size')).toBe(22)
+			expect(avatar.props('size')).toBe(size)
 		})
 
 		test('component pass props to NcAvatar correctly', async () => {
diff --git a/src/components/AvatarWrapper/AvatarWrapper.vue b/src/components/AvatarWrapper/AvatarWrapper.vue
index 1ddf96303..88524a996 100644
--- a/src/components/AvatarWrapper/AvatarWrapper.vue
+++ b/src/components/AvatarWrapper/AvatarWrapper.vue
@@ -47,7 +47,7 @@
 <script>
 import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
 
-import { ATTENDEE } from '../../constants.js'
+import { ATTENDEE, AVATAR } from '../../constants.js'
 
 export default {
 
@@ -70,13 +70,9 @@ export default {
 			type: String,
 			default: null,
 		},
-		small: {
-			type: Boolean,
-			default: false,
-		},
-		medium: {
-			type: Boolean,
-			default: false,
+		size: {
+			type: Number,
+			default: AVATAR.SIZE.DEFAULT,
 		},
 		condensed: {
 			type: Boolean,
@@ -120,9 +116,6 @@ export default {
 		},
 	},
 	computed: {
-		size() {
-			return this.small ? 22 : this.medium ? 32 : 44
-		},
 		// Determines which icon is displayed
 		iconClass() {
 			if (!this.source || this.isUser || this.isBot || this.isGuest || this.isDeletedUser) {
diff --git a/src/components/ConversationIcon.vue b/src/components/ConversationIcon.vue
index 1977faaaf..4b3a34ad0 100644
--- a/src/components/ConversationIcon.vue
+++ b/src/components/ConversationIcon.vue
@@ -69,7 +69,7 @@ import { generateOcsUrl } from '@nextcloud/router'
 
 import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
 
-import { CONVERSATION } from '../constants.js'
+import { AVATAR, CONVERSATION } from '../constants.js'
 import { isDarkTheme } from '../utils/isDarkTheme.js'
 
 const supportsAvatar = getCapabilities()?.spreed?.features?.includes('avatar')
@@ -134,7 +134,7 @@ export default {
 
 		size: {
 			type: Number,
-			default: 44,
+			default: AVATAR.SIZE.DEFAULT,
 		},
 	},
 
diff --git a/src/components/ConversationSettings/ConversationAvatarEditor.vue b/src/components/ConversationSettings/ConversationAvatarEditor.vue
index c6b944cab..16692446f 100644
--- a/src/components/ConversationSettings/ConversationAvatarEditor.vue
+++ b/src/components/ConversationSettings/ConversationAvatarEditor.vue
@@ -32,7 +32,7 @@
 				</div>
 				<ConversationIcon v-else-if="!loading"
 					:item="conversation"
-					:size="180"
+					:size="AVATAR.SIZE.EXTRA_LARGE"
 					hide-user-status />
 				<div v-else class="icon-loading" />
 			</div>
@@ -132,6 +132,8 @@ import NcEmojiPicker from '@nextcloud/vue/dist/Components/NcEmojiPicker.js'
 
 import ConversationIcon from '../ConversationIcon.vue'
 
+import { AVATAR } from '../../constants.js'
+
 // eslint-disable-next-line n/no-extraneous-import
 import 'cropperjs/dist/cropper.css'
 
@@ -185,6 +187,10 @@ export default {
 
 	emits: ['avatar-edited'],
 
+	setup() {
+		return { AVATAR }
+	},
+
 	data() {
 		return {
 			showCropper: false,
diff --git a/src/components/LeftSidebar/NewGroupConversation/SetContacts/ContactSelectionBubble/ContactSelectionBubble.vue b/src/components/LeftSidebar/NewGroupConversation/SetContacts/ContactSelectionBubble/ContactSelectionBubble.vue
index 01456bd85..61559cdca 100644
--- a/src/components/LeftSidebar/NewGroupConversation/SetContacts/ContactSelectionBubble/ContactSelectionBubble.vue
+++ b/src/components/LeftSidebar/NewGroupConversation/SetContacts/ContactSelectionBubble/ContactSelectionBubble.vue
@@ -25,7 +25,7 @@
 			class="contact-selection-bubble__avatar"
 			:name="participant.label"
 			:source="participant.source"
-			small
+			:size="AVATAR.SIZE.EXTRA_SMALL"
 			disable-menu
 			disable-tooltip />
 		<span class="contact-selection-bubble__username">
@@ -48,6 +48,8 @@ import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 
 import AvatarWrapper from '../../../../AvatarWrapper/AvatarWrapper.vue'
 
+import { AVATAR } from '../../../../../constants.js'
+
 export default {
 	name: 'ContactSelectionBubble',
 
@@ -64,6 +66,10 @@ export default {
 		},
 	},
 
+	setup() {
+		return { AVATAR }
+	},
+
 	computed: {
 		displayName() {
 			// Used to be the group of characters before the first space in the name.
diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/PollVotersDetails.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/PollVotersDetails.vue
index 82e72d9f4..9e22a2494 100644
--- a/src/components/MessagesList/MessagesGroup/Message/MessagePart/PollVotersDetails.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/MessagePart/PollVotersDetails.vue
@@ -31,7 +31,7 @@
 						:key="index"
 						:name="getDisplayName(item)"
 						:source="item.actorType"
-						small
+						:size="AVATAR.SIZE.EXTRA_SMALL"
 						condensed
 						disable-menu
 						disable-tooltip />
@@ -45,7 +45,7 @@
 				<AvatarWrapper :id="item.actorId"
 					:name="getDisplayName(item)"
 					:source="item.actorType"
-					small
+					:size="AVATAR.SIZE.EXTRA_SMALL"
 					disable-menu />
 				<p class="poll-voters-details__display-name">
 					{{ getDisplayName(item) }}
@@ -61,7 +61,7 @@ import NcPopover from '@nextcloud/vue/dist/Components/NcPopover.js'
 
 import AvatarWrapper from '../../../../AvatarWrapper/AvatarWrapper.vue'
 
-import { ATTENDEE } from '../../../../../constants.js'
+import { ATTENDEE, AVATAR } from '../../../../../constants.js'
 
 export default {
 
@@ -80,6 +80,10 @@ export default {
 		},
 	},
 
+	setup() {
+		return { AVATAR }
+	},
+
 	methods: {
 		getDisplayName(item) {
 			if (item.actorDisplayName === '' && item.actorType === ATTENDEE.ACTOR_TYPE.GUESTS) {
diff --git a/src/components/MessagesList/MessagesGroup/MessagesGroup.vue b/src/components/MessagesList/MessagesGroup/MessagesGroup.vue
index 476ff0a25..038aa18f0 100644
--- a/src/components/MessagesList/MessagesGroup/MessagesGroup.vue
+++ b/src/components/MessagesList/MessagesGroup/MessagesGroup.vue
@@ -25,9 +25,9 @@
 			<AvatarWrapper :id="actorId"
 				:name="actorDisplayName"
 				:source="actorType"
+				:size="AVATAR.SIZE.SMALL"
 				:disable-menu="disableMenu"
-				disable-tooltip
-				medium />
+				disable-tooltip />
 		</div>
 		<ul class="messages">
 			<li class="messages__author" aria-level="4">
@@ -50,7 +50,7 @@
 import AvatarWrapper from '../../AvatarWrapper/AvatarWrapper.vue'
 import Message from './Message/Message.vue'
 
-import { ATTENDEE } from '../../../constants.js'
+import { ATTENDEE, AVATAR } from '../../../constants.js'
 import { useGuestNameStore } from '../../../stores/guestName.js'
 
 export default {
@@ -91,7 +91,7 @@ export default {
 
 	setup() {
 		const guestNameStore = useGuestNameStore()
-		return { guestNameStore }
+		return { AVATAR, guestNameStore }
 	},
 
 	expose: ['highlightMessage'],
diff --git a/src/components/NewMessage/NewMessageTypingIndicator.vue b/src/components/NewMessage/NewMessageTypingIndicator.vue
index 61b4813ec..4230f3738 100644
--- a/src/components/NewMessage/NewMessageTypingIndicator.vue
+++ b/src/components/NewMessage/NewMessageTypingIndicator.vue
@@ -28,7 +28,7 @@
 					:key="index"
 					:name="participant.displayName"
 					:source="participant.actorType"
-					small
+					:size="AVATAR.SIZE.EXTRA_SMALL"
 					condensed
 					:condensed-overlap="8"
 					disable-menu
@@ -45,6 +45,7 @@ import escapeHtml from 'escape-html'
 
 import AvatarWrapper from '../AvatarWrapper/AvatarWrapper.vue'
 
+import { AVATAR } from '../../constants.js'
 import { useGuestNameStore } from '../../stores/guestName.js'
 
 export default {
@@ -63,7 +64,7 @@ export default {
 
 	setup() {
 		const guestNameStore = useGuestNameStore()
-		return { guestNameStore }
+		return { AVATAR, guestNameStore }
 	},
 
 	computed: {
diff --git a/src/components/Quote.vue b/src/components/Quote.vue
index bd5fefa57..f2cc1820b 100644
--- a/src/components/Quote.vue
+++ b/src/components/Quote.vue
@@ -37,7 +37,7 @@ components.
 				<AvatarWrapper :id="actorId"
 					:name="getDisplayName"
 					:source="actorType"
-					small
+					:size="AVATAR.SIZE.EXTRA_SMALL"
 					disable-menu />
 				{{ getDisplayName }}
 			</div>
@@ -74,6 +74,7 @@ import AvatarWrapper from './AvatarWrapper/AvatarWrapper.vue'
 import DefaultParameter from './MessagesList/MessagesGroup/Message/MessagePart/DefaultParameter.vue'
 import FilePreview from './MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue'
 
+import { AVATAR } from '../constants.js'
 import { EventBus } from '../services/EventBus.js'
 
 export default {
@@ -140,6 +141,11 @@ export default {
 			default: false,
 		},
 	},
+
+	setup() {
+		return { AVATAR }
+	},
+
 	computed: {
 		/**
 		 * The message actor display name.
diff --git a/src/constants.js b/src/constants.js
index b453316e6..60a9a55bf 100644
--- a/src/constants.js
+++ b/src/constants.js
@@ -232,3 +232,15 @@ export const BOT = {
 		NO_SETUP: 2,
 	},
 }
+
+export const AVATAR = {
+	SIZE: {
+		EXTRA_SMALL: 22,
+		SMALL: 32,
+		DEFAULT: 44,
+		MEDIUM: 64,
+		LARGE: 128,
+		EXTRA_LARGE: 180,
+		FULL: 512,
+	},
+}