From 7cbc87d3dfcc650bb0f38b7e2b15e4656e1bb6e0 Mon Sep 17 00:00:00 2001
From: softsimon <softsimon@protonmail.com>
Date: Mon, 19 Sep 2022 18:21:31 +0200
Subject: [PATCH] Clipboard buttons fix

fixes #2566
---
 .../clipboard/clipboard.component.html         | 18 ++++++++++++++----
 .../clipboard/clipboard.component.ts           |  2 ++
 .../app/lightning/group/group.component.html   |  4 +---
 .../src/app/lightning/node/node.component.html |  8 ++------
 4 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/frontend/src/app/components/clipboard/clipboard.component.html b/frontend/src/app/components/clipboard/clipboard.component.html
index 1e88b7b7f..ec8802634 100644
--- a/frontend/src/app/components/clipboard/clipboard.component.html
+++ b/frontend/src/app/components/clipboard/clipboard.component.html
@@ -1,5 +1,15 @@
-<span #buttonWrapper [attr.data-tlite]="copiedMessage" style="position: relative;">
-  <button #btn class="btn btn-sm btn-link pt-0 {{ leftPadding ? 'padding' : '' }}" [attr.data-clipboard-text]="text"> 
-    <app-svg-images name="clippy" [width]="size === 'small' ? '10' : '13'" viewBox="0 0 1000 1000"></app-svg-images>
+<ng-template [ngIf]="button" [ngIfElse]="btnLink">
+  <button #btn [attr.data-clipboard-text]="text" [class]="class" type="button" [disabled]="text === ''">
+    <span #buttonWrapper [attr.data-tlite]="copiedMessage" style="position: relative;top: -2px;left: 1px;">
+      <app-svg-images name="clippy" [width]="size === 'small' ? '10' : '13'" viewBox="0 0 1000 1000"></app-svg-images>
+    </span>
   </button>
-</span>
+</ng-template>
+
+<ng-template #btnLink>
+  <span #buttonWrapper [attr.data-tlite]="copiedMessage" style="position: relative;">
+    <button #btn class="btn btn-sm btn-link pt-0 {{ leftPadding ? 'padding' : '' }}" [attr.data-clipboard-text]="text"> 
+      <app-svg-images name="clippy" [width]="size === 'small' ? '10' : '13'" viewBox="0 0 1000 1000"></app-svg-images>
+    </button>
+  </span>
+</ng-template>
diff --git a/frontend/src/app/components/clipboard/clipboard.component.ts b/frontend/src/app/components/clipboard/clipboard.component.ts
index e6a5c0e6e..7fbffdca3 100644
--- a/frontend/src/app/components/clipboard/clipboard.component.ts
+++ b/frontend/src/app/components/clipboard/clipboard.component.ts
@@ -11,6 +11,8 @@ import * as tlite from 'tlite';
 export class ClipboardComponent implements AfterViewInit {
   @ViewChild('btn') btn: ElementRef;
   @ViewChild('buttonWrapper') buttonWrapper: ElementRef;
+  @Input() button = false;
+  @Input() class = 'btn btn-secondary ml-1';
   @Input() size: 'small' | 'normal' = 'normal';
   @Input() text: string;
   @Input() leftPadding = true;
diff --git a/frontend/src/app/lightning/group/group.component.html b/frontend/src/app/lightning/group/group.component.html
index b5745d0ca..fdc79b692 100644
--- a/frontend/src/app/lightning/group/group.component.html
+++ b/frontend/src/app/lightning/group/group.component.html
@@ -99,9 +99,7 @@
                   <app-qrcode [size]="200" [data]="node.socketsObject[selectedSocketIndex].socket"></app-qrcode>
                 </div>
               </button>
-              <button class="btn btn-secondary ml-1" type="button" id="inputGroupFileAddon04">
-                <app-clipboard [text]="node.socketsObject[selectedSocketIndex].socket" [leftPadding]="false"></app-clipboard>
-              </button>
+              <app-clipboard [button]="true" [text]="node.socketsObject[selectedSocketIndex].socket" [leftPadding]="false"></app-clipboard>
             </div>
           </td>
           <td class="city text-right text-truncate d-none d-md-table-cell">
diff --git a/frontend/src/app/lightning/node/node.component.html b/frontend/src/app/lightning/node/node.component.html
index 0c8451d44..f9cc3c0a6 100644
--- a/frontend/src/app/lightning/node/node.component.html
+++ b/frontend/src/app/lightning/node/node.component.html
@@ -120,9 +120,7 @@
         <app-qrcode [size]="200" [data]="node.socketsObject[selectedSocketIndex].socket"></app-qrcode>
       </div>
     </button>
-    <button class="btn btn-secondary ml-1" type="button" id="inputGroupFileAddon04">
-      <app-clipboard [text]="node.socketsObject[selectedSocketIndex].socket" [leftPadding]="false"></app-clipboard>
-    </button>
+    <app-clipboard [button]="true" [text]="node.socketsObject[selectedSocketIndex].socket" [leftPadding]="false"></app-clipboard>
   </div>
 
   <div *ngIf="!error">
@@ -230,9 +228,7 @@
       <button class="btn btn-secondary ml-1" type="button" id="inputGroupFileAddon04" [disabled]="true">
         <fa-icon [icon]="['fas', 'qrcode']" [fixedWidth]="true"></fa-icon>
       </button>
-      <button class="btn btn-secondary ml-1" type="button" id="inputGroupFileAddon04" [disabled]="true">
-        <app-clipboard [text]="''"></app-clipboard>
-      </button>
+      <app-clipboard [button]="true" [text]="''"></app-clipboard>
     </div>
 
     <br>