silberengel
/
gitcitadel-online
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

feat(patch): diff full width expansion 

and general improvements to diff display
master
DanConwayDev 2 years ago
parent
7371bc8eb2
commit
c50316f277
No known key found for this signature in database
GPG Key ID: 68E15486D73F75E1
1 changed files with 136 additions and 62 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 198
      src/lib/components/events/content/Patch.svelte

198
src/lib/components/events/content/Patch.svelte
Unescape View File

@ -25,6 +25,8 @@
expand_files = expand_files.map((_) => true) expand_files = expand_files.map((_) => true)
} }
let expand_full_files = files.map((_) => false)
function extractTagContent(name: string): string | undefined { function extractTagContent(name: string): string | undefined {
let tag = tags.find((tag) => tag[0] === name) let tag = tags.find((tag) => tag[0] === name)
return tag ? tag[1] : undefined return tag ? tag[1] : undefined
@ -62,90 +64,162 @@
</div> </div>
{#each files as file, index} {#each files as file, index}
<div class="my-2 border border-base-300"> <div
<button class="my-2 border border-base-300 {expand_full_files[index]
class=" 400 flex w-full bg-base-200 p-3" ? 'absolute left-0 z-10 w-screen bg-base-300 px-5'
on:click={() => { : ''}"
expand_files[index] = !expand_files[index] >
}} <div class="flex w-full bg-base-200">
> <button
<div class="flex-none text-sm"> class="flex flex-grow p-3 text-sm"
<span> on:click={() => {
{file.to || file.from} if (expand_full_files[index]) {
</span> expand_full_files[index] = false
<span expand_files[index] = false
class="text-middle flex-none pl-3 align-middle font-mono text-xs opacity-70" } else if (expand_files[index]) {
> expand_full_files[index] = true
{#if file.new} } else {
<span>created file</span> expand_files[index] = true
{/if} }
{#if file.deleted} }}
<span>deleted file</span> ><div class="flex-none">
{/if} <span>
{#if !file.deleted} {file.to || file.from}
<span class="text-success">+{file.additions}</span> </span>
{/if} <span
{#if !file.new} class="text-middle flex-none pl-3 align-middle font-mono text-xs opacity-70"
<span class="text-error">-{file.deletions}</span> >
{/if} {#if file.new}
</span> <span>created file</span>
</div> {/if}
<div class="flex-grow text-right text-xs opacity-40"> {#if file.deleted}
<span>deleted file</span>
{/if}
{#if !file.deleted}
<span class="text-success">+{file.additions}</span>
{/if}
{#if !file.new}
<span class="text-error">-{file.deletions}</span>
{/if}
</span>
</div>
<div class="flex-grow"></div>
</button>
<button
class="flex-none p-3 text-right text-xs opacity-40"
on:click={() => {
expand_files[index] = !expand_files[index]
expand_full_files[index] = false
}}
>
{expand_files[index] ? 'colapse' : 'expand'} {expand_files[index] ? 'colapse' : 'expand'}
</div> </button>
</button> <button
class="flex-none p-3 text-right text-xs opacity-40"
on:click={() => {
expand_full_files[index] = !expand_full_files[index]
if (expand_full_files[index]) expand_files[index] = true
}}
>
full
</button>
</div>
{#if expand_files[index]} {#if expand_files[index]}
<div class="border-t-1 border-base-300"> <div class="border-t-1 flex border-base-300 font-mono text-xs">
{#each file.chunks as chunk, index} <div class="flex-full select-none text-right">
<div class="overflow-x-auto"> {#each file.chunks as chunk, index}
{#if index !== 0} {#if index !== 0}
<div class="text-middle h-6 bg-base-200 font-mono text-xs"> <div class="flex w-full bg-base-200">
<div <div
class="w-8 flex-none select-none pr-2 text-right opacity-50" class="w-8 flex-none whitespace-pre pb-2 pr-2 pt-1 opacity-50"
> >
... ...
</div> </div>
</div> </div>
{/if} {/if}
{#each chunk.changes as change, i} {#each chunk.changes as change, i}
<div class="flex w-full bg-base-100 font-mono text-xs"> <div class="flex w-full bg-base-100">
<div <div
class="w-8 flex-none select-none {change.type == 'add' class="w-8 flex-none whitespace-pre {change.type == 'add'
? 'bg-success/30' ? 'bg-success/50'
: change.type == 'del' : change.type == 'del'
? 'bg-error/30' ? 'bg-error/50'
: 'bg-slate-500/20'} pr-2 text-right opacity-50" : 'bg-slate-500/20'} pr-2 opacity-50"
class:pt-3={index === 0 && i === 0}
class:pb-3={index === file.chunks.length - 1 &&
i === chunk.changes.length - 1}
> >
{isAddChange(change) && {isAddChange(change) &&
i !== 0 && i !== 0 &&
isDeleteChange(chunk.changes[i - 1]) isDeleteChange(chunk.changes[i - 1])
? '' ? ' '
: extractChangeLine(change)} : extractChangeLine(change)}
</div> </div>
<div
class="w-full flex-grow whitespace-pre {change.type == 'add'
? 'bg-success/10'
: change.type == 'del'
? 'bg-error/10'
: ''}"
>
<!-- eslint-disable-next-line svelte/no-at-html-tags -->
{@html hljs.highlight(
change.type == 'normal'
? change.content
: change.content.substring(1),
{
language:
(file.to || file.from)?.split('.').pop() || '',
}
).value}
</div>
</div> </div>
{/each} {/each}
</div> {/each}
{/each} </div>
<div class="flex-auto overflow-x-auto">
{#each file.chunks as chunk, index}
<div class="w-fit">
{#if index !== 0}
<div class="flex h-7 w-full bg-base-200"></div>
{/if}
{#each chunk.changes as change, i}
<div class="flex w-full bg-base-100">
<div
class="w-full flex-grow whitespace-pre {change.type ==
'add'
? 'bg-success/20'
: change.type == 'del'
? 'bg-error/20'
: ''}"
class:pt-3={index === 0 && i === 0}
class:pb-3={index === file.chunks.length - 1 &&
i === chunk.changes.length - 1}
>
<!-- eslint-disable-next-line svelte/no-at-html-tags -->
{@html hljs.highlight(
change.type == 'normal'
? change.content
: change.content.substring(1),
{
language:
(file.to || file.from)?.split('.').pop() || '',
}
).value}
{#if (change.type == 'normal' ? change.content : change.content.substring(1)).length === 0}
<!-- force empty line to have height -->
<span></span>
{/if}
</div>
</div>
{/each}
</div>
{/each}
</div>
</div> </div>
{/if} {/if}
</div> </div>
<!-- vertical padding for full width so that content retains it space -->
{#if expand_full_files[index]}
<div class="w-full whitespace-pre font-mono text-xs">
<span class="block p-3 text-sm"> </span>
{#each file.chunks as chunk, index}
{#if index !== 0}
<span class="block h-7 p-3"> </span>
{/if}
{#each chunk.changes as _, i}
<span
class="block"
class:pt-3={index === 0 && i === 0}
class:pb-3={index === file.chunks.length - 1 &&
i === chunk.changes.length - 1}
>&nbsp;
</span>
{/each}
{/each}
</div>
{/if}
{/each} {/each}
</div> </div>

Write Preview
Loading…
Cancel
Save