Skip to content

Commit a0b8025

Browse files
technikhil314technikhil314
authored
Merge pull request #181 from technikhil314/develop
footer on root diff page, diff view inline/split
2 parents a0de7ef + cc196e3 commit a0b8025

22 files changed

+281
-450
lines changed

‎.husky/prepare-commit-msg

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,14 @@
11
#!/bin/sh
22
. "$(dirname "$0")/_/husky.sh"
33

4+
if [ "$2" = "message" ]; then
5+
echo "Skipping prepare-commit-msg hook due to message."
6+
exit 0
7+
fi
8+
9+
if [ "$2" = "commit" ]; then
10+
echo "Skipping prepare-commit-msg hook due to amend."
11+
exit 0
12+
fi
13+
414
exec </dev/tty && npx cz --hook || true

‎components/buttons/copyLink.vue

Lines changed: 24 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,30 @@
11
<template>
2-
<div>
3-
<button
4-
id="copyLinkButton"
5-
type="button"
6-
class="
7-
inline-flex
8-
items-center
9-
justify-center
10-
gap-1
11-
p-2
12-
text-sm
13-
transition-transform
14-
transform
15-
rounded-md
16-
shadow
17-
justify-self-end
18-
focus-visible:ring-4
19-
active:scale-y-75
20-
hover:scale-105 hover:shadow-lg
21-
copy-uri-button
22-
"
23-
aria-label="Click here to copy url to clipboard"
24-
:class="{
25-
'bg-blue-500 text-white': !copied,
26-
'bg-green-500 text-gray-800': copied,
27-
}"
28-
@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"
2917
>
30-
<span
31-
class="inline-flex items-center justify-center gap-1"
32-
aria-live="assertive"
33-
role="status"
34-
>
35-
<span v-show="copied" class="inline" aria-hidden="true">
36-
<Copied />
37-
</span>
38-
<span v-show="copied" class="hidden md:inline-block">Copied</span>
39-
<span v-show="!copied" class="inline" aria-hidden="true">
40-
<Link />
41-
</span>
42-
<span v-show="!copied" class="hidden md:inline-block">Copy link</span>
18+
<span v-show="copied" class="inline" aria-hidden="true">
19+
<Copied />
4320
</span>
44-
</button>
45-
</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>
4628
</template>
4729
<script lang="ts">
4830
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/buttons/nextDiff.vue

Lines changed: 1 addition & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -2,24 +2,7 @@
22
<div id="nextDiffSection" class="inline-flex items-center gap-1">
33
<button
44
id="nextDiff"
5-
class="
6-
inline-flex
7-
items-center
8-
justify-center
9-
px-1
10-
py-1
11-
text-sm text-gray-600
12-
transition-transform
13-
transform
14-
bg-gray-300
15-
border border-gray-800
16-
rounded-sm
17-
dark:border-gray-400 dark:text-white dark:bg-gray-800
18-
align-center
19-
focus-visible:ring-4
20-
active:scale-y-75
21-
hover:scale-105 hover:shadow-lg
22-
"
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 dark:border-gray-400 dark:text-white dark:bg-gray-800 align-center focus-visible:ring-4 active:scale-y-75 hover:scale-105 hover:shadow-lg"
236
aria-label="Go to next diff"
247
type="button"
258
@click="clickHandler"

‎components/buttons/prevDiff.vue

Lines changed: 1 addition & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -2,24 +2,7 @@
22
<div id="prevDiffSection" class="inline-flex items-center gap-1">
33
<button
44
id="prevDiff"
5-
class="
6-
inline-flex
7-
items-center
8-
justify-center
9-
px-1
10-
py-1
11-
text-sm text-gray-600
12-
transition-transform
13-
transform
14-
bg-gray-300
15-
border border-gray-800
16-
rounded-sm
17-
focus-visible:ring-4
18-
dark:border-gray-400 dark:text-white dark:bg-gray-800
19-
align-center
20-
active:scale-y-75
21-
hover:scale-105 hover:shadow-lg
22-
"
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 focus-visible:ring-4 dark:border-gray-400 dark:text-white dark:bg-gray-800 align-center active:scale-y-75 hover:scale-105 hover:shadow-lg"
236
aria-label="Go to previous diff"
247
type="button"
258
@click="clickHandler"

