Skip to content

Commit e42c572

Browse files
ptechofficialptechofficial
committed
Overlay details added and updated UI
1 parent 5905710 commit e42c572

File tree

3 files changed

+137
-23
lines changed

3 files changed

+137
-23
lines changed

‎src/app/component/circular-heatmap/circular-heatmap.component.css‎

Lines changed: 14 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
shape-rendering: crispEdges;
99
}
1010

11-
button {
11+
.normal-button {
1212
background-color: white;
1313
border: none;
1414
text-align: left;
@@ -35,21 +35,27 @@ button {
3535
}
3636
.overlay-details {
3737
z-index: 2;
38-
background-color: rgba(255, 255, 255, 0.21);
38+
background-color: rgba(0, 0, 0, 0.555);
3939
backdrop-filter: blur(3px);
40-
position: fixed;
40+
position: absolute;
4141
/* padding: 6em; */
4242
/* margin-left: 20%; */
43-
width: 55%;
44-
height: 100%;
43+
width: 60%;
44+
min-height: 100%;
4545
}
46-
.overlay-details > div {
46+
.overlay-modal {
4747
/* border: 1px solid black; */
48-
margin: 8em;
48+
margin: 5em;
49+
background-color: rgb(238, 238, 238);
50+
padding: 1em;
51+
border-radius: 1em;
52+
height: 100%;
4953
}
5054

5155
.overlay-close {
5256
margin-left: 100%;
5357
transform: translateX(-100%);
54-
background-color: rgb(255, 0, 0);
58+
background-color: rgba(0, 0, 0, 0);
59+
border: none;
60+
color: white;
5561
}

‎src/app/component/circular-heatmap/circular-heatmap.component.html‎

Lines changed: 115 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,29 @@
33
<div class="col-md-3"></div>
44
<div class="col-md-6">
55
<div class="overlay-details" [hidden]="!showOverlay">
6-
<button class="overlay-close" (click)="closeOverlay()">Close</button>
7-
<div *ngIf="taskDetails; then trueBlock; else falseBlock"></div>
8-
<ng-template #trueBlock>
9-
<div>
6+
<button class="overlay-close" (click)="closeOverlay()">
7+
<mat-icon class="white-icon">close</mat-icon>
8+
</button>
9+
<div *ngIf="taskDetails; then taskTrue; else taskFalse"></div>
10+
<ng-template #taskTrue>
11+
<div class="overlay-modal">
1012
<mat-accordion multi="true">
13+
<div
14+
*ngIf="
15+
taskDetails.navigationExtras;
16+
then navigationTrue;
17+
else navigationFalse
18+
"></div>
19+
<ng-template #navigationTrue>
20+
<h2>{{ taskDetails.navigationExtras.dimension }} ></h2>
21+
<h3>{{ taskDetails.navigationExtras.subDimension }} ></h3>
22+
<h4>
23+
{{ taskDetails.navigationExtras.taskName }}
24+
</h4>
25+
</ng-template>
26+
<ng-template #navigationFalse>
27+
<h2>Nothing to show</h2>
28+
</ng-template>
1129
<mat-expansion-panel [expanded]="false">
1230
<mat-expansion-panel-header>
1331
<mat-panel-title>
@@ -18,15 +36,101 @@
1836
<p [innerHTML]="taskDetails.risk"></p>
1937
</ng-template>
2038
</mat-expansion-panel>
39+
<mat-expansion-panel [expanded]="false">
40+
<mat-expansion-panel-header>
41+
<mat-panel-title>
42+
<b>Measure</b>
43+
</mat-panel-title>
44+
</mat-expansion-panel-header>
45+
<ng-template matExpansionPanelContent>
46+
<p [innerHTML]="taskDetails.measure"></p>
47+
</ng-template>
48+
</mat-expansion-panel>
49+
<mat-expansion-panel [expanded]="false">
50+
<mat-expansion-panel-header>
51+
<mat-panel-title>
52+
<b>Implementation Guide</b>
53+
</mat-panel-title>
54+
</mat-expansion-panel-header>
55+
<ng-template matExpansionPanelContent>
56+
<ul>
57+
<li *ngFor="let implement of taskDetails.implementation">
58+
<a href="{{ implement.url }}">{{ implement.name }}</a>
59+
</li>
60+
</ul>
61+
</ng-template>
62+
</mat-expansion-panel>
63+
<mat-expansion-panel [expanded]="false">
64+
<mat-expansion-panel-header>
65+
<mat-panel-title>
66+
<b>Depends On</b>
67+
</mat-panel-title>
68+
</mat-expansion-panel-header>
69+
<ng-template matExpansionPanelContent>
70+
<p [innerHTML]="taskDetails.dependsOn"></p>
71+
</ng-template>
72+
</mat-expansion-panel>
73+
<mat-expansion-panel [expanded]="false">
74+
<mat-expansion-panel-header>
75+
<mat-panel-title>
76+
<b>Difficulty of Implementation</b>
77+
</mat-panel-title>
78+
</mat-expansion-panel-header>
79+
<ng-template matExpansionPanelContent>
80+
<p>
81+
Knowledge:
82+
{{ taskDetails.difficultyOfImplementation.knowledge }}
83+
</p>
84+
<p>Time: {{ taskDetails.difficultyOfImplementation.time }}</p>
85+
<p>
86+
Resources:
87+
{{ taskDetails.difficultyOfImplementation.resources }}
88+
</p>
89+
</ng-template>
90+
</mat-expansion-panel>
91+
<mat-expansion-panel [expanded]="false">
92+
<mat-expansion-panel-header>
93+
<mat-panel-title>
94+
<b>References</b>
95+
</mat-panel-title>
96+
</mat-expansion-panel-header>
97+
<ng-template matExpansionPanelContent>
98+
<b>ISO 27001-2017:</b>
99+
100+
<ul>
101+
<li
102+
*ngFor="
103+
let iso of taskDetails.references['iso27001-2017']
104+
">
105+
{{ iso }}
106+
</li>
107+
</ul>
108+
<b>ISO 27001-2022:</b>
109+
110+
<ul>
111+
<li
112+
*ngFor="
113+
let iso of taskDetails.references['iso27001-2022']
114+
">
115+
{{ iso }}
116+
</li>
117+
</ul>
118+
<!-- </p> -->
119+
<p>
120+
<b>Resources:</b>
121+
{{ taskDetails.references.samm2 }}
122+
</p>
123+
</ng-template>
124+
</mat-expansion-panel>
21125
</mat-accordion>
22126
</div>
23127
</ng-template>
24-
<ng-template #falseBlock>
25-
<div>
128+
<ng-template #taskFalse>
129+
<div class="overlay-modal">
26130
<mat-expansion-panel [expanded]="false" hideToggle disabled>
27131
<mat-expansion-panel-header>
28132
<mat-panel-title>
29-
<b>None Selected</b>
133+
<b>Nothing to show :P</b>
30134
</mat-panel-title>
31135
</mat-expansion-panel-header>
32136
</mat-expansion-panel>
@@ -49,6 +153,7 @@
49153
color="primary">
50154
</mat-checkbox>
51155
<button
156+
class="normal-button"
52157
(click)="
53158
navigate(currentDimension, cardHeader, 1, task['taskName'])
54159
">
@@ -62,6 +167,7 @@
62167
color="primary">
63168
</mat-checkbox>
64169
<button
170+
class="normal-button"
65171
(click)="
66172
navigate(currentDimension, cardHeader, 1, task['taskName'])
67173
">
@@ -72,12 +178,14 @@
72178
</mat-card-content>
73179
</mat-card>
74180
<button
181+
class="normal-button"
75182
mat-raised-button
76183
class="downloadButtonClass"
77184
(click)="SaveEditedYAMLfile()">
78185
Download edited YAML file
79186
</button>
80187
<button
188+
class="normal-button"
81189
mat-raised-button
82190
class="resetButtonClass"
83191
(click)="ResetIsImplemented()">

‎src/app/component/circular-heatmap/circular-heatmap.component.ts‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -562,17 +562,17 @@ export class CircularHeatmapComponent implements OnInit {
562562
}
563563

564564
navigate(dim: string, subdim: string, lvl: Number, taskName: string) {
565-
let navigationExtras: NavigationExtras = {
566-
queryParams: {
567-
dimension: dim,
568-
subDimension: subdim,
569-
level: lvl,
570-
taskName: taskName,
571-
},
565+
let navigationExtras = {
566+
dimension: dim,
567+
subDimension: subdim,
568+
level: lvl,
569+
taskName: taskName,
572570
};
573571
this.yaml.setURI('./assets/YAML/generated/generated.yaml');
574-
575572
this.taskDetails = this.YamlObject[dim][subdim][taskName];
573+
if (this.taskDetails) {
574+
this.taskDetails.navigationExtras = navigationExtras;
575+
}
576576
console.log(this.taskDetails);
577577
this.showOverlay = true;
578578
}

0 commit comments

Comments
 (0)