dendi-wang/thingsboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI: Copy button visible on hover

Browse Source
This commit is contained in:
Artem Dzhereleiko 2023-05-01 16:26:49 +03:00
parent fba360a237
commit 0dd8161790
2 changed files with 16 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.html
View File

@ -161,9 +161,10 @@
<ng-container matColumnDef="key">
<mat-header-cell *matHeaderCellDef mat-sort-header style="width: 40%"> {{ 'attribute.key' | translate }} </mat-header-cell>
<mat-cell *matCellDef="let attribute">
<div fxLayout="row" style="align-items: center">
<div class="attribute" fxLayout="row" style="align-items: center">
<span class="ellipsis">{{ attribute.key }}</span>
<tb-copy-button
class="attribute-copy"
[disabled]="isLoading$ | async"
[copyText]="attribute.key"
tooltipText="{{ 'attribute.copy-key' | translate }}"
@ -181,9 +182,10 @@
class="tb-value-cell"
(click)="editAttribute($event, attribute)">
<div fxFlex fxLayout="row" style="align-items: center">
<div fxFlex fxLayout="row" style="overflow: hidden; align-items: center;">
<div class="attribute" fxFlex fxLayout="row" style="overflow: hidden; align-items: center;">
<span class="ellipsis">{{attribute.value | tbJson}}</span>
<tb-copy-button
class="attribute-copy"
[disabled]="isLoading$ | async"
[copyText]="attribute.value | tbJson"
tooltipText="{{ 'attribute.copy-value' | translate }}"

12
ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.scss
View File

@ -51,6 +51,7 @@
overflow: auto;
.mat-mdc-table {
table-layout: fixed;
min-width: 450px;
}
}
@ -70,6 +71,17 @@
overflow: hidden;
text-overflow: ellipsis;
}
.attribute-copy {
visibility: hidden;
transition: visibility 0.2s;
}
.attribute:hover {
.attribute-copy {
visibility: visible;
}
}
}
}