fixup! Adjust tests

nextcloud · Feb 8, 2024 · 1b4b625 · 1b4b625
1 parent cec4d7a
commit 1b4b625
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 37 deletions.
diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/Reactions.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/Reactions.vue
@@ -24,8 +24,7 @@
 	<!-- reactions buttons and popover with details -->
 	<div class="reactions-wrapper">
 		<!-- all reactions button -->
-		<NcButton v-if="reactionsSorted.length > 1"
-			class="reaction-button"
+		<NcButton class="reaction-button"
 			@click="showAllReactions = true">
 			{{ t('spreed', 'All') }}
 		</NcButton>
@@ -61,7 +60,7 @@
 			<NcButton class="reaction-button"
 				:aria-label="t('spreed', 'Add more reactions')">
 				<template #icon>
-					<EmoticonOutline :size="15" />
+					<EmoticonPlusOutline :size="15" />
 				</template>
 			</NcButton>
 		</NcEmojiPicker>
@@ -76,7 +75,7 @@
 </template>
 
 <script>
-import EmoticonOutline from 'vue-material-design-icons/EmoticonOutline.vue'
+import EmoticonPlusOutline from 'vue-material-design-icons/EmoticonPlusOutline.vue'
 
 import { showError } from '@nextcloud/dialogs'
 
@@ -99,7 +98,7 @@ export default {
 		NcEmojiPicker,
 		NcLoadingIcon,
 		NcPopover,
-		EmoticonOutline,
+		EmoticonPlusOutline,
 		ReactionsList,
 	},
 
@@ -142,10 +141,6 @@ export default {
 	},
 
 	computed: {
-		container() {
-			return this.$store.getters.getMainContainerSelector()
-		},
-
 		hasReactions() {
 			return Object.keys(Object(this.detailedReactions)).length !== 0
 		},

diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/ReactionsList.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/ReactionsList.vue
@@ -28,29 +28,27 @@
 			<h2>
 				{{ t('spreed', 'Reactions') }}
 			</h2>
-			<template v-if="Object.keys(detailedReactions).length > 0">
+			<template v-if="Object.keys(reactionsOverview).length > 0">
 				<div class="reactions-list__navigation">
-					<NcButton :class="{'active' : reactionFilter === ''}"
-						type="tertiary"
-						@click="handleTabClick('')">
-						{{ t('spreed', 'All ({count})', { count: flatReactions.length }) }}
-					</NcButton>
-					<NcButton v-for="reaction in reactionsSorted"
+					<NcButton v-for="reaction in reactionsMenu"
 						:key="reaction"
 						:class="{'active' : reactionFilter === reaction}"
 						type="tertiary"
 						@click="handleTabClick(reaction)">
-						{{ reaction }} {{ detailedReactions[reaction].length }}
+						{{ reaction }}
+						<span v-if="reaction === 'All'">({{ reactionsOverview[reaction].length }})</span>
+						<span v-else>{{ reactionsOverview[reaction].length }}</span>
 					</NcButton>
 				</div>
-
-				<NcListItemIcon v-for="item in filteredReactions ?? flatReactions"
-					:key="item.actorDisplayName"
-					:name="getDisplayNameForReaction(item)">
-					<span>
-						{{ reactionFilter === '' ? item.reaction.join('') : reactionFilter }}
-					</span>
-				</NcListItemIcon>
+				<div class="scrollable">
+					<NcListItemIcon v-for="item in reactionsOverview[reactionFilter]"
+						:key="item.actorId + item.actorType"
+						:name="item.actorDisplayName">
+						<span>
+							{{ item.reaction?.join('') ?? reactionFilter }}
+						</span>
+					</NcListItemIcon>
+				</div>
 			</template>
 			<NcLoadingIcon v-else :size="64" />
 		</div>
@@ -104,7 +102,7 @@ export default {
 
 	data() {
 		return {
-			reactionFilter: '',
+			reactionFilter: 'All',
 		}
 	},
 
@@ -113,17 +111,26 @@ export default {
 			return this.$store.getters.getMainContainerSelector()
 		},
 
-		flatReactions() {
+		reactionsOverview() {
 			const mergedReactionsMap = {}
+			const modifiedDetailedReactions = {}
 
 			Object.entries(this.detailedReactions).forEach(([reaction, actors]) => {
+				modifiedDetailedReactions[reaction] = []
 				actors.forEach(actor => {
 					const key = `${actor.actorId}-${actor.actorType}`
+					const actorDisplayName = this.getDisplayNameForReaction(actor)
+
+					modifiedDetailedReactions[reaction].push({
+						...actor,
+						actorDisplayName
+					})
+
 					if (mergedReactionsMap[key]) {
 						mergedReactionsMap[key].reaction.push(reaction)
 					} else {
 						mergedReactionsMap[key] = {
-							actorDisplayName: actor.actorDisplayName,
+							actorDisplayName,
 							actorId: actor.actorId,
 							actorType: actor.actorType,
 							reaction: [reaction]
@@ -132,17 +139,12 @@ export default {
 				})
 			})
 
-			return Object.values(mergedReactionsMap)
+			return { All: Object.values(mergedReactionsMap), ...modifiedDetailedReactions }
 		},
 
-		filteredReactions() {
-			if (!this.reactionFilter) {
-				return this.flatReactions
-			} else {
-				return this.flatReactions.filter(reaction => reaction.reaction.includes(this.reactionFilter))
-			}
+		reactionsMenu() {
+			return ['All', ...this.reactionsSorted]
 		},
-
 	},
 
 	methods: {
@@ -171,7 +173,7 @@ export default {
 </script>
 <style lang="scss" scoped>
 .reactions__modal{
-	min-height: 50vh;
+	min-height: 450px;
 	padding: 18px;
 }
 .reactions-list__navigation {
@@ -181,6 +183,12 @@ export default {
     border-bottom: 1px solid var(--color-background-darker);
 }
 
+.scrollable {
+	overflow-y: auto;
+	overflow-x: hidden;
+	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);