‎components/buttons/stickyCopy.vue

Lines changed: 1 addition & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,7 @@
11
<template>
22
<div class="sticky top-0 text-right z-1">
33
<button
4-
class="
5-
absolute
6-
top-0
7-
right-0
8-
p-2
9-
text-gray-800
10-
transition-all
11-
transform
12-
rounded-full
13-
shadow
14-
dark:text-gray-50
15-
z-1
16-
hover:shadow-lg hover:scale-110 hover:rotate-12
17-
"
4+
class="absolute top-0 right-0 p-2 text-gray-800 transition-all transform rounded-full shadow dark:text-gray-50 z-1 hover:shadow-lg hover:scale-110 hover:rotate-12"
185
:class="{
196
'bg-gray-100 dark:bg-gray-600': !copied,
207
'bg-green-500': copied,

‎components/buttons/toggleInSync.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
<template>
22
<div id="toggleScrollInSyncSection" class="inline-flex items-center gap-1">
33
<label
4+
id="toggleScrollInSyncLabel"
45
for="toggleScrollInSync"
56
class="text-gray-800 select-none dark:text-gray-50"
6-
id="toggleScrollInSyncLabel"
77
aria-controls="toggleScrollInSync"
88
>
99
Scroll in sync
1010
</label>
1111
<input
12-
aria-labelledby="toggleScrollInSyncLabel"
1312
id="toggleScrollInSync"
13+
aria-labelledby="toggleScrollInSyncLabel"
1414
type="checkbox"
1515
:checked="isEnabled"
1616
class="form-checkbox"

‎components/buttons/toggleInlineDiffView.vue

Lines changed: 1 addition & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -3,25 +3,7 @@
33
<button
44
id="toggleInlineDiffView"
55
type="button"
6-
class="
7-
inline-flex
8-
items-center
9-
justify-center
10-
px-1
11-
py-1
12-
text-sm text-gray-600
13-
transition-transform
14-
transform
15-
bg-gray-300
16-
border border-gray-800
17-
rounded-sm
18-
outline-none
19-
dark:border-gray-400 dark:text-white dark:bg-gray-800
20-
align-center
21-
focus:ring-4
22-
active:scale-y-75
23-
hover:scale-105 hover:shadow-lg
24-
"
6+
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"
257
@click="toggleInlineDiffView"
268
>
279
<svg

‎components/diffActionBar.vue

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,25 @@
11
<template>
22
<section
3-
class="flex items-center justify-between px-4 py-2 mb-4 sticky top-[70px] dark:bg-gray-700 bg-gray-300 dark:bg-opacity-50 bg-opacity-50 backdrop-blur-sm rounded-md shadow-lg border border-gray-500 w-full z-10"
3+
class="
4+
flex
5+
items-center
6+
justify-between
7+
px-4
8+
py-2
9+
mb-4
10+
sticky
11+
top-[70px]
12+
dark:bg-gray-700
13+
bg-gray-300
14+
dark:bg-opacity-50
15+
bg-opacity-50
16+
backdrop-blur-sm
17+
rounded-md
18+
shadow-lg
19+
border border-gray-500
20+
w-full
21+
z-10
22+
"
423
>
524
<div class="flex gap-4">
625
<ToggleInSync />

‎components/footer.vue

Lines changed: 1 addition & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,6 @@
11
<template>
22
<footer
3-
class="
4-
sticky
5-
py-4
6-
mt-4
7-
text-center text-gray-800
8-
top-full
9-
bg-inherit
10-
dark:text-gray-50
11-
min-h-max
12-
"
3+
class="sticky py-4 mt-4 text-center text-gray-800 top-full bg-inherit dark:text-gray-50 min-h-max"
134
>
145
Made with &hearts; using
156
<a

0 commit comments

Comments
 (0)