Display popover on click

Signed-off-by: Marco Ambrosini <marcoambrosini@icloud.com>

3 files changed, 46 insertions, 5 deletions

diff --git a/src/components/AvatarWrapper/AvatarWrapper.vue b/src/components/AvatarWrapper/AvatarWrapper.vue
index 51bcef25e..60313b198 100644
--- a/src/components/AvatarWrapper/AvatarWrapper.vue
+++ b/src/components/AvatarWrapper/AvatarWrapper.vue
@@ -153,6 +153,7 @@ export default {
 		width: unset;
 		height: unset;
 		margin-left: -2px;
+		display: flex;
 		::v-deep img {
 			outline: 2px solid var(--color-main-background);
 		}
diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/Poll.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/Poll.vue
index c4a194ca4..fee80ad1b 100644
--- a/src/components/MessagesList/MessagesGroup/Message/MessagePart/Poll.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/MessagePart/Poll.vue
@@ -532,6 +532,7 @@ export default {
 
 	&__details {
 		display: flex;
+		height: 32px;
 	}
 
 	&-subtitle {
diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/PollVotersDetails.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/PollVotersDetails.vue
index 1edc2aec2..50484ba5b 100644
--- a/src/components/MessagesList/MessagesGroup/Message/MessagePart/PollVotersDetails.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/MessagePart/PollVotersDetails.vue
@@ -21,19 +21,36 @@
 
 <template>
 	<NcPopover trigger="hover">
-		<div slot="trigger" tabindex="0" class="poll-voters-details">
+		<button slot="trigger"
+			tabindex="0"
+			class="poll-voters-details">
 			<AvatarWrapper 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" />
-		</div>
-		<div tabindex="0">
-			Some content
+		</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"
+					:key="index"
+					:source="item.actorType"
+					:disable-menu="true"
+					:show-user-status="false"
+					:name="item.actorDisplayName"
+					:condensed="true"
+					:size="24" />
+				<p class="poll-voters-details__display-name">
+					{{ item.actorDisplayName }}
+				</p>
+			</div>
 		</div>
 	</NcPopover>
 </template>
@@ -64,7 +81,29 @@ export default {
 
 .poll-voters-details {
 	display: flex;
-	cursor: pointer;
+	background: none;
+	border: none;
+	padding: 0;
+
+	&__popover{
+		padding: 8px;
+		max-height: 400px;
+		overflow-y: scroll;
+	}
+
+	&__display-name {
+			margin-left: 4px;
+		}
+
+	&__list-item {
+		display: flex;
+		align-items: center;
+		height: 32px;
+		margin-bottom: var(--margin-small);
+		min-width: 150px;
+		justify-content: flex-start;
+		align-items: center;
+	}
 }
 
 </style>