[AAE-2378] Add tooltip to Form Cloud Widgets (#5947)

This commit is contained in:
davidcanonieto
2020-08-03 21:32:19 +01:00
committed by GitHub
parent c66ad49f03
commit 1ade912e64
15 changed files with 72 additions and 51 deletions

View File

@@ -3,6 +3,9 @@
<label class="adf-label" [attr.for]="field.id">{{field.name | translate }}<span *ngIf="isRequired()">*</span></label>
<span matPrefix class="adf-amount-widget__prefix-spacing">{{ currency }}</span>
<input matInput
[matTooltip]="field.tooltip"
matTooltipPosition="above"
matTooltipShowDelay="1000"
class="adf-input"
type="text"
[id]="field.id"

View File

@@ -6,8 +6,11 @@
[required]="field.required"
[disabled]="field.readOnly || readOnly"
[(ngModel)]="field.value"
(ngModelChange)="onFieldChanged(field)">
(ngModelChange)="onFieldChanged(field)"
[matTooltip]="field.tooltip"
matTooltipPosition="right"
matTooltipShowDelay="1000">
{{field.name | translate }}
<span *ngIf="field.required">*</span>
<span *ngIf="field.required" >*</span>
</mat-checkbox>
</div>

View File

@@ -48,6 +48,7 @@ export class FormFieldModel extends FormWidgetModel {
rowspan: number = 1;
colspan: number = 1;
placeholder: string = null;
tooltip: string = null;
minLength: number = 0;
maxLength: number = 0;
minValue: string;
@@ -169,6 +170,7 @@ export class FormFieldModel extends FormWidgetModel {
this.dateDisplayFormat = json.dateDisplayFormat || this.getDefaultDateFormat(json);
this._value = this.parseValue(json);
this.validationSummary = new ErrorMessageModel();
this.tooltip = json.tooltip;
if (json.placeholder && json.placeholder !== '' && json.placeholder !== 'null') {
this.placeholder = json.placeholder;

View File

@@ -12,7 +12,10 @@
[max]="maxDate"
(focusout)="onDateChanged($event.srcElement.value)"
(dateChange)="onDateChanged($event)"
[placeholder]="field.placeholder">
[placeholder]="field.placeholder"
[matTooltip]="field.tooltip"
matTooltipPosition="above"
matTooltipShowDelay="1000">
<mat-datetimepicker-toggle matSuffix [for]="datetimePicker" [disabled]="field.readOnly"></mat-datetimepicker-toggle>
</mat-form-field>
<error-widget [error]="field.validationSummary"></error-widget>

View File

@@ -1 +1,2 @@
<div class="adf-display-text-widget {{field.className}}">{{field.value | translate}}</div>
<div [matTooltip]="field.tooltip" matTooltipPosition="above" matTooltipShowDelay="1000"
class="adf-display-text-widget {{field.className}}">{{field.value | translate}}</div>

View File

@@ -1,6 +1,7 @@
<div class="adf-hyperlink-widget {{field.className}}">
<label class="adf-label" [attr.for]="field.id">{{field.name | translate }}<span *ngIf="isRequired()">*</span></label>
<div>
<label class="adf-label" [attr.for]="field.id">{{field.name | translate }}<span
*ngIf="isRequired()">*</span></label>
<div [matTooltip]="field.tooltip" matTooltipPosition="above" matTooltipShowDelay="1000">
<a [href]="linkUrl" target="_blank" rel="nofollow">{{linkText}}</a>
</div>
</div>

View File

@@ -11,7 +11,10 @@
[(ngModel)]="field.value"
(ngModelChange)="onFieldChanged(field)"
[disabled]="field.readOnly || readOnly"
[placeholder]="field.placeholder">
[placeholder]="field.placeholder"
[matTooltip]="field.tooltip"
matTooltipPosition="above"
matTooltipShowDelay="1000">
</textarea>
</mat-form-field>
<div *ngIf="field.maxLength > 0" class="adf-multiline-word-counter">

View File

@@ -12,7 +12,10 @@
[(ngModel)]="field.value"
(ngModelChange)="onFieldChanged(field)"
[disabled]="field.readOnly"
[placeholder]="field.placeholder">
[placeholder]="field.placeholder"
[matTooltip]="field.tooltip"
matTooltipPosition="above"
matTooltipShowDelay="1000">
</mat-form-field>
<error-widget [error]="field.validationSummary" ></error-widget>
<error-widget *ngIf="isInvalidFieldRequired()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>

View File

@@ -12,7 +12,10 @@
[id]="field.id"
[formControl]="searchTerm"
placeholder="{{field.placeholder}}"
[matAutocomplete]="auto">
[matAutocomplete]="auto"
[matTooltip]="field.tooltip"
matTooltipPosition="above"
matTooltipShowDelay="1000">
<mat-autocomplete class="adf-people-widget-list"
#auto="matAutocomplete"
(optionSelected)="onItemSelect($event.option.value)"

View File

@@ -4,6 +4,9 @@
<label class="adf-label" [attr.for]="field.id">{{field.name | translate }}<span *ngIf="isRequired()">*</span></label>
<mat-radio-group class="adf-radio-group" [(ngModel)]="field.value" [disabled]="field.readOnly">
<mat-radio-button
[matTooltip]="field.tooltip"
matTooltipPosition="above"
matTooltipShowDelay="1000"
[id]="field.id + '-' + opt.id"
[name]="field.id"
[value]="opt.id"

View File

@@ -12,7 +12,10 @@
(ngModelChange)="onFieldChanged(field)"
[disabled]="field.readOnly || readOnly"
[textMask]="{mask: mask, isReversed: isMaskReversed}"
[placeholder]="placeholder">
[placeholder]="placeholder"
[matTooltip]="field.tooltip"
matTooltipPosition="above"
matTooltipShowDelay="1000">
</mat-form-field>
<error-widget [error]="field.validationSummary"></error-widget>
<error-widget *ngIf="isInvalidFieldRequired()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>