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',
templateUrl: './invoice.component.html',
styleUrls: ['./invoice.component.css']
});
})
export class InvoiceComponent implements OnInit {
faCheck = faCheck;

View File

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