gitbutlerapp/gitbutler
1
1
Fork 0
mirror of https://github.com/gitbutlerapp/gitbutler.git synced 2024-11-24 05:29:51 +03:00
Code Issues Packages Projects Releases Wiki Activity

refactor codeviewer layout

Browse Source
This commit is contained in:
Nikita Galaiko 2023-03-28 14:40:49 +02:00
parent 735820e7d0
commit 3c84e90fb4
3 changed files with 25 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
src/lib/components/CodeViewer/CodeViewer.svelte
View File

@ -182,8 +182,8 @@
$: deltas.length && scrollToChangedLine();
</script>
<table class="w-full whitespace-pre font-mono">
<tbody>
<div class="flex h-full w-full whitespace-pre font-mono">
<div id="numbers" class="flex flex-shrink-0 select-none flex-col">
{#each rows as row}
{@const baseNumber =
row.type === RowType.Equal || row.type === RowType.Deletion
@ -193,17 +193,15 @@
row.type === RowType.Equal || row.type === RowType.Addition
? String(row.currentLineNumber)
: ''}
<tr>
<td
class="pr-1 pl-2.5 min-w-[{originalLineNumberDigits}ch] text-right text-[#8C8178] before:content-[attr(data-line-number)]"
data-line-number={baseNumber}
/>
<td
class="pr-1 pl-2.5 min-w-[{currentLineNumberDigits}ch] text-right text-[#8C8178] before:content-[attr(data-line-number)]"
data-line-number={curNumber}
/>
<td
class="px-1.5 before:content-[attr(data-marker)]"
<div class="grid-cols-min grid grid-cols-3 gap-2">
<span class="min-w-[{originalLineNumberDigits}ch] text-right text-[#8C8178]">
{baseNumber}
</span>
<span class="min-w-[{currentLineNumberDigits}ch] text-right text-[#8C8178]">
{curNumber}
</span>
<span
class="min-w-[1ch] text-center before:content-[attr(data-marker)]"
class:diff-line-addition={row.type === RowType.Addition}
class:diff-line-deletion={row.type === RowType.Deletion}
class:line-changed={row.type === RowType.Addition || row.type === RowType.Deletion}
@ -213,12 +211,17 @@
? '-'
: ' '}
/>
<td class="px-1 diff-line-{row.type}">
{#each row.render.html as content}
{@html content}
{/each}
</td>
</tr>
</div>
{/each}
</tbody>
</table>
</div>
<div id="content" class="flex flex-auto flex-col">
{#each rows as row}
<span class="diff-line-{row.type}">
{#each row.render.html as content}
{@html content}
{/each}
</span>
{/each}
</div>
</div>

2
src/lib/components/CodeViewer/diff.css
View File

@ -30,6 +30,4 @@
color: rgb(229, 231, 235);
text-align: center;
background-color: var(--override-spacer-background-color);
border-top: 1px solid rgba(25, 25, 39, 0.3);
border-bottom: 1px solid rgba(25, 25, 39, 0.3);
}

2
src/routes/projects/[projectId]/search/+page.svelte
View File

@ -100,7 +100,7 @@
<span>{formatDistanceToNow(timestamp)} ago</span>
</p>
<div
class="flex-auto overflow-auto rounded-lg border border-zinc-700 bg-[#2F2F33] text-[#EBDBB2] drop-shadow-lg"
class="flex-auto overflow-auto rounded-lg border border-zinc-700 bg-[#2F2F33] p-2 text-[#EBDBB2] drop-shadow-lg"
>
<CodeViewer {doc} {deltas} {filepath} paddingLines={2} {highlight} />
</div>