Add: close button functionality

Author: ptechofficial

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

@@ -47,3 +47,9 @@ button {
   /* border: 1px solid black; */
   margin: 8em;
 }
+
+.overlay-close {
+  margin-left: 100%;
+  transform: translateX(-100%);
+  background-color: rgb(255, 0, 0);
+}

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

@@ -2,35 +2,34 @@
   <div class="row">
     <div class="col-md-3"></div>
     <div class="col-md-6">
-      <div class="overlay-details">
+      <div class="overlay-details" [hidden]="!showOverlay">
+        <button class="overlay-close" (click)="closeOverlay()">Close</button>
         <div *ngIf="taskDetails; then trueBlock; else falseBlock"></div>
         <ng-template #trueBlock>
           <div>
-            <!-- <mat-accordion multi="true"> -->
-            <mat-expansion-panel [expanded]="false">
-              <mat-expansion-panel-header>
-                <mat-panel-title>
-                  <b>Risk</b>
-                </mat-panel-title>
-              </mat-expansion-panel-header>
-              <ng-template matExpansionPanelContent>
-                <p [innerHTML]="taskDetails.risk"></p>
-              </ng-template>
-            </mat-expansion-panel>
-            <!-- </mat-accordion> -->
+            <mat-accordion multi="true">
+              <mat-expansion-panel [expanded]="false">
+                <mat-expansion-panel-header>
+                  <mat-panel-title>
+                    <b>Risk</b>
+                  </mat-panel-title>
+                </mat-expansion-panel-header>
+                <ng-template matExpansionPanelContent>
+                  <p [innerHTML]="taskDetails.risk"></p>
+                </ng-template>
+              </mat-expansion-panel>
+            </mat-accordion>
           </div>
         </ng-template>
         <ng-template #falseBlock>
           <div>
-            <!-- <mat-accordion multi="true"> -->
             <mat-expansion-panel [expanded]="false" hideToggle disabled>
               <mat-expansion-panel-header>
                 <mat-panel-title>
                   <b>None Selected</b>
                 </mat-panel-title>
               </mat-expansion-panel-header>
             </mat-expansion-panel>
-            <!-- </mat-accordion> -->
           </div>
         </ng-template>
       </div>
@@ -43,7 +42,6 @@
           <mat-card-content *ngFor="let task of tasksData; index as i">
             <div *ngIf="task.ifTaskDone; then trueBlock; else falseBlock"></div>
             <p>
-              <!-- Comprehensive Heat Map -->
               <ng-template #trueBlock>
                 <mat-checkbox
                   (click)="this.toggleCheckbox(i)"

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

@@ -36,8 +36,11 @@ export class CircularHeatmapComponent implements OnInit {
   YamlObject: any;
   segment_labels: string[] = [];
   taskDetails: any;
+  showOverlay: boolean;
 
-  constructor(private yaml: ymlService, private router: Router) {}
+  constructor(private yaml: ymlService, private router: Router) {
+    this.showOverlay = false;
+  }
 
   ngOnInit(): void {
     this.yaml.setURI('./assets/YAML/meta.yaml');
@@ -569,11 +572,13 @@ export class CircularHeatmapComponent implements OnInit {
     };
     this.yaml.setURI('./assets/YAML/generated/generated.yaml');
 
-    // console.log(navigationExtras.queryParams.dimension);
     this.taskDetails = this.YamlObject[dim][subdim][taskName];
-    // console.log(this.ALL_CARD_DATA);
     console.log(this.taskDetails);
-    // this.router.navigate([this.Routing], navigationExtras);
+    this.showOverlay = true;
+  }
+  closeOverlay() {
+    console.log('hey');
+    this.showOverlay = false;
   }
   SaveEditedYAMLfile() {
     //console.log(this.YamlObject);