Skip to content

Commit cc196e3

Browse files
technikhil314technikhil314
committed
feat(diff fashion): added ability to see inline/side by side diff
1 parent 52a0f39 commit cc196e3

File tree

6 files changed

+134
-29
lines changed

6 files changed

+134
-29
lines changed

‎components/buttons/copyLink.vue‎

Lines changed: 24 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,30 @@
11
<template>
2-
<div>
3-
<button
4-
id="copyLinkButton"
5-
type="button"
6-
class="inline-flex items-center justify-center gap-1 p-2 text-sm transition-transform transform rounded-md shadow justify-self-end focus-visible:ring-4 active:scale-y-75 hover:scale-105 hover:shadow-lg copy-uri-button"
7-
aria-label="Click here to copy url to clipboard"
8-
:class="{
9-
'bg-blue-500 text-white': !copied,
10-
'bg-green-500 text-gray-800': copied,
11-
}"
12-
@click="clickHandler"
2+
<button
3+
id="copyLinkButton"
4+
type="button"
5+
class="inline-flex items-center justify-center gap-1 p-2 text-sm transition-transform transform rounded-md shadow justify-self-end focus-visible:ring-4 active:scale-y-75 hover:scale-105 hover:shadow-lg copy-uri-button"
6+
aria-label="Click here to 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
14+
class="inline-flex items-center justify-center gap-1"
15+
aria-live="assertive"
16+
role="status"
1317
>
14-
<span
15-
class="inline-flex items-center justify-center gap-1"
16-
aria-live="assertive"
17-
role="status"
18-
>
19-
<span v-show="copied" class="inline" aria-hidden="true">
20-
<Copied />
21-
</span>
22-
<span v-show="copied" class="hidden md:inline-block">Copied</span>
23-
<span v-show="!copied" class="inline" aria-hidden="true">
24-
<Link />
25-
</span>
26-
<span v-show="!copied" class="hidden md:inline-block">Copy link</span>
18+
<span v-show="copied" class="inline" aria-hidden="true">
19+
<Copied />
2720
</span>
28-
</button>
29-
</div>
21+
<span v-show="copied" class="hidden md:inline-block">Copied</span>
22+
<span v-show="!copied" class="inline" aria-hidden="true">
23+
<Link />
24+
</span>
25+
<span v-show="!copied" class="hidden md:inline-block">Copy link</span>
26+
</span>
27+
</button>
3028
</template>
3129
<script lang="ts">
3230
import Vue from 'vue'

‎components/buttons/diffStyle.vue‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
<template>
2+
<button
3+
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 dark:border-gray-400 dark:text-white dark:bg-gray-800 align-center focus-visible:ring-4 active:scale-y-75"
4+
role="button"
5+
:aria-label="label"
6+
:title="label"
7+
@click="handleClick"
8+
>
9+
<span
10+
aria-live="assertive"
11+
role="status"
12+
:class="{
13+
'inline-block transition-transform bg-gray-100': true,
14+
'rotate-90': sideBySide,
15+
}"
16+
>
17+
<DiffStyle class="w-6 h-6" />
18+
</span>
19+
</button>
20+
</template>
21+
22+
<script lang="ts">
23+
import Vue from 'vue'
24+
import DiffStyle from '~/components/icons/diffStyle.vue'
25+
export default Vue.extend({
26+
components: { DiffStyle },
27+
props: {
28+
clickHandler: {
29+
type: Function,
30+
required: true,
31+
},
32+
},
33+
data() {
34+
return {
35+
sideBySide: true,
36+
}
37+
},
38+
computed: {
39+
label() {
40+
if (this.sideBySide) {
41+
return 'Switch unified diff layout'
42+
}
43+
return 'Switch to split diff layout'
44+
},
45+
},
46+
methods: {
47+
handleClick() {
48+
this.sideBySide = !this.sideBySide
49+
this.clickHandler(this.sideBySide === true)
50+
},
51+
},
52+
})
53+
</script>

