Skip to content

Commit 6215b80

Browse files
rarsrars
authored
Merge pull request #42 from rars/add-css-variables
2 parents 5f850ce + 7d1d936 commit 6215b80

File tree

6 files changed

+178
-86
lines changed

6 files changed

+178
-86
lines changed

‎README.md

Lines changed: 50 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# ngx-diff
22

3-
[![Build Status](https://travis-ci.org/rars/ngx-diff.svg?branch=master)](https://travis-ci.org/rars/ngx-diff)
3+
[![Node.js CI](https://github.com/rars/ngx-diff/actions/workflows/node.js.yml/badge.svg)](https://github.com/rars/ngx-diff/actions/workflows/node.js.yml)
44

55
Angular component library for displaying diffs of text. [Demo](https://rars.github.io/ngx-diff/).
66

@@ -12,31 +12,66 @@ Angular component library for displaying diffs of text. [Demo](https://rars.gith
1212
```
1313
2. Import `NgxDiffModule` to your app:
1414

15-
```
16-
import { BrowserModule } from '@angular/platform-browser';
17-
import { NgModule } from '@angular/core';
15+
```typescript
1816
import { NgxDiffModule } from 'ngx-diff';
17+
18+
import { NgModule } from '@angular/core';
19+
import { BrowserModule } from '@angular/platform-browser';
20+
1921
import { AppComponent } from './app.component';
2022

2123
@NgModule({
22-
declarations: [
23-
AppComponent
24-
],
25-
imports: [
26-
BrowserModule,
27-
NgxDiffModule
28-
],
24+
declarations: [AppComponent],
25+
imports: [BrowserModule, NgxDiffModule],
2926
providers: [],
30-
bootstrap: [AppComponent]
27+
bootstrap: [AppComponent],
3128
})
32-
export class AppModule { }
29+
export class AppModule {}
3330
```
3431

3532
3. Use the `inline-diff` component by setting the `oldText` and `newText` attributes:
36-
```
33+
```HTML
3734
<inline-diff [oldText]="oldDocumentContents" [newText]="newDocumentContents" [lineContextSize]="4"></inline-diff>
3835
```
3936

37+
## Theming
38+
39+
For version 3+, you can customise the appearance of the diff through various CSS variable settings. For example, in your `styles.scss` file, define:
40+
41+
```SCSS
42+
:root .my-custom-ngx-diff-theme {
43+
--ngx-diff-border-color: #888888;
44+
--ngx-diff-font-size: 1rem;
45+
--ngx-diff-font-family: Consolas, Courier, monospace;
46+
--ngx-diff-font-color: #000000;
47+
--ngx-diff-line-number-font-color: #484848;
48+
--ngx-diff-line-number-hover-font-color: #ffffff;
49+
--ngx-diff-selected-border-color: #ff8000;
50+
--ngx-diff-inserted-background-color: #9dff97;
51+
--ngx-diff-deleted-background-color: #ff8c8c;
52+
--ngx-diff-equal-background-color: #ffffff;
53+
--ngx-diff-margin-background-color: #dedede;
54+
--ngx-diff-line-number-width: 2rem;
55+
--ngx-diff-border-width: 1px;
56+
--ngx-diff-line-left-padding: 1rem;
57+
--ngx-diff-bottom-spacer-height: 1rem;
58+
}
59+
```
60+
61+
Then use this class in your desired component in your HTML template:
62+
63+
```HTML
64+
<inline-diff
65+
class="my-custom-ngx-diff-theme"
66+
[oldText]="oldText"
67+
[newText]="newText"
68+
[lineContextSize]="4"
69+
style="width: 100%"
70+
(selectedLineChange)="selectedLineChange($event)"></inline-diff>
71+
```
72+
73+
It is recommended to use these settings rather than attempt to override styles based upon DOM structure or class names that are internal details that may change.
74+
4075
## Version history
4176

4277
| Angular Version | ngx-diff Version |
@@ -46,6 +81,7 @@ Angular component library for displaying diffs of text. [Demo](https://rars.gith
4681
| 11 | 0.4.0 |
4782
| 13 | 1.0.0 |
4883
| 14 | 2.0.0 |
84+
| 14 | 3.0.0 |
4985

5086
## Contributions welcome!
5187

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@
2727
>
2828
<div class="inline-diff-text">{{ lineDiff[3] }}</div>
2929
</div>
30+
<div class="dmp-margin-bottom-spacer line-content"></div>
3031
</div>
3132
</div>
3233
</div>

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

Lines changed: 80 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,102 +1,121 @@
1+
:host {
2+
--ngx-diff-border-color: #888888;
3+
--ngx-diff-font-size: 1rem;
4+
--ngx-diff-font-family: Consolas, Courier, monospace;
5+
--ngx-diff-font-color: #000000;
6+
--ngx-diff-line-number-font-color: #484848;
7+
--ngx-diff-line-number-hover-font-color: #ffffff;
8+
--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;
13+
--ngx-diff-line-number-width: 2rem;
14+
--ngx-diff-border-width: 1px;
15+
--ngx-diff-line-left-padding: 1rem;
16+
--ngx-diff-bottom-spacer-height: 1rem;
17+
}
18+
119
div.inline-diff {
2-
display: flex;
3-
flex-direction: row;
4-
border: 1px solid #808080;
5-
font-family: Consolas, Courier, monospace;
20+
display: flex;
21+
flex-direction: row;
22+
border: var(--ngx-diff-border-width) solid var(--ngx-diff-border-color);
23+
font-family: var(--ngx-diff-font-family);
624
}
725

826
div.inline-diff-content {
9-
position: relative;
10-
top: 0px;
11-
left: 0px;
12-
flex-grow: 1;
13-
overflow-x: scroll;
27+
position: relative;
28+
top: 0px;
29+
left: 0px;
30+
flex-grow: 1;
31+
overflow-x: scroll;
1432
}
1533

1634
div.inline-diff-content-wrapper {
17-
position: absolute;
18-
top: 0px;
19-
left: 0px;
20-
display: flex;
21-
flex-direction: column;
22-
align-items: stretch;
23-
width: 100%;
35+
position: absolute;
36+
top: 0px;
37+
left: 0px;
38+
display: flex;
39+
flex-direction: column;
40+
align-items: stretch;
41+
width: 100%;
2442
}
2543

2644
div.inline-diff-old {
27-
width: 50px;
28-
text-align: center;
45+
width: var(--ngx-diff-line-number-width);
46+
text-align: center;
47+
font-size: var(--ngx-diff-font-size);
2948
}
3049

31-
div.inline-diff-equal>div.inline-diff-old,
32-
div.inline-diff-equal>div.inline-diff-new {
33-
background-color: #dedede;
34-
}
35-
36-
div.inline-diff-insert>div.inline-diff-old,
37-
div.inline-diff-insert>div.inline-diff-new {
38-
background-color: #8bfb6f;
50+
div.inline-diff-new {
51+
width: var(--ngx-diff-line-number-width);
52+
text-align: center;
53+
border-right: var(--ngx-diff-border-width) solid var(--border-color);
54+
font-size: var(--ngx-diff-font-size);
3955
}
4056

41-
div.inline-diff-delete>div.inline-diff-old,
42-
div.inline-diff-delete>div.inline-diff-new {
43-
background-color: #f56868;
57+
div.inline-diff-text {
58+
white-space: pre;
59+
padding-left: var(--ngx-diff-line-left-padding);
60+
font-size: var(--ngx-diff-font-size);
61+
color: var(--ngx-diff-font-color);
4462
}
4563

46-
div.inline-diff-new {
47-
width: 50px;
48-
text-align: center;
49-
border-right: 1px solid #888888;
50-
}
64+
.inline-diff-equal {
65+
background-color: var(--ngx-diff-margin-background-color);
5166

52-
div.inline-diff-text {
53-
white-space: pre;
54-
padding-left: 10px;
67+
&.line-content {
68+
background-color: var(--ngx-diff-equal-background-color);
69+
}
5570
}
5671

5772
.inline-diff-delete {
58-
background-color: #ff8c8c;
73+
background-color: var(--ngx-diff-deleted-background-color);
5974
}
6075

6176
.inline-diff-insert {
62-
background-color: #9dff97;
77+
background-color: var(--ngx-diff-inserted-background-color);
6378
}
6479

65-
.inline-diff-delete>div {
66-
display: inline-block;
80+
.inline-diff-delete > div {
81+
display: inline-block;
6782
}
6883

69-
.inline-diff-insert>div {
70-
display: inline-block;
84+
.inline-diff-insert > div {
85+
display: inline-block;
7186
}
7287

73-
.inline-diff-equal>div {
74-
display: inline-block;
88+
.inline-diff-equal > div {
89+
display: inline-block;
7590
}
7691

7792
.dmp-margin-bottom-spacer {
78-
height: 20px;
79-
background-color: #dedede;
80-
border-right: 1px solid #888888;
93+
height: var(--ngx-diff-bottom-spacer-height);
94+
background-color: var(--ngx-diff-margin-background-color);
95+
border-right: var(--ngx-diff-border-width) solid var(--border-color);
96+
97+
&.line-content {
98+
background-color: var(--ngx-diff-equal-background-color);
99+
}
81100
}
82101

83102
.line-selector {
84-
color: #484848;
103+
color: var(--ngx-diff-line-number-font-color);
85104

86-
&:hover {
87-
cursor: pointer;
88-
color: mix(white, #484848, 30%);
89-
}
105+
&:hover {
106+
cursor: pointer;
107+
color: var(--ngx-diff-line-number-hover-font-color);
108+
}
90109

91-
&.selected {
92-
border-top: 1px solid red;
93-
border-left: 1px solid red;
94-
border-bottom: 1px solid red;
95-
}
110+
&.selected {
111+
border-top: var(--ngx-diff-border-width) solid var(--ngx-diff-selected-border-color);
112+
border-left: var(--ngx-diff-border-width) solid var(--ngx-diff-selected-border-color);
113+
border-bottom: var(--ngx-diff-border-width) solid var(--ngx-diff-selected-border-color);
114+
}
96115
}
97116

98117
.line-content.selected {
99-
border-top: 1px solid red;
100-
border-right: 1px solid red;
101-
border-bottom: 1px solid red;
118+
border-top: var(--ngx-diff-border-width) solid var(--ngx-diff-selected-border-color);
119+
border-right: var(--ngx-diff-border-width) solid var(--ngx-diff-selected-border-color);
120+
border-bottom: var(--ngx-diff-border-width) solid var(--ngx-diff-selected-border-color);
102121
}

‎src/app/app.component.html

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,23 @@
11
<div>
22
<inline-diff
3+
class="my-inline-diff-theme"
34
[oldText]="oldText"
45
[newText]="newText"
56
[lineContextSize]="4"
67
style="width: 100%"
78
(selectedLineChange)="selectedLineChange($event)"
89
>
910
</inline-diff>
11+
12+
<div class="dark-theme">
13+
<inline-diff
14+
class="my-inline-diff-theme"
15+
[oldText]="oldText"
16+
[newText]="newText"
17+
[lineContextSize]="4"
18+
style="width: 100%"
19+
(selectedLineChange)="selectedLineChange($event)"
20+
>
21+
</inline-diff>
22+
</div>
1023
</div>

‎src/index.html

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
1-
<!doctype html>
1+
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="utf-8">
5-
<title>NgxDiff</title>
6-
<base href="/">
7-
<meta name="viewport" content="width=device-width, initial-scale=1">
8-
<link rel="icon" type="image/x-icon" href="favicon.ico">
9-
</head>
10-
<body>
11-
<app-root></app-root>
12-
</body>
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>NgxDiff</title>
6+
<base href="/" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1" />
8+
<link rel="icon" type="image/x-icon" href="favicon.ico" />
9+
</head>
10+
<body style="background-color: black">
11+
<app-root></app-root>
12+
</body>
1313
</html>

‎src/styles.scss

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,24 @@
11
/* You can add global styles to this file, and also import other style files */
2+
3+
:root .my-inline-diff-theme {
4+
--ngx-diff-border-color: yellow;
5+
--ngx-diff-selected-border-color: blue;
6+
--ngx-diff-font-family: Consolas;
7+
--ngx-diff-line-number-hover-font-color: white;
8+
--ngx-diff-line-number-width: 2rem;
9+
--ngx-diff-font-size: 1rem;
10+
--ngx-diff-line-left-padding: 1rem;
11+
--ngx-diff-bottom-spacer-height: 1rem;
12+
13+
14+
}
15+
16+
17+
:root .dark-theme .my-inline-diff-theme {
18+
--ngx-diff-border-color: magenta;
19+
--ngx-diff-selected-border-color: cyan;
20+
--ngx-diff-font-family: Consolas;
21+
--ngx-diff-equal-background-color: grey;
22+
--ngx-diff-font-color: indigo;
23+
--ngx-diff-border-width: 4px;
24+
}

0 commit comments

Comments
 (0)