Kalender Layout anpassungen
manueltauber
parent
07aa064dba
commit
ab13c39ea7
|
|
@ -2,7 +2,7 @@
|
|||
<div class="chip-list-wrapper">
|
||||
<mat-chip-list #chipList>
|
||||
<ng-container *ngFor="let select of selectData">
|
||||
<mat-chip class="cardinal-colors" (click)="removeChip(select)">
|
||||
<mat-chip class="cardinal-colors" (click)="removeChip(select)" style="background-color: #00a79d;">
|
||||
{{ select.item }}
|
||||
<mat-icon class="mat-chip-remove">cancel</mat-icon>
|
||||
</mat-chip>
|
||||
|
|
|
|||
|
|
@ -32,11 +32,28 @@
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
.filterContainer{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.clearFilter{
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.showDetails{
|
||||
margin-left: 80px;
|
||||
margin-top: 8.5px;
|
||||
}
|
||||
.filter{
|
||||
margin-top: 0.5%;
|
||||
margin-left: 1%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.checkbox{
|
||||
margin: 0 0.5%;
|
||||
}
|
||||
|
|
@ -47,7 +64,21 @@
|
|||
}
|
||||
|
||||
.filterButton{
|
||||
margin-right: 0.5%;
|
||||
|
||||
}
|
||||
|
||||
.dateButton{
|
||||
height: 59px; width: 59px; background-color: rgba(0, 0, 0, 0.04); border-width: 1px; border-top: none; border-left: none; border-right: none; border-top-right-radius: 4px; margin-right: 15px;
|
||||
}
|
||||
|
||||
.dateButton:hover{
|
||||
height: 59px; width: 59px; background-color: rgba(0, 0, 0, 0.04); border-width: 2px; border-top: 1px; border-left: 1px; border-right: 1px; border-top-right-radius: 4px;
|
||||
background-color: rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.dateButton:checked{
|
||||
height: 59px; width: 59px; background-color: rgba(0, 0, 0, 0.04); border-width: 2px; border-top: 1px; border-left: 1px; border-right: 1px; border-top-right-radius: 4px;
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
/* .datePickerContainer{
|
||||
|
|
|
|||
|
|
@ -11,32 +11,9 @@
|
|||
<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-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>
|
||||
<button mat-basic-button class="dateButton" color="" style="" (click)="picker.open()"><mat-icon>calendar_today</mat-icon></button>
|
||||
|
||||
|
||||
<div class="scalarContainer">
|
||||
<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">
|
||||
{{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>
|
||||
|
||||
</div> -->
|
||||
|
||||
|
||||
|
||||
<mat-form-field style="width: 5%;">
|
||||
<mat-form-field style="width: 90px; height: 59px;" 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">
|
||||
|
|
@ -44,15 +21,22 @@
|
|||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<div class="scalarContainer">
|
||||
<mat-button-toggle-group style="margin-top: 5px;" (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>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<div>
|
||||
<div class="filterContainer">
|
||||
<button mat-raised-button class="filterButton" aria-label="Filtern" (click)="openFilterDialog()">
|
||||
{{languageService.lMap.get('nttGanttFilterButton')}} <mat-icon>filter_list</mat-icon>
|
||||
{{languageService.lMap.get('nttGanttFilterButton')}} <mat-icon style="color: #00a79d;">filter_alt</mat-icon>
|
||||
</button>
|
||||
<button [disabled]="!filterEnabled" mat-icon-button aria-label="clear Filters and Sort" (click)="clearFilter()">
|
||||
<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>
|
||||
<mat-slide-toggle class="showDetails" color="primary" [(ngModel)]="showDetails" [checked]="showDetails" (change)="refreshData()">{{languageService.lMap.get('detailButton')}}</mat-slide-toggle>
|
||||
</div>
|
||||
|
||||
|
||||
|
|
@ -95,7 +79,7 @@
|
|||
[splitterSettings] = "splitterSettings"
|
||||
(actionComplete)="actionComplete($event)"
|
||||
gridLines="Both"
|
||||
|
||||
(splitterResizing)="splitterResizing($event)"
|
||||
(actionBegin)="actionBegin($event)"
|
||||
(taskbarEditing)="taskbarEditing($event)"
|
||||
(taskbarEdited)="taskbarEdited($event)"
|
||||
|
|
@ -107,7 +91,7 @@
|
|||
(load)="load($event)"
|
||||
(queryTaskbarInfo) = "queryTaskbarInfo($event)"
|
||||
(expanding)="onExpand($event)"
|
||||
(splitterResized)="onResizing($event)"
|
||||
|
||||
>
|
||||
<ng-template #tooltipSettingsTaskbar let-data>
|
||||
<div>
|
||||
|
|
|
|||
|
|
@ -202,7 +202,7 @@ export class NttGanttComponent implements OnInit {
|
|||
this.tooltipSettings = {showTooltip: true}
|
||||
this.projectStartDate = this.range.controls.start.value;
|
||||
this.projectEndDate = this.range.controls.end.value;
|
||||
this.splitterSettings = {position: 647 + 'px'};
|
||||
this.splitterSettings = {position: 30 + '%'};
|
||||
this.inputForTimeline = [this.splitterSettings, this.projectStartDate, this.projectEndDate];
|
||||
}
|
||||
|
||||
|
|
@ -305,7 +305,7 @@ export class NttGanttComponent implements OnInit {
|
|||
openFilterDialog(){
|
||||
let dialogRef = FilterDialogComponent;
|
||||
this.matDialog.open(dialogRef,
|
||||
{data : [], width: '50%'}).afterClosed().subscribe((res)=>{
|
||||
{data : [], width: '50%', maxWidth: '800px'}).afterClosed().subscribe((res)=>{
|
||||
if(res){
|
||||
this.filters = res;
|
||||
this.filterEnabled = true;
|
||||
|
|
@ -629,12 +629,12 @@ export class NttGanttComponent implements OnInit {
|
|||
}
|
||||
|
||||
/**
|
||||
* The function onResizing catches the corresponding syncfsuions event and stores the actual splitter postition to synchronize the splitters of the main gannt chart and the planTimeBart gantt chart.
|
||||
* The function splitterResizing catches the corresponding syncfsuions event and stores the actual splitter postition to synchronize the splitters of the main gannt chart and the planTimeBart gantt chart.
|
||||
* @param args event arguments from the syncfusion gantt chart.
|
||||
*/
|
||||
public onResizing(args){
|
||||
let width = '' + args.paneSize[0]+'px';
|
||||
this.splitterSettings = {position: width};
|
||||
public splitterResizing(args) {
|
||||
|
||||
this.splitterSettings = {position: args.paneSize[0].toString() + 'px'};
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -28,6 +28,7 @@
|
|||
[allowSorting]= "false"
|
||||
[allowFiltering]="false"
|
||||
|
||||
|
||||
(queryTaskbarInfo)="queryTaskbarInfo($event)"
|
||||
gridLines="Both">
|
||||
|
||||
|
|
|
|||
|
|
@ -164,5 +164,6 @@ export class PlanTimeBarComponent implements OnInit {
|
|||
}
|
||||
this.fetchPlanTimes();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -11,3 +11,13 @@
|
|||
<app-root></app-root>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
<style>
|
||||
.e-selectionbackground {
|
||||
background-color: #E0E0E0 !important;
|
||||
}
|
||||
.e-gantt .e-gantt-chart .e-active {
|
||||
background-color: #E0E0E0 !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue