Commit cf899b6ffd49a8736213ea021ef0bbe80f34ab4e
1 parent
195ed51a
UI: Improvement tb0copy-button component
Showing
3 changed files
with
13 additions
and
6 deletions
... | ... | @@ -20,8 +20,8 @@ |
20 | 20 | [disabled]="disabled" |
21 | 21 | [matTooltip]="matTooltipText" |
22 | 22 | [matTooltipPosition]="matTooltipPosition" |
23 | - (mouseenter)="copied ? $event.stopImmediatePropagation():''" | |
24 | - (mouseleave)="copied ? $event.stopImmediatePropagation():''" | |
23 | + (mouseenter)="immediatePropagation($event)" | |
24 | + (mouseleave)="immediatePropagation($event)" | |
25 | 25 | (click)="copy($event)"> |
26 | 26 | <mat-icon [svgIcon]="mdiIconSymbol" [ngStyle]="style" [ngClass]="{'copied': copied}"> |
27 | 27 | {{ iconSymbol }} | ... | ... |
... | ... | @@ -14,9 +14,9 @@ |
14 | 14 | /// limitations under the License. |
15 | 15 | /// |
16 | 16 | |
17 | -import { ChangeDetectorRef, Component, Input, ViewChild } from '@angular/core'; | |
17 | +import { ChangeDetectorRef, Component, EventEmitter, Input, Output, ViewChild } from '@angular/core'; | |
18 | 18 | import { ClipboardService } from 'ngx-clipboard'; |
19 | -import { MatTooltip, TooltipPosition } from '@angular/material/tooltip/tooltip'; | |
19 | +import { MatTooltip, TooltipPosition } from '@angular/material/tooltip'; | |
20 | 20 | import { TranslateService } from '@ngx-translate/core'; |
21 | 21 | |
22 | 22 | @Component({ |
... | ... | @@ -52,6 +52,9 @@ export class CopyButtonComponent { |
52 | 52 | @Input() |
53 | 53 | style: {[key: string]: any} = {}; |
54 | 54 | |
55 | + @Output() | |
56 | + successCopied: EventEmitter<string>; | |
57 | + | |
55 | 58 | constructor(private clipboardService: ClipboardService, |
56 | 59 | private translate: TranslateService, |
57 | 60 | private cd: ChangeDetectorRef) { |
... | ... | @@ -61,11 +64,11 @@ export class CopyButtonComponent { |
61 | 64 | |
62 | 65 | copy($event: Event): void { |
63 | 66 | $event.stopPropagation(); |
64 | - $event.preventDefault(); | |
65 | 67 | if (this.timer) { |
66 | 68 | clearTimeout(this.timer); |
67 | 69 | } |
68 | 70 | this.clipboardService.copy(this.copyText); |
71 | + this.successCopied.emit(this.copyText); | |
69 | 72 | this.copedIcon = 'done'; |
70 | 73 | this.copied = true; |
71 | 74 | this.tooltip.show(); |
... | ... | @@ -92,4 +95,8 @@ export class CopyButtonComponent { |
92 | 95 | get matTooltipPosition(): TooltipPosition { |
93 | 96 | return this.copied ? 'below' : this.tooltipPosition; |
94 | 97 | } |
98 | + | |
99 | + immediatePropagation($event: Event): void { | |
100 | + this.copied ? $event.stopImmediatePropagation(): ''; | |
101 | + } | |
95 | 102 | } | ... | ... |