Fix voted guests handling

Signed-off-by: Joas Schilling <coding@schilljs.com>

3 files changed, 46 insertions, 33 deletions

diff --git a/src/components/AvatarWrapper/AvatarWrapper.vue b/src/components/AvatarWrapper/AvatarWrapper.vue
index 60313b198..dd9534dfa 100644
--- a/src/components/AvatarWrapper/AvatarWrapper.vue
+++ b/src/components/AvatarWrapper/AvatarWrapper.vue
@@ -21,10 +21,7 @@
 
 <template>
 	<div class="avatar-wrapper"
-		:class="{
-			'offline': offline,
-			'avatar-wrapper--condensed': condensed,
-		}">
+		:class="{'offline': offline}">
 		<div v-if="iconClass"
 			class="icon"
 			:class="[`avatar-${sizeToString}px`, iconClass]" />
@@ -105,11 +102,6 @@ export default {
 			type: String,
 			default: undefined,
 		},
-
-		condensed: {
-			type: Boolean,
-			default: false,
-		},
 	},
 	computed: {
 		// Determines which icon is displayed
@@ -142,22 +134,13 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../../assets/avatar';
+@import '../../assets/avatar.scss';
 
 .avatar-wrapper {
 	$avatar-size: 44px;
 	height: $avatar-size;
 	width: $avatar-size;
 	@include avatar-mixin($avatar-size);
-	&--condensed {
-		width: unset;
-		height: unset;
-		margin-left: -2px;
-		display: flex;
-		::v-deep img {
-			outline: 2px solid var(--color-main-background);
-		}
-	}
 }
 
 .offline .avatar-wrapper .avatardiv {
diff --git a/src/components/AvatarWrapper/AvatarWrapperSmall.vue b/src/components/AvatarWrapper/AvatarWrapperSmall.vue
index 56839070c..952450dd8 100644
--- a/src/components/AvatarWrapper/AvatarWrapperSmall.vue
+++ b/src/components/AvatarWrapper/AvatarWrapperSmall.vue
@@ -21,7 +21,10 @@
 
 <template>
 	<div class="avatar-wrapper"
-		:class="{'offline': offline}">
+		:class="{
+			'offline': offline,
+			'avatar-wrapper--condensed': condensed,
+		}">
 		<div v-if="iconClass"
 			class="icon"
 			:class="[`avatar-${sizeToString}px`, iconClass]" />
@@ -86,6 +89,11 @@ export default {
 			type: Boolean,
 			default: true,
 		},
+
+		condensed: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	computed: {
 		// Determines which icon is displayed
@@ -118,13 +126,26 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../../assets/avatar';
+@import '../../assets/avatar.scss';
 
 .avatar-wrapper {
 	$avatar-size: 22px;
 	height: $avatar-size;
 	width: $avatar-size;
 	@include avatar-mixin($avatar-size);
+
+	&--condensed {
+		width: unset;
+		height: unset;
+		margin-left: -2px;
+		display: flex;
+
+		& > .icon,
+		& > .guest,
+		::v-deep img {
+			outline: 2px solid var(--color-main-background);
+		}
+	}
 }
 
 .offline {
diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/PollVotersDetails.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/PollVotersDetails.vue
index 2cc42e4f9..0c30c076b 100644
--- a/src/components/MessagesList/MessagesGroup/Message/MessagePart/PollVotersDetails.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/MessagePart/PollVotersDetails.vue
@@ -24,31 +24,29 @@
 		<button slot="trigger"
 			tabindex="0"
 			class="poll-voters-details">
-			<AvatarWrapper v-for="(item, index) in details"
+			<AvatarWrapperSmall v-for="(item, index) in details"
 				:id="item.actorId"
 				:key="index"
 				:source="item.actorType"
 				:disable-menu="true"
 				:disable-tooltip="true"
 				:show-user-status="false"
-				:name="item.actorDisplayName"
-				:condensed="true"
-				:size="24" />
+				:name="getDisplayName(item)"
+				:condensed="true" />
 		</button>
 		<div class="poll-voters-details__popover" tabindex="0">
 			<div v-for="(item, index) in details"
 				:key="index"
 				class="poll-voters-details__list-item">
-				<AvatarWrapper :id="item.actorId"
+				<AvatarWrapperSmall :id="item.actorId"
 					:key="index"
 					:source="item.actorType"
 					:disable-menu="true"
 					:show-user-status="false"
-					:name="item.actorDisplayName"
-					:condensed="true"
-					:size="24" />
+					:name="getDisplayName(item)"
+					:condensed="true" />
 				<p class="poll-voters-details__display-name">
-					{{ item.actorDisplayName }}
+					{{ getDisplayName(item) }}
 				</p>
 			</div>
 		</div>
@@ -56,15 +54,16 @@
 </template>
 
 <script>
-import AvatarWrapper from '../../../../AvatarWrapper/AvatarWrapper.vue'
+import AvatarWrapperSmall from '../../../../AvatarWrapper/AvatarWrapperSmall.vue'
 import NcPopover from '@nextcloud/vue/dist/Components/NcPopover.js'
+import { ATTENDEE } from '../../../../../constants.js'
 
 export default {
 
 	name: 'PollVotersDetails',
 
 	components: {
-		AvatarWrapper,
+		AvatarWrapperSmall,
 		NcPopover,
 	},
 
@@ -74,6 +73,16 @@ export default {
 			required: true,
 		},
 	},
+
+	methods: {
+		getDisplayName(item) {
+			if (item.actorDisplayName === '' && item.actorType === ATTENDEE.ACTOR_TYPE.GUESTS) {
+				return t('spreed', 'Guest')
+			}
+
+			return item.actorDisplayName
+		},
+	},
 }
 </script>
 
@@ -86,7 +95,7 @@ export default {
 	padding: 0;
 	margin-right: 8px;
 
-	&__popover{
+	&__popover {
 		padding: 8px;
 		max-height: 400px;
 		overflow-y: scroll;