changes

frontend/src/app/filter-dialog/filter-dialog.component.css

@@ -1,19 +1,20 @@
-.container{
+.container {
   width: 100%;
   display: flex;
   flex-direction: row;
   justify-content: center;
 }
-.filterHeading{
+
-font-family: Roboto;
+.filterHeading {
+  font-family: Roboto;
 }
 
-.filterBox{
+.filterBox {
   width: 90%;
   align-self: center;
 }
 
-.buttonBox{
+.buttonBox {
   display: flex;
   flex-direction: row;
   justify-content: flex-end;
@@ -22,7 +23,10 @@ font-family: Roboto;
 .dot-badge {
   background-color: #00a79d;
   color: #00a79d;
-  width: 10px; /* Breite des Punkts */
+  width: 10px;
-  height: 10px; /* Höhe des Punkts */
+  /* Breite des Punkts */
-  border-radius: 50%; /* Rundung des Punkts */
+  height: 10px;
+  /* Höhe des Punkts */
+  border-radius: 50%;
+  /* Rundung des Punkts */
 }

frontend/src/app/ntt-gantt/ntt-gantt.component.css

@@ -2,10 +2,11 @@
   margin: 0;
   padding: 0;
   box-sizing: border-box;
+  /* overflow: hidden; */
 }
 
 .head {
-  color:rgba(41, 46, 50, 0.679);
+  color: rgba(41, 46, 50, 0.8);
   padding-left: 10px;
   padding-right: 10px;
   font-family: Arial, Helvetica, sans-serif;
@@ -20,41 +21,57 @@
 
 
 .head {
-  overflow: hidden; /* Hides anything that overflows the boundary of this element */
+  overflow: hidden;
+  /* Hides anything that overflows the boundary of this element */
 }
 
 .head h2 {
-  display: inline-block;  /* Ensures that the element can be transformed */
+  user-select: none;
-  white-space: nowrap;    /* Keeps the text on a single line */
+  display: inline-block;
-  transform: translateX(-100%); /* Starts the text off-screen to the left */
+  /* Ensures that the element can be transformed */
-  animation: slideIn 1.5s forwards; /* Adjust '2s' to control the speed of the animation */
+  white-space: nowrap;
+  /* Keeps the text on a single line */
+  transform: translateX(-100%);
+  /* Starts the text off-screen to the left */
+  animation: slideIn 1.5s forwards;
+  /* Adjust '2s' to control the speed of the animation */
 }
 
 .head div {
-  display: inline-block;  /* Ensures that the element can be transformed */
+  display: inline-block;
-  white-space: nowrap;    /* Keeps the text on a single line */
+  /* Ensures that the element can be transformed */
-  transform: translateX(100%); /* Starts the text off-screen to the left */
+  white-space: nowrap;
-  animation: slideInRight 1.5s forwards; /* Adjust '2s' to control the speed of the animation */
+  /* Keeps the text on a single line */
+  transform: translateX(100%);
+  /* Starts the text off-screen to the left */
+  animation: slideInRight 1.5s forwards;
+  /* Adjust '2s' to control the speed of the animation */
 }
 
 @keyframes slideIn {
   from {
-    transform: translateX(-100%); /* Start from off-screen left */
+    transform: translateX(-100%);
+    /* Start from off-screen left */
     opacity: 0;
   }
+
   to {
-    transform: translateX(0%); /* End at the normal position */
+    transform: translateX(0%);
+    /* End at the normal position */
     opacity: 100;
   }
 }
 
 @keyframes slideInRight {
   from {
-    transform: translateX(100%); /* Start from off-screen left */
+    transform: translateX(100%);
+    /* Start from off-screen left */
     opacity: 0;
   }
+
   to {
-    transform: translateX(0%); /* End at the normal position */
+    transform: translateX(0%);
+    /* End at the normal position */
     opacity: 100;
   }
 }
@@ -66,16 +83,20 @@
   justify-content: space-between;
   height: 57px;
   margin-bottom: 30px;
-  animation: slideUp 1.5s forwards; /* Adjust '2s' to control the speed of the animation */
+  animation: slideUp 1.5s forwards;
+  /* Adjust '2s' to control the speed of the animation */
 }
 
 @keyframes slideUp {
   from {
-    transform: translateY(-100%); /* Start from off-screen left */
+    transform: translateY(-100%);
+    /* Start from off-screen left */
     opacity: 0;
   }
+
   to {
-    transform: translateY(0%); /* End at the normal position */
+    transform: translateY(0%);
+    /* End at the normal position */
     opacity: 100;
   }
 }
@@ -135,25 +156,91 @@
   width: 100%;
 }
 
-.filterContainer {
+.filterButton mat-icon {
-  width: 100%;
+  transform: scale(0.8);
+  margin-right: -6px;
+}
+
+.detailsButton {
   display: flex;
   align-items: center;
+  justify-content: center;
+  height: 70%;
+  font-weight: 500;
+  font-size: 13px;
+  font-family: Arial, Helvetica, sans-serif;
+  gap: 8px;
+  user-select: none;
+  padding-left: 10px;
+}
+
+.filterButton {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 70%;
+
+  background-color: rgb(255, 255, 255);
+  cursor: pointer;
+  padding-left: 15px;
+  padding-right: 15px;
+  border: solid 1px rgba(0, 0, 0, 0.124);
+  border-radius: 8px;
+  font-weight: 500;
+  gap: 3px;
+  /* box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); */
+}
+
+.clearFilter {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 70%;
+
+  background-color: rgb(255, 255, 255);
+  cursor: pointer;
+  padding-left: 15px;
+  padding-right: 15px;
+  border: solid 1px rgba(0, 0, 0, 0.124);
+  border-radius: 8px;
+  font-weight: 500;
+  gap: 3px;
+}
+
+.clearFilter:hover {
+  background-color: #ff370016;
+}
+
+.filterButton:hover {
+  background-color: rgb(240, 240, 240);
+}
+
+.filterContainer {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
   background-color: #f5f5f5;
   border: solid rgba(0, 0, 0, 0.1) 1px;
   border-bottom: none;
   border-radius: 10px 10px 0px 0px;
   height: 60px;
   padding-left: 10px;
+  padding-right: 15px;
+  justify-content: space-between;
 }
 
-.clearFilter {
+.left, .right {
-  margin-left: 10px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  height: 100%;
+  gap: 9px;
 }
 
-.showDetails {
+
-  margin-left: 80px;
+.split {
-  margin-top: 8.5px;
+  height: 100%;
+  border-right: solid 1px rgba(0, 0, 0, 0.124);
 }
 
 .filter {
@@ -268,9 +355,9 @@
 .dot-badge {
   background-color: #00a79d;
   color: #00a79d;
-  width: 15px;
+  width: 10x;
-  /* Breite des Punkts */
+  /* Breitedes Punkts */
-  height: 15px;
+  height: 10px;
   /* Höhe des Punkts */
   border-radius: 50%;
   /* Rundung des Punkts */

frontend/src/app/ntt-gantt/ntt-gantt.component.html

@@ -46,14 +46,7 @@
       </mat-select>
     </mat-form-field>
 
-    <!-- Scale Picker -->
+
-    <mat-button-toggle-group style="height: 100%;" (change)="changeScalar()" name="fontStyle" aria-label="Font Style"
-      [(ngModel)]="selectedScalar">
-      <mat-button-toggle style="display: flex; align-items: center;" value="bold" *ngFor="let scalar of scalars"
-        [value]="scalar">
-        {{scalar}}
-      </mat-button-toggle>
-    </mat-button-toggle-group>
 
     <!-- Preset Picker -->
     <mat-form-field appearance="fill" style="width: 300px;">
@@ -83,41 +76,60 @@
 
 
 <div *ngIf="!errorService.rsso && !rssoInit" class="filterContainer">
+  <div class="left">
 
-  <button *ngIf="transitionButton" mat-raised-button class="transitionButton" aria-label="Filtern"
+    <button *ngIf="transitionButton" class="filterButton" style="background-color: #00a79d; color: white;"
-    (click)=" openStatTransitionDialog()">{{languageService.lMap.get('stateChange')}}</button>
+      aria-label="Filtern" (click)=" openStatTransitionDialog()">{{languageService.lMap.get('stateChange')}}</button>
 
-  <button *ngIf="approveButton" mat-raised-button class="filterButton" aria-label="Filtern"
+    <button *ngIf="approveButton" class="filterButton" aria-label="Filtern"
-    (click)="approve()">{{languageService.lMap.get('genehmigen')}}</button>
+      (click)="approve()">{{languageService.lMap.get('genehmigen')}}</button>
 
-  <button *ngIf="rejectButton" mat-raised-button class="filterButton" aria-label="Filtern"
+    <button *ngIf="rejectButton" class="filterButton" aria-label="Filtern"
-    (click)="reject()">{{languageService.lMap.get('ablehnen')}}</button>
+      (click)="reject()">{{languageService.lMap.get('ablehnen')}}</button>
 
-  <button *ngIf="cancelButton" mat-raised-button class="filterButton" aria-label="Filtern"
+    <button *ngIf="cancelButton" class="filterButton" aria-label="Filtern"
-    (click)="cancel()">{{languageService.lMap.get('stornieren')}}</button>
+      (click)="cancel()">{{languageService.lMap.get('stornieren')}}</button>
 
-  <button *ngIf="reApproveButton" mat-raised-button class="filterButton" aria-label="Filtern"
+    <button *ngIf="reApproveButton" class="filterButton" aria-label="Filtern" (click)="reApprove()">Erneut zur
-    (click)="reApprove()">Erneut zur Genehmigung</button>
+      Genehmigung</button>
 
-  <button *ngIf="implementerButton" mat-raised-button class="filterButton" aria-label="Filtern"
+    <button *ngIf="implementerButton" class="filterButton" aria-label="Filtern"
-    (click)="openImplementerDialog()">{{languageService.lMap.get('implementerDialogHeading')}}</button>
+      (click)="openImplementerDialog()">{{languageService.lMap.get('implementerDialogHeading')}}</button>
 
-  <button mat-raised-button class="filterButton" aria-label="Filtern" (click)="openFilterDialog()">
+    <button class="filterButton" aria-label="Filtern" (click)="openFilterDialog()">
-    {{languageService.lMap.get('nttGanttFilterButton')}} <mat-icon style="color: #00a79d;">filter_alt</mat-icon>
+      {{languageService.lMap.get('nttGanttFilterButton')}} <mat-icon style="color: #00a79d;">filter_alt</mat-icon>
-  </button>
+    </button>
 
-  <mat-badge *ngIf="filterBadge" [matBadge]="''" class="dot-badge"></mat-badge>
+    <mat-badge *ngIf="filterBadge" [matBadge]="''" class="dot-badge"></mat-badge>
 
-  <button *ngIf="showSaveButton" mat-raised-button (click)="updatePreset()">Speichern</button>
+    <button *ngIf="showSaveButton" class="filterButton" (click)="updatePreset()">Speichern</button>
-  <button *ngIf="showSaveUnderButton" mat-raised-button (click)="openSaveUnderDialog()">Speichern unter</button>
+    <button *ngIf="showSaveUnderButton" class="filterButton" style="border: solid 1px rgba(0, 0, 0, 0.3);"
-  <button [disabled]="!filterEnabled" mat-icon-button aria-label="clear Filters and Sort" class="clearFilter"
+      (click)="openSaveUnderDialog()">Speichern unter</button>
-    (click)="clearFilter()">
-    {{languageService.lMap.get('clearFilter')}} <mat-icon>close</mat-icon>
-  </button>
 
-  <mat-slide-toggle class="showDetails" color="primary" [(ngModel)]="showDetails" [checked]="showDetails"
+    <button [disabled]="!filterEnabled" aria-label="clear Filters and Sort" class="clearFilter"
-    (change)="refreshData()">{{languageService.lMap.get('detailButton')}}</mat-slide-toggle>
+      style="background-color: transparent;" (click)="clearFilter()">
+      {{languageService.lMap.get('clearFilter')}} <mat-icon>close</mat-icon>
+    </button>
+  </div>
 
+  <!-- <div class="split"></div> -->
+
+  <div class="right">
+    <!-- Scale Picker -->
+    <mat-button-toggle-group style="height: 70%; font-size: 13px; border-radius: 8px;" (change)="changeScalar()" name="fontStyle" aria-label="Font Style"
+      [(ngModel)]="selectedScalar">
+      <mat-button-toggle style="display: flex; align-items: center;" value="bold" *ngFor="let scalar of scalars"
+        [value]="scalar">
+        {{scalar}}
+      </mat-button-toggle>
+    </mat-button-toggle-group>
+
+    <div class="detailsButton">
+      {{languageService.lMap.get('detailButton')}}
+      <mat-slide-toggle color="primary" [(ngModel)]="showDetails" [checked]="showDetails"
+        (change)="refreshData()"></mat-slide-toggle>
+    </div>
+  </div>
 </div>
 
 <div