inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

3
lib/core/form/components/widgets/amount/amount.widget.html
View File

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

7
lib/core/form/components/widgets/checkbox/checkbox.widget.html
View File

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

2
lib/core/form/components/widgets/core/form-field.model.ts
View File

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

5
lib/core/form/components/widgets/date-time/date-time.widget.html
View File

@@ -12,7 +12,10 @@
[max]="maxDate" [max]="maxDate"
(focusout)="onDateChanged($event.srcElement.value)" (focusout)="onDateChanged($event.srcElement.value)"
(dateChange)="onDateChanged($event)" (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-datetimepicker-toggle matSuffix [for]="datetimePicker" [disabled]="field.readOnly"></mat-datetimepicker-toggle>
</mat-form-field> </mat-form-field>
<error-widget [error]="field.validationSummary"></error-widget> <error-widget [error]="field.validationSummary"></error-widget>

3
lib/core/form/components/widgets/display-text/display-text.widget.html
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>

5
lib/core/form/components/widgets/hyperlink/hyperlink.widget.html
View File

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

5
lib/core/form/components/widgets/multiline-text/multiline-text.widget.html
View File

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

5
lib/core/form/components/widgets/number/number.widget.html
View File

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

5
lib/core/form/components/widgets/people/people.widget.html
View File

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

3
lib/core/form/components/widgets/radio-buttons/radio-buttons.widget.html
View File

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

5
lib/core/form/components/widgets/text/text.widget.html
View File

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

32
lib/process-services-cloud/src/lib/form/components/widgets/attach-file/attach-file-cloud-widget.component.html
View File

@@ -1,12 +1,12 @@
<div class="adf-attach-widget {{field.className}}" <div class="adf-attach-widget {{field.className}}" [class.adf-invalid]="!field.isValid"
[class.adf-invalid]="!field.isValid" [class.adf-readonly]="field.readOnly">
[class.adf-readonly]="field.readOnly">
<label class="adf-label" [attr.for]="field.id">{{field.name}} <label class="adf-label" [attr.for]="field.id">{{field.name}}
<span *ngIf="isRequired()">*</span> <span *ngIf="isRequired()">*</span>
</label> </label>
<div class="adf-attach-widget-container"> <div class="adf-attach-widget-container">
<div class="adf-attach-widget__menu-upload" *ngIf="isUploadButtonVisible()"> <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 }} {{ 'FORM.FIELD.ATTACH' | translate }}
<mat-icon>{{getWidgetIcon()}}</mat-icon> <mat-icon>{{getWidgetIcon()}}</mat-icon>
</button> </button>
@@ -17,31 +17,25 @@
<div id="adf-attach-widget-readonly-list"> <div id="adf-attach-widget-readonly-list">
<mat-list *ngIf="hasFile"> <mat-list *ngIf="hasFile">
<mat-list-item class="adf-attach-files-row" *ngFor="let file of uploadedFiles"> <mat-list-item class="adf-attach-files-row" *ngFor="let file of uploadedFiles">
<img mat-list-icon class="adf-attach-widget__icon" <img mat-list-icon class="adf-attach-widget__icon" [id]="'file-'+file?.id+'-icon'"
[id]="'file-'+file?.id+'-icon'" [src]="file.content ? getIcon(file.content.mimeType) : getIcon(file.mimeType)" [alt]="mimeTypeIcon"
[src]="file.content ? getIcon(file.content.mimeType) : getIcon(file.mimeType)" role="button" tabindex="0" />
[alt]="mimeTypeIcon" <span matLine id="{{'file-'+file?.id}}" role="button" tabindex="0" class="adf-file">{{file.name}}</span>
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"> <button id="{{'file-'+file?.id+'-option-menu'}}" mat-icon-button [matMenuTriggerFor]="fileActionMenu">
<mat-icon>more_vert</mat-icon> <mat-icon>more_vert</mat-icon>
</button> </button>
<mat-menu #fileActionMenu="matMenu" xPosition="before"> <mat-menu #fileActionMenu="matMenu" xPosition="before">
<button id="{{'file-'+file?.id+'-show-file'}}" <button id="{{'file-'+file?.id+'-show-file'}}" mat-menu-item (click)="onAttachFileClicked(file)">
mat-menu-item (click)="onAttachFileClicked(file)">
<mat-icon>image</mat-icon> <mat-icon>image</mat-icon>
<span>{{ 'FORM.FIELD.VIEW_FILE' | translate }}</span> <span>{{ 'FORM.FIELD.VIEW_FILE' | translate }}</span>
</button> </button>
<button id="{{'file-'+file?.id+'-download-file'}}" <button id="{{'file-'+file?.id+'-download-file'}}" mat-menu-item (click)="downloadContent(file)">
mat-menu-item (click)="downloadContent(file)">
<mat-icon>file_download</mat-icon> <mat-icon>file_download</mat-icon>
<span>{{ 'FORM.FIELD.DOWNLOAD_FILE' | translate }}</span> <span>{{ 'FORM.FIELD.DOWNLOAD_FILE' | translate }}</span>
</button> </button>
<button *ngIf="!field.readOnly" id="{{'file-'+file?.id+'-remove-file'}}" <button *ngIf="!field.readOnly" id="{{'file-'+file?.id+'-remove-file'}}" mat-menu-item
mat-menu-item [id]="'file-'+file?.id+'-remove'" [id]="'file-'+file?.id+'-remove'" (click)="onRemoveAttachFile(file);"
(click)="onRemoveAttachFile(file);" (keyup.enter)="onRemoveAttachFile(file);"> (keyup.enter)="onRemoveAttachFile(file);">
<mat-icon class="mat-24">highlight_off</mat-icon> <mat-icon class="mat-24">highlight_off</mat-icon>
<span>{{ 'FORM.FIELD.REMOVE_FILE' | translate }}</span> <span>{{ 'FORM.FIELD.REMOVE_FILE' | translate }}</span>
</button> </button>

