mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-05-26 17:24:56 +00:00
[ADF-1372] support for tooltips (Upload button) (#2204)
* support for tooltips (Upload button) * readme update * update layout to fix the tests * remove test code
This commit is contained in:
Denys Vuika
Mario Romano
parent
70ef58e03c
commit
09b213dd04
@ -263,6 +263,7 @@
|
||||
<div *ngIf="!acceptedFilesTypeShow">
|
||||
<alfresco-upload-button
|
||||
#uploadButton
|
||||
tooltip="Custom tooltip"
|
||||
[disabled]="!enableUpload"
|
||||
data-automation-id="multiple-file-upload"
|
||||
[rootFolderId]="documentList.currentFolderId"
|
||||
@ -276,6 +277,7 @@
|
||||
<div *ngIf="acceptedFilesTypeShow">
|
||||
<alfresco-upload-button
|
||||
#uploadButton
|
||||
tooltip="Custom tooltip"
|
||||
[disabled]="!enableUpload"
|
||||
data-automation-id="multiple-file-upload"
|
||||
[rootFolderId]="documentList.currentFolderId"
|
||||
|
||||
@ -93,6 +93,7 @@ npm install ng2-alfresco-upload
|
||||
| versioning | boolean | false | Versioning false is the default uploader behaviour and it renames the file using an integer suffix if there is a name clash. Versioning true to indicate that a major version should be created |
|
||||
| staticTitle | string | (predefined) | define the text of the upload button |
|
||||
| disableWithNoPermission | boolean | false | If the value is true and the user doesn't have the permission to delete the node the button will be disabled |
|
||||
| tooltip | string | | Custom tooltip |
|
||||
|
||||
### Events
|
||||
|
||||
|
||||
@ -16,8 +16,9 @@
|
||||
*/
|
||||
|
||||
import { ModuleWithProviders, NgModule } from '@angular/core';
|
||||
import { MdButtonModule, MdIconModule, MdProgressSpinnerModule } from '@angular/material';
|
||||
|
||||
import { CoreModule, TRANSLATION_PROVIDER } from 'ng2-alfresco-core';
|
||||
import { MaterialModule } from './src/material.module';
|
||||
|
||||
import { FileUploadingDialogComponent } from './src/components/file-uploading-dialog.component';
|
||||
import { FileUploadingListRowComponent } from './src/components/file-uploading-list-row.component';
|
||||
@ -52,9 +53,7 @@ export const UPLOAD_PROVIDERS: any[] = [
|
||||
@NgModule({
|
||||
imports: [
|
||||
CoreModule,
|
||||
MdIconModule,
|
||||
MdProgressSpinnerModule,
|
||||
MdButtonModule
|
||||
MaterialModule
|
||||
],
|
||||
declarations: [
|
||||
...UPLOAD_DIRECTIVES
|
||||
|
||||
@ -1,43 +1,77 @@
|
||||
<form>
|
||||
<!--Files Upload-->
|
||||
<div *ngIf="!uploadFolders" [class.mdl-button--file--disabled]="isButtonDisabled()" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-button--file">
|
||||
<div *ngIf="!uploadFolders"
|
||||
[class.mdl-button--file--disabled]="isButtonDisabled()"
|
||||
class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-button--file">
|
||||
<md-icon>file_upload</md-icon>
|
||||
|
||||
<!--Multiple Files Upload-->
|
||||
<span *ngIf="multipleFiles">
|
||||
<label id="upload-multiple-file-label" *ngIf="!staticTitle" for="upload-multiple-files">{{'FILE_UPLOAD.BUTTON.UPLOAD_FILE' | translate}}</label>
|
||||
<label id="upload-multiple-file-label-static" *ngIf="staticTitle" for="upload-multiple-files">{{staticTitle}}</label>
|
||||
<input id="upload-multiple-files" data-automation-id="upload-multiple-files" type="file" name="uploadFiles"
|
||||
(change)="onFilesAdded($event)"
|
||||
multiple="multiple"
|
||||
accept="{{acceptedFilesType}}"
|
||||
[attr.disabled]="isButtonDisabled()"
|
||||
#uploadFiles>
|
||||
<label
|
||||
id="upload-multiple-file-label"
|
||||
*ngIf="!staticTitle"
|
||||
for="upload-multiple-files">{{ 'FILE_UPLOAD.BUTTON.UPLOAD_FILE' | translate }}</label>
|
||||
<label
|
||||
id="upload-multiple-file-label-static"
|
||||
*ngIf="staticTitle"
|
||||
for="upload-multiple-files">{{ staticTitle }}</label>
|
||||
<input #uploadFiles
|
||||
id="upload-multiple-files"
|
||||
data-automation-id="upload-multiple-files"
|
||||
type="file"
|
||||
name="uploadFiles"
|
||||
multiple="multiple"
|
||||
accept="{{acceptedFilesType}}"
|
||||
[attr.disabled]="isButtonDisabled()"
|
||||
[title]="tooltip"
|
||||
(change)="onFilesAdded($event)">
|
||||
</span>
|
||||
|
||||
<!--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 id="upload-single-file" data-automation-id="upload-single-file" type="file" name="uploadFiles"
|
||||
(change)="onFilesAdded($event)"
|
||||
accept="{{acceptedFilesType}}"
|
||||
[attr.disabled]="isButtonDisabled()"
|
||||
#uploadFiles>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<!--Folders Upload-->
|
||||
<div *ngIf="uploadFolders" [class.mdl-button--file--disabled]="isButtonDisabled()" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-button--file">
|
||||
<div *ngIf="uploadFolders"
|
||||
[class.mdl-button--file--disabled]="isButtonDisabled()"
|
||||
class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-button--file">
|
||||
<md-icon>file_upload</md-icon>
|
||||
<label id="uploadFolder-label" *ngIf="!staticTitle" for="uploadFolder">{{'FILE_UPLOAD.BUTTON.UPLOAD_FOLDER' | translate}}</label>
|
||||
<label id="uploadFolder-label-static" *ngIf="staticTitle" for="uploadFolder">{{staticTitle}}</label>
|
||||
<input id="uploadFolder" data-automation-id="uploadFolder" type="file" name="uploadFiles"
|
||||
(change)="onDirectoryAdded($event)"
|
||||
multiple="multiple"
|
||||
accept="{{acceptedFilesType}}"
|
||||
[attr.disabled]="isButtonDisabled()"
|
||||
webkitdirectory directory
|
||||
multiple #uploadFolders>
|
||||
<label
|
||||
id="uploadFolder-label"
|
||||
*ngIf="!staticTitle"
|
||||
for="uploadFolder">{{ 'FILE_UPLOAD.BUTTON.UPLOAD_FOLDER' | translate }}</label>
|
||||
<label
|
||||
id="uploadFolder-label-static"
|
||||
*ngIf="staticTitle"
|
||||
for="uploadFolder">{{ staticTitle }}</label>
|
||||
<input #uploadFolders
|
||||
id="uploadFolder"
|
||||
data-automation-id="uploadFolder"
|
||||
type="file"
|
||||
name="uploadFiles"
|
||||
multiple="multiple"
|
||||
accept="{{acceptedFilesType}}"
|
||||
webkitdirectory directory
|
||||
[attr.disabled]="isButtonDisabled()"
|
||||
[title]="tooltip"
|
||||
(change)="onDirectoryAdded($event)">
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@ -55,6 +55,9 @@ export class UploadButtonComponent implements OnInit, OnChanges {
|
||||
@Input()
|
||||
staticTitle: string;
|
||||
|
||||
@Input()
|
||||
tooltip: string = null;
|
||||
|
||||
/**
|
||||
* @deprecated Deprecated in 1.6.0, this property is not used for couple of releases already.
|
||||
*
|
||||
|
||||
37
ng2-components/ng2-alfresco-upload/src/material.module.ts
Normal file
37
ng2-components/ng2-alfresco-upload/src/material.module.ts
Normal file
@ -0,0 +1,37 @@
|
||||
/*!
|
||||
* @license
|
||||
* Copyright 2016 Alfresco Software, Ltd.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { NgModule } from '@angular/core';
|
||||
import {
|
||||
MdButtonModule,
|
||||
MdIconModule,
|
||||
MdProgressSpinnerModule
|
||||
} from '@angular/material';
|
||||
|
||||
export function modules() {
|
||||
return [
|
||||
MdIconModule,
|
||||
MdProgressSpinnerModule,
|
||||
MdButtonModule
|
||||
];
|
||||
}
|
||||
|
||||
@NgModule({
|
||||
imports: modules(),
|
||||
exports: modules()
|
||||
})
|
||||
export class MaterialModule {}
|
||||
Loading…
x
Reference in New Issue
Block a user