feat(Reactions): Improve popover content

Signed-off-by: DorraJaouad <[email protected]>
nextcloud · Feb 9, 2024 · 421c517 · 421c517
1 parent b16de3e
commit 421c517
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 11 deletions.
diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/Reactions.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/Reactions.vue
@@ -26,14 +26,14 @@
 		<!-- all reactions button -->
 		<NcButton class="reaction-button"
 			@click="showAllReactions = true">
-			<!--  TRANSLATORS For a tab to see all reactions to specific message -->
-			{{ t('spreed', 'All') }}
+			<HeartOutlineIcon :size="15" />
 		</NcButton>
 		<NcPopover v-for="reaction in reactionsSorted"
 			:key="reaction"
 			:delay="200"
 			:focus-trap="false"
 			:triggers="['hover']"
+			:popper-triggers="['hover']"
 			@after-show="fetchReactions">
 			<template #trigger>
 				<NcButton :type="userHasReacted(reaction) ? 'primary' : 'secondary'"
@@ -45,6 +45,12 @@
 
 			<div v-if="hasReactions" class="reaction-details">
 				<span>{{ getReactionSummary(reaction) }}</span>
+				<NcButton v-if="reactionsCount(reaction) > 3"
+					type="tertiary-no-background"
+					@click="showAllReactions = true">
+					<!--  TRANSLATORS For a button to see all reactions -->
+					{{ remainingReactionsLabel(reaction) }}
+				</NcButton>
 			</div>
 			<div v-else class="details-loading">
 				<NcLoadingIcon />
@@ -77,6 +83,7 @@
 
 <script>
 import EmoticonPlusOutline from 'vue-material-design-icons/EmoticonPlusOutline.vue'
+import HeartOutlineIcon from 'vue-material-design-icons/HeartOutline.vue'
 
 import { showError } from '@nextcloud/dialogs'
 
@@ -99,8 +106,9 @@ export default {
 		NcEmojiPicker,
 		NcLoadingIcon,
 		NcPopover,
-		EmoticonPlusOutline,
 		ReactionsList,
+		EmoticonPlusOutline,
+		HeartOutlineIcon,
 	},
 
 	props: {
@@ -237,7 +245,7 @@ export default {
 			if (!this.hasReactions) {
 				return ''
 			}
-			const list = this.detailedReactions[reaction]
+			const list = this.detailedReactions[reaction].slice(0, 3)
 			const summary = []
 
 			for (const item in list) {
@@ -248,13 +256,18 @@ export default {
 					summary.push(this.getDisplayNameForReaction(list[item]))
 				}
 			}
-
 			return summary.join(', ')
 		},
 
 		emitEmojiPickerStatus() {
 			this.$emit('emoji-picker-toggled')
 		},
+
+		remainingReactionsLabel(reaction) {
+			return this.reactionsCount(reaction) - 3 === 1
+				? t('spreed', 'and 1 other…')
+				: t('spreed', 'and {count} others…', { count: this.reactionsCount(reaction) - 3 })
+		},
 	}
 }
 </script>

diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/ReactionsList.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/ReactionsList.vue
@@ -31,10 +31,14 @@
 				<div class="reactions-list__navigation">
 					<NcButton v-for="reaction in reactionsMenu"
 						:key="reaction"
-						:class="{'active' : reactionFilter === reaction}"
+						:class="{'active' : reactionFilter === reaction, 'all-reactions__button': reaction === '♡'}"
 						type="tertiary"
 						@click="handleTabClick(reaction)">
-						{{ (reaction === 'all' ? t('spreed', 'All') : reaction) + ' ' + reactionsOverview[reaction].length }}
+						<HeartOutlineIcon v-if="reaction === '♡'" :size="15" />
+						<span v-else>
+							{{ reaction }}
+						</span>
+						{{ reactionsOverview[reaction].length }}
 					</NcButton>
 				</div>
 				<div class="scrollable">
@@ -53,6 +57,8 @@
 </template>
 
 <script>
+import HeartOutlineIcon from 'vue-material-design-icons/HeartOutline.vue'
+
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcListItemIcon from '@nextcloud/vue/dist/Components/NcListItemIcon.js'
 import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
@@ -70,6 +76,7 @@ export default {
 		NcLoadingIcon,
 		NcListItemIcon,
 		NcButton,
+		HeartOutlineIcon,
 	},
 
 	props: {
@@ -99,7 +106,7 @@ export default {
 
 	data() {
 		return {
-			reactionFilter: 'All',
+			reactionFilter: '♡',
 		}
 	},
 
@@ -136,11 +143,11 @@ export default {
 				})
 			})
 
-			return { All: Object.values(mergedReactionsMap), ...modifiedDetailedReactions }
+			return { '♡': Object.values(mergedReactionsMap), ...modifiedDetailedReactions }
 		},
 
 		reactionsMenu() {
-			return ['All', ...this.reactionsSorted]
+			return ['♡', ...this.reactionsSorted]
 		},
 	},
 
@@ -177,7 +184,11 @@ export default {
 	display: flex;
 	gap: 2px;
 	flex-wrap: wrap;
-	border-bottom: 1px solid var(--color-background-darker);
+}
+
+.all-reactions__button :deep(.button-vue__text) {
+	display: inline-flex;
+	gap: 4px;
 }
 
 .scrollable {