diff --git a/e2e/core/pages/content-services.page.ts b/e2e/core/pages/content-services.page.ts index 135faaec8fe..437eb018cd7 100644 --- a/e2e/core/pages/content-services.page.ts +++ b/e2e/core/pages/content-services.page.ts @@ -35,7 +35,7 @@ export class ContentServicesPage { uploadBorder = $('#document-list-container'); currentFolder = $('div[class*="adf-breadcrumb-item adf-active"] div'); createFolderButton = $('button[data-automation-id="create-new-folder"]'); - uploadFileButton = $('.adf-upload-button-file-container button'); + uploadFileButton = $('.adf-upload-button-file-container label'); uploadFileButtonInput = $('input[data-automation-id="upload-single-file"]'); uploadMultipleFileButton = $('input[data-automation-id="upload-multiple-files"]'); uploadFolderButton = $('input[data-automation-id="uploadFolder"]'); diff --git a/lib/content-services/src/lib/content-node-selector/content-node-selector.component.scss b/lib/content-services/src/lib/content-node-selector/content-node-selector.component.scss index 545c6154e12..b81189d1a50 100644 --- a/lib/content-services/src/lib/content-node-selector/content-node-selector.component.scss +++ b/lib/content-services/src/lib/content-node-selector/content-node-selector.component.scss @@ -84,7 +84,7 @@ adf-content-node-selector { justify-content: space-between; color: var(--adf-theme-foreground-text-color); - button { + label { text-transform: uppercase; font-weight: normal; } diff --git a/lib/content-services/src/lib/content-node-selector/content-node-selector.component.spec.ts b/lib/content-services/src/lib/content-node-selector/content-node-selector.component.spec.ts index e1ce22bf9f9..1dcbffc4c5e 100644 --- a/lib/content-services/src/lib/content-node-selector/content-node-selector.component.spec.ts +++ b/lib/content-services/src/lib/content-node-selector/content-node-selector.component.spec.ts @@ -294,7 +294,7 @@ describe('ContentNodeSelectorComponent', () => { const adfUploadButton = fixture.debugElement.query(By.css('adf-upload-button')); expect(adfUploadButton).not.toBeNull(); - expect(adfUploadButton.nativeElement.textContent).toEqual('file_uploadFORM.FIELD.UPLOAD'); + expect(adfUploadButton.nativeElement.textContent).toEqual('file_upload FORM.FIELD.UPLOAD'); }); it('should be able to disable UploadButton if showingSearch set to true', async () => { @@ -303,7 +303,7 @@ describe('ContentNodeSelectorComponent', () => { component.hasAllowableOperations = true; fixture.detectChanges(); - const adfUploadButton = fixture.debugElement.query(By.css('adf-upload-button button')); + const adfUploadButton = fixture.debugElement.query(By.css('adf-upload-button input')); expect(adfUploadButton).not.toBeNull(); expect(adfUploadButton.nativeElement.disabled).toBe(true); @@ -315,7 +315,7 @@ describe('ContentNodeSelectorComponent', () => { component.hasAllowableOperations = true; fixture.detectChanges(); - const adfUploadButton = fixture.debugElement.query(By.css('adf-upload-button button')); + const adfUploadButton = fixture.debugElement.query(By.css('adf-upload-button input')); expect(adfUploadButton).not.toBeNull(); expect(adfUploadButton.nativeElement.disabled).toBe(false); @@ -354,7 +354,7 @@ describe('ContentNodeSelectorComponent', () => { component.onTabSelectionChange(1); fixture.detectChanges(); - const adfUploadButton = fixture.debugElement.query(By.css('adf-upload-button button')); + const adfUploadButton = fixture.debugElement.query(By.css('adf-upload-button input')); expect(adfUploadButton).not.toBeNull(); expect(adfUploadButton.nativeElement.disabled).toBe(true); @@ -365,7 +365,7 @@ describe('ContentNodeSelectorComponent', () => { component.hasAllowableOperations = true; fixture.detectChanges(); - const adfUploadButton = fixture.debugElement.query(By.css('adf-upload-button button')); + const adfUploadButton = fixture.debugElement.query(By.css('adf-upload-button input')); expect(adfUploadButton).not.toBeNull(); expect(adfUploadButton.nativeElement.disabled).toBe(false); diff --git a/lib/content-services/src/lib/content-node-selector/content-node-selector.module.ts b/lib/content-services/src/lib/content-node-selector/content-node-selector.module.ts index 66402db954e..bb2f131c402 100644 --- a/lib/content-services/src/lib/content-node-selector/content-node-selector.module.ts +++ b/lib/content-services/src/lib/content-node-selector/content-node-selector.module.ts @@ -26,9 +26,9 @@ import { SearchModule } from '../search/search.module'; import { CoreModule } from '@alfresco/adf-core'; import { DocumentListModule } from '../document-list/document-list.module'; import { NameLocationCellComponent } from './name-location-cell/name-location-cell.component'; -import { UploadModule } from '../upload/upload.module'; +import { CONTENT_UPLOAD_DIRECTIVES } from '../upload/upload.module'; import { SearchQueryBuilderService } from '../search/services/search-query-builder.service'; -import { ContentDirectiveModule } from '../directives/content-directive.module'; +import { CONTENT_DIRECTIVES } from '../directives/content-directive.module'; import { DropdownSitesComponent } from './site-dropdown/sites-dropdown.component'; @NgModule({ @@ -42,9 +42,9 @@ import { DropdownSitesComponent } from './site-dropdown/sites-dropdown.component ...BREADCRUMB_DIRECTIVES, SearchModule, DocumentListModule, - UploadModule, - ContentDirectiveModule, - NameLocationCellComponent + NameLocationCellComponent, + CONTENT_DIRECTIVES, + ...CONTENT_UPLOAD_DIRECTIVES ], exports: [ContentNodeSelectorPanelComponent, NameLocationCellComponent, ContentNodeSelectorComponent], declarations: [ContentNodeSelectorPanelComponent, ContentNodeSelectorComponent], diff --git a/lib/content-services/src/lib/upload/components/upload-button.component.html b/lib/content-services/src/lib/upload/components/upload-button.component.html index 402a9fc772a..0930f9c750c 100644 --- a/lib/content-services/src/lib/upload/components/upload-button.component.html +++ b/lib/content-services/src/lib/upload/components/upload-button.component.html @@ -3,16 +3,8 @@
- + (click)="onClickUploadButton()"/> + + - + (change)="onFilesAdded($event)"/> + +
-
- -
+ + + + diff --git a/lib/content-services/src/lib/upload/components/upload-button.component.scss b/lib/content-services/src/lib/upload/components/upload-button.component.scss index 5e52e93450a..3897a3890aa 100644 --- a/lib/content-services/src/lib/upload/components/upload-button.component.scss +++ b/lib/content-services/src/lib/upload/components/upload-button.component.scss @@ -11,4 +11,17 @@ display: none; } } + + &-upload-button-label { + display: flex; + align-items: center; + cursor: pointer; + padding: 8px 16px; + box-shadow: 0 3px 1px -2px #0003, 0 2px 2px rgba(0, 0, 0, 0.14), 0 1px 5px rgba(0, 0, 0, 0.12); + border-radius: 4px; + + &:active { + box-shadow: 0 5px 5px -3px #0003, 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); + } + } } diff --git a/lib/content-services/src/lib/upload/components/upload-button.component.spec.ts b/lib/content-services/src/lib/upload/components/upload-button.component.spec.ts index e75804b3dd5..a7985a678ac 100644 --- a/lib/content-services/src/lib/upload/components/upload-button.component.spec.ts +++ b/lib/content-services/src/lib/upload/components/upload-button.component.spec.ts @@ -189,15 +189,15 @@ describe('UploadButtonComponent', () => { component.multipleFiles = false; fixture.detectChanges(); - expect(compiled.querySelector('#upload-single-file-label-static').textContent).toEqual('test-text'); + expect(compiled.querySelector('#upload-single-file-label-static').textContent.trim()).toEqual('test-text'); component.multipleFiles = true; fixture.detectChanges(); - expect(compiled.querySelector('#upload-multiple-file-label-static').textContent).toEqual('test-text'); + expect(compiled.querySelector('#upload-multiple-file-label-static').textContent.trim()).toEqual('test-text'); component.uploadFolders = true; fixture.detectChanges(); - expect(compiled.querySelector('#uploadFolder-label-static').textContent).toEqual('test-text'); + expect(compiled.querySelector('#uploadFolder-label-static').textContent.trim()).toEqual('test-text'); }); describe('fileSize', () => { diff --git a/lib/process-services-cloud/src/lib/form/form-cloud.module.ts b/lib/process-services-cloud/src/lib/form/form-cloud.module.ts index a20f4567f20..e85dd31fe6b 100644 --- a/lib/process-services-cloud/src/lib/form/form-cloud.module.ts +++ b/lib/process-services-cloud/src/lib/form/form-cloud.module.ts @@ -23,7 +23,12 @@ import { MaterialModule } from '../material.module'; import { FormCloudComponent } from './components/form-cloud.component'; import { FormDefinitionSelectorCloudComponent } from './components/form-definition-selector-cloud.component'; import { FormCustomOutcomesComponent } from './components/form-cloud-custom-outcomes.component'; -import { AlfrescoViewerModule, ContentMetadataModule, ContentNodeSelectorModule, UploadModule } from '@alfresco/adf-content-services'; +import { + AlfrescoViewerComponent, + CONTENT_METADATA_DIRECTIVES, + CONTENT_UPLOAD_DIRECTIVES, + ContentNodeSelectorModule +} from '@alfresco/adf-content-services'; import { DateCloudWidgetComponent } from './components/widgets/date/date-cloud.widget'; import { DropdownCloudWidgetComponent } from './components/widgets/dropdown/dropdown-cloud.widget'; @@ -57,13 +62,13 @@ import { FormCloudSpinnerService } from './services/spinner/form-cloud-spinner.s ContentNodeSelectorModule, PeopleCloudModule, GroupCloudModule, - ContentMetadataModule, - UploadModule, - AlfrescoViewerModule, RichTextEditorModule, ToolbarModule, A11yModule, - FormatSpacePipe + FormatSpacePipe, + AlfrescoViewerComponent, + ...CONTENT_UPLOAD_DIRECTIVES, + ...CONTENT_METADATA_DIRECTIVES ], declarations: [ FormCloudComponent,