fix(pull request): button for comments display (#86)

Co-authored-by: itupix <jerome.boukorras@axa.fr>
AxaFrance · Oct 23, 2020 · 6e51b50 · 6e51b50
1 parent fff97fc
commit 6e51b50
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 32 deletions.
diff --git a/src/components/CommentsCounter/CommentsCounter.scss b/src/components/CommentsCounter/CommentsCounter.scss
@@ -1,20 +1,27 @@
 .skz-comments-counter {
-  font-size: 0.8rem;
-  color: #aaa;
-  animation: fadeIn 0.2s;
+	font-size: 0.8rem;
+	color: #aaa;
+	animation: fadeIn 0.2s;
+	padding: 0.2rem 0.5rem;
+	border-radius: 4px;
+	transition: background-color linear 0.2s;
 
-  &:after {
-    content: '\EA4C';
-    margin-left: 0.25rem;
-    font-family: 'Icons';
-    vertical-align: bottom;
-  }
+	&:after {
+		content: '\EA4C';
+		margin-left: 0.25rem;
+		font-family: 'Icons';
+		vertical-align: bottom;
+	}
 
-  &--all-resolved {
-    color: #9fd9b4;
-  }
+	&--all-resolved {
+		color: #9fd9b4;
+	}
 
-  &--responses {
-    color: #d87c7c;
-  }
+	&--responses {
+		color: #d87c7c;
+	}
+
+	&:hover {
+		background-color: #eee;
+	}
 }
diff --git a/src/components/CommentsCounter/CommentsCounter.svelte b/src/components/CommentsCounter/CommentsCounter.svelte
@@ -1,23 +1,30 @@
 <script>
-  export let comments = [];
-  export let hasResponse;
+	export let comments = [];
+	export let hasResponse;
+	export let action;
 
-  const isDisplayed = comments && comments.length > 0;
-  const isCommentResolved = ({ status }) =>
-    status && status !== 'active' && status !== 'pending';
-  const commentsResolved =
-    comments.filter(isCommentResolved).length === comments.length;
-  const classModifier = commentsResolved
-    ? 'skz-comments-counter--all-resolved'
-    : hasResponse
-    ? 'skz-comments-counter--responses'
-    : '';
+	const isDisplayed = comments && comments.length > 0;
+	const isCommentResolved = ({ status }) =>
+		status && status !== 'active' && status !== 'pending';
+	const commentsResolved =
+		comments.filter(isCommentResolved).length === comments.length;
+	const classModifier = commentsResolved
+		? 'skz-comments-counter--all-resolved'
+		: hasResponse
+		? 'skz-comments-counter--responses'
+		: '';
+
+	const onClick = e => {
+		e.preventDefault();
+		action();
+	};
 </script>
 
 <style src="./CommentsCounter.scss">
-
 </style>
 
 {#if isDisplayed}
-  <p class={`skz-comments-counter ${classModifier}`}>{comments.length}</p>
+	<p on:click={onClick} class={`skz-comments-counter ${classModifier}`}>
+		{comments.length}
+	</p>
 {/if}
diff --git a/src/components/Pullrequest/Pullrequest.svelte b/src/components/Pullrequest/Pullrequest.svelte
@@ -1,4 +1,5 @@
 <script>
+	const { shell } = require('electron');
 	import { getContext } from 'svelte';
 	import { get } from 'svelte/store';
 	import { getAvatar, fetchPullRequestComments } from '../../shared/requester';
@@ -96,6 +97,12 @@
 			open,
 		);
 
+	const openUrl = e => {
+		if (!e.target.className.includes('skz-comments-counter')) {
+			shell.openExternal(makeUrl(pullRequest));
+		}
+	};
+
 	const getAvatarUrl = pr =>
 		getAvatar(pr.createdBy.id, pr.organizationName, pr.createdBy.descriptor);
 
@@ -115,10 +122,9 @@
 </script>
 
 <style src="./Pullrequest.scss">
-
 </style>
 
-<div class="skz-pullrequest" on:click={openModal}>
+<div class="skz-pullrequest" on:click={openUrl}>
 	<div class="skz-pullrequest__avatar">
 		{#await getAvatarUrl(pullRequest)}
 			<img
@@ -185,7 +191,10 @@
 					<h1 class="skz-pullrequest__mention">@</h1>
 				{/if}
 				<div>
-					<CommentsCounter {comments} hasResponse={hasResponse()} />
+					<CommentsCounter
+						action={openModal}
+						{comments}
+						hasResponse={hasResponse()} />
 				</div>
 			{/await}
 		</div>