changes
Said Gedik
parent
5090d0efbc
commit
70ab4bdb31
|
|
@ -1,19 +1,20 @@
|
|||
.container{
|
||||
.container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
}
|
||||
.filterHeading{
|
||||
font-family: Roboto;
|
||||
|
||||
.filterHeading {
|
||||
font-family: Roboto;
|
||||
}
|
||||
|
||||
.filterBox{
|
||||
.filterBox {
|
||||
width: 90%;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.buttonBox{
|
||||
.buttonBox {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
|
|
@ -22,7 +23,10 @@ font-family: Roboto;
|
|||
.dot-badge {
|
||||
background-color: #00a79d;
|
||||
color: #00a79d;
|
||||
width: 10px; /* Breite des Punkts */
|
||||
height: 10px; /* Höhe des Punkts */
|
||||
border-radius: 50%; /* Rundung des Punkts */
|
||||
}
|
||||
width: 10px;
|
||||
/* Breite des Punkts */
|
||||
height: 10px;
|
||||
/* Höhe des Punkts */
|
||||
border-radius: 50%;
|
||||
/* Rundung des Punkts */
|
||||
}
|
||||
|
|
@ -2,14 +2,15 @@
|
|||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
/* overflow: hidden; */
|
||||
}
|
||||
|
||||
.head {
|
||||
color:rgba(41, 46, 50, 0.679);
|
||||
color: rgba(41, 46, 50, 0.8);
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
display: flex;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
|
||||
|
|
@ -20,41 +21,57 @@
|
|||
|
||||
|
||||
.head {
|
||||
overflow: hidden; /* Hides anything that overflows the boundary of this element */
|
||||
overflow: hidden;
|
||||
/* Hides anything that overflows the boundary of this element */
|
||||
}
|
||||
|
||||
.head h2 {
|
||||
display: inline-block; /* Ensures that the element can be transformed */
|
||||
white-space: nowrap; /* Keeps the text on a single line */
|
||||
transform: translateX(-100%); /* Starts the text off-screen to the left */
|
||||
animation: slideIn 1.5s forwards; /* Adjust '2s' to control the speed of the animation */
|
||||
user-select: none;
|
||||
display: inline-block;
|
||||
/* Ensures that the element can be transformed */
|
||||
white-space: nowrap;
|
||||
/* Keeps the text on a single line */
|
||||
transform: translateX(-100%);
|
||||
/* Starts the text off-screen to the left */
|
||||
animation: slideIn 1.5s forwards;
|
||||
/* Adjust '2s' to control the speed of the animation */
|
||||
}
|
||||
|
||||
.head div {
|
||||
display: inline-block; /* Ensures that the element can be transformed */
|
||||
white-space: nowrap; /* Keeps the text on a single line */
|
||||
transform: translateX(100%); /* Starts the text off-screen to the left */
|
||||
animation: slideInRight 1.5s forwards; /* Adjust '2s' to control the speed of the animation */
|
||||
display: inline-block;
|
||||
/* Ensures that the element can be transformed */
|
||||
white-space: nowrap;
|
||||
/* Keeps the text on a single line */
|
||||
transform: translateX(100%);
|
||||
/* Starts the text off-screen to the left */
|
||||
animation: slideInRight 1.5s forwards;
|
||||
/* Adjust '2s' to control the speed of the animation */
|
||||
}
|
||||
|
||||
@keyframes slideIn {
|
||||
from {
|
||||
transform: translateX(-100%); /* Start from off-screen left */
|
||||
transform: translateX(-100%);
|
||||
/* Start from off-screen left */
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translateX(0%); /* End at the normal position */
|
||||
transform: translateX(0%);
|
||||
/* End at the normal position */
|
||||
opacity: 100;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideInRight {
|
||||
from {
|
||||
transform: translateX(100%); /* Start from off-screen left */
|
||||
transform: translateX(100%);
|
||||
/* Start from off-screen left */
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translateX(0%); /* End at the normal position */
|
||||
transform: translateX(0%);
|
||||
/* End at the normal position */
|
||||
opacity: 100;
|
||||
}
|
||||
}
|
||||
|
|
@ -66,16 +83,20 @@
|
|||
justify-content: space-between;
|
||||
height: 57px;
|
||||
margin-bottom: 30px;
|
||||
animation: slideUp 1.5s forwards; /* Adjust '2s' to control the speed of the animation */
|
||||
animation: slideUp 1.5s forwards;
|
||||
/* Adjust '2s' to control the speed of the animation */
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
from {
|
||||
transform: translateY(-100%); /* Start from off-screen left */
|
||||
transform: translateY(-100%);
|
||||
/* Start from off-screen left */
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translateY(0%); /* End at the normal position */
|
||||
transform: translateY(0%);
|
||||
/* End at the normal position */
|
||||
opacity: 100;
|
||||
}
|
||||
}
|
||||
|
|
@ -97,8 +118,8 @@
|
|||
|
||||
|
||||
.transitionButton {
|
||||
background-color: #00a79d;
|
||||
color: white;
|
||||
background-color: #00a79d;
|
||||
color: white;
|
||||
font-weight: 100;
|
||||
}
|
||||
|
||||
|
|
@ -135,25 +156,91 @@
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
.filterContainer {
|
||||
width: 100%;
|
||||
.filterButton mat-icon {
|
||||
transform: scale(0.8);
|
||||
margin-right: -6px;
|
||||
}
|
||||
|
||||
.detailsButton {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 70%;
|
||||
font-weight: 500;
|
||||
font-size: 13px;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
gap: 8px;
|
||||
user-select: none;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.filterButton {
|
||||
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.124);
|
||||
border-radius: 8px;
|
||||
font-weight: 500;
|
||||
gap: 3px;
|
||||
/* box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); */
|
||||
}
|
||||
|
||||
.clearFilter {
|
||||
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.124);
|
||||
border-radius: 8px;
|
||||
font-weight: 500;
|
||||
gap: 3px;
|
||||
}
|
||||
|
||||
.clearFilter:hover {
|
||||
background-color: #ff370016;
|
||||
}
|
||||
|
||||
.filterButton:hover {
|
||||
background-color: rgb(240, 240, 240);
|
||||
}
|
||||
|
||||
.filterContainer {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
background-color: #f5f5f5;
|
||||
border: solid rgba(0, 0, 0, 0.1) 1px;
|
||||
border: solid rgba(0, 0, 0, 0.1) 1px;
|
||||
border-bottom: none;
|
||||
border-radius: 10px 10px 0px 0px;
|
||||
height: 60px;
|
||||
padding-left: 10px;
|
||||
padding-right: 15px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.clearFilter {
|
||||
margin-left: 10px;
|
||||
.left, .right {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
gap: 9px;
|
||||
}
|
||||
|
||||
.showDetails {
|
||||
margin-left: 80px;
|
||||
margin-top: 8.5px;
|
||||
|
||||
.split {
|
||||
height: 100%;
|
||||
border-right: solid 1px rgba(0, 0, 0, 0.124);
|
||||
}
|
||||
|
||||
.filter {
|
||||
|
|
@ -268,9 +355,9 @@
|
|||
.dot-badge {
|
||||
background-color: #00a79d;
|
||||
color: #00a79d;
|
||||
width: 15px;
|
||||
/* Breite des Punkts */
|
||||
height: 15px;
|
||||
width: 10x;
|
||||
/* Breitedes Punkts */
|
||||
height: 10px;
|
||||
/* Höhe des Punkts */
|
||||
border-radius: 50%;
|
||||
/* Rundung des Punkts */
|
||||
|
|
|
|||
|
|
@ -46,14 +46,7 @@
|
|||
</mat-select>
|
||||
</mat-form-field>
|
||||
|
||||
<!-- Scale Picker -->
|
||||
<mat-button-toggle-group style="height: 100%;" (change)="changeScalar()" name="fontStyle" aria-label="Font Style"
|
||||
[(ngModel)]="selectedScalar">
|
||||
<mat-button-toggle style="display: flex; align-items: center;" value="bold" *ngFor="let scalar of scalars"
|
||||
[value]="scalar">
|
||||
{{scalar}}
|
||||
</mat-button-toggle>
|
||||
</mat-button-toggle-group>
|
||||
|
||||
|
||||
<!-- Preset Picker -->
|
||||
<mat-form-field appearance="fill" style="width: 300px;">
|
||||
|
|
@ -83,41 +76,60 @@
|
|||
|
||||
|
||||
<div *ngIf="!errorService.rsso && !rssoInit" class="filterContainer">
|
||||
<div class="left">
|
||||
|
||||
<button *ngIf="transitionButton" mat-raised-button class="transitionButton" aria-label="Filtern"
|
||||
(click)=" openStatTransitionDialog()">{{languageService.lMap.get('stateChange')}}</button>
|
||||
<button *ngIf="transitionButton" class="filterButton" style="background-color: #00a79d; color: white;"
|
||||
aria-label="Filtern" (click)=" openStatTransitionDialog()">{{languageService.lMap.get('stateChange')}}</button>
|
||||
|
||||
<button *ngIf="approveButton" mat-raised-button class="filterButton" aria-label="Filtern"
|
||||
(click)="approve()">{{languageService.lMap.get('genehmigen')}}</button>
|
||||
<button *ngIf="approveButton" class="filterButton" aria-label="Filtern"
|
||||
(click)="approve()">{{languageService.lMap.get('genehmigen')}}</button>
|
||||
|
||||
<button *ngIf="rejectButton" mat-raised-button class="filterButton" aria-label="Filtern"
|
||||
(click)="reject()">{{languageService.lMap.get('ablehnen')}}</button>
|
||||
<button *ngIf="rejectButton" class="filterButton" aria-label="Filtern"
|
||||
(click)="reject()">{{languageService.lMap.get('ablehnen')}}</button>
|
||||
|
||||
<button *ngIf="cancelButton" mat-raised-button class="filterButton" aria-label="Filtern"
|
||||
(click)="cancel()">{{languageService.lMap.get('stornieren')}}</button>
|
||||
<button *ngIf="cancelButton" class="filterButton" aria-label="Filtern"
|
||||
(click)="cancel()">{{languageService.lMap.get('stornieren')}}</button>
|
||||
|
||||
<button *ngIf="reApproveButton" mat-raised-button class="filterButton" aria-label="Filtern"
|
||||
(click)="reApprove()">Erneut zur Genehmigung</button>
|
||||
<button *ngIf="reApproveButton" class="filterButton" aria-label="Filtern" (click)="reApprove()">Erneut zur
|
||||
Genehmigung</button>
|
||||
|
||||
<button *ngIf="implementerButton" mat-raised-button class="filterButton" aria-label="Filtern"
|
||||
(click)="openImplementerDialog()">{{languageService.lMap.get('implementerDialogHeading')}}</button>
|
||||
<button *ngIf="implementerButton" class="filterButton" aria-label="Filtern"
|
||||
(click)="openImplementerDialog()">{{languageService.lMap.get('implementerDialogHeading')}}</button>
|
||||
|
||||
<button mat-raised-button class="filterButton" aria-label="Filtern" (click)="openFilterDialog()">
|
||||
{{languageService.lMap.get('nttGanttFilterButton')}} <mat-icon style="color: #00a79d;">filter_alt</mat-icon>
|
||||
</button>
|
||||
<button class="filterButton" aria-label="Filtern" (click)="openFilterDialog()">
|
||||
{{languageService.lMap.get('nttGanttFilterButton')}} <mat-icon style="color: #00a79d;">filter_alt</mat-icon>
|
||||
</button>
|
||||
|
||||
<mat-badge *ngIf="filterBadge" [matBadge]="''" class="dot-badge"></mat-badge>
|
||||
<mat-badge *ngIf="filterBadge" [matBadge]="''" class="dot-badge"></mat-badge>
|
||||
|
||||
<button *ngIf="showSaveButton" mat-raised-button (click)="updatePreset()">Speichern</button>
|
||||
<button *ngIf="showSaveUnderButton" mat-raised-button (click)="openSaveUnderDialog()">Speichern unter</button>
|
||||
<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>
|
||||
<button *ngIf="showSaveButton" class="filterButton" (click)="updatePreset()">Speichern</button>
|
||||
<button *ngIf="showSaveUnderButton" class="filterButton" style="border: solid 1px rgba(0, 0, 0, 0.3);"
|
||||
(click)="openSaveUnderDialog()">Speichern unter</button>
|
||||
|
||||
<mat-slide-toggle class="showDetails" color="primary" [(ngModel)]="showDetails" [checked]="showDetails"
|
||||
(change)="refreshData()">{{languageService.lMap.get('detailButton')}}</mat-slide-toggle>
|
||||
<button [disabled]="!filterEnabled" aria-label="clear Filters and Sort" class="clearFilter"
|
||||
style="background-color: transparent;" (click)="clearFilter()">
|
||||
{{languageService.lMap.get('clearFilter')}} <mat-icon>close</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- <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">
|
||||
<mat-button-toggle style="display: flex; align-items: center;" value="bold" *ngFor="let scalar of scalars"
|
||||
[value]="scalar">
|
||||
{{scalar}}
|
||||
</mat-button-toggle>
|
||||
</mat-button-toggle-group>
|
||||
|
||||
<div class="detailsButton">
|
||||
{{languageService.lMap.get('detailButton')}}
|
||||
<mat-slide-toggle color="primary" [(ngModel)]="showDetails" [checked]="showDetails"
|
||||
(change)="refreshData()"></mat-slide-toggle>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
|
|
|
|||
Loading…
Reference in New Issue