Vladyslav_Prykhodko
5 years ago
13 changed files with 256 additions and 40 deletions
@ -0,0 +1,29 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
Copyright © 2016-2021 The Thingsboard Authors |
||||
|
|
||||
|
Licensed under the Apache License, Version 2.0 (the "License"); |
||||
|
you may not use this file except in compliance with the License. |
||||
|
You may obtain a copy of the License at |
||||
|
|
||||
|
http://www.apache.org/licenses/LICENSE-2.0 |
||||
|
|
||||
|
Unless required by applicable law or agreed to in writing, software |
||||
|
distributed under the License is distributed on an "AS IS" BASIS, |
||||
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
|
See the License for the specific language governing permissions and |
||||
|
limitations under the License. |
||||
|
|
||||
|
--> |
||||
|
<button mat-icon-button |
||||
|
#tooltip |
||||
|
[disabled]="disabled" |
||||
|
[matTooltip]="matTooltipText" |
||||
|
[matTooltipPosition]="matTooltipPosition" |
||||
|
(mouseenter)="copied ? $event.stopImmediatePropagation():''" |
||||
|
(mouseleave)="copied ? $event.stopImmediatePropagation():''" |
||||
|
(click)="copy($event)"> |
||||
|
<mat-icon [svgIcon]="mdiIconSymbol" [ngStyle]="style" [ngClass]="{'copied': copied}"> |
||||
|
{{ iconSymbol }} |
||||
|
</mat-icon> |
||||
|
</button> |
||||
@ -0,0 +1,30 @@ |
|||||
|
/** |
||||
|
* Copyright © 2016-2021 The Thingsboard Authors |
||||
|
* |
||||
|
* Licensed under the Apache License, Version 2.0 (the "License"); |
||||
|
* you may not use this file except in compliance with the License. |
||||
|
* You may obtain a copy of the License at |
||||
|
* |
||||
|
* http://www.apache.org/licenses/LICENSE-2.0 |
||||
|
* |
||||
|
* Unless required by applicable law or agreed to in writing, software |
||||
|
* distributed under the License is distributed on an "AS IS" BASIS, |
||||
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
|
* See the License for the specific language governing permissions and |
||||
|
* limitations under the License. |
||||
|
*/ |
||||
|
:host { |
||||
|
.mat-icon-button{ |
||||
|
height: 32px; |
||||
|
width: 32px; |
||||
|
line-height: 32px; |
||||
|
.mat-icon.copied{ |
||||
|
color: #00C851!important; |
||||
|
} |
||||
|
} |
||||
|
&:hover{ |
||||
|
.mat-icon{ |
||||
|
color: #28567E !important; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,95 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2021 The Thingsboard Authors
|
||||
|
///
|
||||
|
/// Licensed under the Apache License, Version 2.0 (the "License");
|
||||
|
/// you may not use this file except in compliance with the License.
|
||||
|
/// You may obtain a copy of the License at
|
||||
|
///
|
||||
|
/// http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
///
|
||||
|
/// Unless required by applicable law or agreed to in writing, software
|
||||
|
/// distributed under the License is distributed on an "AS IS" BASIS,
|
||||
|
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
|
/// See the License for the specific language governing permissions and
|
||||
|
/// limitations under the License.
|
||||
|
///
|
||||
|
|
||||
|
import { ChangeDetectorRef, Component, Input, ViewChild } from '@angular/core'; |
||||
|
import { ClipboardService } from 'ngx-clipboard'; |
||||
|
import { MatTooltip, TooltipPosition } from '@angular/material/tooltip/tooltip'; |
||||
|
import { TranslateService } from '@ngx-translate/core'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-copy-button', |
||||
|
styleUrls: ['copy-button.component.scss'], |
||||
|
templateUrl: './copy-button.component.html' |
||||
|
}) |
||||
|
export class CopyButtonComponent { |
||||
|
|
||||
|
private copedIcon = ''; |
||||
|
private timer; |
||||
|
|
||||
|
copied = false; |
||||
|
|
||||
|
@Input() |
||||
|
copyText: string; |
||||
|
|
||||
|
@Input() |
||||
|
disabled = false; |
||||
|
|
||||
|
@Input() |
||||
|
mdiIcon: string; |
||||
|
|
||||
|
@Input() |
||||
|
icon: string; |
||||
|
|
||||
|
@Input() |
||||
|
tooltipText: string; |
||||
|
|
||||
|
@Input() |
||||
|
tooltipPosition: TooltipPosition; |
||||
|
|
||||
|
@Input() |
||||
|
style: {[key: string]: any} = {}; |
||||
|
|
||||
|
constructor(private clipboardService: ClipboardService, |
||||
|
private translate: TranslateService, |
||||
|
private cd: ChangeDetectorRef) { |
||||
|
} |
||||
|
|
||||
|
@ViewChild('tooltip', {static: true}) tooltip: MatTooltip; |
||||
|
|
||||
|
copy($event: Event): void { |
||||
|
$event.stopPropagation(); |
||||
|
$event.preventDefault(); |
||||
|
if (this.timer) { |
||||
|
clearTimeout(this.timer); |
||||
|
} |
||||
|
this.clipboardService.copy(this.copyText); |
||||
|
this.copedIcon = 'done'; |
||||
|
this.copied = true; |
||||
|
this.tooltip.show(); |
||||
|
this.timer = setTimeout(() => { |
||||
|
this.copedIcon = null; |
||||
|
this.copied = false; |
||||
|
this.tooltip.hide(); |
||||
|
this.cd.detectChanges(); |
||||
|
}, 1500); |
||||
|
} |
||||
|
|
||||
|
get iconSymbol(): string { |
||||
|
return this.copedIcon || this.icon; |
||||
|
} |
||||
|
|
||||
|
get mdiIconSymbol(): string { |
||||
|
return this.copedIcon ? '' : this.mdiIcon; |
||||
|
} |
||||
|
|
||||
|
get matTooltipText(): string { |
||||
|
return this.copied ? this.translate.instant('ota-update.copied') : this.tooltipText; |
||||
|
} |
||||
|
|
||||
|
get matTooltipPosition(): TooltipPosition { |
||||
|
return this.copied ? 'below' : this.tooltipPosition; |
||||
|
} |
||||
|
} |
||||
Loading…
Reference in new issue