Skip to content

Commit

Permalink
Merge pull request #181 from technikhil314/develop
Browse files Browse the repository at this point in the history
footer on root diff page, diff view inline/split
  • Loading branch information
technikhil314 authored Sep 26, 2024
2 parents a0de7ef + cc196e3 commit a0b8025
Show file tree
Hide file tree
Showing 22 changed files with 281 additions and 450 deletions.
10 changes: 10 additions & 0 deletions .husky/prepare-commit-msg
Original file line number Diff line number Diff line change
@@ -1,4 +1,14 @@
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

if [ "$2" = "message" ]; then
echo "Skipping prepare-commit-msg hook due to message."
exit 0
fi

if [ "$2" = "commit" ]; then
echo "Skipping prepare-commit-msg hook due to amend."
exit 0
fi

exec </dev/tty && npx cz --hook || true
66 changes: 24 additions & 42 deletions components/buttons/copyLink.vue
Original file line number Diff line number Diff line change
@@ -1,48 +1,30 @@
<template>
<div>
<button
id="copyLinkButton"
type="button"
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
"
aria-label="Click here to copy url to clipboard"
:class="{
'bg-blue-500 text-white': !copied,
'bg-green-500 text-gray-800': copied,
}"
@click="clickHandler"
<button
id="copyLinkButton"
type="button"
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"
aria-label="Click here to copy url to clipboard"
:class="{
'bg-blue-500 text-white': !copied,
'bg-green-500 text-gray-800': copied,
}"
@click="clickHandler"
>
<span
class="inline-flex items-center justify-center gap-1"
aria-live="assertive"
role="status"
>
<span
class="inline-flex items-center justify-center gap-1"
aria-live="assertive"
role="status"
>
<span v-show="copied" class="inline" aria-hidden="true">
<Copied />
</span>
<span v-show="copied" class="hidden md:inline-block">Copied</span>
<span v-show="!copied" class="inline" aria-hidden="true">
<Link />
</span>
<span v-show="!copied" class="hidden md:inline-block">Copy link</span>
<span v-show="copied" class="inline" aria-hidden="true">
<Copied />
</span>
</button>
</div>
<span v-show="copied" class="hidden md:inline-block">Copied</span>
<span v-show="!copied" class="inline" aria-hidden="true">
<Link />
</span>
<span v-show="!copied" class="hidden md:inline-block">Copy link</span>
</span>
</button>
</template>
<script lang="ts">
import Vue from 'vue'
Expand Down
53 changes: 53 additions & 0 deletions components/buttons/diffStyle.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
<template>
<button
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"
role="button"
:aria-label="label"
:title="label"
@click="handleClick"
>
<span
aria-live="assertive"
role="status"
:class="{
'inline-block transition-transform bg-gray-100': true,
'rotate-90': sideBySide,
}"
>
<DiffStyle class="w-6 h-6" />
</span>
</button>
</template>

