mirror of
https://github.com/FJurmanovic/wallet-web.git
synced 2026-02-06 06:08:10 +00:00
styled wallet headers and transaction tables
This commit is contained in:
Fran Jurmanović
@@ -10,6 +10,8 @@ class AppPaginationElement extends BaseComponentElement {
|
||||
@attr rpp: number;
|
||||
@attr totalItems: number;
|
||||
@attr autoInit: string;
|
||||
@attr tableLayout: string = 'transactions-table';
|
||||
initial: boolean = false;
|
||||
|
||||
private customRenderItems: () => TemplateResult;
|
||||
private customRenderItem: (item: any) => TemplateResult;
|
||||
@@ -69,6 +71,8 @@ class AppPaginationElement extends BaseComponentElement {
|
||||
} catch (err) {
|
||||
this.loader?.stop?.();
|
||||
console.error(err);
|
||||
} finally {
|
||||
this.initial = true;
|
||||
}
|
||||
};
|
||||
|
||||
@@ -94,20 +98,29 @@ class AppPaginationElement extends BaseComponentElement {
|
||||
|
||||
const renderItem = this.customRenderItem
|
||||
? this.customRenderItem
|
||||
: (item) => html`<tr>
|
||||
<td>${item.description}</td>
|
||||
<td>${item.amount}</td>
|
||||
: (item, iter) => html`<tr>
|
||||
<td class="--left">${iter + 1 + rpp * (page - 1)}</td>
|
||||
<td class="--left">${item.description}</td>
|
||||
<td class="balance-cell --right">
|
||||
<span class="balance ${item.amount > 0 ? '--positive' : '--negative'}">
|
||||
${Number(item.amount).toLocaleString('en-US', {
|
||||
maximumFractionDigits: 2,
|
||||
minimumFractionDigits: 2,
|
||||
})}
|
||||
</span>
|
||||
<span class="currency">(${item.currency ? item.currency : 'USD'})</span>
|
||||
</td>
|
||||
</tr>`;
|
||||
|
||||
const renderItems = this.customRenderItems
|
||||
? this.customRenderItems
|
||||
: () => {
|
||||
if (this.loader && this.loader.loading) {
|
||||
return html`<circle-loader></circle-loader>`;
|
||||
if (this.loader && this.loader.loading && !this.initial) {
|
||||
return html``;
|
||||
} else {
|
||||
if (items?.length > 0) {
|
||||
return html`<table>
|
||||
${items?.map((item) => renderItem(item))}
|
||||
return html`<table class="${this.tableLayout}">
|
||||
${items?.map((item, iter) => renderItem(item, iter))} ${renderPagination()}
|
||||
</table>`;
|
||||
}
|
||||
return html``;
|
||||
@@ -118,25 +131,27 @@ class AppPaginationElement extends BaseComponentElement {
|
||||
if (totalItems > items?.length) {
|
||||
const pageRange = Math.ceil(totalItems / rpp);
|
||||
return html`
|
||||
<div>
|
||||
<button
|
||||
class="btn btn-primary btn-squared ${page <= 1 ? 'disabled' : ''}"
|
||||
app-action="click:app-pagination#pageBack"
|
||||
>
|
||||
Prev
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-primary btn-squared ${page >= pageRange ? 'disabled' : ''}"
|
||||
app-action="click:app-pagination#pageNext"
|
||||
>
|
||||
Next
|
||||
</button>
|
||||
<div class="paginate">
|
||||
<div class="--footer">
|
||||
<button
|
||||
class="btn btn-primary btn-squared ${page <= 1 ? 'disabled' : ''}"
|
||||
app-action="click:app-pagination#pageBack"
|
||||
>
|
||||
Prev
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-primary btn-squared ${page >= pageRange ? 'disabled' : ''}"
|
||||
app-action="click:app-pagination#pageNext"
|
||||
>
|
||||
Next
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
};
|
||||
|
||||
return html`<div>${renderItems()} ${renderPagination()}</div>`;
|
||||
return html`<div class="app-pagination">${renderItems()}</div>`;
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
@@ -11,6 +11,7 @@ class WalletHeaderElement extends BaseComponentElement {
|
||||
@attr nextMonth: number;
|
||||
@attr currency: string;
|
||||
@attr custom: string;
|
||||
initial: boolean = false;
|
||||
|
||||
fetchFunc: Function = () => {};
|
||||
constructor() {
|
||||
@@ -38,20 +39,26 @@ class WalletHeaderElement extends BaseComponentElement {
|
||||
} catch (err) {
|
||||
this.loader?.stop?.();
|
||||
console.error(err);
|
||||
} finally {
|
||||
this.initial = true;
|
||||
}
|
||||
};
|
||||
|
||||
render = (): TemplateResult => {
|
||||
const { currentBalance, currency, lastMonth, nextMonth } = this;
|
||||
|
||||
const renderItem = (header, balance, currency) => html`<div>
|
||||
<div>${header}</div>
|
||||
<div><span>${balance}</span><span>${currency}</span></div>
|
||||
const renderItem = (header, balance, currency) => html`<div class="header-item">
|
||||
<div class="--header">${header}</div>
|
||||
<div class="--content">
|
||||
<span class="--balance ${balance > 0 ? '--positive' : '--negative'}"
|
||||
>${Number(balance).toLocaleString('en-US', { maximumFractionDigits: 2, minimumFractionDigits: 2 })}</span
|
||||
><span class="--currency">(${currency})</span>
|
||||
</div>
|
||||
</div>`;
|
||||
|
||||
const renderHeader = () => {
|
||||
if (this.loader && this.loader.loading) {
|
||||
return html`<circle-loader></circle-loader>`;
|
||||
if (this.loader && this.loader.loading && !this.initial) {
|
||||
return html``;
|
||||
}
|
||||
return html`${renderItem('Last Month', lastMonth, currency)}${renderItem(
|
||||
'Current Balance',
|
||||
@@ -60,7 +67,7 @@ class WalletHeaderElement extends BaseComponentElement {
|
||||
)}${renderItem('Next Month', nextMonth, currency)}`;
|
||||
};
|
||||
|
||||
return html`<div>${renderHeader()}</div>`;
|
||||
return html`<div class="wallet-header">${renderHeader()}</div>`;
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
@@ -65,6 +65,7 @@ class TransactionCreateElement extends BasePageElement {
|
||||
|
||||
if (response?.id) {
|
||||
this.appMain.triggerWalletUpdate();
|
||||
this.appMain.pushToast('success', 'Transaction created successfully!');
|
||||
this.routerService.goTo('/history', {
|
||||
walletId: response.id,
|
||||
});
|
||||
|
||||
@@ -48,6 +48,7 @@ class WalletCreateElement extends BasePageElement {
|
||||
|
||||
if (response?.id) {
|
||||
this.appMain.triggerWalletUpdate();
|
||||
this.appMain.pushToast('success', 'Wallet created successfully!');
|
||||
this.routerService.goTo('/wallet/:walletId', {
|
||||
walletId: response.id,
|
||||
});
|
||||
|
||||
57
src/styles/app-pagination/app-pagination.scss
Normal file
57
src/styles/app-pagination/app-pagination.scss
Normal file
@@ -0,0 +1,57 @@
|
||||
app-pagination {
|
||||
.app-pagination {
|
||||
table.transactions-table {
|
||||
margin: 0 0 3em 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
background-color: $gray-09;
|
||||
border: 1px solid $gray-09;
|
||||
border-radius: 4px;
|
||||
display: block;
|
||||
tr {
|
||||
background-color: $gray-07;
|
||||
padding: 4px 12px;
|
||||
border-radius: 4px;
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr auto;
|
||||
margin: 6px 8px;
|
||||
td,
|
||||
th {
|
||||
margin: 0 12px;
|
||||
overflow: hidden; // Or flex might break
|
||||
list-style: none;
|
||||
&.--left {
|
||||
text-align: left;
|
||||
}
|
||||
&.--right {
|
||||
text-align: right;
|
||||
}
|
||||
&.balance-cell {
|
||||
.balance {
|
||||
display: inline;
|
||||
&.--positive {
|
||||
color: $green-01;
|
||||
}
|
||||
&.--negative {
|
||||
color: $red-01;
|
||||
}
|
||||
}
|
||||
.currency {
|
||||
display: inline;
|
||||
color: $gray-10;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.paginate {
|
||||
position: relative;
|
||||
height: 33px;
|
||||
margin-bottom: 7px;
|
||||
.--footer {
|
||||
position: absolute;
|
||||
right: 7px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
1
src/styles/app-pagination/index.scss
Normal file
1
src/styles/app-pagination/index.scss
Normal file
@@ -0,0 +1 @@
|
||||
@import './app-pagination.scss';
|
||||
@@ -1,207 +1,208 @@
|
||||
.btn {
|
||||
display: inline-block;
|
||||
padding: 6px 12px;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
background-color: transparent;
|
||||
border: $border-width $border-style transparent;
|
||||
font-size: 14px;
|
||||
font-weight: $font-weight-semibold;
|
||||
border-radius: 0.25em;
|
||||
appearance: none;
|
||||
line-height: 20px;
|
||||
display: inline-block;
|
||||
padding: 6px 12px;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
background-color: transparent;
|
||||
border: $border-width $border-style transparent;
|
||||
font-size: 14px;
|
||||
font-weight: $font-weight-semibold;
|
||||
border-radius: 0.25em;
|
||||
appearance: none;
|
||||
line-height: 20px;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
background-repeat: repeat-x;
|
||||
}
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
background-repeat: repeat-x;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
&:disabled,
|
||||
&.disabled,
|
||||
&[aria-disabled="true"] {
|
||||
cursor: default;
|
||||
background-position: 0 0;
|
||||
}
|
||||
&:disabled,
|
||||
&.disabled,
|
||||
&[aria-disabled='true'] {
|
||||
cursor: default;
|
||||
background-position: 0 0;
|
||||
background-color: $gray-08 !important;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&.selected,
|
||||
&[aria-selected="true"] {
|
||||
background-image: none;
|
||||
}
|
||||
&:active,
|
||||
&.selected,
|
||||
&[aria-selected='true'] {
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
&.btn-squared {
|
||||
border-radius: 0;
|
||||
}
|
||||
&.btn-squared {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
&.btn-rounder {
|
||||
border-radius: 2em;
|
||||
}
|
||||
&.btn-rounder {
|
||||
border-radius: 2em;
|
||||
}
|
||||
|
||||
@each $color, $value in $button-map {
|
||||
&.btn-#{$color} {
|
||||
background-color: nth($value, 1);
|
||||
color: nth($value, 2);
|
||||
&:hover {
|
||||
background-color: darken(nth($value, 1), 10%);
|
||||
color: lighten(nth($value, 2), 5%);
|
||||
}
|
||||
@each $color, $value in $button-map {
|
||||
&.btn-#{$color} {
|
||||
background-color: nth($value, 1);
|
||||
color: nth($value, 2);
|
||||
&:hover {
|
||||
background-color: darken(nth($value, 1), 10%);
|
||||
color: lighten(nth($value, 2), 5%);
|
||||
}
|
||||
|
||||
&-transparent {
|
||||
background: transparent;
|
||||
color: $black;
|
||||
&:hover {
|
||||
background-color: nth($value, 1);
|
||||
color: nth($value, 2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&-transparent {
|
||||
background: transparent;
|
||||
color: $black;
|
||||
&:hover {
|
||||
background-color: nth($value, 1);
|
||||
color: nth($value, 2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-link {
|
||||
color: $blue-07;
|
||||
text-decoration: none;
|
||||
&.btn-link {
|
||||
color: $blue-07;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-sm {
|
||||
padding: 3px 10px;
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
}
|
||||
&.btn-sm {
|
||||
padding: 3px 10px;
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
&.btn-lg {
|
||||
padding: 14px 1.25em;
|
||||
font-size: inherit;
|
||||
border-radius: 6px;
|
||||
}
|
||||
&.btn-lg {
|
||||
padding: 14px 1.25em;
|
||||
font-size: inherit;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
&.btn-block {
|
||||
display: block;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
&.btn-block {
|
||||
display: block;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
display: inline-block;
|
||||
padding: 5px;
|
||||
margin-left: 5px;
|
||||
line-height: 2px;
|
||||
color: gray-04;
|
||||
vertical-align: middle;
|
||||
background: transparent;
|
||||
border: $border-width $border-style transparent;
|
||||
display: inline-block;
|
||||
padding: 5px;
|
||||
margin-left: 5px;
|
||||
line-height: 2px;
|
||||
color: gray-04;
|
||||
vertical-align: middle;
|
||||
background: transparent;
|
||||
border: $border-width $border-style transparent;
|
||||
|
||||
&:hover {
|
||||
color: $blue-01;
|
||||
}
|
||||
&:hover {
|
||||
color: $blue-01;
|
||||
}
|
||||
|
||||
&:disabled,
|
||||
&[aria-disabled="true"] {
|
||||
color: $gray-08;
|
||||
cursor: default;
|
||||
&:disabled,
|
||||
&[aria-disabled='true'] {
|
||||
color: $gray-08;
|
||||
cursor: default;
|
||||
|
||||
&:hover {
|
||||
color: $gray-08;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
color: $gray-08;
|
||||
}
|
||||
}
|
||||
|
||||
&-round {
|
||||
text-decoration: none;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
border-radius: 100%;
|
||||
overflow: none;
|
||||
text-align: center;
|
||||
padding: 5px;
|
||||
border: $border-width $border-style transparent;
|
||||
&-round {
|
||||
text-decoration: none;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
border-radius: 100%;
|
||||
overflow: none;
|
||||
text-align: center;
|
||||
padding: 5px;
|
||||
border: $border-width $border-style transparent;
|
||||
|
||||
span,
|
||||
div {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
span,
|
||||
div {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
@each $color, $value in $button-map {
|
||||
&.btn-#{$color} {
|
||||
background-color: nth($value, 1);
|
||||
color: nth($value, 2);
|
||||
&:hover {
|
||||
@if ($color == "black") {
|
||||
background-color: lighten(nth($value, 1), 20%);
|
||||
color: nth($value, 2);
|
||||
} @else if ($color == "white") {
|
||||
background-color: darken(nth($value, 1), 20%);
|
||||
color: nth($value, 2);
|
||||
} @else if ($color == "yellow") {
|
||||
background-color: darken(nth($value, 1), 10%);
|
||||
color: lighten(nth($value, 2), 5%);
|
||||
} @else if (str-index($color, "light")) {
|
||||
background-color: darken(nth($value, 1), 20%);
|
||||
color: lighten(nth($value, 2), 5%);
|
||||
} @else {
|
||||
background-color: darken(nth($value, 1), 10%);
|
||||
color: invert(nth($value, 2), 90%);
|
||||
}
|
||||
}
|
||||
@each $color, $value in $button-map {
|
||||
&.btn-#{$color} {
|
||||
background-color: nth($value, 1);
|
||||
color: nth($value, 2);
|
||||
&:hover {
|
||||
@if ($color == 'black') {
|
||||
background-color: lighten(nth($value, 1), 20%);
|
||||
color: nth($value, 2);
|
||||
} @else if ($color == 'white') {
|
||||
background-color: darken(nth($value, 1), 20%);
|
||||
color: nth($value, 2);
|
||||
} @else if ($color == 'yellow') {
|
||||
background-color: darken(nth($value, 1), 10%);
|
||||
color: lighten(nth($value, 2), 5%);
|
||||
} @else if (str-index($color, 'light')) {
|
||||
background-color: darken(nth($value, 1), 20%);
|
||||
color: lighten(nth($value, 2), 5%);
|
||||
} @else {
|
||||
background-color: darken(nth($value, 1), 10%);
|
||||
color: invert(nth($value, 2), 90%);
|
||||
}
|
||||
}
|
||||
|
||||
&-transparent {
|
||||
background: transparent;
|
||||
color: $black;
|
||||
&:hover {
|
||||
background-color: nth($value, 1);
|
||||
color: nth($value, 2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&-transparent {
|
||||
background: transparent;
|
||||
color: $black;
|
||||
&:hover {
|
||||
background-color: nth($value, 1);
|
||||
color: nth($value, 2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hidden-text-expander {
|
||||
display: block;
|
||||
display: block;
|
||||
|
||||
&.inline {
|
||||
position: relative;
|
||||
top: -1px;
|
||||
display: inline-block;
|
||||
margin-left: 5px;
|
||||
line-height: 0;
|
||||
}
|
||||
&.inline {
|
||||
position: relative;
|
||||
top: -1px;
|
||||
display: inline-block;
|
||||
margin-left: 5px;
|
||||
line-height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.hidden-text-expander a,
|
||||
.ellipsis-expander {
|
||||
display: inline-block;
|
||||
height: 12px;
|
||||
padding: 0 5px 5px;
|
||||
font-size: 12px;
|
||||
font-weight: $font-weight-bold;
|
||||
line-height: 6px;
|
||||
color: $gray-07;
|
||||
text-decoration: none;
|
||||
vertical-align: middle;
|
||||
background: lighten($gray-03, 5%);
|
||||
border: 0;
|
||||
border-radius: 1px;
|
||||
display: inline-block;
|
||||
height: 12px;
|
||||
padding: 0 5px 5px;
|
||||
font-size: 12px;
|
||||
font-weight: $font-weight-bold;
|
||||
line-height: 6px;
|
||||
color: $gray-07;
|
||||
text-decoration: none;
|
||||
vertical-align: middle;
|
||||
background: lighten($gray-03, 5%);
|
||||
border: 0;
|
||||
border-radius: 1px;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
background-color: darken($gray-03, 4%);
|
||||
}
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
background-color: darken($gray-03, 4%);
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: $white;
|
||||
background-color: $blue-04;
|
||||
}
|
||||
&:active {
|
||||
color: $white;
|
||||
background-color: $blue-04;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -11,3 +11,5 @@
|
||||
@import './app-dropdown/index.scss';
|
||||
@import './input-field/index.scss';
|
||||
@import './toast-portal/index.scss';
|
||||
@import './wallet-header/index.scss';
|
||||
@import './app-pagination/index.scss';
|
||||
|
||||
@@ -26,7 +26,17 @@ toast-portal {
|
||||
background-color: $gray-07;
|
||||
border: 1px solid $gray-08;
|
||||
}
|
||||
.toast-text {
|
||||
&.--success {
|
||||
background-color: $green-07;
|
||||
border: 1px solid $green-08;
|
||||
}
|
||||
&.--error {
|
||||
background-color: $red-07;
|
||||
border: 1px solid $red-08;
|
||||
}
|
||||
&.--warning {
|
||||
background-color: $yellow-07;
|
||||
border: 1px solid $yellow-08;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
1
src/styles/wallet-header/index.scss
Normal file
1
src/styles/wallet-header/index.scss
Normal file
@@ -0,0 +1 @@
|
||||
@import './wallet-header.scss';
|
||||
44
src/styles/wallet-header/wallet-header.scss
Normal file
44
src/styles/wallet-header/wallet-header.scss
Normal file
@@ -0,0 +1,44 @@
|
||||
wallet-header {
|
||||
.wallet-header {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
justify-items: center;
|
||||
gap: 15px 10px;
|
||||
.header-item {
|
||||
display: inline;
|
||||
grid: 1;
|
||||
width: 250px;
|
||||
height: 132px;
|
||||
background-color: $black;
|
||||
border: 1px solid $black;
|
||||
border-radius: 3px;
|
||||
.--header {
|
||||
margin: 5px auto;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
font-size: 20px;
|
||||
color: $gray-04;
|
||||
}
|
||||
.--content {
|
||||
.--balance {
|
||||
display: block;
|
||||
font-size: 30px;
|
||||
text-align: center;
|
||||
margin: 22px 0 4px 0;
|
||||
&.--positive {
|
||||
color: $green-01;
|
||||
}
|
||||
&.--negative {
|
||||
color: $red-01;
|
||||
}
|
||||
}
|
||||
.--currency {
|
||||
display: block;
|
||||
text-align: center;
|
||||
color: $gray-08;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user