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

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

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

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