feat: move activity modal trigger to info icon

Author: sawankshrma

src/app/app.module.ts

@@ -31,6 +31,7 @@ import { ProgressSliderComponent } from './component/progress-slider/progress-sl
 import { KpiComponent } from './component/kpi/kpi.component';
 import { MatDialogModule, MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { TeamsGroupsEditorModule } from './component/teams-groups-editor/teams-groups-editor.module';
+import { MatTooltipModule } from '@angular/material/tooltip';
 
 @NgModule({
   declarations: [
@@ -67,6 +68,7 @@ import { TeamsGroupsEditorModule } from './component/teams-groups-editor/teams-g
     FormsModule,
     HttpClientModule,
     TeamsGroupsEditorModule,
+    MatTooltipModule,
   ],
   providers: [
     LoaderService,

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

@@ -8,12 +8,27 @@
   shape-rendering: crispEdges;
 }
 
-.title-button {
-  background-color: transparent;
-  border: none;
-  text-align: left;
-  cursor: pointer;
-  font-weight: 700;
+.title-text {
+  font-weight: 500;
+  margin-right: 5px;
+}
+
+.info-button {
+  width: 24px;
+  height: 24px;
+  line-height: 24px;
+  opacity: 0.6;
+}
+.compact-tooltip {
+  transform: translateY(-20px) !important;
+}
+
+.info-icon {
+  font-size: 18px;
+}
+
+.info-button:hover {
+  opacity: 1;
 }
 
 .right-panel {

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

@@ -73,8 +73,16 @@ <h2>Nothing to show</h2>
               (closed)="onPanelClosed(activity)">
               <mat-expansion-panel-header>
                 <mat-panel-title>
-                  <button class="title-button" (click)="openActivityDetails(activity['uuid'])">
+                  <span class="title-text">
                     {{ activity['name'] }}
+                  </span>
+                  <button
+                    mat-icon-button
+                    class="info-button"
+                    matTooltip="Open activity description"
+                    matTooltipClass="compact-tooltip"
+                    (click)="openActivityDetails(activity['uuid']); $event.stopPropagation()">
+                    <mat-icon class="info-icon">info</mat-icon>
                   </button>
                 </mat-panel-title>
               </mat-expansion-panel-header>

src/styles.css

@@ -58,4 +58,8 @@ h1, h2, h3 {
 
 .usage-dimensions img {
     max-width: 40rem;
-}
+}
+
+.compact-tooltip {
+  transform: translateY(-10px) !important;
+}