[ADF-4386] - fix style and remove value from tooltip (#4587)

This commit is contained in:
Silviu Popa
2019-04-10 19:03:55 +03:00
committed by Eugenio Romano
parent 1eea972d6c
commit 61ee1f1d53
3 changed files with 17 additions and 25 deletions

View File

@@ -188,14 +188,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: 88%;
left:0;
}
} }

View File

@@ -15,14 +15,14 @@
* limitations under the License. * limitations under the License.
*/ */
import { Directive, Input, HostListener, Component, ViewContainerRef, ComponentFactoryResolver, AfterContentInit } from '@angular/core'; import { Directive, Input, HostListener, Component, ViewContainerRef, ComponentFactoryResolver, ViewEncapsulation } from '@angular/core';
import { ClipboardService } from './clipboard.service'; import { ClipboardService } from './clipboard.service';
@Directive({ @Directive({
selector: '[adf-clipboard]', selector: '[adf-clipboard]',
exportAs: 'adfClipboard' exportAs: 'adfClipboard'
}) })
export class ClipboardDirective implements AfterContentInit { export class ClipboardDirective {
// tslint:disable-next-line:no-input-rename // tslint:disable-next-line:no-input-rename
@Input('adf-clipboard') @Input('adf-clipboard')
placeholder: string; placeholder: string;
@@ -33,8 +33,6 @@ export class ClipboardDirective implements AfterContentInit {
// tslint:disable-next-line:no-input-rename // tslint:disable-next-line:no-input-rename
@Input('clipboard-notification') message: string; @Input('clipboard-notification') message: string;
private value: string;
constructor(private clipboardService: ClipboardService, constructor(private clipboardService: ClipboardService,
public viewContainerRef: ViewContainerRef, public viewContainerRef: ViewContainerRef,
private resolver: ComponentFactoryResolver) {} private resolver: ComponentFactoryResolver) {}
@@ -50,7 +48,6 @@ export class ClipboardDirective implements AfterContentInit {
showTooltip() { showTooltip() {
const componentFactory = this.resolver.resolveComponentFactory(ClipboardComponent); const componentFactory = this.resolver.resolveComponentFactory(ClipboardComponent);
const componentRef = this.viewContainerRef.createComponent(componentFactory).instance; const componentRef = this.viewContainerRef.createComponent(componentFactory).instance;
componentRef.copyText = this.value;
componentRef.placeholder = this.placeholder; componentRef.placeholder = this.placeholder;
} }
@@ -72,21 +69,15 @@ export class ClipboardDirective implements AfterContentInit {
private copyContentToClipboard(content) { private copyContentToClipboard(content) {
this.clipboardService.copyContentToClipboard(content, this.message); this.clipboardService.copyContentToClipboard(content, this.message);
} }
ngAfterContentInit() {
setTimeout( () => {
this.value = this.viewContainerRef.element.nativeElement.innerHTML;
});
}
} }
@Component({ @Component({
selector: 'adf-datatable-highlight-tooltip', selector: 'adf-datatable-copy-content-tooltip',
template: ` template: `
<span class='adf-datatable-copy-tooltip'>{{ placeholder | translate }} <b> {{ copyText }} </b></span> <span class='adf-datatable-copy-tooltip'>{{ placeholder | translate }} </span>
` `,
encapsulation: ViewEncapsulation.None
}) })
export class ClipboardComponent { export class ClipboardComponent {
copyText: string;
placeholder: string; placeholder: string;
} }

View File

@@ -557,4 +557,15 @@
} }
} }
} }
.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;
}
} }