Skip to content

Commit 6bc1062

Browse files
rarsrars
authored
Merge pull request #68 from rars/add-title-bar
feat(ngx-diff): add title bar to inline-diff
2 parents 6d93b5d + 63183b3 commit 6bc1062

File tree

6 files changed

+129
-26
lines changed

6 files changed

+129
-26
lines changed

‎README.md

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -65,17 +65,22 @@ For version 3+, you can customise the appearance of the diff through various CSS
6565
--ngx-diff-font-size: 1rem;
6666
--ngx-diff-font-family: Consolas, Courier, monospace;
6767
--ngx-diff-font-color: #000000;
68+
--ngx-diff-title-bar-padding: 0.5rem;
69+
--ngx-diff-title-font-weight: 600;
6870
--ngx-diff-line-number-font-color: #484848;
6971
--ngx-diff-line-number-hover-font-color: #ffffff;
7072
--ngx-diff-selected-border-color: #ff8000;
71-
--ngx-diff-inserted-background-color: #9dff97;
72-
--ngx-diff-deleted-background-color: #ff8c8c;
73-
--ngx-diff-equal-background-color: #ffffff;
74-
--ngx-diff-margin-background-color: #dedede;
7573
--ngx-diff-line-number-width: 2rem;
7674
--ngx-diff-border-width: 1px;
7775
--ngx-diff-line-left-padding: 1rem;
7876
--ngx-diff-bottom-spacer-height: 1rem;
77+
78+
--ngx-diff-insert-color: #d6ffd6;
79+
--ngx-diff-delete-color: #ffd6d6;
80+
--ngx-diff-equal-color: #ffffff;
81+
--ngx-diff-mix-color: #000;
82+
--ngx-diff-light-mix-percentage: 2%;
83+
--ngx-diff-heavy-mix-percentage: 10%;
7984
}
8085
```
8186

‎projects/ngx-diff/src/lib/components/inline-diff/inline-diff.component.html

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,12 @@
1+
<div class="inline-diff-title-bar">
2+
@if (title) {
3+
<span>{{ title }}</span
4+
>&nbsp;
5+
}
6+
<span class="inline-diff-summary-lines-added">+++ {{ diffSummary.numLinesAdded }}</span
7+
>&nbsp;
8+
<span class="inline-diff-summary-lines-removed">--- {{ diffSummary.numLinesRemoved }}</span>
9+
</div>
110
@if (isContentEqual) {
211
<div class="inline-diff-no-changes-text">There are no changes to display.</div>
312
}

‎projects/ngx-diff/src/lib/components/inline-diff/inline-diff.component.scss

Lines changed: 59 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,61 @@
11
:host {
22
--ngx-diff-border-color: #888888;
3-
--ngx-diff-font-size: 1rem;
3+
--ngx-diff-font-size: 0.9rem;
44
--ngx-diff-font-family: Consolas, Courier, monospace;
55
--ngx-diff-font-color: #000000;
66
--ngx-diff-line-number-font-color: #484848;
77
--ngx-diff-line-number-hover-font-color: #ffffff;
88
--ngx-diff-selected-border-color: #ff8000;
9-
--ngx-diff-inserted-background-color: #9dff97;
10-
--ngx-diff-deleted-background-color: #ff8c8c;
11-
--ngx-diff-equal-background-color: #ffffff;
12-
--ngx-diff-margin-background-color: #dedede;
9+
1310
--ngx-diff-line-number-width: 2rem;
1411
--ngx-diff-border-width: 1px;
1512
--ngx-diff-line-left-padding: 1rem;
1613
--ngx-diff-bottom-spacer-height: 1rem;
14+
--ngx-diff-title-bar-padding: 0.5rem;
15+
--ngx-diff-title-font-weight: 600;
16+
17+
--ngx-diff-insert-color: #d6ffd6;
18+
--ngx-diff-delete-color: #ffd6d6;
19+
--ngx-diff-equal-color: #ffffff;
20+
--ngx-diff-mix-color: #000;
21+
--ngx-diff-light-mix-percentage: 2%;
22+
--ngx-diff-heavy-mix-percentage: 10%;
23+
24+
--ngx-diff-inserted-background-color: var(--ngx-diff-insert-color);
25+
--ngx-diff-deleted-background-color: var(--ngx-diff-delete-color);
26+
--ngx-diff-equal-background-color: var(--ngx-diff-equal-color);
27+
--ngx-diff-margin-background-color: color-mix(in srgb, var(--ngx-diff-equal-color), var(--ngx-diff-mix-color) var(--ngx-diff-light-mix-percentage));
28+
29+
--ngx-diff-insert-color-darker: color-mix(in srgb, var(--ngx-diff-insert-color), var(--ngx-diff-mix-color) var(--ngx-diff-light-mix-percentage));
30+
--ngx-diff-insert-color-darkest: color-mix(in srgb, var(--ngx-diff-insert-color), var(--ngx-diff-mix-color) var(--ngx-diff-heavy-mix-percentage));
31+
32+
--ngx-diff-delete-color-darker: color-mix(in srgb, var(--ngx-diff-delete-color), var(--ngx-diff-mix-color) var(--ngx-diff-light-mix-percentage));
33+
--ngx-diff-delete-color-darkest: color-mix(in srgb, var(--ngx-diff-delete-color), var(--ngx-diff-mix-color) var(--ngx-diff-heavy-mix-percentage));
34+
}
35+
36+
div.inline-diff-title-bar {
37+
background-color: var(--ngx-diff-margin-background-color);
38+
font-family: var(--ngx-diff-font-family);
39+
font-size: var(--ngx-diff-font-size);
40+
font-weight: var(--ngx-diff-title-font-weight);
41+
padding: var(--ngx-diff-title-bar-padding);
42+
}
43+
44+
div.inline-diff-no-changes-text {
45+
font-family: var(--ngx-diff-font-family);
46+
font-size: var(--ngx-diff-font-size);
47+
font-weight: var(--ngx-diff-title-font-weight);
48+
padding: var(--ngx-diff-title-bar-padding);
49+
background-color: var(--ngx-diff-equal-background-color);
50+
color: var(--ngx-diff-font-color);
51+
}
52+
53+
.inline-diff-summary-lines-added {
54+
color: var(--ngx-diff-insert-color-darkest);
55+
}
56+
57+
.inline-diff-summary-lines-removed {
58+
color: var(--ngx-diff-delete-color-darkest);
1759
}
1860

1961
div.inline-diff {
@@ -28,7 +70,8 @@ div.inline-diff-content {
2870
top: 0px;
2971
left: 0px;
3072
flex-grow: 1;
31-
overflow-x: scroll;
73+
overflow-x: auto;
74+
overflow-y: hidden;
3275
}
3376

3477
div.inline-diff-content-wrapper {
@@ -70,11 +113,19 @@ div.inline-diff-text {
70113
}
71114

72115
.inline-diff-delete {
73-
background-color: var(--ngx-diff-deleted-background-color);
116+
background-color: var(--ngx-diff-delete-color-darker);
117+
118+
&.line-content {
119+
background-color: var(--ngx-diff-deleted-background-color);
120+
}
74121
}
75122

76123
.inline-diff-insert {
77-
background-color: var(--ngx-diff-inserted-background-color);
124+
background-color: var(--ngx-diff-insert-color-darker);
125+
126+
&.line-content {
127+
background-color: var(--ngx-diff-inserted-background-color);
128+
}
78129
}
79130

80131
.inline-diff-delete > div {

‎projects/ngx-diff/src/lib/components/inline-diff/inline-diff.component.ts

Lines changed: 29 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -27,26 +27,34 @@ type LineDiff = {
2727
imports: [NgClass, LineNumberPipe],
2828
})
2929
export class InlineDiffComponent implements OnInit, OnChanges {
30-
@Input()
30+
/**
31+
* Optional title to be displayed at the top of the diff.
32+
*/
33+
@Input({ required: false })
34+
public title?: string;
35+
@Input({ required: true })
3136
public oldText: string | number | boolean | undefined;
32-
@Input()
37+
@Input({ required: true })
3338
public newText: string | number | boolean | undefined;
34-
// The number of lines of context to provide either side of a DiffOp.Insert or DiffOp.Delete diff.
35-
// Context is taken from a DiffOp.Equal section.
36-
@Input()
37-
public lineContextSize: number | undefined;
39+
/**
40+
* The number of lines of context to provide either side of a DiffOp.Insert or DiffOp.Delete diff.
41+
* Context is taken from a DiffOp.Equal section.
42+
*/
43+
@Input({ required: false })
44+
public lineContextSize?: number;
3845

3946
@Output()
4047
public selectedLineChange = new EventEmitter<LineSelectEvent>();
4148

42-
public calculatedDiff: LineDiff[];
49+
public diffSummary = {
50+
numLinesAdded: 0,
51+
numLinesRemoved: 0,
52+
};
53+
public calculatedDiff: LineDiff[] = [];
4354
public selectedLine?: LineDiff;
44-
public isContentEqual: boolean;
55+
public isContentEqual: boolean = false;
4556

46-
public constructor(private readonly dmp: DiffMatchPatchService) {
47-
this.calculatedDiff = [];
48-
this.isContentEqual = false;
49-
}
57+
public constructor(private readonly dmp: DiffMatchPatchService) {}
5058

5159
public ngOnInit(): void {
5260
this.updateHtml();
@@ -169,6 +177,10 @@ export class InlineDiffComponent implements OnInit, OnChanges {
169177
this.isContentEqual = diffs.length === 1 && diffs[0][0] === DiffOp.Equal;
170178
if (this.isContentEqual) {
171179
this.calculatedDiff = [];
180+
this.diffSummary = {
181+
numLinesAdded: 0,
182+
numLinesRemoved: 0,
183+
};
172184
return;
173185
}
174186

@@ -212,6 +224,11 @@ export class InlineDiffComponent implements OnInit, OnChanges {
212224
};
213225
},
214226
);
227+
228+
this.diffSummary = {
229+
numLinesAdded: this.calculatedDiff.filter((x) => x.type === LineDiffType.Insert).length,
230+
numLinesRemoved: this.calculatedDiff.filter((x) => x.type === LineDiffType.Delete).length,
231+
};
215232
}
216233

217234
/* If the number of diffLines is greater than lineContextSize then we may need to adjust the diff

‎src/app/app.component.html

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,33 @@
77
style="width: 100%"
88
(selectedLineChange)="selectedLineChange($event)"
99
/>
10-
10+
<br />
1111
<div class="dark-theme">
1212
<inline-diff
1313
class="my-inline-diff-theme"
14+
title="github/user/src/main.ts"
1415
[oldText]="oldText"
1516
[newText]="newText"
1617
[lineContextSize]="4"
1718
style="width: 100%"
1819
(selectedLineChange)="selectedLineChange($event)"
1920
/>
2021
</div>
22+
<br />
23+
<inline-diff
24+
[oldText]="oldText"
25+
[newText]="oldText"
26+
[lineContextSize]="4"
27+
style="width: 100%"
28+
(selectedLineChange)="selectedLineChange($event)"
29+
/>
30+
<br />
31+
<inline-diff
32+
title="github/user/src/main.ts"
33+
[oldText]="oldText"
34+
[newText]="newText"
35+
[lineContextSize]="4"
36+
style="width: 100%"
37+
(selectedLineChange)="selectedLineChange($event)"
38+
/>
2139
</div>

‎src/styles.scss

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,10 @@
1010
--ngx-diff-line-left-padding: 1rem;
1111
--ngx-diff-bottom-spacer-height: 1rem;
1212

13-
13+
--ngx-diff-insert-color-darker: color-mix(in srgb, var(--ngx-diff-insert-color), #000 15%);
14+
--ngx-diff-insert-color-darkest: color-mix(in srgb, var(--ngx-diff-insert-color), #000 30%);
15+
--ngx-diff-delete-color-darker: color-mix(in srgb, var(--ngx-diff-delete-color), #000 15%);
16+
--ngx-diff-delete-color-darkest: color-mix(in srgb, var(--ngx-diff-delete-color), #000 30%);
1417
}
1518

1619

0 commit comments

Comments
 (0)