creating legend

2024-06-27 18:13:43 +02:00 · 2024-06-27 18:13:43 +02:00 · fc082f2c4e
parent 94c88cbf64
commit fc082f2c4e
4 changed files with 119 additions and 23 deletions
--- a/frontend/src/app/app.component.css
+++ b/frontend/src/app/app.component.css
@ -7,4 +7,12 @@

 body {
  overflow-x: hidden;
-}
+}
+
+/* body {
+  margin: 0; 
+  padding: 0;
+  left: 0;
+  right: 0;
+  box-sizing: border-box;
+} */
--- a/frontend/src/app/ntt-gantt/ntt-gantt.component.css
+++ b/frontend/src/app/ntt-gantt/ntt-gantt.component.css
@ -182,7 +182,8 @@
  padding-right: 15px;
  border: solid 1px rgba(0, 0, 0, 0.215);
  border-radius: 8px;
-  transition: background-color 0.3s ease; /* Add this line for smooth transition */
+  transition: background-color 0.3s ease;
+  /* Add this line for smooth transition */
  /* box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); */
 }

@ -220,7 +221,8 @@
  border-radius: 8px;
  font-weight: 500;
  gap: 3px;
-  transition: background-color 0.3s ease; /* Add this line for smooth transition */
+  transition: background-color 0.3s ease;
+  /* Add this line for smooth transition */
  /* box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); */
 }

@ -237,7 +239,8 @@
  border-radius: 8px;
  font-weight: 500;
  gap: 3px;
-  transition: background-color 0.3s ease; /* Add this line for smooth transition */
+  transition: background-color 0.3s ease;
+  /* Add this line for smooth transition */

 }

@ -255,7 +258,8 @@
  display: flex;
  flex-direction: row;
  align-items: center;
-  background-color: rgba(245, 245, 245, 0.528); /* Semi-transparent background */
+  background-color: rgba(245, 245, 245, 0.528);
+  /* Semi-transparent background */
  border: solid rgba(0, 0, 0, 0.1) 1px;
  border-bottom: none;
  border-radius: 10px 10px 0px 0px;
@ -263,12 +267,15 @@
  padding-left: 10px;
  padding-right: 15px;
  justify-content: space-between;
-  position: -webkit-sticky; /* For Safari */
+  position: -webkit-sticky;
+  /* For Safari */
  position: sticky;
  top: 0;
-  z-index: 1000; /* Ensure it is above other content */
+  z-index: 1000;
+  /* Ensure it is above other content */
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.1);
-  backdrop-filter: blur(2px); /* Blur effect */
+  backdrop-filter: blur(2px);
+  /* Blur effect */
  animation: slideUp 1.5s forwards;
 }

@ -276,7 +283,8 @@
  border-radius: 0;
 }

