Layout Design

frontend/src/app/app.module.ts

@@ -26,8 +26,9 @@ import { ImplementerDialogComponent } from './implementer-dialog/implementer-dia
 import {MatExpansionModule} from '@angular/material/expansion';
 import {MatInputModule} from '@angular/material/input';
 import {MatCheckboxModule} from '@angular/material/checkbox';
-
+import {MatButtonToggleModule} from '@angular/material/button-toggle';
 import {MatAutocompleteModule} from '@angular/material/autocomplete';
+
 import { MultiselectAutocompleteComponent} from './multiselect-autocomplete/multiselect-autocomplete.component';
 import {MatChipsModule} from '@angular/material/chips';
 import {MatIconModule} from '@angular/material/icon';
@@ -36,6 +37,7 @@ import {ScrollingModule} from '@angular/cdk/scrolling';
 import {MomentDateModule} from '@angular/material-moment-adapter';
 import {PlanTimeBarComponent} from './plan-time-bar/plan-time-bar.component';
 
+
 @NgModule({
   declarations: [
     AppComponent,
@@ -72,7 +74,8 @@ import { PlanTimeBarComponent } from './plan-time-bar/plan-time-bar.component';
     MatChipsModule,
     MatIconModule,
     ScrollingModule,
-    MomentDateModule
+    MomentDateModule,
+    MatButtonToggleModule
 
   ],
 

frontend/src/app/language.service.ts

@@ -41,6 +41,8 @@ export class LanguageService {
     this.enMap.set('language', 'Language');
     this.deMap.set('clearFilter', 'Filter Löschen');
     this.enMap.set('clearFilter', 'Clear Filter');
+    this.deMap.set('nttGanttFilterButton', 'Filtern');
+    this.enMap.set('nttGanttFilterButton', 'Filter');
 
     this.deMap.set('tooltipSummary', 'Name');
     this.enMap.set('tooltipSummary', 'Name');

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

@@ -12,8 +12,9 @@
 #topbar {
   display: flex;
   flex-direction: row;
-  margin: 15px 0;
+  margin: 0px 0;
   align-items: flex-start;
+  height: 5%;
 
 }
 
@@ -37,3 +38,46 @@
 .checkbox{
   margin: 0 0.5%;
 }
+
+.scalarContainer{
+  margin-left: 0.5%;
+  margin-right: 0.5%;
+}
+
+.filterButton{
+  margin-right: 0.5%;
+}
+::ng-deep .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-bar {
+  background-color: #d56100;
+}
+
+::ng-deep .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb {
+  background-color: #d56100;
+}
+
+/* .mat-button-toggle{
+  background-color: #306cee;
+  color: #ffffff;
+}
+
+.mat-button-toggle:hover {
+  background-color: transparent;
+  color: #1100ff !important;
+} */
+
+.mat-button-toggle-checked {
+  background-color: #d56100;
+
+}
+
+::ng-deep .mat-calendar{
+  background: white;
+}
+
+::ng-deep .mat-calendar-body-label{
+  /* color: white; */
+}
+
+::ng-deep .mat-calendar-cell-content{
+   color: #d56100;
+}

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

@@ -1,5 +1,5 @@
 <div id="topbar">
-  <mat-form-field appearance="fill">
+  <mat-form-field class="datePicker" appearance="fill">
     <mat-label>{{languageService.lMap.get('dateRangeLabel')}}</mat-label>
     <mat-date-range-input  [formGroup]="range" [rangePicker]="picker">
       <input matStartDate formControlName="start" placeholder="Start date" (dateChange)="startDateChanged($event)">
@@ -14,7 +14,7 @@
   </mat-form-field>
 
 
-  <mat-radio-group
+  <!-- <mat-radio-group
    (change)="changeScalar()"
     aria-labelledby="example-radio-group-label"
     class="example-radio-group"
@@ -22,16 +22,26 @@
     <mat-radio-button color="primary" class="example-radio-button" *ngFor="let scalar of scalars" [value]="scalar" >
       {{scalar}}
     </mat-radio-button>
-  </mat-radio-group>
+  </mat-radio-group> -->
-  <!-- <p>Selected range: {{range.value | json}}</p> -->
+  <div class="scalarContainer">
-  <div class="toggleContainer">
+    <mat-button-toggle-group  (change)="changeScalar()" name="fontStyle" aria-label="Font Style"   [(ngModel)]="selectedScalar">
+      <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>
-    <button mat-icon-button aria-label="clear Filters and Sort" (click)="clearFilter()">
+
-      {{languageService.lMap.get('clearFilter')}}<mat-icon>clear_all</mat-icon>
+  </div> -->
-    </button>
-  </div>
 
 
 
@@ -43,14 +53,18 @@
       </mat-option>
     </mat-select>
   </mat-form-field>
-
+</div>
-  <button style="justify-content: flex-end;" mat-icon-button aria-label="Filtern" (click)="openFilterDialog()">
+<br>
-    <mat-icon>filter_list</mat-icon>
+<div>
+  <button mat-raised-button class="filterButton" aria-label="Filtern" (click)="openFilterDialog()">
+    {{languageService.lMap.get('nttGanttFilterButton')}} <mat-icon>filter_list</mat-icon>
+  </button>
+  <button [disabled]="filterEnabled" mat-icon-button aria-label="clear Filters and Sort" (click)="clearFilter()">
+    {{languageService.lMap.get('clearFilter')}} <mat-icon>close</mat-icon>
   </button>
 </div>
 
 
-
 <div
   *ngIf="!this.showNoResultsError" id="showSpin" data-bind="visible: spin"
   style=" position: absolute; top: auto; left: 45%;">

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

@@ -335,12 +335,12 @@ export class NttGanttComponent implements OnInit {
   initLanguge(initial: boolean = false){
 
     if(this.languageService.language == 'DE'){
-      this.scalars = ['Woche-Tag', 'Monat-Woche', 'Jahr-Monat'];
+      this.scalars = ['Woche', 'Monat', 'Jahr'];
-      this.selectedScalar = 'Monat-Woche';
+      this.selectedScalar = 'Monat';
     }
     else{
-      this.scalars = ['Week-Day', 'Month-Week', 'Year-Month'];
+      this.scalars = ['Week', 'Month', 'Year'];
-      this.selectedScalar = 'Month-Week';
+      this.selectedScalar = 'Month';
 
     }
     this.columns = this.languageService.getColumns();