From 0dd8161790bc02cee46a2428a51e811d282f77ab Mon Sep 17 00:00:00 2001
From: Artem Dzhereleiko <Dgerik2015@gmail.com>
Date: Mon, 1 May 2023 16:26:49 +0300
Subject: [PATCH] UI: Copy button visible on hover

---
 .../attribute/attribute-table.component.html         |  6 ++++--
 .../attribute/attribute-table.component.scss         | 12 ++++++++++++
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.html b/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.html
index 5cacb555b9..0a57bfef9b 100644
--- a/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.html
+++ b/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.html
@@ -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 }}"
diff --git a/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.scss b/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.scss
index 3d92d8c5fc..80e1a8060e 100644
--- a/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.scss
+++ b/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.scss
@@ -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;
+        }
+      }
     }
   }