-.left, .right {
+.left,
+.right {
  display: flex;
  flex-direction: row;
  align-items: center;
@ -330,7 +338,7 @@
  background-color: rgba(0, 0, 0, 0.08);
 }

-.editButton{
+.editButton {
  margin-left: 10px;
  display: flex;
  align-items: center;
@ -344,7 +352,8 @@
  border-radius: 8px;
  font-weight: 500;
  gap: 3px;
-  transition: background-color 0.3s ease; /* Add this line for smooth transition */
+  transition: background-color 0.3s ease;
+  /* Add this line for smooth transition */
 }

 .editButton:hover {
@ -353,15 +362,18 @@
 }


-.editButton mat-icon{
+.editButton mat-icon {
  transform: scale(0.7);
  opacity: 0.75;
 }
+
 .deleteButton mat-icon {
  transform: scale(0.8);
  opacity: 0.75;
 }
-.editButton:hover>mat-icon, .deleteButton:hover>mat-icon {
+
+.editButton:hover>mat-icon,
+.deleteButton:hover>mat-icon {
  opacity: 1;
 }

@ -378,7 +390,8 @@
  border-radius: 8px;
  font-weight: 500;
  gap: 3px;
-  transition: background-color 0.3s ease; /* Add this line for smooth transition */
+  transition: background-color 0.3s ease;
+  /* Add this line for smooth transition */
 }

 .deleteButton:hover {
@ -411,9 +424,11 @@
 } */

 .mat-button-toggle-checked {
-  background-color:#ef6c00; /* Gradient background */
+  background-color: #ef6c00;
+  /* Gradient background */
  color: white;
-  position: relative; /* Needed for the shadow effect */
+  position: relative;
+  /* Needed for the shadow effect */
 }

 .dot-badge {
@ -437,4 +452,31 @@

 ::ng-deep .mat-calendar-cell-content{
   color: #d56100;
-} */
+} */
+
+.legend {
+  width: 100%;
+  font-family: Arial, sans-serif;
+  font-size: 13px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  background-color: rgb(210, 217, 224);
+  padding: 10px;
+}
+
+.inner-legend {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px;
+  border-radius: 50px;
+  background-color: aliceblue;
+  width: fit-content;
+}
+
+.route {
+  height: 12px;
+  width: 12px;
+  transform: rotate(45deg);
+}
--- a/frontend/src/app/ntt-gantt/ntt-gantt.component.html
+++ b/frontend/src/app/ntt-gantt/ntt-gantt.component.html
@ -30,8 +30,9 @@
  </mat-form-field> -->

    <!-- Language Picker -->
-    <mat-button-toggle-group style="height: 70%; font-size: 13px; border-radius: 8px; margin-left: 15px;" (change)="languageChange($event)"
-      name="languagePicker" aria-label="Language Picker" [(ngModel)]="languageService.language">
+    <mat-button-toggle-group style="height: 70%; font-size: 13px; border-radius: 8px; margin-left: 15px;"
+      (change)="languageChange($event)" name="languagePicker" aria-label="Language Picker"
+      [(ngModel)]="languageService.language">
      <mat-button-toggle style="display: flex; align-items: center;" *ngFor="let lang of languageService.languages"
        [value]="lang">
        {{lang}}
@ -56,6 +57,51 @@
  </div>
 </div>

+<div class="legend">
+  <div class="inner-legend">
+    <div class="route" style="background-color: #f83200;"></div>
+    Draft
+  </div>
+  <div class="inner-legend">
+    <div class="route" style="background-color: #f98700;"></div>
+    Request for Authorization
+  </div>
+  <div class="inner-legend">
+    <div class="route" style="background-color: #f98700;"></div>
+    Planning in Progress
+  </div>
+  <div class="inner-legend">
+    <div class="route" style="background-color: #f4fa00;"></div>
+    Scheduled
+  </div>
+  <div class="inner-legend">
+    <div class="route" style="background-color: #f4fa00;"></div>
+    Cancelled
+  </div>
+  <div class="inner-legend">
+    <div class="route" style="background-color: #008642;"></div>
+    Completed (final review required)
+  </div> 
+  <div class="inner-legend">
+    <div class="route" style="background-color: #32cd32;"></div>
+    Completed (final review finished)
+  </div>
+  <div class="inner-legend">
+    <div class="route" style="background-color: #ffffff;"></div>
+    Closed
+  </div>
+  <div class="inner-legend">
+    <div class="route" style="background-color: #d3d3d3;"></div>
+    Rejected (begin)
+  </div>
+  <div class="inner-legend">
+    <div class="route" style="background-color: #808080;"></div>
+    Rejected (end)
+  </div>
+</div>
+
+
+
 <div *ngIf="!errorService.rsso && !rssoInit" class="filterContainer">
  <div class="left">

@ -67,8 +113,9 @@
      {{languageService.lMap.get('clearFilter')}} <mat-icon>close</mat-icon>
    </button>

-    <button *ngIf="transitionButton" class="filterButton transitionButton" style="background-color: #00a79d; color: white;"
-      aria-label="Filtern" (click)=" openStatTransitionDialog()">{{languageService.lMap.get('stateChange')}}</button>
+    <button *ngIf="transitionButton" class="filterButton transitionButton"
+      style="background-color: #00a79d; color: white;" aria-label="Filtern"
+      (click)=" openStatTransitionDialog()">{{languageService.lMap.get('stateChange')}}</button>

    <button *ngIf="approveButton" class="filterButton" aria-label="Filtern"
      (click)="approve()">{{languageService.lMap.get('genehmigen')}}</button>
@ -259,4 +306,4 @@
  <mat-card-content>
    <p style="padding-left: 15px;">{{errorService.getLastError('error').message}}</p>
  </mat-card-content>
-</mat-card>
+</mat-card>
--- a/frontend/src/index.html
+++ b/frontend/src/index.html
@ -26,7 +26,6 @@
  } */


-
   .e-gantt-milestone-border {
     border-radius: 50%;
     color: red;