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

layout changes

main
Said Gedik 2024-05-15 13:16:33 +02:00
parent 5875322682
commit 9a1b7adf91
2 changed files with 71 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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 {

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

@ -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>