feat(Reactions): Improve popover content

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

Hide file tree

Showing 2 changed files with 51 additions and 18 deletions.
diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/Reactions.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/Reactions.vue
@@ -25,15 +25,16 @@
 	<div class="reactions-wrapper">
 		<!-- all reactions button -->
 		<NcButton class="reaction-button"
+			:title="t('spreed', 'Show all reactions')"
 			@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 +46,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 />
@@ -59,6 +66,7 @@
 			@after-show="emitEmojiPickerStatus"
 			@after-hide="emitEmojiPickerStatus">
 			<NcButton class="reaction-button"
+				:title="t('spreed', 'Add more reactions')"
 				:aria-label="t('spreed', 'Add more reactions')">
 				<template #icon>
 					<EmoticonPlusOutline :size="15" />
@@ -77,6 +85,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 +108,9 @@ export default {
 		NcEmojiPicker,
 		NcLoadingIcon,
 		NcPopover,
-		EmoticonPlusOutline,
 		ReactionsList,
+		EmoticonPlusOutline,
+		HeartOutlineIcon,
 	},
 
 	props: {
@@ -237,7 +247,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 +258,16 @@ export default {
 					summary.push(this.getDisplayNameForReaction(list[item]))
 				}
 			}
-
 			return summary.join(', ')
 		},
 
 		emitEmojiPickerStatus() {
 			this.$emit('emoji-picker-toggled')
 		},
+
+		remainingReactionsLabel(reaction) {
+			return n('spreed', 'and %n other participant', '%n other participants', 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,17 +31,21 @@
 				<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">
 					<NcListItemIcon v-for="item in reactionsOverview[reactionFilter]"
 						:key="item.actorId + item.actorType"
 						:name="item.actorDisplayName">
-						<span>
+						<span class="reactions-emojis">
 							{{ item.reaction?.join('') ?? reactionFilter }}
 						</span>
 					</NcListItemIcon>
@@ -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,18 @@ export default {
 	display: flex;
 	gap: 2px;
 	flex-wrap: wrap;
-	border-bottom: 1px solid var(--color-background-darker);
+
+	:deep(.button-vue) {
+		border-radius: var(--border-radius-large);
+		&.active {
+			background-color: var(--color-primary-element-light);
+		}
+	}
+}
+
+.all-reactions__button :deep(.button-vue__text) {
+	display: inline-flex;
+	gap: 4px;
 }
 
 .scrollable {
@@ -186,11 +204,13 @@ export default {
 	height: calc(450px - 123px); // 123px is the height of the header 105px and the footer 18px
 }
 
-:deep(.button-vue) {
-	border-radius: var(--border-radius-large);
-
-	&.active {
-		background-color: var(--color-primary-element-light);
-	}
+.reactions-emojis {
+	max-width: 180px;
+	direction: rtl;
+	display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    position: relative;
 }
 </style>