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>
<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"

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

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;
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;

5
lib/core/form/components/widgets/date-time/date-time.widget.html
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>

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}}">
<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>

5
lib/core/form/components/widgets/multiline-text/multiline-text.widget.html
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">

5
lib/core/form/components/widgets/number/number.widget.html
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>

5
lib/core/form/components/widgets/people/people.widget.html
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)"

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>
<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"

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

30
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}}"
[class.adf-invalid]="!field.isValid"
<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>

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

@@ -1,19 +1,14 @@
<div class="adf-upload-widget {{field.className}}"
[class.adf-invalid]="!field.isValid"
<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>
<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>
<button *ngIf="!field.readOnly" mat-icon-button [id]="'file-'+file.id+'-remove'"
@@ -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>

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

@@ -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>

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

@@ -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}}