Extract icons into files

ls1intum · Sep 13, 2024 · d207561 · d207561
1 parent 97ce98e
commit d207561
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 19 deletions.
diff --git a/webapp/src/app/components/leaderboard/leaderboard.component.html b/webapp/src/app/components/leaderboard/leaderboard.component.html
@@ -26,30 +26,15 @@ <h1 class="text-3xl font-bold">Artemis Leaderboard</h1>
               <td appTableCell>{{ entry.score }}</td>
               <td appTableCell class="flex items-center gap-4">
                 <div class="flex items-center gap-2">
-                  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-                    <path
-                      d="M1 1.75C1 0.784 1.784 0 2.75 0H10.336C10.8 0 11.245 0.184 11.573 0.513L14.487 3.427C14.816 3.755 15 4.2 15 4.664V14.25C15 14.7141 14.8156 15.1592 14.4874 15.4874C14.1592 15.8156 13.7141 16 13.25 16H2.75C2.28587 16 1.84075 15.8156 1.51256 15.4874C1.18437 15.1592 1 14.7141 1 14.25V1.75ZM2.75 1.5C2.6837 1.5 2.62011 1.52634 2.57322 1.57322C2.52634 1.62011 2.5 1.6837 2.5 1.75V14.25C2.5 14.388 2.612 14.5 2.75 14.5H13.25C13.3163 14.5 13.3799 14.4737 13.4268 14.4268C13.4737 14.3799 13.5 14.3163 13.5 14.25V4.664C13.5001 4.63115 13.4936 4.59861 13.4811 4.56823C13.4686 4.53786 13.4502 4.51026 13.427 4.487L10.513 1.573C10.4897 1.5498 10.4621 1.53141 10.4318 1.51888C10.4014 1.50636 10.3689 1.49994 10.336 1.5H2.75ZM8 3.25C8.19891 3.25 8.38968 3.32902 8.53033 3.46967C8.67098 3.61032 8.75 3.80109 8.75 4V5.5H10.25C10.4489 5.5 10.6397 5.57902 10.7803 5.71967C10.921 5.86032 11 6.05109 11 6.25C11 6.44891 10.921 6.63968 10.7803 6.78033C10.6397 6.92098 10.4489 7 10.25 7H8.75V8.5C8.75 8.69891 8.67098 8.88968 8.53033 9.03033C8.38968 9.17098 8.19891 9.25 8 9.25C7.80109 9.25 7.61032 9.17098 7.46967 9.03033C7.32902 8.88968 7.25 8.69891 7.25 8.5V7H5.75C5.55109 7 5.36032 6.92098 5.21967 6.78033C5.07902 6.63968 5 6.44891 5 6.25C5 6.05109 5.07902 5.86032 5.21967 5.71967C5.36032 5.57902 5.55109 5.5 5.75 5.5H7.25V4C7.25 3.80109 7.32902 3.61032 7.46967 3.46967C7.61032 3.32902 7.80109 3.25 8 3.25ZM5 11.25C5 11.0511 5.07902 10.8603 5.21967 10.7197C5.36032 10.579 5.55109 10.5 5.75 10.5H10.25C10.4489 10.5 10.6397 10.579 10.7803 10.7197C10.921 10.8603 11 11.0511 11 11.25C11 11.4489 10.921 11.6397 10.7803 11.7803C10.6397 11.921 10.4489 12 10.25 12H5.75C5.55109 12 5.36032 11.921 5.21967 11.7803C5.07902 11.6397 5 11.4489 5 11.25Z"
-                      fill="#F85149"
-                    />
-                  </svg>
+                  <app-icon-pull-request-changes-requested />
                   {{ entry.changes_requested }}
                 </div>
                 <div class="flex items-center gap-2">
-                  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-                    <path
-                      d="M13.7613 4.21934C13.9017 4.35997 13.9806 4.55059 13.9806 4.74934C13.9806 4.94809 13.9017 5.13871 13.7613 5.27934L6.51127 12.5293C6.37064 12.6698 6.18002 12.7487 5.98127 12.7487C5.78252 12.7487 5.59189 12.6698 5.45127 12.5293L2.20127 9.27934C2.06886 9.13708 1.99676 8.94903 2.00011 8.75471C2.00347 8.56039 2.08202 8.37494 2.21927 8.23734C2.35687 8.1001 2.54232 8.02154 2.73664 8.01818C2.93095 8.01483 3.11901 8.08693 3.26127 8.21934L5.98127 10.9393L12.7013 4.21934C12.8419 4.07889 13.0325 4 13.2313 4C13.43 4 13.6206 4.07889 13.7613 4.21934Z"
-                      fill="#3FB950"
-                    />
-                  </svg>
+                  <app-icon-pull-request-approved />
                   {{ entry.approvals }}
                 </div>
                 <div class="flex items-center gap-2">
