show reactions

Signed-off-by: Julien Veyssier <eneiluj@posteo.net>

src/components/CommentReactions.vue

@@ -0,0 +1,90 @@
+<template>
+	<div class="reactions">
+		<button v-for="(r, rKey) in displayedReactions"
+			:key="rKey"
+			class="reaction">
+			<img :src="r.url">
+			{{ r.count }}
+		</button>
+	</div>
+</template>
+
+<script>
+import { imagePath } from '@nextcloud/router'
+
+export default {
+	name: 'CommentReactions',
+
+	components: {
+	},
+
+	props: {
+		reactions: {
+			type: Object,
+			required: true,
+		},
+	},
+
+	data() {
+		return {
+			availableReactions: {
+				'+1': imagePath('integration_github', 'reactions/plus1.png'),
+				'-1': imagePath('integration_github', 'reactions/minus1.png'),
+				laugh: imagePath('integration_github', 'reactions/laugh.png'),
+				hooray: imagePath('integration_github', 'reactions/tada.png'),
+				confused: imagePath('integration_github', 'reactions/confused.png'),
+				heart: imagePath('integration_github', 'reactions/heart.png'),
+				rocket: imagePath('integration_github', 'reactions/rocket.png'),
+				eyes: imagePath('integration_github', 'reactions/eyes.png'),
+			},
+		}
+	},
+
+	computed: {
+		displayedReactions() {
+			const result = {}
+			Object.keys(this.availableReactions).forEach(rKey => {
+				if (this.reactions[rKey] > 0) {
+					result[rKey] = {
+						url: this.availableReactions[rKey],
+						count: this.reactions[rKey],
+					}
+				}
+			})
+			return result
+		},
+	},
+
+	watch: {
+	},
+
+	mounted() {
+	},
+
+	methods: {
+	},
+}
+</script>
+
+<style scoped lang="scss">
+.reactions {
+	display: flex;
+	align-items: center;
+	.reaction {
+		width: 42px;
+		height: 26px;
+		min-height: 26px;
+		padding: 0;
+		margin-right: 8px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		font-weight: normal;
+		img {
+			width: 12px;
+			height: 12px;
+			margin-right: 6px;
+		}
+	}
+}
+</style>

src/views/ReferenceGithubWidget.vue

@@ -52,7 +52,6 @@
 				<div class="sub-text">
 					<span>{{ slug }}#{{ githubId }}</span>
 					&nbsp;
-					<!-- eslint-disable-next-line -->
 					<span
 						v-tooltip.top="{ content: subTextTooltip }"
 						v-html="subText" />
@@ -69,15 +68,23 @@
 			</div>
 		</div>
 		<div v-if="richObject.github_comment" class="comment">
-			<Avatar
-				class="author-avatar"
-				:tooltip-message="commentAuthorTooltip"
-				:is-no-user="true"
-				:url="commentAuthorAvatarUrl" />
-			<span class="body" :title="richObject.github_comment.body">
-				{{ richObject.github_comment.body }}
-			</span>
+			<div class="comment--content">
+				<Avatar
+					class="author-avatar"
+					:tooltip-message="commentAuthorTooltip"
+					:is-no-user="true"
+					:url="commentAuthorAvatarUrl" />
+				<span class="body" :title="richObject.github_comment.body">
+					{{ richObject.github_comment.body }}
+				</span>
+			</div>
 		</div>
+		<CommentReactions v-if="richObject.github_comment?.reactions"
+			class="comment--reactions item-reactions"
+			:reactions="richObject.github_comment.reactions" />
+		<CommentReactions v-else-if="richObject.reactions"
+			class="issue-pr--reactions item-reactions"
+			:reactions="richObject.reactions" />
 	</div>
 </template>
 
@@ -92,6 +99,8 @@ import PrOpenDraftIcon from '../components/icons/PrOpenDraftIcon.vue'
 import PrMergedIcon from '../components/icons/PrMergedIcon.vue'
 import PrClosedIcon from '../components/icons/PrClosedIcon.vue'
 
+import CommentReactions from '../components/CommentReactions.vue'
+
 import { generateUrl } from '@nextcloud/router'
 import moment from '@nextcloud/moment'
 import escapeHtml from 'escape-html'
@@ -105,6 +114,7 @@ export default {
 	name: 'ReferenceGithubWidget',
 
 	components: {
+		CommentReactions,
 		Avatar,
 		OpenInNewIcon,
 	},
@@ -358,7 +368,7 @@ export default {
 			align-items: center;
 
 			> .icon {
-				margin: 0 16px 0 10px;
+				margin: 0 15px 0 10px;
 			}
 		}
 
@@ -373,17 +383,29 @@ export default {
 	.comment {
 		margin-top: 8px;
 		display: flex;
-		align-items: center;
-		.author-avatar {
-			margin-right: 8px;
-		}
-		.body {
-			text-overflow: ellipsis;
-			overflow: hidden;
-			white-space: nowrap;
+		flex-direction: column;
+		align-items: start;
+		&--content {
+			display: flex;
+			align-items: center;
+			width: 100%;
+
+			.author-avatar {
+				margin-right: 8px;
+			}
+
+			.body {
+				text-overflow: ellipsis;
+				overflow: hidden;
+				white-space: nowrap;
+			}
 		}
 	}
 
+	.item-reactions {
+		margin: 8px 0 0 40px;
+	}
+
 	.settings-link {
 		display: flex;
 		align-items: center;