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
Split 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 @@ @@ -25,6 +25,8 @@
expand_files = expand_files.map((_) => true)
}
let expand_full_files = files.map((_) => false)
function extractTagContent(name: string): string | undefined {
let tag = tags.find((tag) => tag[0] === name)
return tag ? tag[1] : undefined
@ -62,90 +64,162 @@ @@ -62,90 +64,162 @@
</div>
{#each files as file, index}
<div class="my-2 border border-base-300">
<button
class=" 400 flex w-full bg-base-200 p-3"
on:click={() => {
expand_files[index] = !expand_files[index]
}}
>
<div class="flex-none text-sm">
<span>
{file.to || file.from}
</span>
<span
class="text-middle flex-none pl-3 align-middle font-mono text-xs opacity-70"
>
{#if file.new}
<span>created file</span>
{/if}
{#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 text-right text-xs opacity-40">
<div
class="my-2 border border-base-300 {expand_full_files[index]
? 'absolute left-0 z-10 w-screen bg-base-300 px-5'
: ''}"
>
<div class="flex w-full bg-base-200">
<button
class="flex flex-grow p-3 text-sm"
on:click={() => {
if (expand_full_files[index]) {
expand_full_files[index] = false
expand_files[index] = false
} else if (expand_files[index]) {
expand_full_files[index] = true
} else {
expand_files[index] = true
}
}}
><div class="flex-none">
<span>
{file.to || file.from}
</span>
<span
class="text-middle flex-none pl-3 align-middle font-mono text-xs opacity-70"
>
{#if file.new}
<span>created file</span>
{/if}
{#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'}
</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]}
<div class="border-t-1 border-base-300">
{#each file.chunks as chunk, index}
<div class="overflow-x-auto">
<div class="border-t-1 flex border-base-300 font-mono text-xs">
<div class="flex-full select-none text-right">
{#each file.chunks as chunk, index}
{#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
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>
{/if}
{#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
class="w-8 flex-none select-none {change.type == 'add'
? 'bg-success/30'
class="w-8 flex-none whitespace-pre {change.type == 'add'
? 'bg-success/50'
: change.type == 'del'
? 'bg-error/30'
: 'bg-slate-500/20'} pr-2 text-right opacity-50"
? 'bg-error/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) &&
i !== 0 &&
isDeleteChange(chunk.changes[i - 1])
? ''
? ' '
: extractChangeLine(change)}
</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>
{/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>
{/if}
</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}
</div>

Write Preview
Loading…
Cancel
Save