Address mouseover QR code

frontend/src/app/components/address/address.component.html

@@ -4,6 +4,12 @@
     <div class="tx-link">
       <app-truncate [text]="addressString" [lastChars]="8" [link]="['/address/' | relativeUrl, addressString]">
         <app-clipboard [text]="addressString"></app-clipboard>
+        <span style="position: relative; cursor: pointer" (mouseover)="showQR = true" (mouseout)="showQR = false" (click)="showQR = !showQR">
+          <fa-icon [icon]="['fas', 'qrcode']" [fixedWidth]="true"></fa-icon>
+          <div class="qr-wrapper" [hidden]="!showQR">
+            <app-qrcode [size]="200" [data]="addressString"></app-qrcode>
+          </div>
+        </span>
       </app-truncate>
     </div>
   </div>

frontend/src/app/components/address/address.component.scss

@@ -1,16 +1,14 @@
 .qr-wrapper {
+  position: absolute;
+  top: 30px;
+  right: 0px;
+  border: solid 10px var(--active-bg);
+  border-radius: 5px;
   background-color: #fff;
   padding: 10px;
   padding-bottom: 5px;
-  display: inline-block;
+  display: block;
-}
+  z-index: 99;
-
-.qrcode-col {
-  margin: 20px auto 10px;
-  text-align: center;
-  @media (min-width: 992px){
-    margin: 0px auto 0px;
-  }
 }
 
 .fiat {
@@ -104,10 +102,6 @@ h1 {
       width: 80%;
     }
   }
-
-  .qrcode-col {
-    flex-grow: 0.5;
-  }
 }
 
 .widget-toggler {

frontend/src/app/components/address/address.component.ts

@@ -97,6 +97,7 @@ export class AddressComponent implements OnInit, OnDestroy {
   network = '';
 
   isMobile: boolean;
+  showQR: boolean = false;
 
   address: Address;
   addressString: string;
@@ -141,6 +142,8 @@ export class AddressComponent implements OnInit, OnDestroy {
     this.stateService.networkChanged$.subscribe((network) => this.network = network);
     this.websocketService.want(['blocks']);
 
+    this.onResize();
+
     this.addressLoadingStatus$ = this.route.paramMap
       .pipe(
         switchMap(() => this.stateService.loadingIndicators$),