UX Fixes
pull/260/head
Shahana Farooqui 4 years ago
parent 4cac3dad72
commit 8c81964e4d

File diff suppressed because one or more lines are too long

@ -9,8 +9,8 @@
<link rel="icon" type="image/png" sizes="32x32" href="assets/images/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="assets/images/favicon/favicon-16x16.png">
<link rel="manifest" href="assets/images/favicon/site.webmanifest">
<link rel="stylesheet" href="styles.b99c718d4d27fdf4c414.css"></head>
<link rel="stylesheet" href="styles.18f10bccc271f4d6863f.css"></head>
<body>
<rtl-app></rtl-app>
<script src="runtime.75b0bfd709c837e0ffe2.js" defer></script><script src="polyfills-es5.b8e32dec482ae69710a2.js" nomodule defer></script><script src="polyfills.ebf9033c33aa4a5af12a.js" defer></script><script src="main.bebfa3eb95ba087df81f.js" defer></script></body>
<script src="runtime.04ce149e32d4ab474230.js" defer></script><script src="polyfills-es5.b8e32dec482ae69710a2.js" nomodule defer></script><script src="polyfills.ebf9033c33aa4a5af12a.js" defer></script><script src="main.51859c43394db92cafdb.js" defer></script></body>
</html>

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

@ -1 +1 @@
!function(e){function r(r){for(var n,a,i=r[0],c=r[1],f=r[2],p=0,s=[];p<i.length;p++)a=i[p],Object.prototype.hasOwnProperty.call(o,a)&&o[a]&&s.push(o[a][0]),o[a]=0;for(n in c)Object.prototype.hasOwnProperty.call(c,n)&&(e[n]=c[n]);for(l&&l(r);s.length;)s.shift()();return u.push.apply(u,f||[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,i=1;i<t.length;i++)0!==o[t[i]]&&(n=!1);n&&(u.splice(r--,1),e=a(a.s=t[0]))}return e}var n={},o={0:0},u=[];function a(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,a),t.l=!0,t.exports}a.e=function(e){var r=[],t=o[e];if(0!==t)if(t)r.push(t[2]);else{var n=new Promise((function(r,n){t=o[e]=[r,n]}));r.push(t[2]=n);var u,i=document.createElement("script");i.charset="utf-8",i.timeout=120,a.nc&&i.setAttribute("nonce",a.nc),i.src=function(e){return a.p+""+({}[e]||e)+"."+{1:"3de0a26964d460363d96",6:"42170a37bd5aeec6fdbd",7:"3c966fdfcd1533f98e4f"}[e]+".js"}(e);var c=new Error;u=function(r){i.onerror=i.onload=null,clearTimeout(f);var t=o[e];if(0!==t){if(t){var n=r&&("load"===r.type?"missing":r.type),u=r&&r.target&&r.target.src;c.message="Loading chunk "+e+" failed.\n("+n+": "+u+")",c.name="ChunkLoadError",c.type=n,c.request=u,t[1](c)}o[e]=void 0}};var f=setTimeout((function(){u({type:"timeout",target:i})}),12e4);i.onerror=i.onload=u,document.head.appendChild(i)}return Promise.all(r)},a.m=e,a.c=n,a.d=function(e,r,t){a.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.t=function(e,r){if(1&r&&(e=a(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(a.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)a.d(t,n,(function(r){return e[r]}).bind(null,n));return t},a.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(r,"a",r),r},a.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},a.p="",a.oe=function(e){throw console.error(e),e};var i=window.webpackJsonp=window.webpackJsonp||[],c=i.push.bind(i);i.push=r,i=i.slice();for(var f=0;f<i.length;f++)r(i[f]);var l=c;t()}([]);
!function(e){function r(r){for(var n,a,i=r[0],c=r[1],f=r[2],p=0,s=[];p<i.length;p++)a=i[p],Object.prototype.hasOwnProperty.call(o,a)&&o[a]&&s.push(o[a][0]),o[a]=0;for(n in c)Object.prototype.hasOwnProperty.call(c,n)&&(e[n]=c[n]);for(l&&l(r);s.length;)s.shift()();return u.push.apply(u,f||[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,i=1;i<t.length;i++)0!==o[t[i]]&&(n=!1);n&&(u.splice(r--,1),e=a(a.s=t[0]))}return e}var n={},o={0:0},u=[];function a(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,a),t.l=!0,t.exports}a.e=function(e){var r=[],t=o[e];if(0!==t)if(t)r.push(t[2]);else{var n=new Promise((function(r,n){t=o[e]=[r,n]}));r.push(t[2]=n);var u,i=document.createElement("script");i.charset="utf-8",i.timeout=120,a.nc&&i.setAttribute("nonce",a.nc),i.src=function(e){return a.p+""+({}[e]||e)+"."+{1:"3de0a26964d460363d96",6:"42170a37bd5aeec6fdbd",7:"2abf952f9d750145d6a5"}[e]+".js"}(e);var c=new Error;u=function(r){i.onerror=i.onload=null,clearTimeout(f);var t=o[e];if(0!==t){if(t){var n=r&&("load"===r.type?"missing":r.type),u=r&&r.target&&r.target.src;c.message="Loading chunk "+e+" failed.\n("+n+": "+u+")",c.name="ChunkLoadError",c.type=n,c.request=u,t[1](c)}o[e]=void 0}};var f=setTimeout((function(){u({type:"timeout",target:i})}),12e4);i.onerror=i.onload=u,document.head.appendChild(i)}return Promise.all(r)},a.m=e,a.c=n,a.d=function(e,r,t){a.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.t=function(e,r){if(1&r&&(e=a(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(a.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)a.d(t,n,(function(r){return e[r]}).bind(null,n));return t},a.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(r,"a",r),r},a.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},a.p="",a.oe=function(e){throw console.error(e),e};var i=window.webpackJsonp=window.webpackJsonp||[],c=i.push.bind(i);i.push=r,i=i.slice();for(var f=0;f<i.length;f++)r(i[f]);var l=c;t()}([]);

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

@ -1,100 +1,97 @@
<div fxLayout="column" *ngIf="lookupResult" class="mt-1">
<mat-divider></mat-divider>
<div fxLayout="column" fxFlex="100" fxLayoutAlign="end start" class="my-1">
<h4 fxLayoutAlign="start" class="font-bold-500">Channel Id</h4>
<span class="foreground-secondary-text w-100">{{lookupResult.channel_id}}</span>
<h4 class="font-bold-500">Channel Id</h4>
<span class="foreground-secondary-text">{{lookupResult.channel_id}}</span>
<mat-divider class="my-1"></mat-divider>
</div>
<div fxLayout="column" fxFlex="100" fxLayoutAlign="end start" class="my-1">
<h4 fxLayoutAlign="start" class="font-bold-500">Channel Point</h4>
<span class="foreground-secondary-text w-100">{{lookupResult.chan_point}}</span>
<h4 class="font-bold-500">Channel Point</h4>
<span class="foreground-secondary-text">{{lookupResult.chan_point}}</span>
<mat-divider class="my-1"></mat-divider>
</div>
<div fxLayout="row">
<div fxLayout="column" fxFlex="50" fxLayoutAlign="end start" class="my-1">
<h4 fxLayoutAlign="start" class="font-bold-500">Last Update</h4>
<div fxLayout="column" fxFlex="100" fxFlex.gt-sm="50" fxLayoutAlign="end start" class="my-1">
<h4 class="font-bold-500">Last Update</h4>
<span class="foreground-secondary-text">{{lookupResult.last_update_str}}</span>
<mat-divider class="my-1"></mat-divider>
</div>
<div fxLayout="column" fxFlex="50" fxLayoutAlign="end start" class="my-1">
<h4 fxLayoutAlign="start" class="font-bold-500">Capacity (Sats)</h4>
<div fxLayout="column" fxFlex="100" fxFlex.gt-sm="50" fxLayoutAlign="end start" class="my-1">
<h4 class="font-bold-500">Capacity (Sats)</h4>
<span class="foreground-secondary-text">{{lookupResult.capacity | number}}</span>
<mat-divider class="my-1"></mat-divider>
</div>
</div>
<div fxLayout="column" fxLayoutAlign="space-between start" fxLayout.gt-sm="row wrap" class="w-100">
<div fxLayout="column" fxFlex="48" fxLayoutAlign="start start" class="mt-1 w-100">
<div fxLayout="row" fxFlex="100" fxLayoutAlign="start end">
<div fxLayout="column" fxLayoutAlign="space-between stretch" fxLayout.gt-sm="row">
<div fxLayout="column" fxFlex="49" fxLayoutAlign="start start" class="mt-1 bordered-box padding-gap-large">
<div fxLayout="column">
<h3 class="page-title font-bold-500" *ngIf="!node1_match">Node 1</h3>
<h3 class="page-title font-bold-500" *ngIf="node1_match">Node 1 (Your Node)</h3>
<mat-divider></mat-divider>
</div>
<div fxLayout="column" fxFlex="100" fxLayoutAlign="end start" class="my-1 w-100">
<h4 fxLayoutAlign="start" class="font-bold-500">Pubkey</h4>
<span class="foreground-secondary-text w-100">{{lookupResult.node1_pub}}</span>
<mat-divider class="my-1"></mat-divider>
<mat-divider [inset]="true"></mat-divider>
<div fxLayout="column" fxFlex="20" class="my-1">
<h4 class="font-bold-500">Pubkey</h4>
<span class="foreground-secondary-text">{{lookupResult.node1_pub}}</span>
</div>
<div fxLayout="column" fxFlex="100" fxLayoutAlign="end start" class="my-1">
<h4 fxLayoutAlign="start" class="font-bold-500">Time Lock Delta</h4>
<span class="foreground-secondary-text w-100">{{lookupResult.node1_policy.time_lock_delta}}</span>
<mat-divider class="my-1"></mat-divider>
<mat-divider [inset]="true"></mat-divider>
<div fxLayout="column" fxFlex="10" class="my-1">
<h4 class="font-bold-500">Time Lock Delta</h4>
<span class="foreground-secondary-text">{{lookupResult.node1_policy.time_lock_delta}}</span>
</div>
<div fxLayout="column" fxFlex="100" fxLayoutAlign="end start" class="my-1">
<h4 fxLayoutAlign="start" class="font-bold-500">Min HTLC</h4>
<span class="foreground-secondary-text w-100">{{lookupResult.node1_policy.min_htlc}}</span>
<mat-divider class="my-1"></mat-divider>
<mat-divider [inset]="true"></mat-divider>
<div fxLayout="column" fxFlex="10" class="my-1">
<h4 class="font-bold-500">Min HTLC</h4>
<span class="foreground-secondary-text">{{lookupResult.node1_policy.min_htlc}}</span>
</div>
<div fxLayout="column" fxFlex="100" fxLayoutAlign="end start" class="my-1">
<h4 fxLayoutAlign="start" class="font-bold-500">Fee Base Msat</h4>
<span class="foreground-secondary-text w-100">{{lookupResult.node1_policy.fee_base_msat}}</span>
<mat-divider class="my-1"></mat-divider>
<mat-divider [inset]="true"></mat-divider>
<div fxLayout="column" fxFlex="10" class="my-1">
<h4 class="font-bold-500">Fee Base Msat</h4>
<span class="foreground-secondary-text">{{lookupResult.node1_policy.fee_base_msat}}</span>
</div>
<div fxLayout="column" fxFlex="100" fxLayoutAlign="end start" class="my-1">
<h4 fxLayoutAlign="start" class="font-bold-500">Fee Rate Milli Msat</h4>
<span class="foreground-secondary-text w-100">{{lookupResult.node1_policy.fee_rate_milli_msat}}</span>
<mat-divider class="my-1"></mat-divider>
<mat-divider [inset]="true"></mat-divider>
<div fxLayout="column" fxFlex="10" class="my-1">
<h4 class="font-bold-500">Fee Rate Milli Msat</h4>
<span class="foreground-secondary-text">{{lookupResult.node1_policy.fee_rate_milli_msat}}</span>
</div>
<div fxLayout="column" fxFlex="100" fxLayoutAlign="end start" class="my-1">
<h4 fxLayoutAlign="start" class="font-bold-500">Disabled</h4>
<span class="foreground-secondary-text w-100">{{lookupResult.node1_policy.disabled}}</span>
<mat-divider class="my-1"></mat-divider>
<mat-divider [inset]="true"></mat-divider>
<div fxLayout="column" fxFlex="10" class="my-1">
<h4 class="font-bold-500">Disabled</h4>
<span class="foreground-secondary-text">{{lookupResult.node1_policy.disabled}}</span>
</div>
</div>
<div fxLayout="column" fxFlex="48" fxLayoutAlign="start start" class="mt-1 w-100">
<div fxLayout="row" fxFlex="100" fxLayoutAlign="start end">
<div fxLayout="column" fxFlex="49" fxLayoutAlign="start start" class="mt-1 bordered-box padding-gap-large">
<div>
<h3 class="page-title font-bold-500" *ngIf="!node2_match">Node 2</h3>
<h3 class="page-title font-bold-500" *ngIf="node2_match">Node 2 (Your Node)</h3>
<mat-divider></mat-divider>
</div>
<div fxLayout="column" fxFlex="100" fxLayoutAlign="end start" class="my-1 w-100">
<h4 fxLayoutAlign="start" class="font-bold-500">Pubkey</h4>
<span class="foreground-secondary-text w-100">{{lookupResult.node2_pub}}</span>
<mat-divider class="my-1"></mat-divider>
<mat-divider [inset]="true"></mat-divider>
<div fxLayout="column" fxFlex="20" class="my-1">
<h4 class="font-bold-500">Pubkey</h4>
<span class="foreground-secondary-text">{{lookupResult.node2_pub}}</span>
</div>
<div fxLayout="column" fxFlex="100" fxLayoutAlign="end start" class="my-1">
<h4 fxLayoutAlign="start" class="font-bold-500">Time Lock Delta</h4>
<span class="foreground-secondary-text w-100">{{lookupResult.node2_policy.time_lock_delta}}</span>
<mat-divider class="my-1"></mat-divider>
<mat-divider [inset]="true"></mat-divider>
<div fxLayout="column" fxFlex="10" class="my-1">
<h4 class="font-bold-500">Time Lock Delta</h4>
<span class="foreground-secondary-text">{{lookupResult.node2_policy.time_lock_delta}}</span>
</div>
<div fxLayout="column" fxFlex="100" fxLayoutAlign="end start" class="my-1">
<h4 fxLayoutAlign="start" class="font-bold-500">Min HTLC</h4>
<span class="foreground-secondary-text w-100">{{lookupResult.node2_policy.min_htlc}}</span>
<mat-divider class="my-1"></mat-divider>
<mat-divider [inset]="true"></mat-divider>
<div fxLayout="column" fxFlex="10" class="my-1">
<h4 class="font-bold-500">Min HTLC</h4>
<span class="foreground-secondary-text">{{lookupResult.node2_policy.min_htlc}}</span>
</div>
<div fxLayout="column" fxFlex="100" fxLayoutAlign="end start" class="my-1">
<h4 fxLayoutAlign="start" class="font-bold-500">Fee Base Msat</h4>
<span class="foreground-secondary-text w-100">{{lookupResult.node2_policy.fee_base_msat}}</span>
<mat-divider class="my-1"></mat-divider>
<mat-divider [inset]="true"></mat-divider>
<div fxLayout="column" fxFlex="10" class="my-1">
<h4 class="font-bold-500">Fee Base Msat</h4>
<span class="foreground-secondary-text">{{lookupResult.node2_policy.fee_base_msat}}</span>
</div>
<div fxLayout="column" fxFlex="100" fxLayoutAlign="end start" class="my-1">
<h4 fxLayoutAlign="start" class="font-bold-500">Fee Rate Milli Msat</h4>
<span class="foreground-secondary-text w-100">{{lookupResult.node2_policy.fee_rate_milli_msat}}</span>
<mat-divider class="my-1"></mat-divider>
<mat-divider [inset]="true"></mat-divider>
<div fxLayout="column" fxFlex="10" class="my-1">
<h4 class="font-bold-500">Fee Rate Milli Msat</h4>
<span class="foreground-secondary-text">{{lookupResult.node2_policy.fee_rate_milli_msat}}</span>
</div>
<div fxLayout="column" fxFlex="100" fxLayoutAlign="end start" class="my-1">
<h4 fxLayoutAlign="start" class="font-bold-500">Disabled</h4>
<span class="foreground-secondary-text w-100">{{lookupResult.node2_policy.disabled}}</span>
<mat-divider class="my-1"></mat-divider>
<mat-divider [inset]="true"></mat-divider>
<div fxLayout="column" fxFlex="10" class="my-1">
<h4 class="font-bold-500">Disabled</h4>
<span class="foreground-secondary-text">{{lookupResult.node2_policy.disabled}}</span>
</div>
</div>
</div>

@ -7,14 +7,14 @@
<mat-card fxLayout="row" fxFlex="100" fxLayoutAlign="start start">
<mat-card-content fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch" class="card-content-gap mt-1">
<form fxFlex="100" fxLayout="column" fxLayout.gt-sm="row wrap" fxLayoutAlign.gt-sm="space-between center" fxLayoutAlign="start space-between" class="w-100" #form="ngForm">
<div fxFlex="35" fxFlex.gt-md="22" fxLayoutAlign="start end">
<div fxFlex="35" fxFlex.gt-md="25" fxLayoutAlign="start end">
<mat-radio-group color="primary" [(ngModel)]="selectedFieldId" (change)="onSelectChange()" tabindex="1" name="lookupField">
<mat-radio-button *ngFor="let lookupField of lookupFields" [value]="lookupField.id" class="mr-4">
{{lookupField.name}}
</mat-radio-button>
</mat-radio-group>
</div>
<mat-form-field fxFlex="65" fxFlex.gt-md="77" fxLayoutAlign="start end" [ngClass]="{'mt-2': screenSize === screenSizeEnum.XS || screenSize === screenSizeEnum.SM}">
<mat-form-field fxFlex="65" fxFlex.gt-md="75" fxLayoutAlign="start end" [ngClass]="{'mt-2': screenSize === screenSizeEnum.XS || screenSize === screenSizeEnum.SM}">
<input matInput name="lookupKey" [placeholder]="lookupFields[selectedFieldId]?.placeholder || 'Lookup Key'" (change)="clearLookupValue()" [(ngModel)]="lookupKey" tabindex="2" required>
</mat-form-field>
<div fxFlex="30" fxLayoutAlign="space-between stretch" class="mt-2">

@ -38,9 +38,9 @@
<th mat-header-cell *matHeaderCellDef mat-sort-header class="pl-3">Balance Score </th>
<td mat-cell *matCellDef="let channel" class="pl-3">
<div fxLayout="row">
<mat-hint fxFlex="100" fxLayoutAlign="center center" class="font-size-80">{{channel.balancedness * 100}}</mat-hint>
<mat-hint fxFlex="100" fxLayoutAlign="center center" class="font-size-80">{{channel.balancedness || 0 | number}}</mat-hint>
</div>
<mat-progress-bar mode="determinate" value="{{channel.balancedness * 100}}"></mat-progress-bar>
<mat-progress-bar mode="determinate" value="{{channel.local_balance && channel.local_balance > 0 ? ((+channel.local_balance/((+channel.local_balance)+(+channel.remote_balance)))*100) : 0}}"></mat-progress-bar>
</td>
</ng-container>
<ng-container matColumnDef="actions">

@ -208,6 +208,8 @@ export class ChannelOpenTableComponent implements OnInit, OnDestroy {
this.store.dispatch(new RTLActions.OpenAlert({ data: {
type: AlertTypeEnum.INFORMATION,
alertTitle: 'Channel Information',
showCopyName: 'Channel ID',
showCopyField: selChannel.chan_id,
message: reorderedChannel
}}));
}

@ -483,28 +483,28 @@ export class LNDEffects implements OnDestroy {
pendingChannels.closing.num_channels = channels.pending_closing_channels.length;
pendingChannels.total_channels = pendingChannels.total_channels + channels.pending_closing_channels.length;
channels.pending_closing_channels.forEach(closingChannel => {
pendingChannels.closing.limbo_balance = pendingChannels.closing.limbo_balance + closingChannel.channel.local_balance;
pendingChannels.closing.limbo_balance = +pendingChannels.closing.limbo_balance + +closingChannel.channel.local_balance;
});
}
if (channels.pending_force_closing_channels) {
pendingChannels.force_closing.num_channels = channels.pending_force_closing_channels.length;
pendingChannels.total_channels = pendingChannels.total_channels + channels.pending_force_closing_channels.length;
channels.pending_force_closing_channels.forEach(closingChannel => {
pendingChannels.force_closing.limbo_balance = pendingChannels.force_closing.limbo_balance + closingChannel.channel.local_balance;
pendingChannels.force_closing.limbo_balance = +pendingChannels.force_closing.limbo_balance + +closingChannel.channel.local_balance;
});
}
if (channels.pending_open_channels) {
pendingChannels.open.num_channels = channels.pending_open_channels.length;
pendingChannels.total_channels = pendingChannels.total_channels + channels.pending_open_channels.length;
channels.pending_open_channels.forEach(openingChannel => {
pendingChannels.open.limbo_balance = pendingChannels.open.limbo_balance + openingChannel.channel.local_balance;
pendingChannels.open.limbo_balance = +pendingChannels.open.limbo_balance + +openingChannel.channel.local_balance;
});
}
if (channels.waiting_close_channels) {
pendingChannels.waiting_close.num_channels = channels.waiting_close_channels.length;
pendingChannels.total_channels = pendingChannels.total_channels + channels.waiting_close_channels.length;
channels.waiting_close_channels.forEach(closingChannel => {
pendingChannels.waiting_close.limbo_balance = pendingChannels.waiting_close.limbo_balance + closingChannel.channel.local_balance;
pendingChannels.waiting_close.limbo_balance = +pendingChannels.waiting_close.limbo_balance + +closingChannel.channel.local_balance;
});
}
}

@ -38,10 +38,14 @@
</div>
</div>
</div>
<div fxLayout="row" fxLayoutAlign="end center">
<button *ngIf="!showQRField || showQRField == ''" fxLayoutAlign="center center" tabindex="1" autoFocus mat-raised-button color="primary" fxFlex="20" type="submit" [mat-dialog-close]="false" default>OK</button>
<button *ngIf="showQRField !== ''" fxLayoutAlign="center center" tabindex="1" class="mr-2" mat-stroked-button color="primary" type="button" [mat-dialog-close]="false" default>OK</button>
<button *ngIf="showQRField !== ''" fxFlex="30" fxLayoutAlign="center center" autoFocus mat-raised-button color="primary" tabindex="2" type="submit" rtlClipboard [payload]="showQRField" (copied)="onCopyField($event)">Copy {{showQRName}}</button>
<div fxLayout="row" fxLayoutAlign="end center" fxFlex="100">
<div fxFlex.lt-md="100" fxLayoutAlign="space-between">
<button *ngIf="(!showQRField || showQRField == '') && (showCopyName === '')" fxLayoutAlign="center center" tabindex="1" autoFocus mat-raised-button color="primary" type="submit" [mat-dialog-close]="false" default>OK</button>
<button *ngIf="showCopyName !== ''" fxLayoutAlign="center center" tabindex="1" mat-stroked-button color="primary" type="button" [mat-dialog-close]="false" default>Close</button>
<button *ngIf="showCopyName !== ''" fxLayoutAlign="center center" autoFocus mat-raised-button color="primary" tabindex="2" type="submit" rtlClipboard [payload]="showCopyField" (copied)="onCopyField($event)">Copy {{showCopyName}}</button>
<button *ngIf="showQRField !== ''" fxLayoutAlign="center center" tabindex="1" class="mr-2" mat-stroked-button color="primary" type="button" [mat-dialog-close]="false" default>Close</button>
<button *ngIf="showQRField !== ''" fxLayoutAlign="center center" autoFocus mat-raised-button color="primary" tabindex="2" type="submit" rtlClipboard [payload]="showQRField" (copied)="onCopyField($event)">Copy {{showQRName}}</button>
</div>
</div>
</div>
</mat-card-content>

@ -14,6 +14,8 @@ import { AlertTypeEnum, DataTypeEnum, ScreenSizeEnum } from '../../../services/c
export class AlertMessageComponent implements OnInit {
public showQRField = '';
public showQRName = '';
public showCopyName = '';
public showCopyField = '';
public errorMessage = '';
public messageObjs = [];
public alertTypeEnum = AlertTypeEnum;
@ -28,6 +30,8 @@ export class AlertMessageComponent implements OnInit {
this.messageObjs = this.data.message;
this.showQRField = this.data.showQRField ? this.data.showQRField : '';
this.showQRName = this.data.showQRName ? this.data.showQRName : '';
this.showCopyName = this.data.showCopyName ? this.data.showCopyName : '';
this.showCopyField = this.data.showCopyField ? this.data.showCopyField : '';
if (this.data.type === AlertTypeEnum.ERROR) {
if (undefined === this.data.message && undefined === this.data.titleMessage && this.messageObjs.length <= 0) {
@ -38,7 +42,7 @@ export class AlertMessageComponent implements OnInit {
}
onCopyField(payload: string) {
this.snackBar.open(this.showQRName + ' copied');
this.snackBar.open((this.showQRName ? this.showQRName : this.showCopyName) + ' copied.');
this.logger.info('Copied Text: ' + payload);
}

@ -60,6 +60,8 @@ export interface AlertData {
showQRName?: string;
showQRField?: string;
newlyAdded?: boolean;
showCopyName?: string;
showCopyField?: string;
component?: any;
}

@ -101,9 +101,6 @@
.mat-tree {
background: mat-color($background, dialog);
}
.mat-expansion-panel {
border: 1px solid $foreground-secondary-text;
}
.mat-tab-label, .mat-tab-link {
color: $foreground-secondary-text;
}
@ -255,6 +252,7 @@
white-space: pre-line;
overflow-wrap: break-word;
word-break: break-all;
min-height: 2rem;
}
.foreground.mat-progress-spinner circle, .foreground.mat-spinner circle {
@ -388,6 +386,10 @@
background: none;
}
.mat-expansion-panel {
border: 1px solid $foreground-divider;
}
.modal-info-header {
color: $foreground-text;
font-weight: 500;

@ -948,3 +948,13 @@ table {
.node-grid-tile.mat-grid-tile .mat-figure {
align-items: start;
}
button.mat-button-base {
margin: 0 1rem;
&:last-child {
margin: 0 0 0 1rem;
}
// & .mat-button-wrapper {
// padding: 0 2rem;
// }
}
Loading…
Cancel
Save