Kalender Layout anpassungen

frontend/src/app/multiselect-autocomplete/multiselect-autocomplete.component.html

@@ -2,7 +2,7 @@
 <div class="chip-list-wrapper">
   <mat-chip-list #chipList>
     <ng-container *ngFor="let select of selectData">
-      <mat-chip class="cardinal-colors" (click)="removeChip(select)">
+      <mat-chip class="cardinal-colors" (click)="removeChip(select)" style="background-color: #00a79d;">
         {{ select.item }}
         <mat-icon class="mat-chip-remove">cancel</mat-icon>
       </mat-chip>

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

@@ -32,11 +32,28 @@
   width: 100%;
 }
 
+.filterContainer{
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+}
+
+.clearFilter{
+  margin-left: 10px;
+}
+
+.showDetails{
+  margin-left: 80px;
+  margin-top: 8.5px;
+}
 .filter{
   margin-top: 0.5%;
   margin-left: 1%;
 }
 
+
+
 .checkbox{
   margin: 0 0.5%;
 }
@@ -47,7 +64,21 @@
 }
 
 .filterButton{
-  margin-right: 0.5%;
+
+ }
+
+ .dateButton{
+  height: 59px; width: 59px;  background-color: rgba(0, 0, 0, 0.04); border-width: 1px;  border-top: none; border-left: none; border-right: none; border-top-right-radius: 4px; margin-right: 15px;
+ }
+
+ .dateButton:hover{
+  height: 59px; width: 59px;  background-color: rgba(0, 0, 0, 0.04); border-width: 2px;  border-top: 1px; border-left: 1px; border-right: 1px; border-top-right-radius: 4px;
+  background-color: rgba(0, 0, 0, 0.08);
+ }
+
+.dateButton:checked{
+  height: 59px; width: 59px;  background-color: rgba(0, 0, 0, 0.04); border-width: 2px;  border-top: 1px; border-left: 1px; border-right: 1px; border-top-right-radius: 4px;
+  background-color: red;
  }
 
  /* .datePickerContainer{

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

@@ -11,48 +11,32 @@
       <mat-error *ngIf="range.controls.start.hasError('matStartDateInvalid')">Invalid start date</mat-error>
       <mat-error *ngIf="range.controls.end.hasError('matEndDateInvalid')">Invalid end date</mat-error>
     </mat-form-field>
-    <button mat-basic-button color="" style="height: 59px; width: 59px;  background-color: rgba(0, 0, 0, 0.04); border-width: 2px;  border-top: none; border-left: none; border-right: none; border-top-right-radius: 4px;" (click)="picker.open()"><mat-icon>calendar_today</mat-icon></button>
+    <button mat-basic-button class="dateButton" color="" style="" (click)="picker.open()"><mat-icon>calendar_today</mat-icon></button>
-
 
+    <mat-form-field style="width: 90px; height: 59px;" 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>
   <div class="scalarContainer">
-    <mat-button-toggle-group style="height: 59px;"  (change)="changeScalar()" name="fontStyle" aria-label="Font Style"   [(ngModel)]="selectedScalar">
+    <mat-button-toggle-group  style="margin-top: 5px;"  (change)="changeScalar()" name="fontStyle" aria-label="Font Style"   [(ngModel)]="selectedScalar">
-      <mat-button-toggle value="bold"*ngFor="let scalar of scalars" [value]="scalar">
+      <mat-button-toggle  value="bold"*ngFor="let scalar of scalars" [value]="scalar">
         {{scalar}}
       </mat-button-toggle>
     </mat-button-toggle-group>
-    <br>
-    <mat-slide-toggle color="primary" [(ngModel)]="showDetails" [checked]="showDetails" (change)="refreshData()">{{languageService.lMap.get('detailButton')}}</mat-slide-toggle>
-    <br>
-
   </div>
-
-  <!-- <p>Selected range: {{range.value | json}}</p> -->
-  <!-- <div class="toggleContainer">
-
-    <mat-slide-toggle [disabled]="filters == null" (change)="refreshData()" color="primary" [(ngModel)]="filterEnabled" [checked]="filterEnabled" (change)="applyFilter()">{{languageService.lMap.get('filterButton')}}</mat-slide-toggle>
-    <mat-slide-toggle  color="primary" [(ngModel)]="sortEnabled" [checked]="sortEnabled" >{{languageService.lMap.get('sortButton')}}</mat-slide-toggle>
-
-  </div> -->
-
-
-
-  <mat-form-field style="width: 5%;">
-    <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>
 </div>
-<br>
+<div class="filterContainer">
-<div>
   <button mat-raised-button class="filterButton" aria-label="Filtern" (click)="openFilterDialog()">
-    {{languageService.lMap.get('nttGanttFilterButton')}} <mat-icon>filter_list</mat-icon>
+    {{languageService.lMap.get('nttGanttFilterButton')}} <mat-icon style="color: #00a79d;">filter_alt</mat-icon>
   </button>
-  <button [disabled]="!filterEnabled" mat-icon-button aria-label="clear Filters and Sort" (click)="clearFilter()">
+  <button [disabled]="!filterEnabled" mat-icon-button aria-label="clear Filters and Sort" class="clearFilter" (click)="clearFilter()">
     {{languageService.lMap.get('clearFilter')}} <mat-icon>close</mat-icon>
   </button>
+   <mat-slide-toggle class="showDetails" color="primary" [(ngModel)]="showDetails" [checked]="showDetails" (change)="refreshData()">{{languageService.lMap.get('detailButton')}}</mat-slide-toggle>
 </div>
 
 
@@ -95,7 +79,7 @@
     [splitterSettings] = "splitterSettings"
     (actionComplete)="actionComplete($event)"
     gridLines="Both"
-
+    (splitterResizing)="splitterResizing($event)"
     (actionBegin)="actionBegin($event)"
     (taskbarEditing)="taskbarEditing($event)"
     (taskbarEdited)="taskbarEdited($event)"
@@ -107,7 +91,7 @@
     (load)="load($event)"
     (queryTaskbarInfo) = "queryTaskbarInfo($event)"
     (expanding)="onExpand($event)"
-    (splitterResized)="onResizing($event)"
+
   >
   <ng-template #tooltipSettingsTaskbar let-data>
     <div>

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

@@ -202,7 +202,7 @@ export class NttGanttComponent implements OnInit {
     this.tooltipSettings = {showTooltip: true}
     this.projectStartDate = this.range.controls.start.value;
     this.projectEndDate = this.range.controls.end.value;
-    this.splitterSettings = {position: 647 + 'px'};
+    this.splitterSettings = {position: 30 + '%'};
     this.inputForTimeline = [this.splitterSettings, this.projectStartDate, this.projectEndDate];
   }
 
@@ -305,7 +305,7 @@ export class NttGanttComponent implements OnInit {
   openFilterDialog(){
     let dialogRef = FilterDialogComponent;
       this.matDialog.open(dialogRef,
-      {data : [], width: '50%'}).afterClosed().subscribe((res)=>{
+      {data : [], width: '50%', maxWidth: '800px'}).afterClosed().subscribe((res)=>{
         if(res){
           this.filters = res;
           this.filterEnabled = true;
@@ -629,12 +629,12 @@ export class NttGanttComponent implements OnInit {
   }
 
   /**
-    * The function onResizing catches the corresponding syncfsuions event and stores the actual splitter postition to synchronize the splitters of the main gannt chart and the planTimeBart gantt chart.
+    * The function splitterResizing catches the corresponding syncfsuions event and stores the actual splitter postition to synchronize the splitters of the main gannt chart and the planTimeBart gantt chart.
     * @param args event arguments from the syncfusion gantt chart.
   */
-  public onResizing(args){
+  public splitterResizing(args) {
-    let width = '' + args.paneSize[0]+'px';
+
-    this.splitterSettings = {position: width};
+    this.splitterSettings = {position: args.paneSize[0].toString() + 'px'};
   }
 
   /**

frontend/src/app/plan-time-bar/plan-time-bar.component.html

@@ -28,6 +28,7 @@
   [allowSorting]= "false"
   [allowFiltering]="false"
 
+
   (queryTaskbarInfo)="queryTaskbarInfo($event)"
   gridLines="Both">
 

frontend/src/app/plan-time-bar/plan-time-bar.component.ts

@@ -164,5 +164,6 @@ export class PlanTimeBarComponent implements OnInit {
     }
     this.fetchPlanTimes();
   }
+
 }
 

frontend/src/index.html

@@ -11,3 +11,13 @@
   <app-root></app-root>
 </body>
 </html>
+
+<style>
+  .e-selectionbackground {
+    background-color: #E0E0E0 !important;
+  }
+  .e-gantt .e-gantt-chart .e-active {
+    background-color: #E0E0E0 !important;
+  }
+</style>
+