Skip to content

Commit 391a201

Browse files
ABenassi87ABenassi87
committed
fixing style issues
1 parent d760b9c commit 391a201

File tree

6 files changed

+184
-96
lines changed

6 files changed

+184
-96
lines changed

‎.travis.yml‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,15 +8,18 @@ before_install:
88
install: npm install
99
branches:
1010
only:
11-
- release-0.5.0
11+
- master
12+
- staging
13+
- dev
14+
- release-0.5.0
1215
after_script:
1316
- chmod +x publish-gh-pages.sh && ./publish-gh-pages.sh
1417
addons:
1518
chrome: stable
1619
deploy:
1720
provider: heroku
1821
api_key:
19-
secure: 8d1dd2e7-e9a5-47da-ae76-f427b9c70f4c
22+
secure: $HEROKU_AUTH_TOKEN
2023
app: ngx-text-diff
2124
on:
2225
repo: ABenassi87/ngx-text-diff

‎README.md‎

Lines changed: 4 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,7 @@
1-
# NgxTextDiffApp
1+
# NgxTextDiff
22

3-
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 6.2.4.
3+
[![Build Status](https://travis-ci.org/ABenassi87/ngx-text-diff.svg?branch=release-0.5.0)](https://travis-ci.org/ABenassi87/ngx-text-diff)
44

5-
## Development server
5+
## Demo Page
66

7-
Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
8-
9-
## Code scaffolding
10-
11-
Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
12-
13-
## Build
14-
15-
Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
16-
17-
## Running unit tests
18-
19-
Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
20-
21-
## Running end-to-end tests
22-
23-
Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
24-
25-
## Further help
26-
27-
To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
7+
[Demo](https://ngx-text-diff.herokuapp.com/home)

‎projects/ngx-text-diff/package.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
11
{
22
"name": "ngx-text-diff",
33
"version": "0.0.1",
4+
"dependencies": {
5+
"diff-match-patch": "^1.0.4"
6+
},
47
"peerDependencies": {
58
"@angular/common": ">=6.0.0 <7.0.0",
69
"@angular/core": "^>=6.0.0 <7.0.0",
710
"@angular/forms": "^>=6.0.0 <7.0.0",
8-
"diff-match-patch": "^1.0.4",
911
"rxjs": "~6.3.3"
1012
}
1113
}

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

Lines changed: 110 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
.td-wrapper {
22
display: grid;
33
width: 100%;
4-
grid-gap: 10px;
5-
grid-template-columns: repeat(2, [col] 50% ) ;
6-
grid-template-rows: repeat(2, [row] auto );
4+
grid-row-gap: 10px;
5+
grid-template-columns: repeat(2, [col] 50%);
6+
grid-template-rows: repeat(2, [row] auto);
77
background-color: #fff;
88
color: #444;
99
}
@@ -20,18 +20,25 @@
2020

2121
.td-toolbar-show-diff {
2222
grid-column: 1;
23-
grid-row: 1 ;
23+
grid-row: 1;
2424
}
2525

2626
.td-toolbar-select-format {
2727
margin-left: auto;
2828
grid-column: 2;
29-
grid-row: 1 ;
29+
grid-row: 1;
3030
}
3131

3232
.td-table-container {
3333
grid-column: 1 / 2;
3434
grid-row: 2;
35+
width: 100%;
36+
max-width: 100%;
37+
}
38+
39+
.td-table-wrapper {
40+
display: flex;
41+
width: 200%;
3542
}
3643

3744
.td-table {
@@ -85,6 +92,8 @@
8592
border-top: 0;
8693
padding-top: 0;
8794
padding-bottom: 0;
95+
word-wrap: break-word;
96+
max-width: 50%;
8897
}
8998

9099
pre {
@@ -103,27 +112,117 @@ td.prefix-col {
103112
line-height: 20px;
104113
}
105114

115+
.td-btn-group {
116+
border-radius: 4px;
117+
}
118+
106119
.td-btn-group button {
107-
background-color: #4CAF50; /* Green background */
108-
border: 1px solid green; /* Green border */
120+
background-color: rgba(23,162,184,.7); /* Green background */
121+
border: 1px solid #17a2b8; /* Green border */
109122
color: white; /* White text */
110-
padding: 10px 24px; /* Some padding */
111123
cursor: pointer; /* Pointer/hand icon */
112124
float: left; /* Float the buttons side by side */
113125
}
114126

115127
.td-btn-group button:not(:last-child) {
116128
border-right: none; /* Prevent double borders */
117129
}
130+
.td-btn-group button:first-child {
131+
-webkit-border-top-left-radius: 4px;
132+
-webkit-border-bottom-left-radius: 4px;
133+
-moz-border-radius-topleft: 4px;
134+
-moz-border-radius-bottomleft: 4px;
135+
border-top-left-radius: 4px;
136+
border-bottom-left-radius: 4px;
137+
}
138+
139+
.td-btn-group button:last-child {
140+
-webkit-border-top-right-radius: 4px;
141+
-webkit-border-bottom-right-radius: 4px;
142+
-moz-border-radius-topright: 4px;
143+
-moz-border-radius-bottomright: 4px;
144+
border-top-right-radius: 4px;
145+
border-bottom-right-radius: 4px;
146+
}
118147

119148
/* Clear floats (clearfix hack) */
120149
.td-btn-group:after {
121-
content: "";
150+
content: '';
122151
clear: both;
123152
display: table;
124153
}
125154

126155
/* Add a background color on hover */
127-
.td-btn-group button:hover {
128-
background-color: #3e8e41;
156+
.td-btn-group button:hover,
157+
.td-btn-group button.active {
158+
background-color: #17a2b8;
159+
}
160+
161+
/* Customize the label (the container) */
162+
.td-checkbox-container {
163+
display: block;
164+
position: relative;
165+
padding-left: 21px;
166+
margin-bottom: 0;
167+
cursor: pointer;
168+
font-size: 16px;
169+
line-height: 28px;
170+
-webkit-user-select: none;
171+
-moz-user-select: none;
172+
-ms-user-select: none;
173+
user-select: none;
174+
}
175+
176+
/* Hide the browser's default checkbox */
177+
.td-checkbox-container input {
178+
position: absolute;
179+
opacity: 0;
180+
cursor: pointer;
181+
height: 0;
182+
width: 0;
183+
}
184+
185+
/* Create a custom checkbox */
186+
.checkmark {
187+
position: absolute;
188+
top: 7px;
189+
left: 0;
190+
height: 16px;
191+
width: 16px;
192+
background-color: #eee;
193+
}
194+
195+
/* On mouse-over, add a grey background color */
196+
.td-checkbox-container:hover input ~ .checkmark {
197+
background-color: #ccc;
198+
}
199+
200+
/* When the checkbox is checked, add a blue background */
201+
.td-checkbox-container input:checked ~ .checkmark {
202+
background-color: #17a2b8;
203+
}
204+
205+
/* Create the checkmark/indicator (hidden when not checked) */
206+
.checkmark:after {
207+
content: "";
208+
position: absolute;
209+
display: none;
210+
}
211+
212+
/* Show the checkmark when checked */
213+
.td-checkbox-container input:checked ~ .checkmark:after {
214+
display: block;
215+
}
216+
217+
/* Style the checkmark/indicator */
218+
.td-checkbox-container .checkmark:after {
219+
left: 5px;
220+
top: 3px;
221+
width: 5px;
222+
height: 10px;
223+
border: solid white;
224+
border-width: 0 3px 3px 0;
225+
-webkit-transform: rotate(45deg);
226+
-ms-transform: rotate(45deg);
227+
transform: rotate(45deg);
129228
}

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

Lines changed: 62 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,14 @@
22
<h3>Comparison</h3>
33
<div class="td-wrapper">
44
<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>
5+
<label class="td-checkbox-container">Show Lines with Diffs ({{diffs}})
6+
<input type="checkbox"
7+
id="showDiffs"
8+
[ngModel]="showLinesDiffs"
9+
(ngModelChange)="showLinesDiffsChange($event)"
10+
>
11+
<span class="checkmark"></span>
12+
</label>
1213
</div>
1314
<div class="td-toolbar-select-format">
1415
<div class="td-btn-group td-btn-group-toggle" data-toggle="buttons">
@@ -22,48 +23,59 @@ <h3>Comparison</h3>
2223
</button>
2324
</div>
2425
</div>
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>
26+
<div class="td-table-wrapper">
27+
<div class="td-table-container side-by-side" *ngIf="format === 'SideBySide'">
28+
<table class="td-table">
29+
<tbody>
30+
<tr *ngFor="let row of filteredLeftRightRows">
31+
<td scope="row" class="fit-column line-number-col"
32+
[ngClass]="{'delete-row' : row.prefix === '-', 'empty-row': !row.content}">{{(row.lineNumberLeft !== -1) ?
33+
row.lineNumberLeft : ' '}}
34+
</td>
35+
<td class="fit-column prefix-col" [ngClass]="{'delete-row' : row.prefix === '-', 'empty-row': !row.content}">
36+
<pre>{{row.prefix || ' '}}</pre>
37+
</td>
38+
<td class="content-col" [ngClass]="{'delete-row' : row.prefix === '-', 'empty-row': !row.content}">
39+
<pre>{{row.content || ' '}}</pre>
40+
</td>
41+
</tr>
42+
</tbody>
43+
</table>
44+
</div>
45+
<div class="td-table-container side-by-side" *ngIf="format === 'SideBySide'">
46+
<table class="td-table td-table-container side-by-side" *ngIf="format === 'SideBySide'">
47+
<tbody>
48+
<tr *ngFor="let row of filteredLeftRightRows">
49+
<td scope="row" class="fit-column line-number-col"
50+
[ngClass]="{'insert-row' : row.prefixRight === '+', 'empty-row': !row.contentRight}">
51+
{{(row.lineNumberRight !== -1) ? row.lineNumberRight : ' '}}
52+
</td>
53+
<td class="fit-column prefix-col"
54+
[ngClass]="{'insert-row' : row.prefixRight === '+', 'empty-row': !row.contentRight}">
55+
<pre>{{row.prefixRight || ' '}}</pre>
56+
</td>
57+
<td class="content-col" [ngClass]="{'insert-row' : row.prefixRight === '+', 'empty-row': !row.contentRight}">
58+
<pre>{{row.contentRight || ' '}}</pre>
59+
</td>
60+
</tr>
61+
</tbody>
62+
</table>
63+
</div>
64+
<table class="td-table td-table-container line-by-line" *ngIf="format === 'LineByLine'">
65+
<tbody>
66+
<tr *ngFor="let row of filteredRows">
67+
<td scope="row" class="fit-column line-number-col-left">{{row.lineNumberLeft}}</td>
68+
<td scope="row" class="fit-column line-number-col">{{row.lineNumberRight}}</td>
69+
<td class="fit-column prefix-col"
70+
[ngClass]="{'delete-row' : row.prefix === '-', 'insert-row' : row.prefix === '+'}">
71+
<pre>{{row.prefix || ' '}}</pre>
72+
</td>
73+
<td class="content-col" [ngClass]="{'delete-row' : row.prefix === '-', 'insert-row' : row.prefix === '+'}">
74+
<pre>{{row.content || ' '}}</pre>
75+
</td>
76+
</tr>
77+
</tbody>
78+
</table>
79+
</div>
6880
</div>
6981
</div>

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

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -36,14 +36,6 @@ export class NgxTextDiffComponent implements OnInit {
3636
label: 'Line by Line',
3737
value: 'LineByLine',
3838
icon: 'la-file-text'
39-
},
40-
{
41-
id: 'merge-view',
42-
name: 'merge-view',
43-
label: 'Merge View',
44-
value: 'MergeView',
45-
icon: 'la-file-text',
46-
disabled: true
4739
}
4840
];
4941

0 commit comments

Comments
 (0)