Fix WooCommerce integration tab to show copy buttons in small displays

This commit is contained in:
Rene V. Vergara A. 2022-12-25 20:51:04 -05:00
parent 4780c64dcf
commit 8b7172f8ab
2 changed files with 86 additions and 46 deletions

View file

@ -16,7 +16,7 @@ var Buffer = require('buffer/').Buffer;
selector: 'app-invoice', selector: 'app-invoice',
templateUrl: './invoice.component.html', templateUrl: './invoice.component.html',
styleUrls: ['./invoice.component.css'] styleUrls: ['./invoice.component.css']
}); })
export class InvoiceComponent implements OnInit { export class InvoiceComponent implements OnInit {
faCheck = faCheck; faCheck = faCheck;

View file

@ -170,52 +170,92 @@
</div> </div>
</mat-tab> </mat-tab>
<mat-tab label="WooCommerce"> <mat-tab label="WooCommerce">
<div *ngIf="wooOwner == ''"> <div >
<button mat-raised-button color="primary" (click)="generateWooToken()"> <div *ngIf="wooOwner == ''">
Generate Token <button mat-raised-button color="primary" (click)="generateWooToken()">
</button> Generate Token
</div> </button>
<table *ngIf="wooOwner != ''"> </div>
<tr> <table *ngIf="wooOwner != ''">
<td class="heading">Owner:</td> <tbody>
</tr> <tr>
<tr> <td class="heading" style="width: 100%;">Owner:</td>
<td class="small">{{wooOwner}}</td> </tr>
<td class="urlCopyBtn"> <tr>
<a (click)='copyWooOwner()' > <td>
<fa-icon [icon]="faCopy" <div>
class="copy-button"> <textarea disabled
</fa-icon> style="border: none;
</a> outline: none;
</td> min-height: 150px;
</tr> width: 94%;"
<tr> cdkTextareaAutosize
<td class="heading">Token:</td> cdkAutosizeMinRows="1"
</tr> cdkAutosizeMaxRows="3">{{wooOwner}}
<tr> </textarea>
<td class="small">{{wooToken}}</td> </div>
<td class="urlCopyBtn"> </td>
<a (click)='copyWooToken()' > <td class="urlCopyBtn">
<fa-icon [icon]="faCopy" <a (click)='copyWooOwner()' >
class="copy-button"> <fa-icon [icon]="faCopy"
</fa-icon> class="copy-button">
</a> </fa-icon>
</td> </a>
</tr> </td>
<tr> </tr>
<td class="heading">URL:</td> <tr>
</tr> <td class="heading" style="width: 60%;">Token:</td>
<tr> </tr>
<td class="small">{{wooUrl}}</td> <tr>
</tr> <td>
</table> <div>
<div class="toolbar" align="center"> <textarea disabled
<button mat-raised-button style="border: none;
(click)="close()"> outline: none;
Close min-height: 150px;
</button> width: 94%;"
</div> cdkTextareaAutosize
cdkAutosizeMinRows="1"
cdkAutosizeMaxRows="3">{{wooToken}}
</textarea>
</div>
</td>
<td class="urlCopyBtn">
<a (click)='copyWooToken()' >
<fa-icon [icon]="faCopy"
class="copy-button">
</fa-icon>
</a>
</td>
</tr>
<tr>
<td class="heading" style="width: 60%;">URL:</td>
</tr>
<tr>
<td>
<div>
<textarea disabled
style="border: none;
outline: none;
min-height: 150px;
width: 94%;"
cdkTextareaAutosize
cdkAutosizeMinRows="1"
cdkAutosizeMaxRows="3">{{wooUrl}}
</textarea>
</div>
</td>
</tr>
</tbody>
</table>
<div class="toolbar" align="center">
<button mat-raised-button
(click)="close()">
Close
</button>
</div>
</div>
</mat-tab> </mat-tab>
</mat-tab-group> </mat-tab-group>
</mat-tab> </mat-tab>