From 1222ea71858797672a2dd22b5b3a5c6331db6a6c Mon Sep 17 00:00:00 2001
From: Armin Stanitzok <21990230+GODrums@users.noreply.github.com>
Date: Wed, 20 Nov 2024 09:42:11 +0100
Subject: [PATCH] Show Parts of the Legend per default (#181)

Co-authored-by: Felix T.J. Dietrich <felixtj.dietrich@tum.de>
Co-authored-by: Felix T.J. Dietrich <felix_dietrich@gmx.de>
---
 .../leaderboard/legend/legend.component.html  | 62 +++++++++----------
 .../leaderboard/legend/legends.component.ts   | 32 ++++++----
 2 files changed, 47 insertions(+), 47 deletions(-)

diff --git a/webapp/src/app/home/leaderboard/legend/legend.component.html b/webapp/src/app/home/leaderboard/legend/legend.component.html
index b3178176..5f8c8eea 100644
--- a/webapp/src/app/home/leaderboard/legend/legend.component.html
+++ b/webapp/src/app/home/leaderboard/legend/legend.component.html
@@ -1,20 +1,7 @@
 <div hlmCard>
-  <div class="flex items-center group hover:cursor-pointer" (click)="toggleOpen()">
-    <div hlmCardHeader class="flex-1">
-      <h3 hlmCardTitle class="group-hover:underline">Leaderboard Legend</h3>
-      <p hlmCardDescription class="group-hover:underline">Explanation of the most important elements</p>
-    </div>
-    <div class="flex items-center gap-2 px-6">
-      @if (open()) {
-        <hlm-icon name="lucideChevronsUp" />
-      } @else {
-        <hlm-icon name="lucideChevronsDown" />
-      }
-    </div>
-  </div>
-  <div hlmCardContent [class]="contentClass()">
+  <div hlmCardContent class="flex flex-col gap-y-4 pb-0">
     <div class="flex flex-col gap-2 sm:min-w-[250px]">
-      <h4 class="font-medium mb-2">Icons</h4>
+      <h4 class="mb-2 text-lg font-semibold leading-none tracking-tight">Icons</h4>
       <div class="flex items-center gap-2 text-github-muted-foreground">
         <ng-icon [svg]="octGitPullRequest" size="16" />
         Reviewed pull requests
@@ -35,25 +22,32 @@ <h4 class="font-medium mb-2">Icons</h4>
         <ng-icon [svg]="octCommentDiscussion" size="16" />
         Code comments
       </div>
-    </div>
-    <div class="max-w-[500px]">
-      <h4 class="font-medium mb-2">Scoring System</h4>
-      <p class="text-sm text-github-muted-foreground">
-        The score approximates your contribution activity by evaluating your review interactions and the complexity of the pull requests you've reviewed.
-        <span class="font-semibold">Change requests are valued highest</span>, followed by approvals and comments. The score increases with the number of review interactions. Pull
-        request complexity &mdash; based on factors like changed files, commits, additions, and deletions &mdash; also enhances your score;
-        <span class="font-semibold">more complex pull requests contribute more</span>. The final score balances your interactions with the complexity of the work reviewed,
-        highlighting both your engagement and the difficulty of the tasks you've undertaken. This score reflects your impact but does not directly measure time invested or work
-        quality.
-        <a
-          hlmBtn
-          variant="link"
-          size="none"
-          href="https://github.com/ls1intum/Hephaestus/blob/961614388f7860319a076089be0095190bf20a71/server/application-server/src/main/java/de/tum/in/www1/hephaestus/leaderboard/LeaderboardService.java#L160"
-        >
-          [source]
-        </a>
-      </p>
+      <div hlmAccordion>
+        <div hlmAccordionItem class="border-none">
+          <button hlmAccordionTrigger>
+            Scoring system
+            <hlm-icon hlmAccIcon />
+          </button>
+          <hlm-accordion-content class="max-w-xl">
+            <p class="text-sm text-github-muted-foreground">
+              The score approximates your contribution activity by evaluating your review interactions and the complexity of the pull requests you've reviewed.
+              <span class="font-semibold">Change requests are valued highest</span>, followed by approvals and comments. The score increases with the number of review interactions.
+              Pull request complexity &mdash; based on factors like changed files, commits, additions, and deletions &mdash; also enhances your score;
+              <span class="font-semibold">more complex pull requests contribute more</span>. The final score balances your interactions with the complexity of the work reviewed,
+              highlighting both your engagement and the difficulty of the tasks you've undertaken. This score reflects your impact but does not directly measure time invested or
+              work quality.
+              <a
+                hlmBtn
+                variant="link"
+                size="none"
+                href="https://github.com/ls1intum/Hephaestus/blob/961614388f7860319a076089be0095190bf20a71/server/application-server/src/main/java/de/tum/in/www1/hephaestus/leaderboard/LeaderboardService.java#L160"
+              >
+                [source]
+              </a>
+            </p>
+          </hlm-accordion-content>
+        </div>
+      </div>
     </div>
   </div>
 </div>
diff --git a/webapp/src/app/home/leaderboard/legend/legends.component.ts b/webapp/src/app/home/leaderboard/legend/legends.component.ts
index bc6da240..d25d87dc 100644
--- a/webapp/src/app/home/leaderboard/legend/legends.component.ts
+++ b/webapp/src/app/home/leaderboard/legend/legends.component.ts
@@ -1,18 +1,31 @@
-import { Component, computed, input, signal } from '@angular/core';
+import { Component, input } from '@angular/core';
 import { NgIconComponent } from '@ng-icons/core';
 import { octFileDiff, octCheck, octComment, octCommentDiscussion, octGitPullRequest } from '@ng-icons/octicons';
 import { HlmIconComponent } from '@spartan-ng/ui-icon-helm';
 import { HlmCardModule } from '@spartan-ng/ui-card-helm';
-import { provideIcons } from '@spartan-ng/ui-icon-helm';
-import { lucideChevronsDown, lucideChevronsUp } from '@ng-icons/lucide';
-import { cn } from '@app/utils';
 import { HlmButtonDirective } from '@spartan-ng/ui-button-helm';
+import {
+  HlmAccordionContentComponent,
+  HlmAccordionDirective,
+  HlmAccordionIconDirective,
+  HlmAccordionItemDirective,
+  HlmAccordionTriggerDirective
+} from '@spartan-ng/ui-accordion-helm';
 
 @Component({
   selector: 'app-leaderboard-legend',
   standalone: true,
-  imports: [HlmCardModule, NgIconComponent, HlmIconComponent, HlmButtonDirective],
-  providers: [provideIcons({ lucideChevronsDown, lucideChevronsUp })],
+  imports: [
+    HlmAccordionDirective,
+    HlmAccordionItemDirective,
+    HlmAccordionTriggerDirective,
+    HlmAccordionContentComponent,
+    HlmAccordionIconDirective,
+    HlmCardModule,
+    NgIconComponent,
+    HlmIconComponent,
+    HlmButtonDirective
+  ],
   templateUrl: './legend.component.html'
 })
 export class LeaderboardLegendComponent {
@@ -23,11 +36,4 @@ export class LeaderboardLegendComponent {
   protected octGitPullRequest = octGitPullRequest;
 
   isLoading = input<boolean>();
-  open = signal(false);
-
-  contentClass = computed(() => cn('flex flex-wrap gap-y-4 gap-x-8 pt-2', { hidden: !this.open() }));
-
-  toggleOpen() {
-    this.open.set(!this.open());
-  }
 }