Skip to content

Commit 6dc8382

Browse files
technikhil314technikhil314
authored
Merge pull request #179 from technikhil314/develop
Beautify, diff page title, clear button
2 parents cc53c22 + 2765548 commit 6dc8382

File tree

2 files changed

+103
-6
lines changed

2 files changed

+103
-6
lines changed

‎pages/v2/diff.vue

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,8 +30,8 @@
3030
</template>
3131

3232
<script lang="ts">
33-
import pako from 'pako'
3433
import loader from '@monaco-editor/loader'
34+
import pako from 'pako'
3535
import Vue from 'vue'
3636
import {
3737
getMonacoEditorDefaultOptions,
@@ -53,6 +53,11 @@ export default Vue.extend({
5353
diffNavigator: {},
5454
}
5555
},
56+
head() {
57+
return {
58+
title: 'Diff Viewer - Diff view',
59+
}
60+
},
5661
computed: {
5762
onThemeChange() {
5863
const theme = this.$store.state.theme.darkMode ? 'vs-dark' : 'light'
@@ -103,6 +108,12 @@ export default Vue.extend({
103108
}
104109
)
105110
}
111+
this.$store.commit('data/set', {
112+
lhs: this.lhs,
113+
rhs: this.rhs,
114+
lhsLabel: this.lhsLabel,
115+
rhsLabel: this.rhsLabel,
116+
})
106117
}
107118
})
108119
},

‎pages/v2/index.vue

Lines changed: 91 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
n
21
<template>
32
<div class="page-contents">
43
<Navbar />
@@ -17,7 +16,7 @@ n
1716
</section>
1817
<form class="flex flex-col w-full gap-4" @submit="checkForm">
1918
<section class="flex w-full gap-4 editor-wrapper">
20-
<div class="flex flex-col w-1/2 gap-4">
19+
<div class="relative flex flex-col w-1/2 gap-4">
2120
<label for="lhsLabel" class="relative">
2221
<input
2322
id="lhsLabel"
@@ -34,8 +33,30 @@ n
3433
name="lhs"
3534
class="h-screen p-2 border border-gray-600 rounded-md editor"
3635
></div>
36+
<button
37+
aria-label="Beautify entered text"
38+
type="button"
39+
title="Beautify"
40+
class="absolute p-2 transition-all rounded-sm top-16 right-3 aspect-square dark:hover:bg-slate-600 dark:bg-slate-600/50 hover:bg-slate-300 bg-gray-300/50"
41+
@click="
42+
lhsEditor.trigger('editor', 'editor.action.formatDocument')
43+
"
44+
>
45+
<svg
46+
viewBox="0 0 15 15"
47+
fill="none"
48+
xmlns="http://www.w3.org/2000/svg"
49+
width="15"
50+
height="15"
51+
>
52+
<path
53+
d="M0 7.5h2m13 0h-2m-8 7H3.5a2 2 0 01-2-2v-10a2 2 0 012-2H5m5 14h1.5a2 2 0 002-2v-10a2 2 0 00-2-2H10"
54+
stroke="currentColor"
55+
></path>
56+
</svg>
57+
</button>
3758
</div>
38-
<div class="flex flex-col w-1/2 gap-4">
59+
<div class="relative flex flex-col w-1/2 gap-4">
3960
<label for="lhsLabel" class="relative">
4061
<input
4162
id="rhsLabel"
@@ -52,15 +73,76 @@ n
5273
name="rhs"
5374
class="h-screen p-2 border border-gray-600 rounded-md editor"
5475
></div>
76+
<button
77+
aria-label="Beautify entered text"
78+
type="button"
79+
title="Beautify"
80+
class="absolute p-2 transition-all rounded-sm top-16 right-3 aspect-square dark:hover:bg-slate-600 dark:bg-slate-600/50 hover:bg-slate-300 bg-gray-300/50"
81+
@click="
82+
rhsEditor.trigger('editor', 'editor.action.formatDocument')
83+
"
84+
>
85+
<svg
86+
viewBox="0 0 15 15"
87+
fill="none"
88+
xmlns="http://www.w3.org/2000/svg"
89+
width="15"
90+
height="15"
91+
>
92+
<path
93+
d="M0 7.5h2m13 0h-2m-8 7H3.5a2 2 0 01-2-2v-10a2 2 0 012-2H5m5 14h1.5a2 2 0 002-2v-10a2 2 0 00-2-2H10"
94+
stroke="currentColor"
95+
></path>
96+
</svg>
97+
</button>
5598
</div>
5699
</section>
57-
<div class="self-end flex-grow-0 w-full mt-4 text-center">
100+
<div
101+
class="flex self-end justify-center flex-grow-0 w-full gap-4 mt-4 text-center "
102+
>
58103
<button
59104
id="submitButton"
60-
class="inline-flex items-center justify-center w-48 px-4 py-2 transition-transform transform bg-blue-600 rounded-md shadow-lg outline-none text-gray-50 focus:ring-4 active:scale-y-75"
105+
class="inline-flex items-center justify-center w-48 gap-4 px-4 py-2 transition-transform transform bg-blue-600 rounded-md shadow-lg outline-none text-gray-50 focus:ring-4 active:scale-y-75"
61106
aria-label="Click here to compare the inputted text blocks"
62107
>
63108
Compare
109+
<span class="w-4 aspect-square">
110+
<svg
111+
viewBox="0 0 15 15"
112+
fill="none"
113+
xmlns="http://www.w3.org/2000/svg"
114+
width="15"
115+
height="15"
116+
>
117+
<path
118+
d="M13.5 7.5l-4-4m4 4l-4 4m4-4H1"
119+
stroke="currentColor"
120+
></path>
121+
</svg>
122+
</span>
123+
</button>
124+
<button
125+
id="submitButton"
126+
class="inline-flex items-center justify-center w-48 gap-4 px-4 py-2 text-gray-800 transition-transform transform bg-yellow-300 rounded-md shadow-lg outline-none focus:ring-4 active:scale-y-75"
127+
aria-label="Click here to clear all the inputs"
128+
type="button"
129+
@click="clear"
130+
>
131+
<span class="w-4 aspect-square">
132+
<svg
133+
viewBox="0 0 15 15"
134+
fill="none"
135+
xmlns="http://www.w3.org/2000/svg"
136+
width="15"
137+
height="15"
138+
>
139+
<path
140+
d="M4.5 3V1.5a1 1 0 011-1h4a1 1 0 011 1V3M0 3.5h15m-13.5 0v10a1 1 0 001 1h10a1 1 0 001-1v-10M7.5 7v5m-3-3v3m6-3v3"
141+
stroke="currentColor"
142+
></path>
143+
</svg>
144+
</span>
145+
Clear
64146
</button>
65147
</div>
66148
</form>
@@ -191,6 +273,10 @@ export default Vue.extend({
191273
theme: 'error',
192274
})
193275
},
276+
clear() {
277+
this.lhsEditor.getModel().setValue('')
278+
this.rhsEditor.getModel().setValue('')
279+
},
194280
},
195281
})
196282
</script>

0 commit comments

Comments
 (0)