<script lang="ts">
import Vue from 'vue'
import DiffStyle from '~/components/icons/diffStyle.vue'
export default Vue.extend({
components: { DiffStyle },
props: {
clickHandler: {
type: Function,
required: true,
},
},
data() {
return {
sideBySide: true,
}
},
computed: {
label() {
if (this.sideBySide) {
return 'Switch unified diff layout'
}
return 'Switch to split diff layout'
},
},
methods: {
handleClick() {
this.sideBySide = !this.sideBySide
this.clickHandler(this.sideBySide === true)
},
},
})
</script>
19 changes: 1 addition & 18 deletions components/buttons/nextDiff.vue
Original file line number Diff line number Diff line change
Expand Up @@ -2,24 +2,7 @@
<div id="nextDiffSection" class="inline-flex items-center gap-1">
<button
id="nextDiff"
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
"
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"
aria-label="Go to next diff"
type="button"
@click="clickHandler"
Expand Down
19 changes: 1 addition & 18 deletions components/buttons/prevDiff.vue
Original file line number Diff line number Diff line change
Expand Up @@ -2,24 +2,7 @@
<div id="prevDiffSection" class="inline-flex items-center gap-1">
<button
id="prevDiff"
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
"
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"
aria-label="Go to previous diff"
type="button"
@click="clickHandler"
Expand Down
15 changes: 1 addition & 14 deletions components/buttons/stickyCopy.vue
Original file line number Diff line number Diff line change
@@ -1,20 +1,7 @@
<template>
<div class="sticky top-0 text-right z-1">
<button
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
"
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"
:class="{
'bg-gray-100 dark:bg-gray-600': !copied,
'bg-green-500': copied,
Expand Down
4 changes: 2 additions & 2 deletions components/buttons/toggleInSync.vue
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
<template>
<div id="toggleScrollInSyncSection" class="inline-flex items-center gap-1">
<label
id="toggleScrollInSyncLabel"
for="toggleScrollInSync"
class="text-gray-800 select-none dark:text-gray-50"
id="toggleScrollInSyncLabel"
aria-controls="toggleScrollInSync"
>
Scroll in sync
</label>
<input
aria-labelledby="toggleScrollInSyncLabel"
id="toggleScrollInSync"
aria-labelledby="toggleScrollInSyncLabel"
type="checkbox"
:checked="isEnabled"
class="form-checkbox"
Expand Down
20 changes: 1 addition & 19 deletions components/buttons/toggleInlineDiffView.vue
Original file line number Diff line number Diff line change
Expand Up @@ -3,25 +3,7 @@
<button
id="toggleInlineDiffView"
type="button"
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
"
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"
@click="toggleInlineDiffView"
>
<svg
Expand Down
21 changes: 20 additions & 1 deletion components/diffActionBar.vue
Original file line number Diff line number Diff line change
@@ -1,6 +1,25 @@
<template>
<section
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"
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
"
>
<div class="flex gap-4">
<ToggleInSync />
Expand Down
11 changes: 1 addition & 10 deletions components/footer.vue
Original file line number Diff line number Diff line change
@@ -1,15 +1,6 @@
<template>
<footer
class="
sticky
py-4
mt-4
text-center text-gray-800
top-full
bg-inherit
dark:text-gray-50
min-h-max
"
class="sticky py-4 mt-4 text-center text-gray-800 top-full bg-inherit dark:text-gray-50 min-h-max"
>
Made with &hearts; using
<a
Expand Down
26 changes: 26 additions & 0 deletions components/icons/diffStyle.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
<template>
<svg
id="Layer_1"
viewBox="0 0 122.742 122.881"
enable-background="new 0 0 122.742 122.881"
stroke="currentColor"
:class="className"
>
<g>
<path
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"
/>
</g>
</svg>
</template>
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
props: {
className: {

Check warning on line 20 in components/icons/diffStyle.vue

View workflow job for this annotation

GitHub Actions / ci (ubuntu-latest, 20)

Prop 'className' requires default value to be set
type: String,
required: false,
},
},
})
</script>
28 changes: 2 additions & 26 deletions components/navbar.vue
Original file line number Diff line number Diff line change
@@ -1,17 +1,6 @@
<template>
<nav
class="
sticky
top-0
left-0
right-0
z-10
text-gray-800
shadow-lg
dark:shadow-dark
bg-gray-50
dark:bg-gray-900 dark:text-gray-50
"
class="sticky top-0 left-0 right-0 z-10 text-gray-800 shadow-lg dark:shadow-dark bg-gray-50 dark:bg-gray-900 dark:text-gray-50"
>
<div class="container flex items-center py-4 m-auto">
<div
Expand Down Expand Up @@ -46,20 +35,7 @@
<slot name="right" />
<button
type="button"
class="
inline-flex
items-center
justify-center
ml-4
bg-transparent
border-2 border-gray-700
rounded-full
shadow-lg
w-9
h-9
active:scale-y-75
hover:scale-105 hover:shadow-lg
"
class="inline-flex items-center justify-center ml-4 bg-transparent border-2 border-gray-700 rounded-full shadow-lg w-9 h-9 active:scale-y-75 hover:scale-105 hover:shadow-lg"
aria-label="Toggle Dark Mode"
@click="toggleDarkMode"
>
Expand Down
2 changes: 1 addition & 1 deletion components/singleDiff.vue
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
</p>
<div
:id="id"
class="relative flex-1 px-4 py-2 border-2 rounded-md dark:border-gray-500 line-number-gutter min-h-80"
class="relative flex-1 px-4 py-2 border-2 rounded-md dark:border-gray-500 line-number-gutter min-h-80"
:class="{
'overflow-y-auto max-h-screen--nav': !isSrollInSyncEnabled,
}"
Expand Down
Loading

0 comments on commit a0b8025

Please sign in to comment.