-                  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-                    <path
-                      d="M1 2.75C1 1.784 1.784 1 2.75 1H13.25C14.216 1 15 1.784 15 2.75V10.25C15 10.7141 14.8156 11.1592 14.4874 11.4874C14.1592 11.8156 13.7141 12 13.25 12H9.06L6.487 14.573C6.28305 14.7762 6.02352 14.9144 5.74112 14.9703C5.45872 15.0262 5.16609 14.9973 4.90011 14.8871C4.63414 14.777 4.40673 14.5905 4.24655 14.3513C4.08636 14.1121 4.00058 13.8309 4 13.543V12H2.75C2.28587 12 1.84075 11.8156 1.51256 11.4874C1.18437 11.1592 1 10.7141 1 10.25V2.75ZM2.75 2.5C2.6837 2.5 2.62011 2.52634 2.57322 2.57322C2.52634 2.62011 2.5 2.6837 2.5 2.75V10.25C2.5 10.388 2.612 10.5 2.75 10.5H4.75C4.94891 10.5 5.13968 10.579 5.28033 10.7197C5.42098 10.8603 5.5 11.0511 5.5 11.25V13.44L8.22 10.72C8.28955 10.6503 8.37215 10.595 8.4631 10.5572C8.55404 10.5195 8.65153 10.5 8.75 10.5H13.25C13.3163 10.5 13.3799 10.4737 13.4268 10.4268C13.4737 10.3799 13.5 10.3163 13.5 10.25V2.75C13.5 2.6837 13.4737 2.62011 13.4268 2.57322C13.3799 2.52634 13.3163 2.5 13.25 2.5H2.75Z"
-                      fill="#8D96A0"
-                    />
-                  </svg>
+                  <app-icon-pull-request-comment />
                   {{ entry.comments }}
                 </div>
               </td>

diff --git a/webapp/src/app/components/leaderboard/leaderboard.component.ts b/webapp/src/app/components/leaderboard/leaderboard.component.ts
@@ -2,6 +2,9 @@ import { HttpClient } from '@angular/common/http';
 import { ChangeDetectionStrategy, Component, computed, inject } from '@angular/core';
 import { injectQuery } from '@tanstack/angular-query-experimental';
 import { Leaderboard } from 'app/@types/leaderboard';
+import { PullRequestApprovedIconComponent } from 'app/ui/icons/PullRequestApprovedIcon.component';
+import { PullRequestChangesRequestedIconComponent } from 'app/ui/icons/PullRequestChangesRequestedIcon.component';
+import { PullRequestCommentIconComponent } from 'app/ui/icons/PullRequestCommentIcon.component';
 import { TableBodyDirective } from 'app/ui/table/table-body.directive';
 import { TableCaptionDirective } from 'app/ui/table/table-caption.directive';
 import { TableCellDirective } from 'app/ui/table/table-cell.directive';
