From 6991e415bbb55be57d35f736b7634293d165ccbc Mon Sep 17 00:00:00 2001
From: itupix <jerome.boukorras@axa.fr>
Date: Tue, 5 Jan 2021 14:06:36 +0100
Subject: [PATCH] feat(ui): open pullrequest url

---
 src/components/Avatar/Avatar.svelte           | 10 +++---
 src/components/Header/MacosBar.svelte         |  1 -
 src/components/Pullrequest/Pullrequest.svelte | 36 +++++++++++++++++--
 3 files changed, 39 insertions(+), 8 deletions(-)

diff --git a/src/components/Avatar/Avatar.svelte b/src/components/Avatar/Avatar.svelte
index 151b8ee..622ef13 100644
--- a/src/components/Avatar/Avatar.svelte
+++ b/src/components/Avatar/Avatar.svelte
@@ -15,11 +15,11 @@
 <style>
 	.container {
 		position: relative;
-		width: 4rem;
-		height: 4rem;
 	}
 
 	.avatar {
+		width: 4rem;
+		height: 4rem;
 		overflow: hidden;
 		border-radius: 50%;
 		border: 2px solid #fff;
@@ -28,7 +28,7 @@
 	img {
 		display: block;
 		width: 100%;
-		height: auto;
+		height: 100%;
 	}
 
 	.badge {
@@ -54,7 +54,9 @@
 
 <div class={`container ${className || ''}`}>
 	{#await Service.getAvatar(pullRequest.provider, pullRequest.user.avatar, pullRequest.organizationName)}
-		<p>Chargement...</p>
+		<div class="avatar">
+			<p>Chargement...</p>
+		</div>
 	{:then avatar}
 		<div class="avatar"><img src={avatar} alt={pullRequest.user.name} /></div>
 		{#if pullRequest.provider}
diff --git a/src/components/Header/MacosBar.svelte b/src/components/Header/MacosBar.svelte
index aaf1173..7ab6fb8 100644
--- a/src/components/Header/MacosBar.svelte
+++ b/src/components/Header/MacosBar.svelte
@@ -5,7 +5,6 @@
 </script>
 
 <style src="./MacosBar.scss">
-
 </style>
 
 <div class="window-controls">
diff --git a/src/components/Pullrequest/Pullrequest.svelte b/src/components/Pullrequest/Pullrequest.svelte
index db54d5d..8fdce42 100644
--- a/src/components/Pullrequest/Pullrequest.svelte
+++ b/src/components/Pullrequest/Pullrequest.svelte
@@ -6,6 +6,7 @@
 	import { isFetchingData } from '../../shared/stores/default.store';
 	import Avatar from 'components/Avatar';
 	import Icons from 'components/icons';
+	const { shell } = require('electron');
 	export let pullRequest: PullRequestType;
 
 	const dispatch = createEventDispatcher();
@@ -19,12 +20,18 @@
 
 <style>
 	.pr {
+		position: relative;
 		display: flex;
 		flex-wrap: wrap;
 		padding: 1rem;
 		color: #fff;
 		border-radius: 8px;
 		background-color: #444;
+		transition: opacity linear 0.2s;
+	}
+
+	.pr:hover {
+		opacity: 0.8;
 	}
 
 	:global(.pr__avatar) {
@@ -71,7 +78,9 @@
 		background-color: #3e3e3e;
 	}
 
-	button {
+	.more {
+		position: relative;
+		z-index: 2;
 		display: block;
 		width: 1.5rem;
 		height: 1.5rem;
@@ -81,12 +90,30 @@
 		background-color: transparent;
 	}
 
-	button:hover {
+	.more:hover {
 		background-color: #333;
 	}
+
+	.link {
+		position: absolute;
+		left: 0;
+		top: 0;
+		z-index: 1;
+		width: 100%;
+		height: 100%;
+		cursor: pointer;
+		border: none;
+		background-color: transparent;
+	}
 </style>
 
 <div class="pr">
+	<button
+		class="link"
+		on:click={() => {
+			console.log('yo.');
+			shell.openExternal(pullRequest.url);
+		}} />
 	<Avatar className="pr__avatar" {pullRequest} />
 	<div class="details">
 		<header>
@@ -100,7 +127,10 @@
 	</div>
 	<footer>
 		<Labels labels={pullRequest.labels} />
-		<button on:click={() => getComments(pullRequest)} disabled={$isFetchingData}>
+		<button
+			class="more"
+			on:click={() => getComments(pullRequest)}
+			disabled={$isFetchingData}>
 			<Icons.Ellipsis />
 		</button>
 	</footer>