‎components/icons/diffStyle.vue‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<template>
2+
<svg
3+
id="Layer_1"
4+
viewBox="0 0 122.742 122.881"
5+
enable-background="new 0 0 122.742 122.881"
6+
stroke="currentColor"
7+
:class="className"
8+
>
9+
<g>
10+
<path
11+
d="M5.709,23.974h47.709V5.691c0-1.581,0.643-3.015,1.679-4.05C56.108,0.629,57.492,0,59,0h58.163 c1.508,0,2.891,0.628,3.902,1.641c1.035,1.036,1.678,2.469,1.678,4.05v87.524c0,1.582-0.643,3.016-1.678,4.051 c-1.012,1.012-2.395,1.641-3.902,1.641H69.453v18.283c0,1.582-0.645,3.016-1.68,4.051c-1.012,1.012-2.395,1.641-3.902,1.641H5.709 c-1.509,0-2.891-0.629-3.903-1.641c-1.036-1.035-1.679-2.469-1.679-4.051V74.389C0.044,74.082,0,73.76,0,73.428 c0-0.334,0.044-0.656,0.127-0.963V29.666c0-1.582,0.643-3.016,1.679-4.051C2.818,24.603,4.2,23.974,5.709,23.974L5.709,23.974z M94.113,29.137c1.395-1.468,3.717-1.525,5.184-0.129c1.469,1.396,1.525,3.718,0.129,5.185L88.514,45.609h27.131V7.319H60.517 v16.655h3.354c1.508,0,2.891,0.628,3.902,1.641c1.035,1.035,1.68,2.469,1.68,4.051v61.922h46.191V52.963h-27.15l10.932,11.476 c1.396,1.469,1.34,3.789-0.129,5.186c-1.467,1.396-3.789,1.338-5.184-0.129L77.27,51.815c-1.34-1.407-1.354-3.634,0-5.057 L94.113,29.137L94.113,29.137z M22.943,58.333c-1.396-1.468-1.338-3.789,0.129-5.185c1.468-1.396,3.789-1.338,5.185,0.129 L45.1,70.898c1.354,1.424,1.34,3.65-0.001,5.057L28.257,93.637c-1.396,1.467-3.717,1.525-5.185,0.129 c-1.467-1.395-1.525-3.717-0.129-5.184l10.932-11.479H7.227v38.459h55.127v-84.27H7.227V69.75h26.628L22.943,58.333L22.943,58.333z"
12+
/>
13+
</g>
14+
</svg>
15+
</template>
16+
<script lang="ts">
17+
import Vue from 'vue'
18+
export default Vue.extend({
19+
props: {
20+
className: {
21+
type: String,
22+
required: false,
23+
},
24+
},
25+
})
26+
</script>

‎components/v2/diffActionBar.vue‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,10 @@
2020
<NextDiff :click-handler="goToNextDiff" />
2121
<PrevDiff :click-handler="goToPreviousDiff" />
2222
</div>
23-
<CopyLink :click-handler="copyUrlToClipboard" :copied="copied"></CopyLink>
23+
<div class="flex items-center gap-4">
24+
<DiffStyle :click-handler="toggleDiffFashion" />
25+
<CopyLink :click-handler="copyUrlToClipboard" :copied="copied"></CopyLink>
26+
</div>
2427
</section>
2528
</template>
2629

@@ -29,19 +32,25 @@ import Vue from 'vue'
2932
import PrevDiff from '../buttons/prevDiff.vue'
3033
import NextDiff from '../buttons/nextDiff.vue'
3134
import CopyLink from '../buttons/copyLink.vue'
35+
import DiffStyle from '../buttons/diffStyle.vue'
3236
import { putToClipboard } from '~/helpers/utils'
3337
import { DiffActionBarData } from '~/helpers/types'
3438
export default Vue.extend({
3539
components: {
3640
PrevDiff,
3741
NextDiff,
3842
CopyLink,
43+
DiffStyle,
3944
},
4045
props: {
4146
diffNavigator: {
4247
type: Object,
4348
required: true,
4449
},
50+
onDiffFashion: {
51+
type: Function,
52+
required: true,
53+
},
4554
},
4655
data(): DiffActionBarData {
4756
return {
@@ -88,6 +97,9 @@ export default Vue.extend({
8897
goToPreviousDiff() {
8998
this.diffNavigator.previous()
9099
},
100+
toggleDiffFashion(value: boolean) {
101+
this.onDiffFashion(value)
102+
},
91103
},
92104
})
93105
</script>

‎helpers/types.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,4 +45,5 @@ export interface v2DiffData {
4545
lhsLabel: string
4646
monacoDiffEditor: any
4747
diffNavigator: any
48+
isSideBySideDiff: boolean
4849
}

‎pages/v2/diff.vue‎

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,11 +11,19 @@
1111
/>
1212
<Navbar :show-back-button="true" />
1313
<main class="outline-none" tabindex="0">
14-
<DiffActionBar :diff-navigator="diffNavigator" />
14+
<DiffActionBar
15+
:diff-navigator="diffNavigator"
16+
:on-diff-fashion="toggleDiffFashion"
17+
/>
1518
<section
1619
class="flex flex-wrap items-stretch w-full gap-4 font-mono text-gray-800 dark:text-gray-50"
1720
>
18-
<div class="flex w-full gap-4 space-around">
21+
<div
22+
:class="{
23+
'flex w-full gap-4 space-around transition-opacity': true,
24+
'opacity-0': !isSideBySideDiff,
25+
}"
26+
>
1927
<p
2028
class="flex-grow-0 flex-shrink-0 w-1/2 text-lg font-bold text-center capitalize break-all "
2129
>
@@ -61,6 +69,7 @@ export default Vue.extend({
6169
lhsLabel: '',
6270
monacoDiffEditor: {},
6371
diffNavigator: {},
72+
isSideBySideDiff: true,
6473
}
6574
},
6675
head() {
@@ -127,6 +136,12 @@ export default Vue.extend({
127136
}
128137
})
129138
},
139+
methods: {
140+
toggleDiffFashion(value: boolean) {
141+
this.monacoDiffEditor?.updateOptions?.({ renderSideBySide: value })
142+
this.isSideBySideDiff = value
143+
},
144+
},
130145
})
131146
</script>
132147

0 commit comments

Comments
 (0)