gitbutlerapp/gitbutler
1
1
Fork 0
mirror of https://github.com/gitbutlerapp/gitbutler.git synced 2024-10-26 13:12:25 +03:00
Code Issues Packages Projects Releases Wiki Activity

Refactor CodeViewer to use table layout

Browse Source 
Refactored the CodeViewer component to switch from using grid layout to a table layout for improved rendering performance. This change simplifies CSS styles by removing unnecessary definitions and ensures consistency in line number display. Additional styling has been applied to the table layout to maintain the existing look and functionality.

- Replaced the `div` structure with `table`, `tbody`, and `tr` elements
- Renamed `rows` to `renderedRows` for better naming consistency
- Added `originalLineNumberDigits` and `currentLineNumberDigits` for proper alignment in table cells
- Removed unnecessary CSS rules and added table-specific styles
This commit is contained in:
Nikita Galaiko 2023-03-24 12:12:12 +01:00
parent 1ba0ae0fe7
commit e77cc0c616
2 changed files with 52 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -90,9 +90,9 @@
return { html: content, highlighted };
};
$: rows = diffRows.rows.map((row) => ({ ...row, render: renderRowContent(row) }));
$: renderedRows = diffRows.rows.map((row) => ({ ...row, render: renderRowContent(row) }));
type RenderedRow = (typeof rows)[0];
type RenderedRow = (typeof renderedRows)[0];
const padHighlighted = (rows: RenderedRow[]): RenderedRow[] => {
const chunks: (RenderedRow[] | RenderedRow)[] = [];
@ -168,35 +168,55 @@
}
return chunks.flatMap((chunk) => chunk);
};
$: rows = highlight.length > 0 ? padHighlighted(renderedRows) : renderedRows;
$: originalLineNumberDigits = String(rows.at(-1)?.originalLineNumber || '0').length;
$: currentLineNumberDigits = String(rows.at(-1)?.currentLineNumber || '0').length;
</script>
<div class="diff-listing w-full select-text whitespace-pre font-mono">
{#each highlight.length > 0 ? padHighlighted(rows) : rows as row}
{@const baseNumber =
row.type === RowType.Equal || row.type === RowType.Deletion
? String(row.originalLineNumber)
: ''}
{@const curNumber =
row.type === RowType.Equal || row.type === RowType.Addition
? String(row.currentLineNumber)
: ''}
<div class="select-none pr-1 pl-2.5 text-right text-[#8C8178]">{baseNumber}</div>
<div class="select-none pr-1 pl-2.5 text-right text-[#8C8178]">{curNumber}</div>
<div
class="diff-line-marker"
class:diff-line-addition={row.type === RowType.Addition}
class:diff-line-deletion={row.type === RowType.Deletion}
>
{row.type === RowType.Addition ? '+' : row.type === RowType.Deletion ? '-' : ''}
</div>
<div
class:line-changed={row.type === RowType.Addition || row.type === RowType.Deletion}
class="px-1 diff-line-{row.type}"
data-line-number={curNumber}
>
{#each row.render.html as content}
{@html content}
{/each}
</div>
{/each}
</div>
<table class="w-full whitespace-pre font-mono">
<tbody>
{#each rows as row}
{@const baseNumber =
row.type === RowType.Equal || row.type === RowType.Deletion
? String(row.originalLineNumber)
: ''}
{@const curNumber =
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)]"
class:diff-line-addition={row.type === RowType.Addition}
class:diff-line-deletion={row.type === RowType.Deletion}
data-marker={row.type === RowType.Addition
? '+'
: row.type === RowType.Deletion
? '-'
: ' '}
/>
<td class="px-1 diff-line-{row.type}">
{#each row.render.html as content}
{@html content}
{/each}
</td>
</tr>
{/each}
</tbody>
</table>
<style>
table {
/* https://stackoverflow.com/questions/9807620/ipad-safari-scrolling-causes-html-elements-to-disappear-and-reappear-with-a-dela */
-webkit-transform: translate3d(0, 0, 0);
}
</style>

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

@ -1,14 +1,3 @@
.diff-listing {
display: grid;
grid-template-columns: max-content max-content max-content auto;
}
.diff-line-marker {
border-right: 1px solid var(--color-details-hairline);
width: 20px;
text-align: center;
}
.diff-line-marker-addition,
.diff-line-addition {
--override-addition-background-color: hsl(144deg 55% 49% / 20%);