Newer
Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
import { Component, Inject } from '@angular/core';
import { MAT_DIALOG_DATA } from '@angular/material/dialog';
import { TooltipPosition } from 'common/models/elements/element';
@Component({
selector: 'aspect-tooltip-properties-dialog',
template: `
<mat-dialog-content>
<div class="fx-column-start-stretch">
<mat-form-field>
<mat-label>{{'propertiesPanel.tooltipText' | translate}}</mat-label>
<input matInput
[(ngModel)]="tooltipText">
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>{{'propertiesPanel.tooltipPosition' | translate }}</mat-label>
<mat-select [(ngModel)]="tooltipPosition">
<mat-option *ngFor="let option of ['left', 'right', 'above', 'below']"
[value]="option">
{{ 'propertiesPanel.' + option | translate }}
</mat-option>
</mat-select>
</mat-form-field>
</div>
</mat-dialog-content>
<mat-dialog-actions>
<button mat-button
[disabled]="!tooltipText"
[mat-dialog-close]="{ tooltipText, tooltipPosition, action: 'save' }">
{{'save' | translate }}
</button>
<button *ngIf="!newTooltip"
mat-button
[mat-dialog-close]="{ tooltipText, tooltipPosition, action: 'delete' }">
{{'delete' | translate }}
</button>
<button mat-button mat-dialog-close>{{'cancel' | translate }}</button>
</mat-dialog-actions>
`,
styles: [`
.fx-column-start-stretch {
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;}
`]
})
export class TooltipPropertiesDialogComponent {
tooltipText: string;
tooltipPosition: TooltipPosition;
newTooltip: boolean;
constructor(@Inject(MAT_DIALOG_DATA) private data: {
tooltipText: string | undefined
tooltipPosition: TooltipPosition | undefined
}) {
this.tooltipText = data.tooltipText || '';
this.tooltipPosition = data.tooltipPosition || 'below';
this.newTooltip = data.tooltipText === undefined || data.tooltipPosition === undefined;
}
}