mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
[AAE-2378] Add tooltip to Form Cloud Widgets (#5947)
This commit is contained in:
@@ -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"
|
||||
|
@@ -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>
|
||||
|
@@ -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;
|
||||
|
@@ -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>
|
||||
|
@@ -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>
|
||||
|
@@ -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>
|
||||
|
@@ -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">
|
||||
|
@@ -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>
|
||||
|
@@ -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)"
|
||||
|
@@ -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"
|
||||
|
@@ -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>
|
||||
|
@@ -1,12 +1,12 @@
|
||||
<div class="adf-attach-widget {{field.className}}"
|
||||
[class.adf-invalid]="!field.isValid"
|
||||
[class.adf-readonly]="field.readOnly">
|
||||
<div class="adf-attach-widget {{field.className}}" [class.adf-invalid]="!field.isValid"
|
||||
[class.adf-readonly]="field.readOnly">
|
||||
<label class="adf-label" [attr.for]="field.id">{{field.name}}
|
||||
<span *ngIf="isRequired()">*</span>
|
||||
</label>
|
||||
<div class="adf-attach-widget-container">
|
||||
<div class="adf-attach-widget__menu-upload" *ngIf="isUploadButtonVisible()">
|
||||
<button (click)="openSelectDialog()" mat-raised-button color="primary" [id]="field.id">
|
||||
<button (click)="openSelectDialog()" mat-raised-button color="primary" [id]="field.id"
|
||||
[matTooltip]="field.tooltip" matTooltipPosition="above" matTooltipShowDelay="1000">
|
||||
{{ 'FORM.FIELD.ATTACH' | translate }}
|
||||
<mat-icon>{{getWidgetIcon()}}</mat-icon>
|
||||
</button>
|
||||
@@ -17,31 +17,25 @@
|
||||
<div id="adf-attach-widget-readonly-list">
|
||||
<mat-list *ngIf="hasFile">
|
||||
<mat-list-item class="adf-attach-files-row" *ngFor="let file of uploadedFiles">
|
||||
<img mat-list-icon class="adf-attach-widget__icon"
|
||||
[id]="'file-'+file?.id+'-icon'"
|
||||
[src]="file.content ? getIcon(file.content.mimeType) : getIcon(file.mimeType)"
|
||||
[alt]="mimeTypeIcon"
|
||||
role="button"
|
||||
tabindex="0"/>
|
||||
<span matLine id="{{'file-'+file?.id}}"
|
||||
role="button" tabindex="0" class="adf-file">{{file.name}}</span>
|
||||
<img mat-list-icon class="adf-attach-widget__icon" [id]="'file-'+file?.id+'-icon'"
|
||||
[src]="file.content ? getIcon(file.content.mimeType) : getIcon(file.mimeType)" [alt]="mimeTypeIcon"
|
||||
role="button" tabindex="0" />
|
||||
<span matLine id="{{'file-'+file?.id}}" role="button" tabindex="0" class="adf-file">{{file.name}}</span>
|
||||
<button id="{{'file-'+file?.id+'-option-menu'}}" mat-icon-button [matMenuTriggerFor]="fileActionMenu">
|
||||
<mat-icon>more_vert</mat-icon>
|
||||
</button>
|
||||
<mat-menu #fileActionMenu="matMenu" xPosition="before">
|
||||
<button id="{{'file-'+file?.id+'-show-file'}}"
|
||||
mat-menu-item (click)="onAttachFileClicked(file)">
|
||||
<button id="{{'file-'+file?.id+'-show-file'}}" mat-menu-item (click)="onAttachFileClicked(file)">
|
||||
<mat-icon>image</mat-icon>
|
||||
<span>{{ 'FORM.FIELD.VIEW_FILE' | translate }}</span>
|
||||
</button>
|
||||
<button id="{{'file-'+file?.id+'-download-file'}}"
|
||||
mat-menu-item (click)="downloadContent(file)">
|
||||
<button id="{{'file-'+file?.id+'-download-file'}}" mat-menu-item (click)="downloadContent(file)">
|
||||
<mat-icon>file_download</mat-icon>
|
||||
<span>{{ 'FORM.FIELD.DOWNLOAD_FILE' | translate }}</span>
|
||||
</button>
|
||||
<button *ngIf="!field.readOnly" id="{{'file-'+file?.id+'-remove-file'}}"
|
||||
mat-menu-item [id]="'file-'+file?.id+'-remove'"
|
||||
(click)="onRemoveAttachFile(file);" (keyup.enter)="onRemoveAttachFile(file);">
|
||||
<button *ngIf="!field.readOnly" id="{{'file-'+file?.id+'-remove-file'}}" mat-menu-item
|
||||
[id]="'file-'+file?.id+'-remove'" (click)="onRemoveAttachFile(file);"
|
||||
(keyup.enter)="onRemoveAttachFile(file);">
|
||||
<mat-icon class="mat-24">highlight_off</mat-icon>
|
||||
<span>{{ 'FORM.FIELD.REMOVE_FILE' | translate }}</span>
|
||||
</button>
|
||||
|
@@ -1,23 +1,18 @@
|
||||
<div class="adf-upload-widget {{field.className}}"
|
||||
[class.adf-invalid]="!field.isValid"
|
||||
[class.adf-readonly]="field.readOnly">
|
||||
<label class="adf-label" [attr.for]="field.id">{{ field.name | translate }}<span *ngIf="isRequired()">*</span></label>
|
||||
<div class="adf-upload-widget {{field.className}}" [class.adf-invalid]="!field.isValid"
|
||||
[class.adf-readonly]="field.readOnly">
|
||||
<label class="adf-label" [attr.for]="field.id">{{ field.name | translate }}<span
|
||||
*ngIf="isRequired()">*</span></label>
|
||||
<div class="adf-cloud-upload-widget-container">
|
||||
<div>
|
||||
<mat-list *ngIf="hasFile">
|
||||
<mat-list-item class="adf-upload-files-row" *ngFor="let file of uploadedFiles">
|
||||
<img mat-list-icon class="adf-upload-widget__icon"
|
||||
[id]="'file-'+file.id+'-icon'"
|
||||
[src]="getIcon(file.content.mimeType)"
|
||||
[alt]="mimeTypeIcon"
|
||||
(click)="fileClicked(file)"
|
||||
(keyup.enter)="fileClicked(file)"
|
||||
role="button"
|
||||
tabindex="0"/>
|
||||
<img mat-list-icon class="adf-upload-widget__icon" [id]="'file-'+file.id+'-icon'"
|
||||
[src]="getIcon(file.content.mimeType)" [alt]="mimeTypeIcon" (click)="fileClicked(file)"
|
||||
(keyup.enter)="fileClicked(file)" role="button" tabindex="0" />
|
||||
<span matLine id="{{'file-'+file.id}}" (click)="fileClicked(file)" (keyup.enter)="fileClicked(file)"
|
||||
role="button" tabindex="0" class="adf-file">{{file.name}}</span>
|
||||
role="button" tabindex="0" class="adf-file">{{file.name}}</span>
|
||||
<button *ngIf="!field.readOnly" mat-icon-button [id]="'file-'+file.id+'-remove'"
|
||||
(click)="removeFile(file);" (keyup.enter)="removeFile(file);">
|
||||
(click)="removeFile(file);" (keyup.enter)="removeFile(file);">
|
||||
<mat-icon class="mat-24">highlight_off</mat-icon>
|
||||
</button>
|
||||
</mat-list-item>
|
||||
@@ -25,13 +20,11 @@
|
||||
</div>
|
||||
|
||||
<div *ngIf="(!hasFile || multipleOption) && !field.readOnly">
|
||||
<button mat-raised-button color="primary" (click)="uploadFiles.click()">
|
||||
<button mat-raised-button color="primary" (click)="uploadFiles.click()" [matTooltip]="field.tooltip"
|
||||
matTooltipPosition="above" matTooltipShowDelay="1000">
|
||||
{{ 'FORM.FIELD.UPLOAD' | translate }}<mat-icon>file_upload</mat-icon>
|
||||
<input #uploadFiles
|
||||
[multiple]="multipleOption"
|
||||
type="file"
|
||||
[id]="field.form.nodeId"
|
||||
(change)="onFileChanged($event)"/>
|
||||
<input #uploadFiles [multiple]="multipleOption" type="file" [id]="field.form.nodeId"
|
||||
(change)="onFileChanged($event)" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
@@ -11,7 +11,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-datepicker-toggle matSuffix [for]="datePicker" [disabled]="field.readOnly" ></mat-datepicker-toggle>
|
||||
</mat-form-field>
|
||||
<error-widget [error]="field.validationSummary"></error-widget>
|
||||
|
@@ -7,7 +7,10 @@
|
||||
[(ngModel)]="field.value"
|
||||
[disabled]="field.readOnly"
|
||||
[compareWith]="compareDropdownValues"
|
||||
(ngModelChange)="onFieldChanged(field)">
|
||||
(ngModelChange)="onFieldChanged(field)"
|
||||
[matTooltip]="field.tooltip"
|
||||
matTooltipPosition="above"
|
||||
matTooltipShowDelay="1000">
|
||||
<mat-option *ngFor="let opt of field.options"
|
||||
[value]="getOptionValue(opt, field.value)"
|
||||
[id]="opt.id">{{opt.name}}
|
||||
|
Reference in New Issue
Block a user