Merge branch 'layoutChanges'
commit
773a70e2fa
|
|
@ -5,6 +5,6 @@
|
|||
filter: alpha(opacity = 90);
|
||||
}
|
||||
|
||||
body, html {
|
||||
body {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
|
@ -5,6 +5,11 @@
|
|||
overflow: hidden;
|
||||
}
|
||||
|
||||
.splitter {
|
||||
height: 50%;
|
||||
border-right: 1px rgba(0, 0, 0, 0.181) solid;
|
||||
margin-left: 15px;
|
||||
}
|
||||
.head {
|
||||
color: rgba(41, 46, 50, 0.8);
|
||||
padding-left: 10px;
|
||||
|
|
@ -13,9 +18,9 @@
|
|||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
|
||||
height: 50px;
|
||||
margin-bottom: 10px;
|
||||
/* border-bottom: 1px solid rgba(0, 0, 0, 0.2); */
|
||||
height: 60px;
|
||||
margin-bottom: 5px;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
|
|
@ -25,7 +30,7 @@
|
|||
/* Hides anything that overflows the boundary of this element */
|
||||
}
|
||||
|
||||
.head h2 {
|
||||
.head .left {
|
||||
user-select: none;
|
||||
display: inline-block;
|
||||
/* Ensures that the element can be transformed */
|
||||
|
|
@ -113,16 +118,19 @@
|
|||
|
||||
.restartButton:hover {
|
||||
color: #000000;
|
||||
background-color: rgb(243, 243, 243);
|
||||
background-color: rgb(240, 240, 240);
|
||||
}
|
||||
|
||||
|
||||
.transitionButton {
|
||||
background-color: #00a79d;
|
||||
/* .transitionButton {
|
||||
color: white;
|
||||
font-weight: 100;
|
||||
}
|
||||
|
||||
.transitionButton:hover {
|
||||
background-color: #0e857d;
|
||||
}
|
||||
*/
|
||||
|
||||
|
||||
|
||||
|
|
@ -161,6 +169,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 +202,7 @@
|
|||
gap: 8px;
|
||||
user-select: none;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.filterButton {
|
||||
|
|
@ -237,9 +268,9 @@
|
|||
z-index: 1000; /* Ensure it is above other content */
|
||||
border-bottom: 0.5px solid rgba(0, 0, 0, 0.1);
|
||||
backdrop-filter: blur(2px); /* Blur effect */
|
||||
animation: slideUp 1.5s forwards;
|
||||
}
|
||||
|
||||
|
||||
.filterContainer.sticky {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
|
@ -280,6 +311,7 @@
|
|||
border: solid 1px rgba(0, 0, 0, 0.124);
|
||||
border-radius: 0px 8px 8px 0px;
|
||||
border-left: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.dateButton mat-icon {
|
||||
|
|
@ -374,8 +406,9 @@
|
|||
} */
|
||||
|
||||
.mat-button-toggle-checked {
|
||||
background-color: #ef6c00;
|
||||
background-color:#ef6c00; /* Gradient background */
|
||||
color: white;
|
||||
position: relative; /* Needed for the shadow effect */
|
||||
}
|
||||
|
||||
.dot-badge {
|
||||
|
|
|
|||
|
|
@ -1,8 +1,48 @@
|
|||
<div class="head">
|
||||
<h2>W&I Kalender</h2>
|
||||
<div class="head" style="">
|
||||
<div class="left" style="display: flex; align-items: center; gap: 15px; height: 100%;">
|
||||
<h2>W&I Kalender</h2>
|
||||
<div class="splitter"></div>
|
||||
<!-- Preset Picker -->
|
||||
<div appearance="fill" style="width: 200px;padding-left: 15px; padding-top: 3px; font-size: 14px;">
|
||||
<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>
|
||||
</div>
|
||||
<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; margin-left: 15px;" (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>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- User -->
|
||||
<div style="display: flex; justify-content: center; align-items: center; font-size: 13px;">
|
||||
<div style="display: flex; justify-content: center; align-items: center; font-size: 12px;">
|
||||
<h3 *ngIf="userId"
|
||||
style="font-family: Arial, Helvetica, sans-serif; font-weight: 100; display: flex; align-items: center; gap: 5px; color: rgba(0, 0, 0, 0.845);">
|
||||
<mat-icon style="color: green;">verified_user</mat-icon>{{this.userId}}
|
||||
|
|
@ -16,47 +56,6 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
|
||||
|
||||
<div *ngIf="!errorService.rsso && !rssoInit" class="filterContainer">
|
||||
<div class="left">
|
||||
|
||||
|
|
@ -68,7 +67,7 @@
|
|||
{{languageService.lMap.get('clearFilter')}} <mat-icon>close</mat-icon>
|
||||
</button>
|
||||
|
||||
<button *ngIf="transitionButton" class="filterButton" style="background-color: #00a79d; color: white;"
|
||||
<button *ngIf="transitionButton" class="filterButton transitionButton" style="background-color: #00a79d; color: white;"
|
||||
aria-label="Filtern" (click)=" openStatTransitionDialog()">{{languageService.lMap.get('stateChange')}}</button>
|
||||
|
||||
<button *ngIf="approveButton" class="filterButton" aria-label="Filtern"
|
||||
|
|
@ -100,6 +99,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 +110,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 +133,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>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue