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

[ADF-4467] Fix Upload File Widget layout (#4675)

Browse Source 
* [ADF-4467] Fix Upload File Widget layout

* [ADF-4467] Refactor content services upload button
This commit is contained in:
davidcanonieto 2019-05-07 17:32:35 +01:00 committed by Eugenio Romano
parent 0e2e5e35a0
commit 9d0e9ec219
8 changed files with 69 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/core/services/process-content.service.md
View File

@ -84,7 +84,7 @@ Associate an uploaded file with a Process Instance.
Let's say we have an upload button as follows: Let's say we have an upload button as follows:
```html ```html
<div class="button-row"> <div>
<button mat-button color="accent" mat-mini-fab (click)="fileInput.click()"> <button mat-button color="accent" mat-mini-fab (click)="fileInput.click()">
<mat-icon>attachment</mat-icon> <mat-icon>attachment</mat-icon>
</button> </button>

117
lib/content-services/upload/components/upload-button.component.html
View File

@ -1,21 +1,41 @@
<form class="adf-upload-button-file-container"> <form class="adf-upload-button-file-container">
<!--Files Upload--> <!--Files Upload-->
<a *ngIf="!uploadFolders" <div *ngIf="!uploadFolders">
[disabled]="isButtonDisabled()"
mat-raised-button color="primary"> <!--Single Files Upload-->
<mat-icon>file_upload</mat-icon> <button *ngIf="!multipleFiles"
[disabled]="isButtonDisabled()"
mat-raised-button color="primary"
(click)="uploadSingleFile.click()">
<mat-icon>file_upload</mat-icon>
<span id="upload-single-file-label"
*ngIf="!staticTitle">{{ 'FILE_UPLOAD.BUTTON.UPLOAD_FILE' | translate }}</span>
<span id="upload-single-file-label-static"
*ngIf="staticTitle">{{ staticTitle }}</span>
<input #uploadSingleFile
id="upload-single-file"
data-automation-id="upload-single-file"
type="file"
name="uploadFiles"
accept="{{acceptedFilesType}}"
[attr.disabled]="isButtonDisabled()"
[title]="tooltip"
(change)="onFilesAdded($event)">
</button>
<!--Multiple Files Upload--> <!--Multiple Files Upload-->
<span *ngIf="multipleFiles"> <button *ngIf="multipleFiles"
<label [disabled]="isButtonDisabled()"
id="upload-multiple-file-label" mat-raised-button color="primary"
*ngIf="!staticTitle" (click)="uploadMultipleFiles.click()">
for="upload-multiple-files">{{ 'FILE_UPLOAD.BUTTON.UPLOAD_FILE' | translate }}</label> <mat-icon>file_upload</mat-icon>
<label
<span id="upload-multiple-file-label"
*ngIf="!staticTitle">{{ 'FILE_UPLOAD.BUTTON.UPLOAD_FILE' | translate }}</span>
<span
id="upload-multiple-file-label-static" id="upload-multiple-file-label-static"
*ngIf="staticTitle" *ngIf="staticTitle">{{ staticTitle }}</span>
for="upload-multiple-files">{{ staticTitle }}</label> <input #uploadMultipleFiles
<input #uploadFiles
id="upload-multiple-files" id="upload-multiple-files"
data-automation-id="upload-multiple-files" data-automation-id="upload-multiple-files"
type="file" type="file"
@ -25,52 +45,31 @@
[attr.disabled]="isButtonDisabled()" [attr.disabled]="isButtonDisabled()"
[title]="tooltip" [title]="tooltip"
(change)="onFilesAdded($event)"> (change)="onFilesAdded($event)">
</span> </button>
</div>
<!--Single Files Upload-->
<span *ngIf="!multipleFiles">
<label
id="upload-single-file-label"
*ngIf="!staticTitle"
for="upload-single-file">{{ 'FILE_UPLOAD.BUTTON.UPLOAD_FILE' | translate }}</label>
<label
id="upload-single-file-label-static"
*ngIf="staticTitle"
for="upload-single-file">{{ staticTitle }}</label>
<input #uploadFiles
id="upload-single-file"
data-automation-id="upload-single-file"
type="file"
name="uploadFiles"
accept="{{acceptedFilesType}}"
[attr.disabled]="isButtonDisabled()"
[title]="tooltip"
(change)="onFilesAdded($event)">
</span>
</a>
<!--Folders Upload--> <!--Folders Upload-->
<a *ngIf="uploadFolders" <div *ngIf="uploadFolders">
[disabled]="isButtonDisabled()" mat-raised-button color="primary"> <button
<mat-icon>file_upload</mat-icon> [disabled]="isButtonDisabled()"
<label mat-raised-button color="primary"
id="uploadFolder-label" (click)="uploadFolders.click()">
*ngIf="!staticTitle" <mat-icon>file_upload</mat-icon>
for="uploadFolder">{{ 'FILE_UPLOAD.BUTTON.UPLOAD_FOLDER' | translate }}</label> <span id="uploadFolder-label"
<label *ngIf="!staticTitle">{{ 'FILE_UPLOAD.BUTTON.UPLOAD_FOLDER' | translate }}</span>
id="uploadFolder-label-static" <span id="uploadFolder-label-static"
*ngIf="staticTitle" *ngIf="staticTitle">{{ staticTitle }}</span>
for="uploadFolder">{{ staticTitle }}</label> <input #uploadFolders
<input #uploadFolders id="uploadFolder"
id="uploadFolder" data-automation-id="uploadFolder"
data-automation-id="uploadFolder" type="file"
type="file" name="uploadFiles"
name="uploadFiles" multiple="multiple"
multiple="multiple" accept="{{acceptedFilesType}}"
accept="{{acceptedFilesType}}" webkitdirectory directory
webkitdirectory directory [attr.disabled]="isButtonDisabled()"
[attr.disabled]="isButtonDisabled()" [title]="tooltip"
[title]="tooltip" (change)="onDirectoryAdded($event)">
(change)="onDirectoryAdded($event)"> </button>
</a> </div>
</form> </form>

9
lib/content-services/upload/components/upload-button.component.scss
View File

@ -1,12 +1,5 @@
.adf { .adf {
&-upload-button-file-container input { &-upload-button-file-container input {
cursor: pointer; display: none;
height: 100%;
right: 0;
opacity: 0;
position: absolute;
top: 0;
width: 300px;
z-index: 4;
} }
} }

6
lib/core/form/components/widgets/upload/upload.widget.html
View File

@ -24,15 +24,15 @@
</mat-list> </mat-list>
</div> </div>
<div class="button-row" *ngIf="(!hasFile || multipleOption) && !field.readOnly"> <div *ngIf="(!hasFile || multipleOption) && !field.readOnly">
<a mat-raised-button color="primary"> <button mat-raised-button color="primary" (click)="uploadFiles.click()">
{{ '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" [multiple]="multipleOption"
type="file" type="file"
[id]="field.id" [id]="field.id"
(change)="onFileChanged($event)"/> (change)="onFileChanged($event)"/>
</a> </button>
</div> </div>
</div> </div>
<error-widget [error]="field.validationSummary"></error-widget> <error-widget [error]="field.validationSummary"></error-widget>

9
lib/core/form/components/widgets/upload/upload.widget.scss
View File

@ -6,14 +6,7 @@
margin-bottom: 15px; margin-bottom: 15px;
input { input {
cursor: pointer; display: none;
height: 100%;
right: 0;
opacity: 0;
position: absolute;
top: 0;
width: 300px;
z-index: 4;
} }
} }

6
lib/process-services-cloud/src/lib/form/components/upload-cloud.widget.html
View File

@ -24,15 +24,15 @@
</mat-list> </mat-list>
</div> </div>
<div class="button-row" *ngIf="(!hasFile || multipleOption) && !field.readOnly"> <div *ngIf="(!hasFile || multipleOption) && !field.readOnly">
<a mat-raised-button color="primary"> <button mat-raised-button color="primary" (click)="uploadFiles.click()">
{{ '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" [multiple]="multipleOption"
type="file" type="file"
[id]="field.id" [id]="field.id"
(change)="onFileChanged($event)"/> (change)="onFileChanged($event)"/>
</a> </button>
</div> </div>
</div> </div>
<error-widget [error]="field.validationSummary"></error-widget> <error-widget [error]="field.validationSummary"></error-widget>

10
lib/process-services-cloud/src/lib/form/components/upload-cloud.widget.scss
View File

@ -1,18 +1,10 @@
.adf-cloud { .adf-cloud {
&-upload-widget-container { &-upload-widget-container {
margin-bottom: 15px; margin-bottom: 15px;
input { input {
cursor: pointer; display: none;
height: 100%;
right: 0;
opacity: 0;
position: absolute;
top: 0;
width: 300px;
z-index: 4;
} }
} }

2
lib/process-services/content-widget/attach-folder-widget.component.html
View File

@ -15,7 +15,7 @@
</div> </div>
</div> </div>
<div class="button-row" *ngIf="!hasFolder && !field.readOnly"> <div *ngIf="!hasFolder && !field.readOnly">
<button mat-raised-button <button mat-raised-button
color="primary" color="primary"
(click)="openSelectDialogFromFileSource()" (click)="openSelectDialogFromFileSource()"