Skip to content

Commit 75a5154

Browse files
technikhil314technikhil314
authored
Merge pull request #42 from technikhil314/develop
Develop
2 parents b40edb9 + 1991883 commit 75a5154

16 files changed

+424
-253
lines changed

‎components/buttons/copyLink.vue

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
<template>
2+
<div>
3+
<button
4+
type="button"
5+
class="inline-flex items-center justify-center gap-1 p-2 text-sm transition-transform transform rounded-md shadow outline-none justify-self-end focus:ring-4 active:scale-y-75 hover:scale-105 hover:shadow-lg copy-uri-button"
6+
aria-label="Copy url to clipboard"
7+
:class="{
8+
'bg-blue-500 text-white': !copied,
9+
'bg-green-500 text-gray-800': copied,
10+
}"
11+
@click="clickHandler"
12+
>
13+
<span v-show="copied" class="inline">
14+
<svg
15+
class="w-4 h-4"
16+
fill="none"
17+
stroke="currentColor"
18+
viewBox="0 0 24 24"
19+
xmlns="http://www.w3.org/2000/svg"
20+
>
21+
<path
22+
stroke-linecap="round"
23+
stroke-linejoin="round"
24+
stroke-width="2"
25+
d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"
26+
></path>
27+
</svg>
28+
</span>
29+
<span v-show="copied" class="hidden md:inline-block">Copied</span>
30+
<span v-show="!copied" class="inline">
31+
<svg
32+
class="w-4 h-4"
33+
fill="none"
34+
stroke="currentColor"
35+
viewBox="0 0 24 24"
36+
xmlns="http://www.w3.org/2000/svg"
37+
>
38+
<path
39+
stroke-linecap="round"
40+
stroke-linejoin="round"
41+
stroke-width="2"
42+
d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"
43+
></path>
44+
</svg>
45+
</span>
46+
<span v-show="!copied" class="hidden md:inline-block">Copy link</span>
47+
</button>
48+
</div>
49+
</template>
50+
<script>
51+
export default {
52+
props: {
53+
clickHandler: {
54+
type: Function,
55+
required: true,
56+
},
57+
copied: {
58+
type: Boolean,
59+
default: false,
60+
},
61+
},
62+
}
63+
</script>

‎components/buttons/nextDiff.vue

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<template>
2+
<div id="nextDiffSection" class="inline-flex items-center gap-1">
3+
<button
4+
id="nextDiff"
5+
class="inline-flex items-center justify-center px-1 py-1 text-sm text-gray-600 transition-transform transform bg-gray-300 border border-gray-800 rounded-sm outline-none dark:border-gray-400 dark:text-white dark:bg-gray-800 align-center focus:ring-4 active:scale-y-75 hover:scale-105 hover:shadow-lg"
6+
aria-label="Go to next diff"
7+
type="button"
8+
@click="clickHandler"
9+
>
10+
Next diff
11+
<svg
12+
class="w-4 h-4"
13+
fill="none"
14+
stroke="currentColor"
15+
viewBox="0 0 24 24"
16+
xmlns="http://www.w3.org/2000/svg"
17+
>
18+
<path
19+
stroke-linecap="round"
20+
stroke-linejoin="round"
21+
stroke-width="2"
22+
d="M16 17l-4 4m0 0l-4-4m4 4V3"
23+
></path>
24+
</svg>
25+
</button>
26+
</div>
27+
</template>
28+
<script>
29+
export default {
30+
props: {
31+
clickHandler: {
32+
type: Function,
33+
required: true,
34+
},
35+
},
36+
}
37+
</script>
38+
</template>

‎components/buttons/prevDiff.vue

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<template>
2+
<div id="prevDiffSection" class="inline-flex items-center gap-1">
3+
<button
4+
id="prevDiff"
5+
class="inline-flex items-center justify-center px-1 py-1 text-sm text-gray-600 transition-transform transform bg-gray-300 border border-gray-800 rounded-sm outline-none dark:border-gray-400 dark:text-white dark:bg-gray-800 align-center focus:ring-4 active:scale-y-75 hover:scale-105 hover:shadow-lg"
6+
aria-label="Go to previous diff"
7+
type="button"
8+
@click="clickHandler"
9+
>
10+
Previous diff
11+
<svg
12+
class="w-4 h-4"
13+
fill="none"
14+
stroke="currentColor"
15+
viewBox="0 0 24 24"
16+
xmlns="http://www.w3.org/2000/svg"
17+
>
18+
<path
19+
stroke-linecap="round"
20+
stroke-linejoin="round"
21+
stroke-width="2"
22+
d="M8 7l4-4m0 0l4 4m-4-4v18"
23+
></path>
24+
</svg>
25+
</button>
26+
</div>
27+
</template>
28+
<script>
29+
export default {
30+
props: {
31+
clickHandler: {
32+
type: Function,
33+
required: true,
34+
},
35+
},
36+
}
37+
</script>

