From 6f27340dad10d54a70431c1eacc42bc782e5e193 Mon Sep 17 00:00:00 2001
From: Yashu Mittal <mittalyashu77@gmail.com>
Date: Sat, 25 May 2019 22:24:18 +0530
Subject: [PATCH 1/7] Remove padding from history commit preview

---
 src/renderer/pages/repository/history.vue | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/renderer/pages/repository/history.vue b/src/renderer/pages/repository/history.vue
index 64efdbfe..734d9149 100644
--- a/src/renderer/pages/repository/history.vue
+++ b/src/renderer/pages/repository/history.vue
@@ -34,7 +34,7 @@
 				</VueScrollbar>
 			</div>
 		</div>
-		<div class="history__preview">
+		<div>
 			<diffPreview
 				v-if="this.$store.state.history.filePreview.isActive"
 				:preview="commitFileDiffPreview"
@@ -146,7 +146,4 @@ export default {
 
 		&__scrollbar
 			max-height: 90vh
-
-	&__preview
-		padding: 10px
 </style>

From 69155d54f659796ef2ad538685157145ded9cc42 Mon Sep 17 00:00:00 2001
From: Yashu Mittal <mittalyashu77@gmail.com>
Date: Sun, 26 May 2019 17:37:03 +0530
Subject: [PATCH 2/7] Code diff line html structure

---
 src/renderer/components/diff/diffLine.vue | 74 +++++++++++++++++++++++
 1 file changed, 74 insertions(+)
 create mode 100644 src/renderer/components/diff/diffLine.vue

diff --git a/src/renderer/components/diff/diffLine.vue b/src/renderer/components/diff/diffLine.vue
new file mode 100644
index 00000000..63702f58
--- /dev/null
+++ b/src/renderer/components/diff/diffLine.vue
@@ -0,0 +1,74 @@
+<template>
+	<div class="diff__preview-line">
+		<div :style="{ backgroundColor: '#' + color.gutter }" class="diff__gutter">
+			<div
+				:style="{ borderRightColor: '#' + color.border }"
+				class="diff__gutter-left"
+			>
+			</div>
+			<div
+				:style="{ borderRightColor: '#' + color.border }"
+				class="diff__gutter-right"
+			>
+			</div>
+		</div>
+		<div :style="{ backgroundColor: '#' + color.code }" class="diff__code">
+			<div class="diff__code-status">
+			</div>
+			<div class="diff__code-line">
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+export default {
+	name: "DiffLine",
+	props: {
+		color: {
+			type: Object,
+			required: true
+		},
+		gutter: {
+			type: String,
+			required: true
+		},
+		status: {
+			type: String,
+			required: true
+		},
+		code: {
+			type: String,
+			required: true
+		}
+	}
+};
+</script>
+
+<style lang="sass">
+.diff
+	&__preview-line, &__gutter, &__code
+		display: flex
+		flex-direction: row
+
+	&__gutter, &__code
+		font-size: .875rem
+
+	&__gutter-left, &__gutter-right, &__code
+		padding-top: 6px
+		padding-bottom: 6px
+
+	&__gutter-left, &__gutter-right
+		padding-left: 1.125rem
+		padding-right: 10px
+		border-right:
+			width: 1px
+			style: solid
+
+	&__code
+		padding-left: 4px
+		padding-right: 4px
+
+		&-status
+			margin-right: .875rem
+</style>

From 42da76ed129ae69d18fa71ab9bfb99ee9d94e818 Mon Sep 17 00:00:00 2001
From: Yashu Mittal <mittalyashu77@gmail.com>
Date: Sun, 26 May 2019 17:37:55 +0530
Subject: [PATCH 3/7] Import diffLine component

---
 src/renderer/components/diff/diffPreview.vue | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/renderer/components/diff/diffPreview.vue b/src/renderer/components/diff/diffPreview.vue
index 38d5f5eb..acfc00ab 100644
--- a/src/renderer/components/diff/diffPreview.vue
+++ b/src/renderer/components/diff/diffPreview.vue
@@ -1,8 +1,9 @@
 <template>
 	<VueScrollbar class="diff__preview">
 		<div>
-			<div v-for="(line, index) in preview" :key="index">
-				{{ line }}
+			<div v-for="(data, index) in preview" :key="index">
+				<diff-line
+				/>
 			</div>
 		</div>
 	</VueScrollbar>
@@ -10,11 +11,13 @@
 
 <script>
 import VueScrollbar from "vue2-scrollbar";
+import DiffLine from "./diffLine";
 
 export default {
 	name: "DiffPreview",
 	components: {
-		VueScrollbar
+		VueScrollbar,
+		DiffLine
 	},
 	props: {
 		preview: {

From baa6c7780ede773e9cb61808c5f79a1cb01c72a1 Mon Sep 17 00:00:00 2001
From: Yashu Mittal <mittalyashu77@gmail.com>
Date: Sun, 26 May 2019 17:38:52 +0530
Subject: [PATCH 4/7] Pass color, status & code props using methods

Parsing the data of code line in methods and further passing the data to DiffLine component
---
 src/renderer/components/diff/diffPreview.vue | 38 ++++++++++++++++++++
 1 file changed, 38 insertions(+)

diff --git a/src/renderer/components/diff/diffPreview.vue b/src/renderer/components/diff/diffPreview.vue
index acfc00ab..ea08c5f6 100644
--- a/src/renderer/components/diff/diffPreview.vue
+++ b/src/renderer/components/diff/diffPreview.vue
@@ -3,6 +3,9 @@
 		<div>
 			<div v-for="(data, index) in preview" :key="index">
 				<diff-line
+					:color="codeColor(data)"
+					:status="codeStatus(data)"
+					:code="codeLine(data)"
 				/>
 			</div>
 		</div>
@@ -24,6 +27,41 @@ export default {
 			type: Array,
 			required: true
 		}
+		codeStatus(code) {
+			if (code.charAt(0) !== ("@" || " ")) {
+				return code.charAt(0);
+			}
+		},
+		codeLine(code) {
+			if (code.charAt(0) === "@") return code;
+			return code.slice(1, code.length);
+		},
+		codeColor(code) {
+			switch (code.charAt(0)) {
+				case "@":
+					return {
+						code: "F1F8FF",
+						gutter: "DBEDFF",
+						border: "C8E1FF"
+					};
+				case "+":
+					return {
+						code: "E6FFED",
+						gutter: "CDFFD8",
+						border: "85E89D"
+					};
+				case "-":
+					return {
+						code: "FFEEF0",
+						gutter: "FFDCE0",
+						border: "FDAEB7"
+					};
+				case " ":
+					return {
+						border: "E1E4E8"
+					};
+			}
+		}
 	}
 };
 </script>

From eb8819a74c71f0b7adef8281530c8c3bac98b496 Mon Sep 17 00:00:00 2001
From: Yashu Mittal <mittalyashu77@gmail.com>
Date: Wed, 29 May 2019 15:25:44 +0530
Subject: [PATCH 5/7] Use status & code props

---
 src/renderer/components/diff/diffLine.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/renderer/components/diff/diffLine.vue b/src/renderer/components/diff/diffLine.vue
index 63702f58..a648fd06 100644
--- a/src/renderer/components/diff/diffLine.vue
+++ b/src/renderer/components/diff/diffLine.vue
@@ -14,8 +14,10 @@
 		</div>
 		<div :style="{ backgroundColor: '#' + color.code }" class="diff__code">
 			<div class="diff__code-status">
+				{{ status }}
 			</div>
 			<div class="diff__code-line">
+				{{ code }}
 			</div>
 		</div>
 	</div>

From a26dbd6073b4d0ee68af706a0aff6cfd6f591b02 Mon Sep 17 00:00:00 2001
From: Yashu Mittal <mittalyashu77@gmail.com>
Date: Wed, 29 May 2019 15:26:01 +0530
Subject: [PATCH 6/7] Change gutter to array type

---
 src/renderer/components/diff/diffLine.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/renderer/components/diff/diffLine.vue b/src/renderer/components/diff/diffLine.vue
index a648fd06..afd4d638 100644
--- a/src/renderer/components/diff/diffLine.vue
+++ b/src/renderer/components/diff/diffLine.vue
@@ -5,11 +5,13 @@
 				:style="{ borderRightColor: '#' + color.border }"
 				class="diff__gutter-left"
 			>
+				{{ gutter[0] }}
 			</div>
 			<div
 				:style="{ borderRightColor: '#' + color.border }"
 				class="diff__gutter-right"
 			>
+				{{ gutter[1] }}
 			</div>
 		</div>
 		<div :style="{ backgroundColor: '#' + color.code }" class="diff__code">
@@ -32,7 +34,7 @@ export default {
 			required: true
 		},
 		gutter: {
-			type: String,
+			type: Array,
 			required: true
 		},
 		status: {

From 6e7c2b62b19dee396b4344c0463baf3aa90c010d Mon Sep 17 00:00:00 2001
From: Yashu Mittal <mittalyashu77@gmail.com>
Date: Wed, 29 May 2019 15:28:11 +0530
Subject: [PATCH 7/7] Testing codeGutter method

---
 src/renderer/components/diff/diffPreview.vue | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/src/renderer/components/diff/diffPreview.vue b/src/renderer/components/diff/diffPreview.vue
index ea08c5f6..21aa8139 100644
--- a/src/renderer/components/diff/diffPreview.vue
+++ b/src/renderer/components/diff/diffPreview.vue
@@ -3,6 +3,7 @@
 		<div>
 			<div v-for="(data, index) in preview" :key="index">
 				<diff-line
+					:gutter="codeGutter(data, index)"
 					:color="codeColor(data)"
 					:status="codeStatus(data)"
 					:code="codeLine(data)"
@@ -27,6 +28,23 @@ export default {
 			type: Array,
 			required: true
 		}
+	},
+	data() {
+		return {
+			gutterChunk: []
+		};
+	},
+	methods: {
+		codeGutter(code, index) {
+			let gutterData = [];
+			if (code.charAt(0) === "@") {
+				let gutterString = code.split(/@@(.*?)@@/)[1].trim();
+				gutterData = gutterString.split(" ");
+				this.gutterChunk = gutterData;
+				return ["", ""];
+			}
+			return this.gutterChunk;
+		},
 		codeStatus(code) {
 			if (code.charAt(0) !== ("@" || " ")) {
 				return code.charAt(0);