Skip to content

Commit

Permalink
fix(ui): several minor fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
@technikhil314
technikhil314 committed May 30, 2022
1 parent 2ef2ae7 commit 955c30d
Show file tree
Hide file tree
Showing 2 changed files with 116 additions and 69 deletions.
138 changes: 97 additions & 41 deletions pages/diff.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,21 @@
<template #right>
<button
type="button"
class="inline-flex justify-center px-4 py-2 transition-transform transform rounded-md shadow outline-none copy-uri-button align-center focus:ring-4 active:scale-y-75"
class="
inline-flex
justify-center
px-4
py-2
transition-transform
transform
rounded-md
shadow
outline-none
copy-uri-button
align-center
focus:ring-4
active:scale-y-75
"
:class="{
'bg-blue-500 text-white': !copied,
'bg-green-500 text-gray-800': copied,
Expand Down Expand Up @@ -49,38 +63,82 @@
</template>
</Navbar>
<main>
<div
class="flex items-stretch w-full gap-4 font-mono text-gray-800 dark:text-gray-50"
<section
class="
flex
items-stretch
w-full
gap-4
font-mono
text-gray-800
dark:text-gray-50
"
>
<div
class="relative flex-1 px-4 py-2 overflow-y-auto border-2 rounded-md dark:border-gray-500 max-h-screen--nav line-number-gutter min-h-80"
>
<RTStickyCopyButton :click-handler="copyTextToClipboard" />
<div class="flex flex-col w-1/2 gap-2">
<p class="flex-grow-0 text-lg">{{ lhsLabel }}</p>
<div
v-for="(lineDiff, index) in lhsDiff"
:key="index"
:class="{
'bg-red-100 dark:bg-yellow-700': lineDiff.includes('isModified'),
}"
class="
relative
flex-1
px-4
py-2
overflow-y-auto
border-2
rounded-md
dark:border-gray-500
max-h-screen--nav
line-number-gutter
min-h-80
"
>
<p class="break-all whitespace-pre-wrap" v-html="lineDiff"></p>
<RTStickyCopyButton :click-handler="copyTextToClipboard" />
<div
v-for="(lineDiff, index) in lhsDiff"
:key="index"
:class="{
'bg-red-200 dark:bg-red-800': lineDiff.includes('isModified'),
}"
>
<p class="break-all whitespace-pre-wrap">
<span v-html="lineDiff"></span>
</p>
</div>
</div>
</div>
<div
class="relative flex-1 px-4 py-2 overflow-y-auto border-2 rounded-md dark:border-gray-500 min-h-80 line-number-gutter max-h-screen--nav"
>
<RTStickyCopyButton :click-handler="copyTextToClipboard" />

