layout changes

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

@@ -161,6 +161,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 +194,7 @@
   gap: 8px;
   user-select: none;
   padding-left: 10px;
+  padding-right: 10px;
 }
 
 .filterButton {

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

@@ -1,6 +1,43 @@
 <div class="head">
   <h2>W&I Kalender</h2>
 
+  <!-- Preset Picker -->
+  <mat-form-field appearance="fill" style="width: 300px;">
+    <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>
+
+  <!-- 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;" (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>
+
+
   <!-- User -->
   <div style="display: flex; justify-content: center; align-items: center; font-size: 13px;">
     <h3 *ngIf="userId"
@@ -19,41 +56,14 @@
 <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>
 
 
@@ -100,6 +110,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 +121,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 +144,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>