Skip to content

Commit 453a4b4

Browse files
Animesh RawatAnimesh Rawat
Animesh Rawat
authored and
Animesh Rawat
committed
updated UI for better UX
1 parent acfd43e commit 453a4b4

9 files changed

+364
-147
lines changed

‎angular.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@
2828
"src/assets"
2929
],
3030
"styles": [
31+
"./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
3132
"src/styles.scss"
3233
],
3334
"scripts": []
@@ -91,6 +92,7 @@
9192
"src/assets"
9293
],
9394
"styles": [
95+
"./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
9496
"src/styles.scss"
9597
],
9698
"scripts": []

‎package-lock.json

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

‎package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,12 @@
1212
"private": true,
1313
"dependencies": {
1414
"@angular/animations": "~11.1.1",
15+
"@angular/cdk": "^11.2.13",
1516
"@angular/common": "~11.1.1",
1617
"@angular/compiler": "~11.1.1",
1718
"@angular/core": "~11.1.1",
1819
"@angular/forms": "~11.1.1",
20+
"@angular/material": "^11.2.13",
1921
"@angular/platform-browser": "~11.1.1",
2022
"@angular/platform-browser-dynamic": "~11.1.1",
2123
"@angular/router": "~11.1.1",

‎src/app/app.component.html

Lines changed: 98 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,102 @@
1-
<div style="float: right;">
1+
<div class="app-container">
2+
<!-- header -->
3+
<div class="app-container-header">
4+
<mat-toolbar color="primary">
5+
<div class="app-container-header-text">
6+
<span>Angular JSON Difference Checker </span>
7+
</div>
8+
</mat-toolbar>
9+
</div>
10+
11+
<!-- body -->
12+
<div class="app-container-body">
13+
<div class="app-container-body-github">
14+
<button
15+
mat-button
16+
onClick="window.open('https://github.com/rawatanimesh/angular-json-diff-jdd')"
17+
>
18+
View on Github
19+
<mat-icon>open_in_new</mat-icon>
20+
</button>
21+
</div>
22+
23+
<!-- <div>
24+
<button
25+
*ngIf="!diffReport"
26+
mat-raised-button
27+
color="primary"
28+
(click)="compare()"
29+
>
30+
Click to get comparison
31+
</button>
32+
</div> -->
33+
34+
<mat-card *ngIf="diffReport" class="app-container-body-diffCard">
35+
<mat-card-title>Difference Breakdown</mat-card-title>
36+
<mat-card-subtitle class="app-container-body-diffCard-subtitle"
37+
>A detailed report of changes between the two JSON</mat-card-subtitle
38+
>
39+
<div class="app-container-body-diffCount">
40+
<div class="app-container-body-diffCount-box">
41+
<div class="app-container-body-diffCount-box-label">
42+
Total Difference Count : &nbsp;
43+
</div>
44+
<div class="app-container-body-diffCount-box-count">
45+
{{ diffReport.totalDiffCount }}
46+
</div>
47+
</div>
48+
<div class="app-container-body-diffCount-box missing">
49+
<div class="app-container-body-diffCount-box-label">
50+
Missing Properties : &nbsp;
51+
</div>
52+
<div class="app-container-body-diffCount-box-count">
53+
{{ diffReport.missingProperties }}
54+
</div>
55+
</div>
56+
<div class="app-container-body-diffCount-box unequal">
57+
<div class="app-container-body-diffCount-box-label">
58+
Unequal Values : &nbsp;
59+
</div>
60+
<div class="app-container-body-diffCount-box-count">
61+
{{ diffReport.unequalValues }}
62+
</div>
63+
</div>
64+
<div class="app-container-body-diffCount-box incorrect">
65+
<div class="app-container-body-diffCount-box-label">
66+
Incorrect Types : &nbsp;
67+
</div>
68+
<div class="app-container-body-diffCount-box-count">
69+
{{ diffReport.incorrectTypes }}
70+
</div>
71+
</div>
72+
</div>
73+
</mat-card>
74+
75+
<div class="app-container-body-comparison">
76+
<app-json-comparison
77+
[leftTree]="sampleArray2[0]"
78+
[rightTree]="sampleArray2[1]"
79+
[hideInitialStep]="true"
80+
[hideReport]="true"
81+
(differenceReport)="differenceReport($event)"
82+
></app-json-comparison>
83+
</div>
84+
</div>
85+
</div>
86+
87+
<!-- <div style="float: right">
288
<a href="https://github.com/rawatanimesh/angular-json-diff-jdd">
3-
<button>
4-
Source Code
5-
</button>
89+
<button>Source Code</button>
690
</a>
7-
</div>
8-
<div *ngIf="diffReport">
9-
<h3>
10-
Difference Report :-
11-
</h3>
91+
</div> -->
92+
<!-- <div *ngIf="diffReport">
93+
<h3>Difference Report :-</h3>
1294
<ul>
13-
<li>Total Diff Count : {{diffReport.totalDiffCount}}</li>
14-
<li>Missing Properties : {{diffReport.missingProperties}}</li>
15-
<li>Unequal Values : {{diffReport.unequalValues}}</li>
16-
<li>Incorrect Types : {{diffReport.incorrectTypes}}</li>
95+
<li>Total Diff Count : {{ diffReport.totalDiffCount }}</li>
96+
<li>Missing Properties : {{ diffReport.missingProperties }}</li>
97+
<li>Unequal Values : {{ diffReport.unequalValues }}</li>
98+
<li>Incorrect Types : {{ diffReport.incorrectTypes }}</li>
1799
</ul>
18-
</div>
19-
<app-json-comparison
20-
[leftTree]="sampleArray2[0]"
21-
[rightTree]="sampleArray2[1]"
22-
[hideInitialStep]="true"
23-
[hideReport]="true"
24-
(differenceReport)="differenceReport($event)"
25-
></app-json-comparison>
26-
<button *ngIf="!diffReport" (click)="compare()">Compare</button>
100+
</div> -->
101+
102+
<!-- <button *ngIf="!diffReport" (click)="compare()">Compare</button> -->

‎src/app/app.component.scss

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
body {
2+
background-color: rgb(177, 122, 50);
3+
}
4+
.app-container {
5+
&-header {
6+
&-text {
7+
width: 100%;
8+
text-align: center;
9+
}
10+
}
11+
&-body {
12+
padding: 1em;
13+
&-github {
14+
display: flex;
15+
justify-content: end;
16+
}
17+
&-diffCard {
18+
background-color: #fff6f9;
19+
}
20+
&-diffCount {
21+
padding: 0.2em;
22+
display: flex;
23+
justify-content: space-between;
24+
&-box {
25+
display: flex;
26+
justify-content: space-between;
27+
&-label {
28+
}
29+
&-count {
30+
font-weight: bold;
31+
}
32+
}
33+
}
34+
&-comparison {
35+
padding: 1em 0;
36+
}
37+
}
38+
}
39+
40+
.missing {
41+
background: rgba(0, 160, 80, 0.1);
42+
color: green;
43+
}
44+
.unequal {
45+
background: rgba(50, 57, 88, 0.1);
46+
color: #333;
47+
}
48+
.incorrect {
49+
background: rgba(220, 100, 100, 0.1);
50+
color: #c00;
51+
}

0 commit comments

Comments
 (0)