‎components/skipToNavButton.vue renamed to ‎components/buttons/skipToNav.vue

File renamed without changes.

‎components/RTStickyCopyButton.vue renamed to ‎components/buttons/stickyCopy.vue

File renamed without changes.

‎components/buttons/toggleInSync.vue

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<template>
2+
<div id="toggleScrollInSyncSection" class="inline-flex items-center gap-1">
3+
<label
4+
for="toggleScrollInSync"
5+
class="text-gray-800 select-none dark:text-gray-50"
6+
>
7+
Scroll in sync
8+
</label>
9+
<input
10+
id="toggleScrollInSync"
11+
type="checkbox"
12+
checked
13+
class="form-checkbox"
14+
@click="clickHandler"
15+
/>
16+
</div>
17+
</template>
18+
<script>
19+
export default {
20+
props: {
21+
clickHandler: {
22+
type: Function,
23+
required: true,
24+
},
25+
},
26+
}
27+
</script>

‎components/diffActionBar.vue

Lines changed: 26 additions & 127 deletions
Original file line numberDiff line numberDiff line change
@@ -22,128 +22,22 @@
2222
"
2323
>
2424
<div class="flex gap-4">
25-
<div
26-
id="toggleScrollInSyncSection"
27-
class="inline-flex items-center gap-1"
28-
>
29-
<label
30-
for="toggleScrollInSync"
31-
class="text-gray-800 select-none dark:text-gray-50"
32-
>
33-
Scroll in sync
34-
</label>
35-
<input
36-
id="toggleScrollInSync"
37-
type="checkbox"
38-
checked
39-
class="form-checkbox"
40-
@click="toggleInSyncScroll"
41-
/>
42-
</div>
43-
<div id="nextDiffSection" class="inline-flex items-center gap-1">
44-
<button
45-
id="nextDiff"
46-
class="inline-flex items-center justify-center px-1 py-1 text-sm text-gray-600 transition-transform transform bg-gray-300 border border-gray-800 rounded-sm outline-none dark:border-gray-400 dark:text-white dark:bg-gray-800 align-center focus:ring-4 active:scale-y-75 hover:scale-105 hover:shadow-lg"
47-
aria-label="Go to next diff"
48-
type="button"
49-
@click="goToNextDiff"
50-
>
51-
Next diff
52-
<svg
53-
class="w-4 h-4"
54-
fill="none"
55-
stroke="currentColor"
56-
viewBox="0 0 24 24"
57-
xmlns="http://www.w3.org/2000/svg"
58-
>
59-
<path
60-
stroke-linecap="round"
61-
stroke-linejoin="round"
62-
stroke-width="2"
63-
d="M16 17l-4 4m0 0l-4-4m4 4V3"
64-
></path>
65-
</svg>
66-
</button>
67-
</div>
68-
<div id="prevDiffSection" class="inline-flex items-center gap-1">
69-
<button
70-
id="prevDiff"
71-
class="inline-flex items-center justify-center px-1 py-1 text-sm text-gray-600 transition-transform transform bg-gray-300 border border-gray-800 rounded-sm outline-none dark:border-gray-400 dark:text-white dark:bg-gray-800 align-center focus:ring-4 active:scale-y-75 hover:scale-105 hover:shadow-lg"
72-
aria-label="Go to previous diff"
73-
type="button"
74-
@click="goToPreviousDiff"
75-
>
76-
Previous diff
77-
<svg
78-
class="w-4 h-4"
79-
fill="none"
80-
stroke="currentColor"
81-
viewBox="0 0 24 24"
82-
xmlns="http://www.w3.org/2000/svg"
83-
>
84-
<path
85-
stroke-linecap="round"
86-
stroke-linejoin="round"
87-
stroke-width="2"
88-
d="M8 7l4-4m0 0l4 4m-4-4v18"
89-
></path>
90-
</svg>
91-
</button>
92-
</div>
93-
</div>
94-
<div>
95-
<button
96-
type="button"
97-
class="inline-flex items-center justify-center gap-1 p-2 text-sm transition-transform transform rounded-md shadow outline-none justify-self-end focus:ring-4 active:scale-y-75 hover:scale-105 hover:shadow-lg copy-uri-button"
98-
aria-label="Copy url to clipboard"
99-
:class="{
100-
'bg-blue-500 text-white': !copied,
101-
'bg-green-500 text-gray-800': copied,
102-
}"
103-
@click="copyUrlToClipboard"
104-
>
105-
<span v-show="copied" class="inline">
106-
<svg
107-
class="w-4 h-4"
108-
fill="none"
109-
stroke="currentColor"
110-
viewBox="0 0 24 24"
111-
xmlns="http://www.w3.org/2000/svg"
112-
>
113-
<path
114-
stroke-linecap="round"
115-
stroke-linejoin="round"
116-
stroke-width="2"
117-
d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"
118-
></path>
119-
</svg>
120-
</span>
121-
<span v-show="copied" class="hidden md:inline-block">Copied</span>
122-
<span v-show="!copied" class="inline">
123-
<svg
124-
class="w-4 h-4"
125-
fill="none"
126-
stroke="currentColor"
127-
viewBox="0 0 24 24"
128-
xmlns="http://www.w3.org/2000/svg"
129-
>
130-
<path
131-
stroke-linecap="round"
132-
stroke-linejoin="round"
133-
stroke-width="2"
134-
d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"
135-
></path>
136-
</svg>
137-
</span>
138-
<span v-show="!copied" class="hidden md:inline-block">Copy link</span>
139-
</button>
25+
<ToggleInSync :click-handler="toggleInSyncScroll" />
26+
<NextDiff :click-handler="goToNextDiff" />
27+
<PrevDiff :click-handler="goToPreviousDiff" />
14028
</div>
29+
<CopyLink :click-handler="copyUrlToClipboard" :copied="copied"></CopyLink>
14130
</section>
14231
</template>
14332

