taubem
/
ChangeCalendar
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

layout settings

main
manueltauber 2023-08-08 16:33:17 +02:00
parent 74f7d6b77b
commit 07aa064dba
2 changed files with 22 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
frontend/src/app/ntt-gantt/ntt-gantt.component.css
View File

@ -14,14 +14,16 @@
flex-direction: row; flex-direction: row;
margin: 0px 0; margin: 0px 0;
align-items: flex-start; align-items: flex-start;
height: 5%; height: 3%;
} }
.mat-mdc-form-field + .mat-mdc-form-field { .mat-mdc-form-field + .mat-mdc-form-field {
margin-left: 8px; margin-left: 8px;
} }
.mat-button-toggle-group .mat-button-toggle-button {
height: 100%!important;
}
.toggleContainer{ .toggleContainer{
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -47,6 +49,11 @@
.filterButton{ .filterButton{
margin-right: 0.5%; margin-right: 0.5%;
} }
/* .datePickerContainer{
height: 20px;
width: 400px;
} */
/* /*
::ng-deep .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-bar { ::ng-deep .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-bar {
background-color: #d56100; background-color: #d56100;

19
frontend/src/app/ntt-gantt/ntt-gantt.component.html
View File

@ -1,30 +1,21 @@
<div id="topbar"> <div id="topbar">
<mat-form-field class="datePicker" appearance="fill">
<mat-form-field class="datePicker" appearance="fill" >
<mat-label>{{languageService.lMap.get('dateRangeLabel')}}</mat-label> <mat-label>{{languageService.lMap.get('dateRangeLabel')}}</mat-label>
<mat-date-range-input [formGroup]="range" [rangePicker]="picker"> <mat-date-range-input [formGroup]="range" [rangePicker]="picker">
<input matStartDate formControlName="start" placeholder="Start date" (dateChange)="startDateChanged($event)"> <input matStartDate formControlName="start" placeholder="Start date" (dateChange)="startDateChanged($event)">
<input matEndDate formControlName="end" placeholder="End date" (dateChange)="endDateChanged($event)"> <input matEndDate formControlName="end" placeholder="End date" (dateChange)="endDateChanged($event)">
</mat-date-range-input> </mat-date-range-input>
<!-- <mat-hint>tt.mm.yyyy – tt.mm.yyyy</mat-hint> --> <!-- <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle> -->
<mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
<mat-date-range-picker #picker></mat-date-range-picker> <mat-date-range-picker #picker></mat-date-range-picker>
<mat-error *ngIf="range.controls.start.hasError('matStartDateInvalid')">Invalid start date</mat-error> <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-error *ngIf="range.controls.end.hasError('matEndDateInvalid')">Invalid end date</mat-error>
</mat-form-field> </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>
<!-- <mat-radio-group
(change)="changeScalar()"
aria-labelledby="example-radio-group-label"
class="example-radio-group"
[(ngModel)]="selectedScalar">
<mat-radio-button color="primary" class="example-radio-button" *ngFor="let scalar of scalars" [value]="scalar" >
{{scalar}}
</mat-radio-button>
</mat-radio-group> -->
<div class="scalarContainer"> <div class="scalarContainer">
<mat-button-toggle-group (change)="changeScalar()" name="fontStyle" aria-label="Font Style" [(ngModel)]="selectedScalar"> <mat-button-toggle-group style="height: 59px;" (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}} {{scalar}}
</mat-button-toggle> </mat-button-toggle>