33
lib/process-services-cloud/src/lib/form/components/widgets/attach-file/upload-cloud.widget.html
View File

@@ -1,23 +1,18 @@
<div class="adf-upload-widget {{field.className}}" <div class="adf-upload-widget {{field.className}}" [class.adf-invalid]="!field.isValid"
[class.adf-invalid]="!field.isValid" [class.adf-readonly]="field.readOnly">
[class.adf-readonly]="field.readOnly"> <label class="adf-label" [attr.for]="field.id">{{ field.name | translate }}<span
<label class="adf-label" [attr.for]="field.id">{{ field.name | translate }}<span *ngIf="isRequired()">*</span></label> *ngIf="isRequired()">*</span></label>
<div class="adf-cloud-upload-widget-container"> <div class="adf-cloud-upload-widget-container">
<div> <div>
<mat-list *ngIf="hasFile"> <mat-list *ngIf="hasFile">
<mat-list-item class="adf-upload-files-row" *ngFor="let file of uploadedFiles"> <mat-list-item class="adf-upload-files-row" *ngFor="let file of uploadedFiles">
<img mat-list-icon class="adf-upload-widget__icon" <img mat-list-icon class="adf-upload-widget__icon" [id]="'file-'+file.id+'-icon'"
[id]="'file-'+file.id+'-icon'" [src]="getIcon(file.content.mimeType)" [alt]="mimeTypeIcon" (click)="fileClicked(file)"
[src]="getIcon(file.content.mimeType)" (keyup.enter)="fileClicked(file)" role="button" tabindex="0" />
[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)" <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'" <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> <mat-icon class="mat-24">highlight_off</mat-icon>
</button> </button>
</mat-list-item> </mat-list-item>
@@ -25,13 +20,11 @@
</div> </div>
<div *ngIf="(!hasFile || multipleOption) && !field.readOnly"> <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> {{ 'FORM.FIELD.UPLOAD' | translate }}<mat-icon>file_upload</mat-icon>
<input #uploadFiles <input #uploadFiles [multiple]="multipleOption" type="file" [id]="field.form.nodeId"
[multiple]="multipleOption" (change)="onFileChanged($event)" />
type="file"
[id]="field.form.nodeId"
(change)="onFileChanged($event)"/>
</button> </button>
</div> </div>

5
lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.html
View File

@@ -11,7 +11,10 @@
[max]="maxDate" [max]="maxDate"
(focusout)="onDateChanged($event.srcElement.value)" (focusout)="onDateChanged($event.srcElement.value)"
(dateChange)="onDateChanged($event)" (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-datepicker-toggle matSuffix [for]="datePicker" [disabled]="field.readOnly" ></mat-datepicker-toggle>
</mat-form-field> </mat-form-field>
<error-widget [error]="field.validationSummary"></error-widget> <error-widget [error]="field.validationSummary"></error-widget>

5
lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.html
View File

@@ -7,7 +7,10 @@
[(ngModel)]="field.value" [(ngModel)]="field.value"
[disabled]="field.readOnly" [disabled]="field.readOnly"
[compareWith]="compareDropdownValues" [compareWith]="compareDropdownValues"
(ngModelChange)="onFieldChanged(field)"> (ngModelChange)="onFieldChanged(field)"
[matTooltip]="field.tooltip"
matTooltipPosition="above"
matTooltipShowDelay="1000">
<mat-option *ngFor="let opt of field.options" <mat-option *ngFor="let opt of field.options"
[value]="getOptionValue(opt, field.value)" [value]="getOptionValue(opt, field.value)"
[id]="opt.id">{{opt.name}} [id]="opt.id">{{opt.name}}