Close button inside popup and elements extended by default

Author: ptechofficial

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

@@ -52,10 +52,19 @@
   height: 100%;
 }
 
+.overlay-header {
+  display: grid;
+  grid-template-columns: 1fr 0.1fr;
+}
+
 .overlay-close {
-  margin-left: 100%;
-  transform: translateX(-100%);
+  border: black solid 1px;
   background-color: rgba(0, 0, 0, 0);
   border: none;
-  color: white;
+  color: black;
+  grid-column: 2/3;
+  grid-row: 1/4;
+  display: grid;
+  justify-content: top;
+  margin-left: auto;
 }

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

@@ -3,30 +3,39 @@
     <div class="col-md-3"></div>
     <div class="col-md-6">
       <div class="overlay-details" [hidden]="!showOverlay">
-        <button class="overlay-close" (click)="closeOverlay()">
-          <mat-icon class="white-icon">close</mat-icon>
-        </button>
         <div *ngIf="taskDetails; then taskTrue; else taskFalse"></div>
         <ng-template #taskTrue>
           <div class="overlay-modal">
-            <mat-accordion multi="true">
+            <mat-accordion multi="true" class="overlay-accordion">
               <div
                 *ngIf="
                   taskDetails.navigationExtras;
                   then navigationTrue;
                   else navigationFalse
                 "></div>
-              <ng-template #navigationTrue>
-                <h2>{{ taskDetails.navigationExtras.dimension }} ></h2>
-                <h3>{{ taskDetails.navigationExtras.subDimension }} ></h3>
-                <h4>
-                  {{ taskDetails.navigationExtras.taskName }}
-                </h4>
-              </ng-template>
-              <ng-template #navigationFalse>
-                <h2>Nothing to show</h2>
-              </ng-template>
-              <mat-expansion-panel [expanded]="false">
+              <div>
+                <ng-template #navigationTrue>
+                  <div class="overlay-header">
+                    <button class="overlay-close" (click)="closeOverlay()">
+                      <mat-icon class="white-icon">close</mat-icon>
+                    </button>
+                    <h2>{{ taskDetails.navigationExtras.dimension }} ></h2>
+                    <h3>{{ taskDetails.navigationExtras.subDimension }} ></h3>
+                    <h4>
+                      {{ taskDetails.navigationExtras.taskName }}
+                    </h4>
+                  </div>
+                </ng-template>
+                <ng-template #navigationFalse>
+                  <div class="overlay-header">
+                    <button class="overlay-close" (click)="closeOverlay()">
+                      <mat-icon class="white-icon">close</mat-icon>
+                    </button>
+                    <h2>Nothing to show</h2>
+                  </div>
+                </ng-template>
+              </div>
+              <mat-expansion-panel [expanded]="true">
                 <mat-expansion-panel-header>
                   <mat-panel-title>
                     <b>Risk</b>
@@ -36,7 +45,7 @@ <h2>Nothing to show</h2>
                   <p [innerHTML]="taskDetails.risk"></p>
                 </ng-template>
               </mat-expansion-panel>
-              <mat-expansion-panel [expanded]="false">
+              <mat-expansion-panel [expanded]="true">
                 <mat-expansion-panel-header>
                   <mat-panel-title>
                     <b>Measure</b>
@@ -46,7 +55,7 @@ <h2>Nothing to show</h2>
                   <p [innerHTML]="taskDetails.measure"></p>
                 </ng-template>
               </mat-expansion-panel>
-              <mat-expansion-panel [expanded]="false">
+              <mat-expansion-panel [expanded]="true">
                 <mat-expansion-panel-header>
                   <mat-panel-title>
                     <b>Implementation Guide</b>
@@ -60,7 +69,7 @@ <h2>Nothing to show</h2>
                   </ul>
                 </ng-template>
               </mat-expansion-panel>
-              <mat-expansion-panel [expanded]="false">
+              <mat-expansion-panel [expanded]="true">
                 <mat-expansion-panel-header>
                   <mat-panel-title>
                     <b>Depends On</b>
@@ -70,7 +79,7 @@ <h2>Nothing to show</h2>
                   <p [innerHTML]="taskDetails.dependsOn"></p>
                 </ng-template>
               </mat-expansion-panel>
-              <mat-expansion-panel [expanded]="false">
+              <mat-expansion-panel [expanded]="true">
                 <mat-expansion-panel-header>
                   <mat-panel-title>
                     <b>Difficulty of Implementation</b>
@@ -88,7 +97,7 @@ <h2>Nothing to show</h2>
                   </p>
                 </ng-template>
               </mat-expansion-panel>
-              <mat-expansion-panel [expanded]="false">
+              <mat-expansion-panel [expanded]="true">
                 <mat-expansion-panel-header>
                   <mat-panel-title>
                     <b>References</b>
@@ -127,7 +136,10 @@ <h2>Nothing to show</h2>
         </ng-template>
         <ng-template #taskFalse>
           <div class="overlay-modal">
-            <mat-expansion-panel [expanded]="false" hideToggle disabled>
+            <button class="overlay-close" (click)="closeOverlay()">
+              <mat-icon class="white-icon">close</mat-icon>
+            </button>
+            <mat-expansion-panel [expanded]="true" hideToggle disabled>
               <mat-expansion-panel-header>
                 <mat-panel-title>
                   <b>Nothing to show :P</b>