inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-31 17:38:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ADF-4403] ClipboardDirective - add default translation key and fix styling (#4610)

Browse Source 
* [ADF-4403] ClipboardDirective - add default translation key and fix style on sticky header

* [ADF-4403] - lint

* [ADF-4403] - revert datatable style

* [ADF-4403] - fix unit tests

* [ADF-4403] - fix e2e tests
This commit is contained in:
Silviu Popa
2019-04-23 12:00:46 +03:00
committed by Maurizio Vitale
parent fafe80c021
commit 834c32f23f
8 changed files with 45 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
lib/core/clipboard/clipboard.component.scss Normal file
View File

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

8
lib/core/clipboard/clipboard.directive.spec.ts
View File

@@ -72,7 +72,7 @@ describe('CopyClipboardDirective', () => {
@Component({
selector: 'adf-copy-conent-test-component',
template: `<span adf-clipboard='DOCUMENT_LIST.ACTIONS.DOCUMENT.CLICK_TO_COPY'>{{ mockText }}</span>`
template: `<span adf-clipboard>{{ mockText }}</span>`
})
class TestCopyClipboardComponent {
@@ -105,16 +105,16 @@ describe('CopyClipboardDirective', () => {
const spanHTMLElement: HTMLInputElement = <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 = <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(() => {

13
lib/core/clipboard/clipboard.directive.ts
View File

@@ -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: `
<span class='adf-datatable-copy-tooltip'>{{ placeholder | translate }} </span>
<span class='adf-copy-tooltip'>{{ placeholder | translate }} </span>
`,
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';
}
}

2
lib/core/datatable/components/datatable/datatable-cell.component.ts
View File

@@ -36,7 +36,7 @@ import { Node } from '@alfresco/js-api';
template: `
<ng-container>
<span *ngIf="copyContent; else defaultCell"
adf-clipboard="CLIPBOARD.CLICK_TO_COPY"
adf-clipboard
[clipboard-notification]="'CLIPBOARD.SUCCESS_COPY'"
[attr.aria-label]="value$ | async"
[title]="tooltip"

11
lib/core/datatable/components/datatable/datatable.component.scss
View File

@@ -558,15 +558,4 @@
}
}
}
.adf-datatable-copy-tooltip {
position: absolute;
background: mat-color($primary);
color: mat-color($primary, default-contrast) !important;
padding: 5px 10px;
border-radius: 5px;
bottom: 94%;
left:0;
z-index: 20;
}
}

2
lib/core/styles/_index.scss
View File

@@ -32,6 +32,7 @@
@import '../buttons-menu/buttons-menu.component';
@import '../login/components/login-dialog.component';
@import '../login/components/login-dialog-panel.component';
@import '../../core/clipboard/clipboard.component';
@mixin adf-core-theme($theme) {
@include adf-colors-theme($theme);
@@ -66,4 +67,5 @@
@include adf-login-dialog-theme($theme);
@include adf-login-dialog-panel-theme($theme);
@include adf-sidenav-layout-theme($theme);
@include adf-clipboard-theme($theme);
}