Merge branch 'layoutChanges'

frontend/src/app/app.component.css

@@ -5,6 +5,6 @@
   filter: alpha(opacity = 90);
 }
 
-body, html {
+body {
   overflow-x: hidden;
 }

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

@@ -5,6 +5,11 @@
   overflow: hidden;
 }
 
+.splitter {
+  height: 50%;
+  border-right: 1px rgba(0, 0, 0, 0.181) solid;
+  margin-left: 15px;
+}
 .head {
   color: rgba(41, 46, 50, 0.8);
   padding-left: 10px;
@@ -13,9 +18,9 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+  /* border-bottom: 1px solid rgba(0, 0, 0, 0.2); */
-  height: 50px;
+  height: 60px;
-  margin-bottom: 10px;
+  margin-bottom: 5px;
   background-color: white;
 }
 
@@ -25,7 +30,7 @@
   /* Hides anything that overflows the boundary of this element */
 }
 
-.head h2 {
+.head .left {
   user-select: none;
   display: inline-block;
   /* Ensures that the element can be transformed */
@@ -113,16 +118,19 @@
 
 .restartButton:hover {
   color: #000000;
-  background-color: rgb(243, 243, 243);
+  background-color: rgb(240, 240, 240);
 }
 
 
-.transitionButton {
+/* .transitionButton {
-  background-color: #00a79d;
   color: white;
   font-weight: 100;
 }
 
+.transitionButton:hover {
+  background-color: #0e857d;
+}
+ */
 
 
 
@@ -161,6 +169,28 @@
   margin-right: -6px;
 }
 
+.restartButton {
+  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.215);
+  border-radius: 8px;
+  transition: background-color 0.3s ease; /* Add this line for smooth transition */
+  /* box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); */
+}
+
+.restartButton mat-icon {
+  transform: scale(0.9);
+  margin-right: -2px;
+  margin-bottom: 2px;
+}
+
 .detailsButton {
   display: flex;
   align-items: center;
@@ -172,6 +202,7 @@
   gap: 8px;
   user-select: none;
   padding-left: 10px;
+  padding-right: 10px;
 }
 
 .filterButton {
@@ -237,9 +268,9 @@
   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 */
+  animation: slideUp 1.5s forwards;
 }
 
-
 .filterContainer.sticky {
   border-radius: 0;
 }
@@ -280,6 +311,7 @@
   border: solid 1px rgba(0, 0, 0, 0.124);
   border-radius: 0px 8px 8px 0px;
   border-left: none;
+  cursor: pointer;
 }
 
 .dateButton mat-icon {
@@ -374,8 +406,9 @@
 } */
 
 .mat-button-toggle-checked {
-  background-color: #ef6c00;
+  background-color:#ef6c00; /* Gradient background */
   color: white;
+  position: relative; /* Needed for the shadow effect */
 }
 
 .dot-badge {

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

@@ -1,8 +1,48 @@
-<div class="head">
+<div class="head" style="">
+  <div class="left" style="display: flex; align-items: center; gap: 15px; height: 100%;">
     <h2>W&I Kalender</h2>
+    <div class="splitter"></div>
+    <!-- Preset Picker -->
+    <div appearance="fill" style="width: 200px;padding-left: 15px; padding-top: 3px; font-size: 14px;">
+      <mat-select [(value)]="selectedPreset" (selectionChange)="selectPreset($event)">
+        <mat-optgroup *ngFor="let group of presetGroups" [label]="group.name" [disabled]="group.disabled">
+          <mat-option *ngFor="let preset of group.presets" [value]="preset">
+            {{preset.name}}
+            <!-- <button style="align-self: right;" *ngIf="group.name == 'User'" mat-icon-button><mat-icon>delete_forever</mat-icon></button>
+            <button *ngIf="group.name == 'User'" mat-icon-button><mat-icon>edit</mat-icon></button> -->
+          </mat-option>
+        </mat-optgroup>
+      </mat-select>
+    </div>
+    <button mat-basic-button *ngIf="isUserPreset" class="editButton"
+      (click)="openRenameDialog()"><mat-icon>edit</mat-icon></button>
+    <button mat-basic-button *ngIf="isUserPreset" class="deleteButton"
+      (click)="openDeleteDialog()"><mat-icon>delete_forever</mat-icon></button>
+
+    <!-- Language Picker -->
+    <!-- <mat-form-field style="width: 90px;" appearance="fill">
+    <mat-label>{{languageService.lMap.get('language')}}</mat-label>
+    <mat-select (selectionChange)="languageChange($event)" [(value)]="languageService.language">
+      <mat-option *ngFor="let lang of languageService.languages" [value]="lang">
+        {{lang}}
+      </mat-option>
+    </mat-select>
+  </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 style="display: flex; align-items: center;" *ngFor="let lang of languageService.languages"
+        [value]="lang">
+        {{lang}}
+      </mat-button-toggle>
+    </mat-button-toggle-group>
+  </div>
+
+
 
   <!-- User -->
-  <div style="display: flex; justify-content: center; align-items: center; font-size: 13px;">
+  <div style="display: flex; justify-content: center; align-items: center; font-size: 12px;">
     <h3 *ngIf="userId"
       style="font-family: Arial, Helvetica, sans-serif; font-weight: 100; display: flex; align-items: center; gap: 5px; color: rgba(0, 0, 0, 0.845);">
       <mat-icon style="color: green;">verified_user</mat-icon>{{this.userId}}
@@ -16,47 +56,6 @@
   </div>
 </div>
 
-<div *ngIf="!errorService.rsso && !rssoInit" id="topbar">
-
-
-  <!-- Language Picker -->
-  <mat-form-field style="width: 90px;" appearance="fill">
-    <mat-label>{{languageService.lMap.get('language')}}</mat-label>
-    <mat-select (selectionChange)="languageChange($event)" [(value)]="languageService.language">
-      <mat-option *ngFor="let lang of languageService.languages" [value]="lang">
-        {{lang}}
-      </mat-option>
-    </mat-select>
-  </mat-form-field>
-
-
-
-  <!-- Preset Picker -->
-  <mat-form-field appearance="fill" style="width: 300px;">
-    <mat-label>Preset</mat-label>
-    <mat-select [(value)]="selectedPreset" (selectionChange)="selectPreset($event)">
-      <mat-optgroup *ngFor="let group of presetGroups" [label]="group.name" [disabled]="group.disabled">
-        <mat-option *ngFor="let preset of group.presets" [value]="preset">
-          {{preset.name}}
-          <!-- <button style="align-self: right;" *ngIf="group.name == 'User'" mat-icon-button><mat-icon>delete_forever</mat-icon></button>
-          <button *ngIf="group.name == 'User'" mat-icon-button><mat-icon>edit</mat-icon></button> -->
-        </mat-option>
-      </mat-optgroup>
-    </mat-select>
-  </mat-form-field>
-
-  <button mat-basic-button *ngIf="isUserPreset" class="editButton"
-    (click)="openRenameDialog()"><mat-icon>edit</mat-icon></button>
-  <button mat-basic-button *ngIf="isUserPreset" class="deleteButton"
-    (click)="openDeleteDialog()"><mat-icon>delete_forever</mat-icon></button>
-
-  <!-- Restart Button -->
-  <button class="restartButton" aria-label="Refresh" (click)="refreshGanttWithFilters()">
-    <mat-icon>restart_alt</mat-icon>
-  </button>
-</div>
-
-
 <div *ngIf="!errorService.rsso && !rssoInit" class="filterContainer">
   <div class="left">
 
@@ -68,7 +67,7 @@
       {{languageService.lMap.get('clearFilter')}} <mat-icon>close</mat-icon>
     </button>
 
-    <button *ngIf="transitionButton" class="filterButton" style="background-color: #00a79d; color: white;"
+    <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"
@@ -100,6 +99,7 @@
   <!-- <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">
@@ -110,7 +110,8 @@
     </mat-button-toggle-group>
 
     <!-- Date Range Picker  -->
-    <div class="dateRangePicker" style="display: flex; height: 100%; align-items: center; font-size: 13px; color: rgba(0, 0, 0, 0.734);">
+    <div class="dateRangePicker"
+      style="display: flex; height: 100%; align-items: center; font-size: 13px; color: rgba(0, 0, 0, 0.734);">
       <div style="height: 70%; display: flex; align-items: center; width: 170px; font-family: Arial, sans-serif; border: solid 1px rgba(0, 0, 0, 0.124);
         background-color: white; padding-left: 10px; border-radius: 8px 0px 0px 8px;">
         <!-- <mat-label>{{languageService.lMap.get('dateRangeLabel')}}</mat-label> -->
@@ -132,6 +133,11 @@
       <mat-slide-toggle color="primary" [(ngModel)]="showDetails" [checked]="showDetails"
         (change)="refreshData()"></mat-slide-toggle>
     </div>
+
+    <!-- Restart Button -->
+    <button class="restartButton" aria-label="Refresh" (click)="refreshGanttWithFilters()">
+      <mat-icon>restart_alt</mat-icon>
+    </button>
   </div>
 </div>