Skip to content

Commit 031bf54

Browse files
ABenassi87ABenassi87
committed
Adding demo page.
1 parent 2c7d38d commit 031bf54

19 files changed

+565
-110
lines changed

‎angular.json‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,9 +23,13 @@
2323
"src/assets"
2424
],
2525
"styles": [
26-
"src/styles.css"
26+
"src/styles.css",
27+
"node_modules/bootstrap/dist/css/bootstrap.min.css",
28+
"node_modules/codemirror/lib/codemirror.css"
2729
],
28-
"scripts": []
30+
"scripts": [
31+
"node_modules/codemirror/lib/codemirror.js"
32+
]
2933
},
3034
"configurations": {
3135
"production": {
@@ -159,4 +163,4 @@
159163
}
160164
},
161165
"defaultProject": "ngx-text-diff-app"
162-
}
166+
}

‎package-lock.json‎

Lines changed: 16 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
"version": "0.0.0",
44
"scripts": {
55
"ng": "ng",
6-
"start": "ng serve",
6+
"start": "ng serve --open",
77
"build": "ng build",
88
"test": "ng test",
99
"lint": "ng lint",
@@ -20,6 +20,8 @@
2020
"@angular/platform-browser": "^6.1.10",
2121
"@angular/platform-browser-dynamic": "^6.1.10",
2222
"@angular/router": "^6.1.10",
23+
"bootstrap": "^4.1.3",
24+
"codemirror": "^5.40.2",
2325
"core-js": "^2.5.4",
2426
"diff-match-patch": "^1.0.4",
2527
"rxjs": "~6.3.3",
@@ -31,6 +33,7 @@
3133
"@angular/cli": "^6.2.5",
3234
"@angular/compiler-cli": "^6.1.10",
3335
"@angular/language-service": "^6.1.10",
36+
"@types/codemirror": "0.0.63",
3437
"@types/diff-match-patch": "^1.0.32",
3538
"@types/jasmine": "~2.8.8",
3639
"@types/jasminewd2": "~2.0.3",

‎projects/ngx-text-diff/src/lib/ngx-text-diff.component.css‎

Lines changed: 70 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,43 @@
1-
table {
1+
.td-wrapper {
2+
display: grid;
3+
width: 100%;
4+
grid-gap: 10px;
5+
grid-template-columns: repeat(2, [col] 50% ) ;
6+
grid-template-rows: repeat(2, [row] auto );
7+
background-color: #fff;
8+
color: #444;
9+
}
10+
11+
/*.td-toolbar {
12+
display: grid;
13+
width: 960px;
14+
grid-gap: 10px;
15+
grid-template-columns: repeat(2, [col] 50% ) ;
16+
grid-template-rows: repeat(1, [row] auto );
17+
background-color: #fff;
18+
color: #444;
19+
}*/
20+
21+
.td-toolbar-show-diff {
22+
grid-column: 1;
23+
grid-row: 1 ;
24+
}
25+
26+
.td-toolbar-select-format {
27+
margin-left: auto;
28+
grid-column: 2;
29+
grid-row: 1 ;
30+
}
31+
32+
.td-table-container {
33+
grid-column: 1 / 2;
34+
grid-row: 2;
35+
}
36+
37+
.td-table {
238
border: 1px solid darkgray;
339
max-height: 50vh;
40+
width: 100%;
441
max-width: 100%;
542
}
643

@@ -14,11 +51,15 @@ table {
1451
color: #999;
1552
text-align: right;
1653
background-color: #f7f7f7;
54+
padding-left: 10px;
55+
padding-right: 10px;
1756
font-size: 87.5%;
1857
}
1958

2059
.line-number-col-left {
2160
color: #999;
61+
padding-left: 10px;
62+
padding-right: 10px;
2263
text-align: right;
2364
background-color: #f7f7f7;
2465
font-size: 87.5%;
@@ -40,7 +81,7 @@ table {
4081
background-color: #f7f7f7;
4182
}
4283

43-
.table td {
84+
.td-table td {
4485
border-top: 0;
4586
padding-top: 0;
4687
padding-bottom: 0;
@@ -57,5 +98,32 @@ td.content-col {
5798
}
5899

59100
td.prefix-col {
101+
padding-left: 10px;
102+
padding-right: 10px;
60103
line-height: 20px;
61104
}
105+
106+
.td-btn-group button {
107+
background-color: #4CAF50; /* Green background */
108+
border: 1px solid green; /* Green border */
109+
color: white; /* White text */
110+
padding: 10px 24px; /* Some padding */
111+
cursor: pointer; /* Pointer/hand icon */
112+
float: left; /* Float the buttons side by side */
113+
}
114+
115+
.td-btn-group button:not(:last-child) {
116+
border-right: none; /* Prevent double borders */
117+
}
118+
119+
/* Clear floats (clearfix hack) */
120+
.td-btn-group:after {
121+
content: "";
122+
clear: both;
123+
display: table;
124+
}
125+
126+
/* Add a background color on hover */
127+
.td-btn-group button:hover {
128+
background-color: #3e8e41;
129+
}

‎projects/ngx-text-diff/src/lib/ngx-text-diff.component.html‎

Lines changed: 63 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -1,81 +1,69 @@
11
<div>
22
<h3>Comparison</h3>
3-
<div *ngIf="!loading">
4-
<div class="toolbar">
5-
<div class="pull-left">
6-
<div class="custom-control custom-checkbox">
7-
<input type="checkbox"
8-
class="custom-control-input"
9-
id="showDiffs"
10-
[ngModel]="showLinesDiffs"
11-
(ngModelChange)="showLinesDiffsChange($event)"
12-
>
13-
<label class="custom-control-label" for="showDiffs">Show Lines with Diffs ({{diffs}})</label>
14-
</div>
15-
</div>
16-
<div class="pull-right">
17-
<div class="btn-group btn-group-toggle" data-toggle="buttons">
18-
<label class="btn btn-outline-dark btn-sm" *ngFor="let option of formatOptions"
19-
[ngClass]="{'active': format === option.value, 'disabled': !!option.disabled}">
20-
<input type="radio"
21-
[name]="option.name"
22-
[id]="option.id"
23-
[disabled]="!!option.disabled"
24-
autocomplete="off"
25-
(click)="setDiffTableFormat(option.value)"
26-
[checked]="format === option.value"
27-
><i class="la {{option.icon}}"></i> {{option.label}}
28-
</label>
29-
</div>
30-
</div>
3+
<div class="td-wrapper">
4+
<div class="td-toolbar-show-diff">
5+
<input type="checkbox"
6+
class=""
7+
id="showDiffs"
8+
[ngModel]="showLinesDiffs"
9+
(ngModelChange)="showLinesDiffsChange($event)"
10+
>
11+
<label class="" for="showDiffs">Show Lines with Diffs ({{diffs}})</label>
3112
</div>
32-
<div class="side-by-side table-responsive" *ngIf="format === 'SideBySide'">
33-
<table class="table">
34-
<tbody>
35-
<tr *ngFor="let row of filteredLeftRightRows">
36-
<td scope="row" class="fit-column line-number-col"
37-
[ngClass]="{'delete-row' : row.prefix === '-', 'empty-row': !row.content}">{{(row.lineNumberLeft !== -1) ?
38-
row.lineNumberLeft : ' '}}
39-
</td>
40-
<td class="fit-column prefix-col" [ngClass]="{'delete-row' : row.prefix === '-', 'empty-row': !row.content}">
41-
<pre>{{row.prefix || ' '}}</pre>
42-
</td>
43-
<td class="content-col" [ngClass]="{'delete-row' : row.prefix === '-', 'empty-row': !row.content}">
44-
<pre>{{row.content || ' '}}</pre>
45-
</td>
46-
<td scope="row" class="fit-column line-number-col"
47-
[ngClass]="{'insert-row' : row.prefixRight === '+', 'empty-row': !row.contentRight}">
48-
{{(row.lineNumberRight !== -1) ? row.lineNumberRight : ' '}}
49-
</td>
50-
<td class="fit-column prefix-col"
51-
[ngClass]="{'insert-row' : row.prefixRight === '+', 'empty-row': !row.contentRight}">
52-
<pre>{{row.prefixRight || ' '}}</pre>
53-
</td>
54-
<td class="content-col" [ngClass]="{'insert-row' : row.prefixRight === '+', 'empty-row': !row.contentRight}">
55-
<pre>{{row.contentRight || ' '}}</pre>
56-
</td>
57-
<tr>
58-
</tr>
59-
</tbody>
60-
</table>
61-
</div>
62-
<div class="line-by-line table-responsive" *ngIf="format === 'LineByLine'">
63-
<table class="table">
64-
<tbody>
65-
<tr *ngFor="let row of filteredRows">
66-
<td scope="row" class="fit-column line-number-col-left">{{row.lineNumberLeft}}</td>
67-
<td scope="row" class="fit-column line-number-col">{{row.lineNumberRight}}</td>
68-
<td class="fit-column prefix-col"
69-
[ngClass]="{'delete-row' : row.prefix === '-', 'insert-row' : row.prefix === '+'}">
70-
<pre>{{row.prefix || ' '}}</pre>
71-
</td>
72-
<td class="content-col" [ngClass]="{'delete-row' : row.prefix === '-', 'insert-row' : row.prefix === '+'}">
73-
<pre>{{row.content || ' '}}</pre>
74-
</td>
75-
</tr>
76-
</tbody>
77-
</table>
13+
<div class="td-toolbar-select-format">
14+
<div class="td-btn-group td-btn-group-toggle" data-toggle="buttons">
15+
<button *ngFor="let option of formatOptions"
16+
[ngClass]="{'active': format === option.value, 'disabled': !!option.disabled}"
17+
[name]="option.name"
18+
[id]="option.id"
19+
[disabled]="!!option.disabled"
20+
(click)="setDiffTableFormat(option.value)"
21+
>{{option.label}}
22+
</button>
23+
</div>
7824
</div>
79-
<app-diff-codemirror-merge [left]="left" [right]="right" *ngIf="format === 'MergeView'"></app-diff-codemirror-merge>
25+
<table class="td-table td-table-container side-by-side" *ngIf="format === 'SideBySide'">
26+
<tbody>
27+
<tr *ngFor="let row of filteredLeftRightRows">
28+
<td scope="row" class="fit-column line-number-col"
29+
[ngClass]="{'delete-row' : row.prefix === '-', 'empty-row': !row.content}">{{(row.lineNumberLeft !== -1) ?
30+
row.lineNumberLeft : ' '}}
31+
</td>
32+
<td class="fit-column prefix-col" [ngClass]="{'delete-row' : row.prefix === '-', 'empty-row': !row.content}">
33+
<pre>{{row.prefix || ' '}}</pre>
34+
</td>
35+
<td class="content-col" [ngClass]="{'delete-row' : row.prefix === '-', 'empty-row': !row.content}">
36+
<pre>{{row.content || ' '}}</pre>
37+
</td>
38+
<td scope="row" class="fit-column line-number-col"
39+
[ngClass]="{'insert-row' : row.prefixRight === '+', 'empty-row': !row.contentRight}">
40+
{{(row.lineNumberRight !== -1) ? row.lineNumberRight : ' '}}
41+
</td>
42+
<td class="fit-column prefix-col"
43+
[ngClass]="{'insert-row' : row.prefixRight === '+', 'empty-row': !row.contentRight}">
44+
<pre>{{row.prefixRight || ' '}}</pre>
45+
</td>
46+
<td class="content-col" [ngClass]="{'insert-row' : row.prefixRight === '+', 'empty-row': !row.contentRight}">
47+
<pre>{{row.contentRight || ' '}}</pre>
48+
</td>
49+
<tr>
50+
</tr>
51+
</tbody>
52+
</table>
53+
<table class="td-table td-table-container line-by-line" *ngIf="format === 'LineByLine'">
54+
<tbody>
55+
<tr *ngFor="let row of filteredRows">
56+
<td scope="row" class="fit-column line-number-col-left">{{row.lineNumberLeft}}</td>
57+
<td scope="row" class="fit-column line-number-col">{{row.lineNumberRight}}</td>
58+
<td class="fit-column prefix-col"
59+
[ngClass]="{'delete-row' : row.prefix === '-', 'insert-row' : row.prefix === '+'}">
60+
<pre>{{row.prefix || ' '}}</pre>
61+
</td>
62+
<td class="content-col" [ngClass]="{'delete-row' : row.prefix === '-', 'insert-row' : row.prefix === '+'}">
63+
<pre>{{row.content || ' '}}</pre>
64+
</td>
65+
</tr>
66+
</tbody>
67+
</table>
8068
</div>
8169
</div>

‎projects/ngx-text-diff/src/lib/ngx-text-diff.component.ts‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,12 @@
1-
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnInit } from '@angular/core';
1+
import { ChangeDetectorRef, Component, Input, OnInit } from '@angular/core';
22
import { DiffContent, DiffTableBothRow, DiffTableFormat, DiffTableFormatOption, DiffTableRow } from './ngx-text-diff.model';
33
import { NgxTextDiffService } from './ngx-text-diff.service';
44
import { Observable, Subscription } from 'rxjs';
55

66
@Component({
77
selector: 'td-ngx-text-diff',
88
templateUrl: './ngx-text-diff.component.html',
9-
styleUrls: ['./ngx-text-diff.component.css'],
10-
changeDetection: ChangeDetectionStrategy.OnPush
9+
styleUrls: ['./ngx-text-diff.component.css']
1110
})
1211
export class NgxTextDiffComponent implements OnInit {
1312
@Input() format: DiffTableFormat = 'SideBySide';

‎src/app/app-routing.module.ts‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { NgModule } from '@angular/core';
2+
import { Routes, RouterModule } from '@angular/router';
3+
import { HomeComponent } from './home/home.component';
4+
5+
const routes: Routes = [
6+
{
7+
path: 'home',
8+
component: HomeComponent
9+
},
10+
{
11+
path: '',
12+
redirectTo: 'home',
13+
pathMatch: 'full'
14+
}
15+
];
16+
17+
@NgModule({
18+
imports: [RouterModule.forRoot(routes)],
19+
exports: [RouterModule]
20+
})
21+
export class AppRoutingModule {}

‎src/app/app.component.html‎

Lines changed: 1 addition & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,2 @@
1-
<!--The content below is only a placeholder and can be replaced.-->
2-
<div style="text-align:center">
3-
<h1>
4-
Welcome to {{ title }}!
5-
</h1>
6-
<img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
7-
</div>
8-
<h2>Here are some links to help you start: </h2>
9-
<ul>
10-
<li>
11-
<h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
12-
</li>
13-
<li>
14-
<h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
15-
</li>
16-
<li>
17-
<h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
18-
</li>
19-
</ul>
1+
<router-outlet></router-outlet>
202

0 commit comments

Comments
 (0)