diff --git a/lib/core/clipboard/clipboard.component.scss b/lib/core/clipboard/clipboard.component.scss new file mode 100644 index 0000000000..1c42383b65 --- /dev/null +++ b/lib/core/clipboard/clipboard.component.scss @@ -0,0 +1,24 @@ +@mixin adf-clipboard-theme($theme) { + $primary: map-get($theme, primary); + $config: mat-typography-config(); + + .adf-copy-tooltip { + position: absolute; + background: mat-color($primary); + color: mat-color($primary, default-contrast) !important; + font-size: mat-font-size($config, caption); + padding: 2px 5px; + border-radius: 5px; + bottom: 93%; + left:0; + z-index: 1001; + min-height: 20px; + } + + .adf-sticky-header { + .adf-copy-tooltip { + top:85% !important; + bottom:0 !important; + } + } +} diff --git a/lib/core/clipboard/clipboard.directive.spec.ts b/lib/core/clipboard/clipboard.directive.spec.ts index e9a0e11906..6a39509516 100644 --- a/lib/core/clipboard/clipboard.directive.spec.ts +++ b/lib/core/clipboard/clipboard.directive.spec.ts @@ -72,7 +72,7 @@ describe('CopyClipboardDirective', () => { @Component({ selector: 'adf-copy-conent-test-component', - template: `{{ mockText }}` + template: `{{ mockText }}` }) class TestCopyClipboardComponent { @@ -105,16 +105,16 @@ describe('CopyClipboardDirective', () => { const spanHTMLElement: HTMLInputElement = element.querySelector('span'); spanHTMLElement.dispatchEvent(new Event('mouseenter')); fixture.detectChanges(); - expect(fixture.debugElement.nativeElement.querySelector('.adf-datatable-copy-tooltip')).not.toBeNull(); + expect(fixture.debugElement.nativeElement.querySelector('.adf-copy-tooltip')).not.toBeNull(); })); it('should not show tooltip when element it is not hovered', (() => { const spanHTMLElement: HTMLInputElement = element.querySelector('span'); spanHTMLElement.dispatchEvent(new Event('mouseenter')); - expect(fixture.debugElement.nativeElement.querySelector('.adf-datatable-copy-tooltip')).not.toBeNull(); + expect(fixture.debugElement.nativeElement.querySelector('.adf-copy-tooltip')).not.toBeNull(); spanHTMLElement.dispatchEvent(new Event('mouseleave')); - expect(fixture.debugElement.nativeElement.querySelector('.adf-datatable-copy-tooltip')).toBeNull(); + expect(fixture.debugElement.nativeElement.querySelector('.adf-copy-tooltip')).toBeNull(); })); it('should copy the content of element when click it', fakeAsync(() => { diff --git a/lib/core/clipboard/clipboard.directive.ts b/lib/core/clipboard/clipboard.directive.ts index 167fc08ac3..38c96ca255 100644 --- a/lib/core/clipboard/clipboard.directive.ts +++ b/lib/core/clipboard/clipboard.directive.ts @@ -15,7 +15,7 @@ * limitations under the License. */ -import { Directive, Input, HostListener, Component, ViewContainerRef, ComponentFactoryResolver, ViewEncapsulation } from '@angular/core'; +import { Directive, Input, HostListener, Component, ViewContainerRef, ComponentFactoryResolver, ViewEncapsulation, OnInit } from '@angular/core'; import { ClipboardService } from './clipboard.service'; @Directive({ @@ -75,12 +75,17 @@ export class ClipboardDirective { } @Component({ - selector: 'adf-datatable-copy-content-tooltip', + selector: 'adf-copy-content-tooltip', template: ` - {{ placeholder | translate }} + {{ placeholder | translate }} `, + styleUrls: ['./clipboard.component.scss'], encapsulation: ViewEncapsulation.None }) -export class ClipboardComponent { +export class ClipboardComponent implements OnInit { placeholder: string; + + ngOnInit() { + this.placeholder = this.placeholder || 'CLIPBOARD.CLICK_TO_COPY'; + } } diff --git a/lib/core/datatable/components/datatable/datatable-cell.component.ts b/lib/core/datatable/components/datatable/datatable-cell.component.ts index bac6b1c12d..ffb9d75a09 100644 --- a/lib/core/datatable/components/datatable/datatable-cell.component.ts +++ b/lib/core/datatable/components/datatable/datatable-cell.component.ts @@ -36,7 +36,7 @@ import { Node } from '@alfresco/js-api'; template: ` { const spanHTMLElement: HTMLInputElement = element.querySelector('span[title="11fe013d-c263-11e8-b75b-0a5864600540"]'); spanHTMLElement.dispatchEvent(new Event('mouseenter')); copyFixture.detectChanges(); - expect(copyFixture.debugElement.nativeElement.querySelector('.adf-datatable-copy-tooltip')).not.toBeNull(); + expect(copyFixture.debugElement.nativeElement.querySelector('.adf-copy-tooltip')).not.toBeNull(); }); customCopyComponent.taskList.appName = appName.currentValue; customCopyComponent.taskList.ngOnChanges({ 'appName': appName }); @@ -303,7 +303,7 @@ describe('TaskListCloudComponent', () => { const spanHTMLElement: HTMLInputElement = element.querySelector('span[title="standalone-subtask"]'); spanHTMLElement.dispatchEvent(new Event('mouseenter')); copyFixture.detectChanges(); - expect(copyFixture.debugElement.nativeElement.querySelector('.adf-datatable-copy-tooltip')).toBeNull(); + expect(copyFixture.debugElement.nativeElement.querySelector('.adf-copy-tooltip')).toBeNull(); }); }); customCopyComponent.taskList.appName = appName.currentValue; @@ -394,7 +394,7 @@ describe('TaskListCloudComponent', () => { const spanHTMLElement: HTMLInputElement = element.querySelector('span[title="11fe013d-c263-11e8-b75b-0a5864600540"]'); spanHTMLElement.dispatchEvent(new Event('mouseenter')); fixture.detectChanges(); - expect(fixture.debugElement.nativeElement.querySelector('.adf-datatable-copy-tooltip')).not.toBeNull(); + expect(fixture.debugElement.nativeElement.querySelector('.adf-copy-tooltip')).not.toBeNull(); }); }); @@ -413,7 +413,7 @@ describe('TaskListCloudComponent', () => { const spanHTMLElement: HTMLInputElement = element.querySelector('span[title="standalone-subtask"]'); spanHTMLElement.dispatchEvent(new Event('mouseenter')); fixture.detectChanges(); - expect(fixture.debugElement.nativeElement.querySelector('.adf-datatable-copy-tooltip')).toBeNull(); + expect(fixture.debugElement.nativeElement.querySelector('.adf-copy-tooltip')).toBeNull(); }); }); component.presetColumn = 'fakeCustomSchema'; diff --git a/lib/testing/src/lib/core/pages/data-table-component.page.ts b/lib/testing/src/lib/core/pages/data-table-component.page.ts index adbcf25dfe..1e13586516 100644 --- a/lib/testing/src/lib/core/pages/data-table-component.page.ts +++ b/lib/testing/src/lib/core/pages/data-table-component.page.ts @@ -43,7 +43,7 @@ export class DataTableComponentPage { this.selectedRowNumber = this.rootElement.element(by.css(`div[class*='is-selected'] div[data-automation-id*='text_']`)); this.allSelectedRows = this.rootElement.all(by.css(`div[class*='is-selected']`)); this.selectAll = this.rootElement.element(by.css(`div[class*='adf-datatable-header'] mat-checkbox`)); - this.copyColumnTooltip = this.rootElement.element(by.css(`adf-datatable-copy-content-tooltip span`)); + this.copyColumnTooltip = this.rootElement.element(by.css(`adf-copy-content-tooltip span`)); } checkAllRowsButtonIsDisplayed() {