techdebt(NcAvatar) - optimize avatar wrappers

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;

src/components/ConversationIcon.vue

@@ -20,8 +20,7 @@
 -->
 
 <template>
-	<div ref="conversation-icon"
-		class="conversation-icon"
+	<div class="conversation-icon"
 		:style="{'--icon-size': `${size}px`}"
 		:class="{'offline': offline}">
 		<div v-if="iconClass"
@@ -45,18 +44,16 @@
 			:disable-menu="disableMenu"
 			:display-name="item.displayName"
 			:preloaded-user-status="preloadedUserStatus"
-			:show-user-status="showUserStatus"
-			:show-user-status-compact="disableMenu"
+			:show-user-status="!hideUserStatus"
+			:show-user-status-compact="!showUserOnlineStatus"
 			:menu-container="menuContainer"
 			menu-position="left"
 			class="conversation-icon__avatar" />
-		<div v-if="showCall"
-			class="overlap-icon">
+		<div v-if="showCall" class="overlap-icon">
 			<VideoIcon :size="20" :fill-color="'#E9322D'" />
 			<span class="hidden-visually">{{ t('spreed', 'Call in progress') }}</span>
 		</div>
-		<div v-else-if="showFavorite"
-			class="overlap-icon">
+		<div v-else-if="showFavorite" class="overlap-icon">
 			<Star :size="20" :fill-color="'#FFCC00'" />
 			<span class="hidden-visually">{{ t('spreed', 'Favorite') }}</span>
 		</div>
@@ -101,13 +98,18 @@ export default {
 		},
 
 		disableMenu: {
+			type: Boolean,
+			default: true,
+		},
+
+		hideUserStatus: {
 			type: Boolean,
 			default: false,
 		},
 
-		showUserStatus: {
+		showUserOnlineStatus: {
 			type: Boolean,
-			default: true,
+			default: false,
 		},
 
 		item: {
@@ -130,22 +132,12 @@ export default {
 			default: false,
 		},
 
-		/**
-		 * Passing in true will make this component fill all the available space in its container.
-		 * This is not reactive as it will take the size of the container once mounted.
-		 */
-		isBig: {
-			type: Boolean,
-			default: false,
+		size: {
+			type: Number,
+			default: 44,
 		},
 	},
 
-	data() {
-		return {
-			parentElement: undefined,
-		}
-	},
-
 	computed: {
 		showCall() {
 			return !this.hideCall && this.item.hasCall
@@ -156,7 +148,7 @@ export default {
 		},
 
 		preloadedUserStatus() {
-			if (this.showUserStatus && Object.prototype.hasOwnProperty.call(this.item, 'statusMessage')) {
+			if (!this.hideUserStatus && Object.prototype.hasOwnProperty.call(this.item, 'statusMessage')) {
 				// We preloaded the status
 				return {
 					status: this.item.status || null,
@@ -217,14 +209,6 @@ export default {
 			return undefined
 		},
 
-		size() {
-			if (this.isBig && this.parentElement) {
-				return Math.min(this.parentElement.clientHeight, this.parentElement.clientWidth)
-			} else {
-				return 44
-			}
-		},
-
 		isOneToOne() {
 			return this.item.type === CONVERSATION.TYPE.ONE_TO_ONE
 		},
@@ -242,11 +226,6 @@ export default {
 			})
 		},
 	},
-
-	mounted() {
-		// Get the size of the parent once the component is mounted
-		this.parentElement = this.$refs['conversation-icon'].parentElement
-	},
 }
 </script>
 

src/components/ConversationSettings/ConversationAvatarEditor.vue

@@ -32,9 +32,8 @@
 				</div>
 				<ConversationIcon v-else-if="!loading"
 					:item="conversation"
-					:is-big="true"
-					:show-user-status="false"
-					:disable-menu="true" />
+					:size="180"
+					hide-user-status />
 				<div v-else class="icon-loading" />
 			</div>
 			<VueCropper v-show="showCropper"

src/components/GuestWelcomeWindow.vue

@@ -27,9 +27,7 @@
 		size="small">
 		<div class="modal__content">
 			<div class="conversation-information">
-				<ConversationIcon :item="conversation"
-					:show-user-status="false"
-					disable-menu />
+				<ConversationIcon :item="conversation" hide-user-status />
 				<h2>{{ conversationDisplayName }}</h2>
 			</div>
 			<p class="description">

src/components/LeftSidebar/ConversationsList/Conversation.vue

@@ -32,10 +32,7 @@
 		:counter-type="counterType"
 		@click="onClick">
 		<template #icon>
-			<ConversationIcon :item="item"
-				:hide-favorite="false"
-				:hide-call="false"
-				:disable-menu="true" />
+			<ConversationIcon :item="item" :hide-favorite="false" :hide-call="false" />
 		</template>
 		<template #subtitle>
 			<strong v-if="item.unreadMessages"

src/components/LeftSidebar/LeftSidebar.vue

@@ -171,7 +171,7 @@
 								:title="item.label"
 								@click="createAndJoinConversation(item)">
 								<template #icon>
-									<ConversationIcon :item="iconData(item)" disable-menu />
+									<ConversationIcon :item="iconData(item)" />
 								</template>
 							</NcListItem>
 						</template>
@@ -187,7 +187,7 @@
 									:title="item.label"
 									@click="createAndJoinConversation(item)">
 									<template #icon>
-										<ConversationIcon :item="iconData(item)" disable-menu />
+										<ConversationIcon :item="iconData(item)" />
 									</template>
 								</NcListItem>
 							</template>
@@ -201,7 +201,7 @@
 									:title="item.label"
 									@click="createAndJoinConversation(item)">
 									<template #icon>
-										<ConversationIcon :item="iconData(item)" disable-menu />
+										<ConversationIcon :item="iconData(item)" />
 									</template>
 								</NcListItem>
 							</template>