machankura/mempool
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Address page bigger QR button on mobile

Browse Source
This commit is contained in:
Mononaut 2024-06-15 20:52:46 +00:00
parent fb621f9812
commit 5cecd9f8a7
No known key found for this signature in database
GPG Key ID: A3F058E41374C04E
4 changed files with 13 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/app/components/address/address.component.html
View File

@ -3,9 +3,9 @@
<h1 i18n="shared.address">Address</h1>
<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>
<app-clipboard [text]="addressString" [size]="isMobile ? 'large' : 'normal'"></app-clipboard>
<span style="position: relative; cursor: pointer" (mouseover)="showQR = true" (mouseout)="showQR = false" (pointerdown)="showQR = true">
<fa-icon [icon]="['fas', 'qrcode']" [fixedWidth]="true" [style.font-size]="isMobile ? '18px' : '12px'"></fa-icon>
<div class="qr-wrapper" [hidden]="!showQR">
<app-qrcode [size]="200" [data]="addressString"></app-qrcode>
</div>

4
frontend/src/app/components/clipboard/clipboard.component.html
View File

@ -1,7 +1,7 @@
<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>
<app-svg-images name="clippy" [width]="widths[size]" viewBox="0 0 1000 1000"></app-svg-images>
</span>
</button>
</ng-template>
@ -9,7 +9,7 @@
<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>
<app-svg-images name="clippy" [width]="widths[size]" viewBox="0 0 1000 1000"></app-svg-images>
</button>
</span>
</ng-template>

8
frontend/src/app/components/clipboard/clipboard.component.ts
View File

@ -13,11 +13,17 @@ export class ClipboardComponent implements AfterViewInit {
@ViewChild('buttonWrapper') buttonWrapper: ElementRef;
@Input() button = false;
@Input() class = 'btn btn-secondary ml-1';
@Input() size: 'small' | 'normal' = 'normal';
@Input() size: 'small' | 'normal' | 'large' = 'normal';
@Input() text: string;
@Input() leftPadding = true;
copiedMessage: string = $localize`:@@clipboard.copied-message:Copied!`;
widths = {
small: '10',
normal: '13',
large: '18',
};
clipboard: any;
constructor() { }

2
frontend/src/app/shared/components/truncate/truncate.component.scss
View File

@ -2,7 +2,7 @@
text-overflow: unset;
display: flex;
flex-direction: row;
align-items: baseline;
align-items: start;
position: relative;
.truncate-link {