<div class="flex flex-col w-1/2 gap-2">
<p class="flex-grow-0 text-lg">{{ rhsLabel }}</p>
<div
v-for="(lineDiff, index) in rhsDiff"
:key="index"
:class="{
'bg-green-100 dark:bg-green-700': lineDiff.includes('isModified'),
}"
class="
relative
flex-1
px-4
py-2
overflow-y-auto
border-2
rounded-md
dark:border-gray-500
min-h-80
line-number-gutter
max-h-screen--nav
"
>
<p class="break-all whitespace-pre-wrap" v-html="lineDiff"></p>
<RTStickyCopyButton :click-handler="copyTextToClipboard" />
<div
v-for="(lineDiff, index) in rhsDiff"
:key="index"
:class="{
'bg-green-200 dark:bg-green-700':
lineDiff.includes('isModified'),
}"
>
<p class="break-all whitespace-pre-wrap">
<span v-html="lineDiff"></span>
</p>
</div>
</div>
</div>
</div>
</section>
</main>
<Footer />
</div>
Expand All @@ -89,14 +147,16 @@
<script>
import pako from 'pako'
import { undoUrlSafeBase64, escapeHtml } from '../helpers/utils'
import footer from '~/components/footer.vue'
import Footer from '~/components/footer.vue'
export default {
components: { footer },
components: { Footer },
layout: 'main',
data() {
return {
lhsDiff: this.lhsDiff,
rhsDiff: this.rhsDiff,
rhsLabel: this.rhsLabel,
lhsLabel: this.lhsLabel,
copied: false,
}
},
Expand All @@ -109,7 +169,7 @@ export default {
const hunkState = item[0]
if (hunkState === -1 || hunkState === 0) {
const className =
hunkState === -1 ? 'isModified bg-red-300 dark:bg-yellow-900' : ''
hunkState === -1 ? 'isModified bg-red-300 dark:bg-red-500' : ''
return `<span class="break-all inline p-0 m-0 ${className}">${escapeHtml(
item[1]
)}</span>`
Expand All @@ -124,7 +184,7 @@ export default {
const hunkState = item[0]
if (hunkState === 1 || hunkState === 0) {
const className =
hunkState === 1 ? 'isModified bg-green-300 dark:bg-green-900' : ''
hunkState === 1 ? 'isModified bg-green-400 dark:bg-green-900' : ''
return `<span class="break-all inline p-0 m-0 ${className}">${escapeHtml(
item[1]
)}</span>`
Expand Down Expand Up @@ -188,6 +248,9 @@ export default {
</script>

<style lang="scss">
::selection {
@apply bg-gray-800 text-gray-300 dark:bg-gray-200 dark:text-gray-800;
}
.copy-uri-button:hover {
@apply shadow-lg;
svg {
Expand All @@ -203,31 +266,24 @@ export default {
&::before {
content: '';
width: var(--line-number-gutter-width);
@apply bg-gray-200 dark:bg-gray-700 inline-block left-0 top-0 bottom-0 absolute text-sm;
@apply bg-gray-300 dark:bg-gray-700 inline-block left-0 top-0 bottom-0 absolute text-sm;
}
@apply relative;
p {
padding-left: calc(var(--line-number-gutter-width) - 10px);
line-height: 1.65;
@apply relative;
&:hover {
@apply bg-gray-200 dark:bg-gray-700;
@apply bg-gray-200 dark:bg-gray-600;
span {
@apply dark:mix-blend-hard-light dark:bg-blend-multiply;
}
}
&::before {
counter-increment: line-numbers;
content: counter(line-numbers);
width: var(--line-number-gutter-width);
@apply absolute left-0 top-[2px] -mx-4 bottom-0 text-center bg-gray-200 dark:bg-gray-700 dark:text-gray-50 text-gray-500 flex justify-center text-sm;
}
&:first-of-type {
&::before {
@apply -mt-2 pt-2;
}
}
&:last-of-type {
&::before {
@apply -mb-2 pb-2;
}
@apply absolute left-0 top-0 -mx-4 bg-gray-200 dark:bg-gray-700 dark:text-gray-50 text-gray-500 inline-flex justify-center items-center text-sm h-full;
}
}
}
Expand Down
47 changes: 19 additions & 28 deletions pages/v1/diff.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<template #right>
<button
type="button"
class="inline-flex justify-center px-4 py-2 transition-transform transform rounded-md shadow outline-none copy-uri-button align-center focus:ring-4 active:scale-y-75"
class="inline-flex justify-center px-4 py-2 transition-transform transform rounded-md shadow outline-none copy-uri-button align-center focus:ring-4 active:scale-y-75"
:class="{
'bg-blue-500 text-white': !copied,
'bg-green-500 text-gray-800': copied,
Expand Down Expand Up @@ -50,20 +50,19 @@
</Navbar>
<main>
<section
class="flex items-stretch w-full gap-4 font-mono text-gray-800 dark:text-gray-50"
class="flex items-stretch w-full gap-4 font-mono text-gray-800 dark:text-gray-50"
>
<div class="flex flex-col w-1/2 gap-2">
<p class="flex-grow-0 text-lg">{{ lhsLabel }}</p>
<div
class="relative flex-1 px-4 py-2 overflow-y-auto border-2 rounded-md dark:border-gray-500 max-h-screen--nav line-number-gutter min-h-80"
class="relative flex-1 px-4 py-2 overflow-y-auto border-2 rounded-md dark:border-gray-500 max-h-screen--nav line-number-gutter min-h-80"
>
<RTStickyCopyButton :click-handler="copyTextToClipboard" />
<div
v-for="(lineDiff, index) in lhsDiff"
:key="index"
:class="{
'bg-red-100 dark:bg-yellow-700':
lineDiff.includes('isModified'),
'bg-red-200 dark:bg-red-800': lineDiff.includes('isModified'),
}"
>
<p class="break-all whitespace-pre-wrap" v-html="lineDiff"></p>
Expand All @@ -74,14 +73,14 @@
<div class="flex flex-col w-1/2 gap-2">
<p class="flex-grow-0 text-lg">{{ rhsLabel }}</p>
<div
class="relative flex-1 px-4 py-2 overflow-y-auto border-2 rounded-md dark:border-gray-500 min-h-80 line-number-gutter max-h-screen--nav"
class="relative flex-1 px-4 py-2 overflow-y-auto border-2 rounded-md dark:border-gray-500 min-h-80 line-number-gutter max-h-screen--nav"
>
<RTStickyCopyButton :click-handler="copyTextToClipboard" />
<div
v-for="(lineDiff, index) in rhsDiff"
:key="index"
:class="{
'bg-green-100 dark:bg-green-700':
'bg-green-200 dark:bg-green-700':
lineDiff.includes('isModified'),
}"
>
Expand All @@ -98,9 +97,9 @@
<script>
import pako from 'pako'
import { undoUrlSafeBase64, escapeHtml } from '../../helpers/utils'
import footer from '~/components/footer.vue'
import Footer from '~/components/footer.vue'
export default {
components: { footer },
components: { Footer },
layout: 'main',
data() {
return {
Expand All @@ -123,9 +122,7 @@ export default {
const hunkState = item[0]
if (hunkState === -1 || hunkState === 0) {
const className =
hunkState === -1
? 'isModified bg-red-300 dark:bg-yellow-900 mix-blend-overlay'
: ''
hunkState === -1 ? 'isModified bg-red-300 dark:bg-red-500' : ''
return `<span class="break-all inline p-0 m-0 ${className}">${escapeHtml(
item[1]
)}</span>`
Expand All @@ -140,9 +137,7 @@ export default {
const hunkState = item[0]
if (hunkState === 1 || hunkState === 0) {
const className =
hunkState === 1
? 'isModified bg-green-300 dark:bg-green-900 mix-blend-overlay'
: ''
hunkState === 1 ? 'isModified bg-green-400 dark:bg-green-900' : ''
return `<span class="break-all inline p-0 m-0 ${className}">${escapeHtml(
item[1]
)}</span>`
Expand Down Expand Up @@ -206,6 +201,9 @@ export default {
</script>

<style lang="scss">
::selection {
@apply bg-gray-800 text-gray-300 dark:bg-gray-200 dark:text-gray-800;
}
.copy-uri-button:hover {
@apply shadow-lg;
svg {
Expand All @@ -221,31 +219,24 @@ export default {
&::before {
content: '';
width: var(--line-number-gutter-width);
@apply bg-gray-200 dark:bg-gray-700 inline-block left-0 top-0 bottom-0 absolute text-sm;
@apply bg-gray-300 dark:bg-gray-700 inline-block left-0 top-0 bottom-0 absolute text-sm;
}
@apply relative;
p {
padding-left: calc(var(--line-number-gutter-width) - 10px);
line-height: 1.65;
@apply relative;
&:hover {
@apply bg-gray-200 dark:bg-gray-700;
@apply bg-gray-200 dark:bg-gray-600;
& > span {
@apply dark:mix-blend-hard-light dark:bg-blend-multiply;
}
}
&::before {
counter-increment: line-numbers;
content: counter(line-numbers);
width: var(--line-number-gutter-width);
@apply absolute left-0 top-[2px] -mx-4 bottom-0 text-center bg-gray-200 dark:bg-gray-700 dark:text-gray-50 text-gray-500 flex justify-center text-sm;
}
&:first-of-type {
&::before {
@apply -mt-2 pt-2;
}
}
&:last-of-type {
&::before {
@apply -mb-2 pb-2;
}
@apply absolute left-0 top-0 -mx-4 bg-gray-200 dark:bg-gray-700 dark:text-gray-50 text-gray-500 inline-flex justify-center items-center text-sm h-full;
}
}
}
Expand Down

0 comments on commit 955c30d

Please sign in to comment.