Commit cf899b6ffd49a8736213ea021ef0bbe80f34ab4e

Authored by Vladyslav Prykhodko
1 parent 195ed51a

UI: Improvement tb0copy-button component

... ... @@ -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 }}
... ...
... ... @@ -19,7 +19,7 @@
19 19 width: 32px;
20 20 line-height: 32px;
21 21 .mat-icon.copied{
22   - color: #00C851!important;
  22 + color: #00C851 !important;
23 23 }
24 24 }
25 25 &:hover{
... ...
... ... @@ -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 }
... ...