Merge pull request #4938 from gitbutlerapp/hunk-column-changes

fix: File section max line number & simplify hunk header calculation
This commit is contained in:
Kiril Videlov 2024-09-18 08:34:01 +02:00 committed by GitHub
commit a01cac1baa
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 12 additions and 19 deletions

View File

@ -65,6 +65,7 @@
let tableWidth = $state<number>(0); let tableWidth = $state<number>(0);
let tableHeight = $state<number>(0); let tableHeight = $state<number>(0);
let numberHeaderWidth = $state<number>(0);
const selected = $derived($selectedOwnership?.isSelected(hunk.filePath, hunk.id) ?? false); const selected = $derived($selectedOwnership?.isSelected(hunk.filePath, hunk.id) ?? false);
let isSelected = $derived(selectable && selected); let isSelected = $derived(selectable && selected);
@ -345,6 +346,7 @@
}} }}
> >
<th <th
bind:clientWidth={numberHeaderWidth}
class="table__checkbox-container" class="table__checkbox-container"
style="--border-width: {BORDER_WIDTH}px;" style="--border-width: {BORDER_WIDTH}px;"
class:selected={isSelected} class:selected={isSelected}
@ -366,9 +368,7 @@
</div> </div>
<div <div
class="table__title-content" class="table__title-content"
style="--number-col-width: {pxToRem( style="--number-col-width: {numberHeaderWidth}px; --table-width: {tableWidth}px; --border-width: {BORDER_WIDTH}px; --top: -{BORDER_WIDTH}px"
NUMBER_COLUMN_WIDTH_PX + 1
)}; --table-width: {tableWidth}px; --border-width: {BORDER_WIDTH}px; --top: -{BORDER_WIDTH}px"
> >
<span> <span>
{`@@ -${hunkLineInfo.beforLineStart},${hunkLineInfo.beforeLineCount} +${hunkLineInfo.afterLineStart},${hunkLineInfo.afterLineCount} @@`} {`@@ -${hunkLineInfo.beforLineStart},${hunkLineInfo.beforeLineCount} +${hunkLineInfo.afterLineStart},${hunkLineInfo.afterLineCount} @@`}
@ -388,8 +388,7 @@
<td> <td>
<div <div
class="table__right-box" class="table__right-box"
style="--number-col-width: {NUMBER_COLUMN_WIDTH_PX + style="--number-col-width: {numberHeaderWidth}px; --table-width: {tableWidth}px; --table-height: {tableHeight}px;"
2}px; --table-width: {tableWidth}px; --table-height: {tableHeight}px;"
></div> ></div>
</td> </td>
</tr> </tr>
@ -517,8 +516,8 @@
pointer-events: none; pointer-events: none;
position: absolute; position: absolute;
top: 0; top: 0;
left: calc(var(--number-col-width) * 2); left: var(--number-col-width);
width: calc(var(--table-width) - var(--number-col-width) * 2); width: calc(var(--table-width) - var(--number-col-width));
height: var(--table-height); height: var(--table-height);
border-bottom: 1px solid var(--clr-border-2); border-bottom: 1px solid var(--clr-border-2);
border-right: 1px solid var(--clr-border-2); border-right: 1px solid var(--clr-border-2);
@ -528,8 +527,8 @@
.table__title-content { .table__title-content {
position: absolute; position: absolute;
top: var(--top); top: var(--top);
left: calc(var(--number-col-width) * 2); left: var(--number-col-width);
width: calc(var(--table-width) - var(--number-col-width) * 2); width: calc(var(--table-width) - var(--number-col-width));
height: calc(100% + var(--border-width) * 2); height: calc(100% + var(--border-width) * 2);
box-sizing: border-box; box-sizing: border-box;
font-family: var(--mono-font-family); font-family: var(--mono-font-family);

View File

@ -33,19 +33,13 @@ export class HunkSection {
hasConflictMarkers!: boolean; hasConflictMarkers!: boolean;
get maxLineNumber(): number { get maxLineNumber(): number {
// if (section instanceof ContentSection) {
// return Math.max(
// section.lines[section.lines.length - 1].afterLineNumber || 0,
// section.lines[section.lines.length - 1].afterLineNumber || 0
// );
// }
const lastSection = this.subSections[this.subSections.length - 1]; const lastSection = this.subSections[this.subSections.length - 1];
if (!lastSection) { if (!lastSection) {
return 0; return 0;
} }
return Math.max( return Math.max(
lastSection.lines[lastSection.lines.length - 1]?.afterLineNumber || 0, lastSection.lines[lastSection.lines.length - 1]?.afterLineNumber ?? 0,
lastSection.lines[lastSection.lines.length - 1]?.afterLineNumber || 0 lastSection.lines[lastSection.lines.length - 1]?.beforeLineNumber ?? 0
); );
} }
} }
@ -57,8 +51,8 @@ export class ContentSection {
get maxLineNumber(): number { get maxLineNumber(): number {
return Math.max( return Math.max(
this.lines[this.lines.length - 1]?.afterLineNumber || 0, this.lines[this.lines.length - 1]?.afterLineNumber ?? 0,
this.lines[this.lines.length - 1]?.afterLineNumber || 0 this.lines[this.lines.length - 1]?.beforeLineNumber ?? 0
); );
} }
} }