Tooltip on blank headers

pull/1127/head
ShahanaFarooqui 2 years ago
parent 7363309801
commit dcf29c5e96

@ -10,7 +10,7 @@
<mat-progress-bar *ngIf="apiCallStatus?.status === apiCallStatusEnum.INITIATED" mode="indeterminate"></mat-progress-bar>
<table mat-table #table [dataSource]="listUTXOs" matSort [ngClass]="{'overflow-auto error-border': errorMessage !== '','overflow-auto': true}">
<ng-container matColumnDef="status">
<th mat-header-cell *matHeaderCellDef mat-sort-header>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</th>
<th mat-header-cell *matHeaderCellDef mat-sort-header matTooltip="UTXO Status" matTooltipPosition="right"></th>
<td mat-cell *matCellDef="let utxo">
<span fxLayout="row" fxLayoutAlign="end center" >
<span *ngIf="numDustUTXOs > 0 && !isDustUTXO">

@ -1,7 +1,8 @@
@import "../../../../../shared/theme/styles/mixins.scss";
.mat-column-private {
width: 2rem;
max-width: 1.2rem;
width:1.2rem;
}
.mat-column-short_channel_id, .mat-column-alias, .mat-column-id, .mat-column-channel_id, .mat-column-funding_txid {

@ -1,7 +1,8 @@
@import "../../../../../shared/theme/styles/mixins.scss";
.mat-column-private {
width: 2rem;
max-width: 1.2rem;
width:1.2rem;
}
.mat-column-short_channel_id, .mat-column-alias, .mat-column-id, .mat-column-channel_id, .mat-column-funding_txid {

@ -18,7 +18,7 @@
<mat-progress-bar *ngIf="apiCallStatus.status === apiCallStatusEnum.INITIATED" mode="indeterminate"></mat-progress-bar>
<table mat-table #table [dataSource]="peers" matSort [ngClass]="{'overflow-auto error-border': errorMessage !== '','overflow-auto': true}">
<ng-container matColumnDef="connected">
<th mat-header-cell *matHeaderCellDef mat-sort-header></th>
<th mat-header-cell *matHeaderCellDef mat-sort-header matTooltip="Connected" matTooltipPosition="right"></th>
<td mat-cell *matCellDef="let peer">
<span *ngIf="peer?.connected" class="dot green" matTooltip="Connected" matTooltipPosition="right" [ngClass]="{'mr-0': screenSize === screenSizeEnum.XS}"></span>
<span *ngIf="!peer?.connected" class="dot red" matTooltip="Disconnected" matTooltipPosition="right" [ngClass]="{'mr-0': screenSize === screenSizeEnum.XS}"></span>

@ -1,5 +1,6 @@
.mat-column-connected {
width: 2rem;
max-width: 1.2rem;
width:1.2rem;
}
.mat-column-alias, .mat-column-id, .mat-column-netaddr {

@ -31,7 +31,7 @@
<mat-progress-bar *ngIf="apiCallStatus?.status === apiCallStatusEnum.INITIATED" mode="indeterminate"></mat-progress-bar>
<table mat-table #table fxFlex="100" [dataSource]="invoices" matSort [ngClass]="{'overflow-auto error-border': errorMessage !== '','overflow-auto': true}">
<ng-container matColumnDef="status">
<th mat-header-cell *matHeaderCellDef mat-sort-header></th>
<th mat-header-cell *matHeaderCellDef mat-sort-header matTooltip="Status" matTooltipPosition="right"></th>
<td mat-cell *matCellDef="let invoice">
<span *ngIf="invoice?.status === 'paid'" class="dot green" matTooltip="Paid" matTooltipPosition="right" [ngClass]="{'mr-0': screenSize === screenSizeEnum.XS}"></span>
<span *ngIf="invoice?.status === 'unpaid'" class="dot yellow" matTooltip="Unpaid" matTooltipPosition="right" [ngClass]="{'mr-0': screenSize === screenSizeEnum.XS}"></span>

@ -1,5 +1,6 @@
.mat-column-status {
width: 2rem;
max-width: 1.2rem;
width:1.2rem;
}
.mat-column-description, .mat-column-label, .mat-column-payment_hash, .mat-column-bolt11 {

@ -16,7 +16,7 @@
<mat-progress-bar *ngIf="apiCallStatus?.status === apiCallStatusEnum.INITIATED" mode="indeterminate"></mat-progress-bar>
<table mat-table #table fxFlex="100" [dataSource]="offers" matSort [ngClass]="{'overflow-auto error-border': errorMessage !== '','overflow-auto': true}">
<ng-container matColumnDef="active">
<th mat-header-cell *matHeaderCellDef mat-sort-header></th>
<th mat-header-cell *matHeaderCellDef mat-sort-header matTooltip="Active" matTooltipPosition="right"></th>
<td mat-cell *matCellDef="let offer">
<span *ngIf="offer.active" class="dot green" matTooltip="Active" matTooltipPosition="right" [ngClass]="{'mr-0': screenSize === screenSizeEnum.XS}"></span>
<span *ngIf="!offer.active" class="dot red" matTooltip="Inactive" matTooltipPosition="right" [ngClass]="{'mr-0': screenSize === screenSizeEnum.XS}"></span>

@ -1,5 +1,6 @@
.mat-column-active {
width: 2rem;
max-width: 1.2rem;
width:1.2rem;
}
.mat-column-offer_id, .mat-column-bolt12 {

@ -28,7 +28,7 @@
<mat-progress-bar *ngIf="apiCallStatus?.status === apiCallStatusEnum.INITIATED" mode="indeterminate"></mat-progress-bar>
<table mat-table #table fxFlex="100" [dataSource]="payments" matSort [ngClass]="{'overflow-auto error-border': errorMessage !== '','overflow-auto': true}">
<ng-container matColumnDef="status">
<th mat-header-cell *matHeaderCellDef mat-sort-header></th>
<th mat-header-cell *matHeaderCellDef mat-sort-header matTooltip="Status" matTooltipPosition="right"></th>
<td mat-cell *matCellDef="let payment">
<span *ngIf="payment.status === 'complete'" class="dot green" matTooltip="Completed" matTooltipPosition="right"></span>
<span *ngIf="payment.status !== 'complete'" class="dot yellow" matTooltip="Failed" matTooltipPosition="right"></span>

@ -1,5 +1,6 @@
.mat-column-status, .mat-column-group_status {
width: 2rem;
max-width: 1.2rem;
width:1.2rem;
}
.mat-column-payment_hash, .mat-column-bolt11, .mat-column-destination, .mat-column-label, .mat-column-memo {

@ -1,7 +1,8 @@
@import "../../../../../shared/theme/styles/mixins.scss";
.mat-column-announceChannel {
width: 2rem;
max-width: 1.2rem;
width:1.2rem;
}
.mat-column-alias, .mat-column-channelId, .mat-column-nodeId {

@ -1,7 +1,8 @@
@import "../../../../../shared/theme/styles/mixins.scss";
.mat-column-announceChannel {
width: 2rem;
max-width: 1.2rem;
width:1.2rem;
}
.mat-column-alias, .mat-column-channelId, .mat-column-nodeId {

@ -1,5 +1,6 @@
.mat-column-announceChannel {
width: 2rem;
max-width: 1.2rem;
width:1.2rem;
}
.mat-column-alias, .mat-column-channelId, .mat-column-nodeId {

@ -18,7 +18,7 @@
<mat-progress-bar *ngIf="apiCallStatus.status === apiCallStatusEnum.INITIATED" mode="indeterminate"></mat-progress-bar>
<table mat-table #table fxFlex="100" [dataSource]="peers" matSort [ngClass]="{'overflow-auto error-border': errorMessage !== '','overflow-auto': true}">
<ng-container matColumnDef="state">
<th mat-header-cell *matHeaderCellDef mat-sort-header></th>
<th mat-header-cell *matHeaderCellDef mat-sort-header matTooltip="State" matTooltipPosition="right"></th>
<td mat-cell *matCellDef="let peer">
<span *ngIf="peer.state === 'CONNECTED'" class="dot green" matTooltip="Connected" matTooltipPosition="right" [ngClass]="{'mr-0': screenSize === screenSizeEnum.XS}"></span>
<span *ngIf="peer.state === 'DISCONNECTED'" class="dot red" matTooltip="Disconnected" matTooltipPosition="right" [ngClass]="{'mr-0': screenSize === screenSizeEnum.XS}"></span>

@ -1,5 +1,6 @@
.mat-column-state {
width: 2rem;
max-width: 1.2rem;
width:1.2rem;
}
.mat-column-alias, .mat-column-nodeId, .mat-column-address {

@ -9,10 +9,15 @@
<div *ngIf="errorMessage === ''" [perfectScrollbar] fxLayout="column" fxLayoutAlign="start center" fxFlex="100" class="table-container">
<mat-progress-bar *ngIf="apiCallStatus.status === apiCallStatusEnum.INITIATED" mode="indeterminate"></mat-progress-bar>
<table mat-table #table [dataSource]="forwardingHistoryEvents" fxFlex="100" matSort class="overflow-auto">
<ng-container matColumnDef="type">
<th mat-header-cell *matHeaderCellDef mat-sort-header matTooltip="Type (if not payment relayed)" matTooltipPosition="right"></th>
<td mat-cell *matCellDef="let fhEvent">
<span *ngIf="fhEvent?.type !== 'payment-relayed'" class="dot yellow" matTooltip="{{fhEvent?.type | camelcase}}" matTooltipPosition="right" [ngClass]="{'ml-0': screenSize === screenSizeEnum.XS}"></span>
</td>
</ng-container>
<ng-container matColumnDef="timestamp">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Date/Time</th>
<td mat-cell *matCellDef="let fhEvent">
<span *ngIf="fhEvent?.type !== 'payment-relayed'" class="dot yellow" matTooltip="{{fhEvent?.type | camelcase}}" matTooltipPosition="right" [ngClass]="{'ml-0': screenSize === screenSizeEnum.XS}"></span>
{{fhEvent?.timestamp | date:'dd/MMM/y HH:mm'}}
</td>
</ng-container>

@ -1,3 +1,12 @@
.mat-column-type {
max-width: 1.2rem;
width:1.2rem;
& svg {
max-width: 1.6rem;
width:1.6rem;
}
}
.mat-column-fromChannelId, .mat-column-fromAlias, .mat-column-toChannelId, .mat-column-toAlias, .mat-column-paymentHash {
padding-left: 1rem;
flex: 1 1 15%;

@ -65,6 +65,7 @@ export class ECLForwardingHistoryComponent implements OnInit, OnChanges, AfterVi
} else {
this.displayedColumns = JSON.parse(JSON.stringify(this.tableSetting.columnSelection));
}
this.displayedColumns.unshift('type');
this.displayedColumns.push('actions');
this.pageSize = this.tableSetting.recordsPerPage ? +this.tableSetting.recordsPerPage : PAGE_SIZE;
this.logger.info(this.displayedColumns);

@ -31,7 +31,7 @@
<mat-progress-bar *ngIf="apiCallStatus.status === apiCallStatusEnum.INITIATED" mode="indeterminate"></mat-progress-bar>
<table mat-table #table fxFlex="100" [dataSource]="invoices" matSort [ngClass]="{'overflow-auto error-border': errorMessage !== '','overflow-auto': true}">
<ng-container matColumnDef="status">
<th mat-header-cell *matHeaderCellDef mat-sort-header></th>
<th mat-header-cell *matHeaderCellDef mat-sort-header matTooltip="Status" matTooltipPosition="right"></th>
<td mat-cell *matCellDef="let invoice">
<span *ngIf="invoice?.status === 'received'" class="dot green" matTooltip="Received" matTooltipPosition="right" [ngClass]="{'mr-0': screenSize === screenSizeEnum.XS}"></span>
<span *ngIf="invoice?.status === 'unpaid'" class="dot yellow" matTooltip="Unpaid" matTooltipPosition="right" [ngClass]="{'mr-0': screenSize === screenSizeEnum.XS}"></span>

@ -1,5 +1,6 @@
.mat-column-status {
width: 2rem;
max-width: 1.2rem;
width:1.2rem;
}
.mat-column-nodeId, .mat-column-paymentHash, .mat-column-description {

@ -1,5 +1,6 @@
.mat-column-is_dust {
width: 2rem;
max-width: 1.2rem;
width:1.2rem;
}
.mat-column-label, .mat-column-tx_id, .mat-column-address {

@ -9,14 +9,14 @@
<mat-progress-bar *ngIf="apiCallStatus?.status === apiCallStatusEnum.INITIATED" mode="indeterminate"></mat-progress-bar>
<table mat-table #table fxFlex="100" [dataSource]="channels" matSort [ngClass]="{'overflow-auto error-border': errorMessage !== '','overflow-auto': true}">
<ng-container matColumnDef="active">
<th mat-header-cell *matHeaderCellDef mat-sort-header></th>
<th mat-header-cell *matHeaderCellDef mat-sort-header matTooltip="Active" matTooltipPosition="right"></th>
<td mat-cell *matCellDef="let channel">
<span *ngIf="channel.active" class="dot green" matTooltip="Active" matTooltipPosition="right"></span>
<span *ngIf="!channel.active" class="dot yellow" matTooltip="Inactive" matTooltipPosition="right"></span>
</td>
</ng-container>
<ng-container matColumnDef="private">
<th mat-header-cell *matHeaderCellDef mat-sort-header></th>
<th mat-header-cell *matHeaderCellDef mat-sort-header matTooltip="Private" matTooltipPosition="right"></th>
<td mat-cell *matCellDef="let channel">
<span *ngIf="channel.private" class="mr-1" matTooltip="Private" matTooltipPosition="right"><fa-icon [icon]="faEyeSlash"></fa-icon></span>
<span *ngIf="!channel.private" class="mr-1" matTooltip="Public" matTooltipPosition="right"><fa-icon [icon]="faEye"></fa-icon></span>

@ -1,5 +1,17 @@
@import "../../../../../shared/theme/styles/mixins.scss";
.mat-column-active {
max-width: 1.2rem;
width:1.2rem;
padding-right: 0.5rem;
}
.mat-column-private {
padding-right: 0.5rem;
max-width: 1.6rem;
width:1.6rem;
}
.mat-column-remote_alias, .mat-column-remote_pubkey, .mat-column-channel_point, .mat-column-chan_id {
flex: 0 0 15%;
width: 15%;

@ -30,7 +30,7 @@
<mat-progress-bar *ngIf="apiCallStatus.status === apiCallStatusEnum.INITIATED" mode="indeterminate"></mat-progress-bar>
<table mat-table #table fxFlex="100" [dataSource]="invoices" matSort [ngClass]="{'overflow-auto error-border': errorMessage !== '','overflow-auto': true}">
<ng-container matColumnDef="state">
<th mat-header-cell *matHeaderCellDef mat-sort-header matTooltip="Invoice State" matTooltipPosition="right"></th>
<th mat-header-cell *matHeaderCellDef mat-sort-header matTooltip="State" matTooltipPosition="right"></th>
<td mat-cell *matCellDef="let invoice">
<span *ngIf="invoice?.state === 'OPEN'" class="dot grey" matTooltip="Open" matTooltipPosition="right" [ngClass]="{'mr-0': screenSize === screenSizeEnum.XS}"></span>
<span *ngIf="invoice?.state === 'SETTLED'" class="dot green" matTooltip="Settled" matTooltipPosition="right" [ngClass]="{'mr-0': screenSize === screenSizeEnum.XS}"></span>
@ -38,21 +38,21 @@
<span *ngIf="invoice?.state === 'CANCELED'" class="dot red" matTooltip="Cancelled" matTooltipPosition="right" [ngClass]="{'mr-0': screenSize === screenSizeEnum.XS}"></span>
</ng-container>
<ng-container matColumnDef="private">
<th mat-header-cell *matHeaderCellDef mat-sort-header matTooltip="Is Private" matTooltipPosition="right"></th>
<th mat-header-cell *matHeaderCellDef mat-sort-header matTooltip="Private" matTooltipPosition="right"></th>
<td mat-cell *matCellDef="let invoice">
<span *ngIf="invoice.private" class="mr-1" matTooltip="Private" matTooltipPosition="right"><fa-icon [icon]="faEyeSlash"></fa-icon></span>
<span *ngIf="!invoice.private" class="mr-1" matTooltip="Public" matTooltipPosition="right"><fa-icon [icon]="faEye"></fa-icon></span>
</td>
</ng-container>
<ng-container matColumnDef="is_keysend">
<th mat-header-cell *matHeaderCellDef mat-sort-header matTooltip="Is Keysend" matTooltipPosition="right"></th>
<th mat-header-cell *matHeaderCellDef mat-sort-header matTooltip="Keysend" matTooltipPosition="right"></th>
<td mat-cell *matCellDef="let invoice">
<span *ngIf="invoice.is_keysend" class="mr-1" matTooltip="Keysend" matTooltipPosition="right"><fa-icon [icon]="faArrowsTurnToDots"></fa-icon></span>
<span *ngIf="!invoice.is_keysend" class="mr-1" matTooltip="Non Keysend Invoices" matTooltipPosition="right"><fa-icon [icon]="faArrowsTurnRight"></fa-icon></span>
</td>
</ng-container>
<ng-container matColumnDef="is_amp">
<th mat-header-cell *matHeaderCellDef mat-sort-header matTooltip="Is AMP" matTooltipPosition="right"></th>
<th mat-header-cell *matHeaderCellDef mat-sort-header matTooltip="AMP" matTooltipPosition="right"></th>
<td mat-cell *matCellDef="let invoice">
<span *ngIf="!invoice.is_amp" class="mr-1" matTooltip="Non Atomic Payment" matTooltipPosition="right"><fa-icon [icon]="faMoneyBill1"></fa-icon></span>
<span *ngIf="invoice.is_amp" class="mr-1" matTooltip="Atomic Multi-path Payment" matTooltipPosition="right"><fa-icon [icon]="faBurst"></fa-icon></span>
@ -159,7 +159,7 @@
</td>
</ng-container>
<ng-container matColumnDef="no_invoice">
<td mat-footer-cell *matFooterCellDef colspan="4">
<td mat-footer-cell *matFooterCellDef colspan="6">
<p *ngIf="(!invoices?.data || invoices?.data?.length<1) && apiCallStatus.status === apiCallStatusEnum.COMPLETED">No invoice available.</p>
<p *ngIf="(!invoices?.data || invoices?.data?.length<1) && apiCallStatus.status === apiCallStatusEnum.INITIATED">Getting invoices...</p>
<p *ngIf="(!invoices?.data || invoices?.data?.length<1) && apiCallStatus.status === apiCallStatusEnum.ERROR">{{errorMessage}}</p>

@ -1,6 +1,13 @@
.mat-column-state, .mat-column-private,
.mat-column-is_keysend, .mat-column-is_amp {
width: 2rem;
.mat-column-state {
max-width: 1.2rem;
width:1.2rem;
padding-right: 0.5rem;
}
.mat-column-private, .mat-column-is_keysend, .mat-column-is_amp {
padding-right: 0.5rem;
max-width: 1.6rem;
width:1.6rem;
}
.mat-column-memo, .mat-column-r_preimage, .mat-column-r_hash,

@ -28,7 +28,7 @@
<mat-progress-bar *ngIf="apiCallStatus.status === apiCallStatusEnum.INITIATED" mode="indeterminate"></mat-progress-bar>
<table mat-table #table fxFlex="100" [dataSource]="payments" matSort [ngClass]="{'overflow-auto error-border': errorMessage !== '','overflow-auto': true}">
<ng-container matColumnDef="status">
<th mat-header-cell *matHeaderCellDef mat-sort-header></th>
<th mat-header-cell *matHeaderCellDef mat-sort-header matTooltip="Status" matTooltipPosition="right"></th>
<td mat-cell *matCellDef="let payment">
<span *ngIf="payment?.status === 'SUCCEEDED'" class="dot green" matTooltip="Succeeded" matTooltipPosition="right" [ngClass]="{'mr-0': screenSize === screenSizeEnum.XS}"></span>
<span *ngIf="payment?.status !== 'SUCCEEDED'" class="dot red" matTooltip="Failed" matTooltipPosition="right" [ngClass]="{'mr-0': screenSize === screenSizeEnum.XS}"></span>

Loading…
Cancel
Save