14433
<script>
34+
import PrevDiff from './buttons/prevDiff.vue'
35+
import ToggleInSync from './buttons/toggleInSync.vue'
36+
import NextDiff from './buttons/nextDiff.vue'
37+
import CopyLink from './buttons/copyLink.vue'
14538
import { putToClipboard } from '~/helpers/utils'
14639
export default {
40+
components: { PrevDiff, NextDiff, ToggleInSync, CopyLink },
14741
data() {
14842
return {
14943
copied: this.copied,
@@ -210,12 +104,10 @@ export default {
210104
)
211105
const comparatorCurrentNode = this.comparator.children[currentNodeIndex]
212106
const comparatorNextNode = this.comparator.children[nextNodeIndex]
213-
currentNode.querySelector('p').classList.remove('selected')
214-
comparatorCurrentNode.querySelector('p').classList.remove('selected')
215-
nextNode.querySelector('p').classList.add('selected')
216-
comparatorNextNode.querySelector('p').classList.add('selected')
217-
nextNode.scrollIntoView()
218-
comparatorNextNode.scrollIntoView()
107+
this.toggleDiffHunkAndScrollIntoView(
108+
[currentNode, comparatorCurrentNode],
109+
[nextNode, comparatorNextNode]
110+
)
219111
}
220112
},
221113
goToPreviousDiff() {
@@ -232,14 +124,21 @@ export default {
232124
)
233125
const comparatorCurrentNode = this.comparator.children[currentNodeIndex]
234126
const comparatorPrevNode = this.comparator.children[prevNodeIndex]
235-
currentNode.querySelector('p').classList.remove('selected')
236-
comparatorCurrentNode.querySelector('p').classList.remove('selected')
237-
prevNode.querySelector('p').classList.add('selected')
238-
comparatorPrevNode.querySelector('p').classList.add('selected')
239-
prevNode.scrollIntoView()
240-
comparatorPrevNode.scrollIntoView()
127+
this.toggleDiffHunkAndScrollIntoView(
128+
[currentNode, comparatorCurrentNode],
129+
[prevNode, comparatorPrevNode]
130+
)
241131
}
242132
},
133+
toggleDiffHunkAndScrollIntoView(unselectedNodes, selectedNodes) {
134+
unselectedNodes.forEach((element) => {
135+
element.querySelector('p').classList.remove('selected')
136+
})
137+
selectedNodes.forEach((element) => {
138+
element.querySelector('p').classList.add('selected')
139+
element.scrollIntoView()
140+
})
141+
},
243142
},
244143
}
245144
</script>

‎components/navbar.vue

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
<div class="container flex items-center py-4 m-auto">
66
<div
77
v-if="showBackButton"
8+
id="backToDataLink"
89
class="hidden mr-4 md:block hover:scale-110 filter hover:drop-shadow-md"
910
>
1011
<NuxtLink to="/">
@@ -169,7 +170,7 @@ export default {
169170
}
170171
},
171172
mounted() {
172-
if (this.$isDarkMode) {
173+
if (this.$cookies.isDarkMode) {
173174
this.toggleDarkMode(null, false)
174175
}
175176
document.documentElement.classList.remove('hidden')

‎components/singleDiff.vue

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
'overflow-y-auto max-h-screen--nav': !isSrollInSyncEnabled,
1111
}"
1212
>
13-
<RTStickyCopyButton
13+
<StickyCopy
1414
:aria-label="'Copy the content to clipboard'"
1515
:click-handler="copyTextToClipboard"
1616
/>
@@ -29,8 +29,10 @@
2929
</template>
3030

3131
<script>
32+
import StickyCopy from './buttons/stickyCopy.vue'
3233
import { putToClipboard } from '~/helpers/utils'
3334
export default {
35+
components: { StickyCopy },
3436
props: {
3537
diff: {
3638
type: Array,

0 commit comments

Comments
 (0)