@@ -27,7 +30,19 @@ const defaultData: Leaderboard.Entry[] = [
 @Component({
   selector: 'app-leaderboard',
   standalone: true,
-  imports: [TableComponent, TableBodyDirective, TableCaptionDirective, TableCellDirective, TableFooterDirective, TableHeaderDirective, TableHeadDirective, TableRowDirective],
+  imports: [
+    TableComponent,
+    TableBodyDirective,
+    TableCaptionDirective,
+    TableCellDirective,
+    TableFooterDirective,
+    TableHeaderDirective,
+    TableHeadDirective,
+    TableRowDirective,
+    PullRequestChangesRequestedIconComponent,
+    PullRequestApprovedIconComponent,
+    PullRequestCommentIconComponent
+  ],
   templateUrl: './leaderboard.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush
 })

diff --git a/webapp/src/app/ui/icons/PullRequestApprovedIcon.component.ts b/webapp/src/app/ui/icons/PullRequestApprovedIcon.component.ts
@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-icon-pull-request-approved',
+  template: `
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M13.7613 4.21934C13.9017 4.35997 13.9806 4.55059 13.9806 4.74934C13.9806 4.94809 13.9017 5.13871 13.7613 5.27934L6.51127 12.5293C6.37064 12.6698 6.18002 12.7487 5.98127 12.7487C5.78252 12.7487 5.59189 12.6698 5.45127 12.5293L2.20127 9.27934C2.06886 9.13708 1.99676 8.94903 2.00011 8.75471C2.00347 8.56039 2.08202 8.37494 2.21927 8.23734C2.35687 8.1001 2.54232 8.02154 2.73664 8.01818C2.93095 8.01483 3.11901 8.08693 3.26127 8.21934L5.98127 10.9393L12.7013 4.21934C12.8419 4.07889 13.0325 4 13.2313 4C13.43 4 13.6206 4.07889 13.7613 4.21934Z"
+        fill="#3FB950"
+      />
+    </svg>
+  `,
+  standalone: true
+})
+export class PullRequestApprovedIconComponent {}
diff --git a/webapp/src/app/ui/icons/PullRequestChangesRequestedIcon.component.ts b/webapp/src/app/ui/icons/PullRequestChangesRequestedIcon.component.ts
@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-icon-pull-request-changes-requested',
+  template: `
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M1 1.75C1 0.784 1.784 0 2.75 0H10.336C10.8 0 11.245 0.184 11.573 0.513L14.487 3.427C14.816 3.755 15 4.2 15 4.664V14.25C15 14.7141 14.8156 15.1592 14.4874 15.4874C14.1592 15.8156 13.7141 16 13.25 16H2.75C2.28587 16 1.84075 15.8156 1.51256 15.4874C1.18437 15.1592 1 14.7141 1 14.25V1.75ZM2.75 1.5C2.6837 1.5 2.62011 1.52634 2.57322 1.57322C2.52634 1.62011 2.5 1.6837 2.5 1.75V14.25C2.5 14.388 2.612 14.5 2.75 14.5H13.25C13.3163 14.5 13.3799 14.4737 13.4268 14.4268C13.4737 14.3799 13.5 14.3163 13.5 14.25V4.664C13.5001 4.63115 13.4936 4.59861 13.4811 4.56823C13.4686 4.53786 13.4502 4.51026 13.427 4.487L10.513 1.573C10.4897 1.5498 10.4621 1.53141 10.4318 1.51888C10.4014 1.50636 10.3689 1.49994 10.336 1.5H2.75ZM8 3.25C8.19891 3.25 8.38968 3.32902 8.53033 3.46967C8.67098 3.61032 8.75 3.80109 8.75 4V5.5H10.25C10.4489 5.5 10.6397 5.57902 10.7803 5.71967C10.921 5.86032 11 6.05109 11 6.25C11 6.44891 10.921 6.63968 10.7803 6.78033C10.6397 6.92098 10.4489 7 10.25 7H8.75V8.5C8.75 8.69891 8.67098 8.88968 8.53033 9.03033C8.38968 9.17098 8.19891 9.25 8 9.25C7.80109 9.25 7.61032 9.17098 7.46967 9.03033C7.32902 8.88968 7.25 8.69891 7.25 8.5V7H5.75C5.55109 7 5.36032 6.92098 5.21967 6.78033C5.07902 6.63968 5 6.44891 5 6.25C5 6.05109 5.07902 5.86032 5.21967 5.71967C5.36032 5.57902 5.55109 5.5 5.75 5.5H7.25V4C7.25 3.80109 7.32902 3.61032 7.46967 3.46967C7.61032 3.32902 7.80109 3.25 8 3.25ZM5 11.25C5 11.0511 5.07902 10.8603 5.21967 10.7197C5.36032 10.579 5.55109 10.5 5.75 10.5H10.25C10.4489 10.5 10.6397 10.579 10.7803 10.7197C10.921 10.8603 11 11.0511 11 11.25C11 11.4489 10.921 11.6397 10.7803 11.7803C10.6397 11.921 10.4489 12 10.25 12H5.75C5.55109 12 5.36032 11.921 5.21967 11.7803C5.07902 11.6397 5 11.4489 5 11.25Z"
+        fill="#F85149"
+      />
+    </svg>
+  `,
+  standalone: true
+})
+export class PullRequestChangesRequestedIconComponent {}
diff --git a/webapp/src/app/ui/icons/PullRequestCommentIcon.component.ts b/webapp/src/app/ui/icons/PullRequestCommentIcon.component.ts
@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-icon-pull-request-comment',
+  template: `
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M1 2.75C1 1.784 1.784 1 2.75 1H13.25C14.216 1 15 1.784 15 2.75V10.25C15 10.7141 14.8156 11.1592 14.4874 11.4874C14.1592 11.8156 13.7141 12 13.25 12H9.06L6.487 14.573C6.28305 14.7762 6.02352 14.9144 5.74112 14.9703C5.45872 15.0262 5.16609 14.9973 4.90011 14.8871C4.63414 14.777 4.40673 14.5905 4.24655 14.3513C4.08636 14.1121 4.00058 13.8309 4 13.543V12H2.75C2.28587 12 1.84075 11.8156 1.51256 11.4874C1.18437 11.1592 1 10.7141 1 10.25V2.75ZM2.75 2.5C2.6837 2.5 2.62011 2.52634 2.57322 2.57322C2.52634 2.62011 2.5 2.6837 2.5 2.75V10.25C2.5 10.388 2.612 10.5 2.75 10.5H4.75C4.94891 10.5 5.13968 10.579 5.28033 10.7197C5.42098 10.8603 5.5 11.0511 5.5 11.25V13.44L8.22 10.72C8.28955 10.6503 8.37215 10.595 8.4631 10.5572C8.55404 10.5195 8.65153 10.5 8.75 10.5H13.25C13.3163 10.5 13.3799 10.4737 13.4268 10.4268C13.4737 10.3799 13.5 10.3163 13.5 10.25V2.75C13.5 2.6837 13.4737 2.62011 13.4268 2.57322C13.3799 2.52634 13.3163 2.5 13.25 2.5H2.75Z"
+        fill="#8D96A0"
+      />
+    </svg>
+  `,
+  standalone: true
+})
+export class PullRequestCommentIconComponent {}