FJurmanovic/wallet-web
1
0
Fork 0
mirror of https://github.com/FJurmanovic/wallet-web.git synced 2026-02-06 06:08:10 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

styled wallet headers and transaction tables

Browse Source
This commit is contained in:
Fran Jurmanović
2021-06-12 23:46:08 +02:00
parent 4df3801f42
commit d43bbfa82b
11 changed files with 340 additions and 200 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
src/components/app-pagination/AppPaginationElement.ts
View File

@@ -10,6 +10,8 @@ class AppPaginationElement extends BaseComponentElement {
@attr rpp: number; @attr rpp: number;
@attr totalItems: number; @attr totalItems: number;
@attr autoInit: string; @attr autoInit: string;
@attr tableLayout: string = 'transactions-table';
initial: boolean = false;
private customRenderItems: () => TemplateResult; private customRenderItems: () => TemplateResult;
private customRenderItem: (item: any) => TemplateResult; private customRenderItem: (item: any) => TemplateResult;
@@ -69,6 +71,8 @@ class AppPaginationElement extends BaseComponentElement {
} catch (err) { } catch (err) {
this.loader?.stop?.(); this.loader?.stop?.();
console.error(err); console.error(err);
} finally {
this.initial = true;
} }
}; };
@@ -94,20 +98,29 @@ class AppPaginationElement extends BaseComponentElement {
const renderItem = this.customRenderItem const renderItem = this.customRenderItem
? this.customRenderItem ? this.customRenderItem
: (item) => html`<tr> : (item, iter) => html`<tr>
<td>${item.description}</td> <td class="--left">${iter + 1 + rpp * (page - 1)}</td>
<td>${item.amount}</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>`; </tr>`;
const renderItems = this.customRenderItems const renderItems = this.customRenderItems
? this.customRenderItems ? this.customRenderItems
: () => { : () => {
if (this.loader && this.loader.loading) { if (this.loader && this.loader.loading && !this.initial) {
return html`<circle-loader></circle-loader>`; return html``;
} else { } else {
if (items?.length > 0) { if (items?.length > 0) {
return html`<table> return html`<table class="${this.tableLayout}">
${items?.map((item) => renderItem(item))} ${items?.map((item, iter) => renderItem(item, iter))} ${renderPagination()}
</table>`; </table>`;
} }
return html``; return html``;
@@ -118,25 +131,27 @@ class AppPaginationElement extends BaseComponentElement {
if (totalItems > items?.length) { if (totalItems > items?.length) {
const pageRange = Math.ceil(totalItems / rpp); const pageRange = Math.ceil(totalItems / rpp);
return html` return html`
<div> <div class="paginate">
<button <div class="--footer">
class="btn btn-primary btn-squared ${page <= 1 ? 'disabled' : ''}" <button
app-action="click:app-pagination#pageBack" class="btn btn-primary btn-squared ${page <= 1 ? 'disabled' : ''}"
> app-action="click:app-pagination#pageBack"
Prev >
</button> Prev
<button </button>
class="btn btn-primary btn-squared ${page >= pageRange ? 'disabled' : ''}" <button
app-action="click:app-pagination#pageNext" class="btn btn-primary btn-squared ${page >= pageRange ? 'disabled' : ''}"
> app-action="click:app-pagination#pageNext"
Next >
</button> Next
</button>
</div>
</div> </div>
`; `;
} }
}; };
return html`<div>${renderItems()} ${renderPagination()}</div>`; return html`<div class="app-pagination">${renderItems()}</div>`;
}; };
} }

19
src/components/wallet-header/WalletHeaderElement.ts
View File

@@ -11,6 +11,7 @@ class WalletHeaderElement extends BaseComponentElement {
@attr nextMonth: number; @attr nextMonth: number;
@attr currency: string; @attr currency: string;
@attr custom: string; @attr custom: string;
initial: boolean = false;
fetchFunc: Function = () => {}; fetchFunc: Function = () => {};
constructor() { constructor() {
@@ -38,20 +39,26 @@ class WalletHeaderElement extends BaseComponentElement {
} catch (err) { } catch (err) {
this.loader?.stop?.(); this.loader?.stop?.();
console.error(err); console.error(err);
} finally {
this.initial = true;
} }
}; };
render = (): TemplateResult => { render = (): TemplateResult => {
const { currentBalance, currency, lastMonth, nextMonth } = this; const { currentBalance, currency, lastMonth, nextMonth } = this;
const renderItem = (header, balance, currency) => html`<div> const renderItem = (header, balance, currency) => html`<div class="header-item">
<div>${header}</div> <div class="--header">${header}</div>
<div><span>${balance}</span><span>${currency}</span></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>`; </div>`;
const renderHeader = () => { const renderHeader = () => {
if (this.loader && this.loader.loading) { if (this.loader && this.loader.loading && !this.initial) {
return html`<circle-loader></circle-loader>`; return html``;
} }
return html`${renderItem('Last Month', lastMonth, currency)}${renderItem( return html`${renderItem('Last Month', lastMonth, currency)}${renderItem(
'Current Balance', 'Current Balance',
@@ -60,7 +67,7 @@ class WalletHeaderElement extends BaseComponentElement {
)}${renderItem('Next Month', nextMonth, currency)}`; )}${renderItem('Next Month', nextMonth, currency)}`;
}; };
return html`<div>${renderHeader()}</div>`; return html`<div class="wallet-header">${renderHeader()}</div>`;
}; };
} }

1
src/pages/transaction-create/TransactionCreateElement.ts
View File

@@ -65,6 +65,7 @@ class TransactionCreateElement extends BasePageElement {
if (response?.id) { if (response?.id) {
this.appMain.triggerWalletUpdate(); this.appMain.triggerWalletUpdate();
this.appMain.pushToast('success', 'Transaction created successfully!');
this.routerService.goTo('/history', { this.routerService.goTo('/history', {
walletId: response.id, walletId: response.id,
}); });

1
src/pages/wallet-create/WalletCreateElement.ts
View File

@@ -48,6 +48,7 @@ class WalletCreateElement extends BasePageElement {
if (response?.id) { if (response?.id) {
this.appMain.triggerWalletUpdate(); this.appMain.triggerWalletUpdate();
this.appMain.pushToast('success', 'Wallet created successfully!');
this.routerService.goTo('/wallet/:walletId', { this.routerService.goTo('/wallet/:walletId', {
walletId: response.id, walletId: response.id,
}); });

57
src/styles/app-pagination/app-pagination.scss Normal file
View 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
View File

@@ -0,0 +1 @@
@import './app-pagination.scss';

345
src/styles/core/button.scss
View File

@@ -1,207 +1,208 @@
.btn { .btn {
display: inline-block; display: inline-block;
padding: 6px 12px; padding: 6px 12px;
text-align: center; text-align: center;
vertical-align: middle; vertical-align: middle;
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
background-color: transparent; background-color: transparent;
border: $border-width $border-style transparent; border: $border-width $border-style transparent;
font-size: 14px; font-size: 14px;
font-weight: $font-weight-semibold; font-weight: $font-weight-semibold;
border-radius: 0.25em; border-radius: 0.25em;
appearance: none; appearance: none;
line-height: 20px; line-height: 20px;
&:hover { &:hover {
text-decoration: none; text-decoration: none;
background-repeat: repeat-x; background-repeat: repeat-x;
} }
&:focus { &:focus {
outline: 0; outline: 0;
} }
&:disabled, &:disabled,
&.disabled, &.disabled,
&[aria-disabled="true"] { &[aria-disabled='true'] {
cursor: default; cursor: default;
background-position: 0 0; background-position: 0 0;
} background-color: $gray-08 !important;
}
&:active, &:active,
&.selected, &.selected,
&[aria-selected="true"] { &[aria-selected='true'] {
background-image: none; background-image: none;
} }
&.btn-squared { &.btn-squared {
border-radius: 0; border-radius: 0;
} }
&.btn-rounder { &.btn-rounder {
border-radius: 2em; border-radius: 2em;
} }
@each $color, $value in $button-map { @each $color, $value in $button-map {
&.btn-#{$color} { &.btn-#{$color} {
background-color: nth($value, 1); background-color: nth($value, 1);
color: nth($value, 2); color: nth($value, 2);
&:hover { &:hover {
background-color: darken(nth($value, 1), 10%); background-color: darken(nth($value, 1), 10%);
color: lighten(nth($value, 2), 5%); color: lighten(nth($value, 2), 5%);
} }
&-transparent { &-transparent {
background: transparent; background: transparent;
color: $black; color: $black;
&:hover { &:hover {
background-color: nth($value, 1); background-color: nth($value, 1);
color: nth($value, 2); color: nth($value, 2);
} }
} }
} }
} }
&.btn-link { &.btn-link {
color: $blue-07; color: $blue-07;
text-decoration: none; text-decoration: none;
&:hover { &:hover {
text-decoration: underline; text-decoration: underline;
} }
} }
&.btn-sm { &.btn-sm {
padding: 3px 10px; padding: 3px 10px;
font-size: 12px; font-size: 12px;
line-height: 20px; line-height: 20px;
} }
&.btn-lg { &.btn-lg {
padding: 14px 1.25em; padding: 14px 1.25em;
font-size: inherit; font-size: inherit;
border-radius: 6px; border-radius: 6px;
} }
&.btn-block { &.btn-block {
display: block; display: block;
width: 100%; width: 100%;
text-align: center; text-align: center;
} }
} }
.btn-icon { .btn-icon {
display: inline-block; display: inline-block;
padding: 5px; padding: 5px;
margin-left: 5px; margin-left: 5px;
line-height: 2px; line-height: 2px;
color: gray-04; color: gray-04;
vertical-align: middle; vertical-align: middle;
background: transparent; background: transparent;
border: $border-width $border-style transparent; border: $border-width $border-style transparent;
&:hover { &:hover {
color: $blue-01; color: $blue-01;
} }
&:disabled, &:disabled,
&[aria-disabled="true"] { &[aria-disabled='true'] {
color: $gray-08; color: $gray-08;
cursor: default; cursor: default;
&:hover { &:hover {
color: $gray-08; color: $gray-08;
} }
} }
&-round { &-round {
text-decoration: none; text-decoration: none;
outline: none; outline: none;
cursor: pointer; cursor: pointer;
background: transparent; background: transparent;
border-radius: 100%; border-radius: 100%;
overflow: none; overflow: none;
text-align: center; text-align: center;
padding: 5px; padding: 5px;
border: $border-width $border-style transparent; border: $border-width $border-style transparent;
span, span,
div { div {
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
} }
@each $color, $value in $button-map { @each $color, $value in $button-map {
&.btn-#{$color} { &.btn-#{$color} {
background-color: nth($value, 1); background-color: nth($value, 1);
color: nth($value, 2); color: nth($value, 2);
&:hover { &:hover {
@if ($color == "black") { @if ($color == 'black') {
background-color: lighten(nth($value, 1), 20%); background-color: lighten(nth($value, 1), 20%);
color: nth($value, 2); color: nth($value, 2);
} @else if ($color == "white") { } @else if ($color == 'white') {
background-color: darken(nth($value, 1), 20%); background-color: darken(nth($value, 1), 20%);
color: nth($value, 2); color: nth($value, 2);
} @else if ($color == "yellow") { } @else if ($color == 'yellow') {
background-color: darken(nth($value, 1), 10%); background-color: darken(nth($value, 1), 10%);
color: lighten(nth($value, 2), 5%); color: lighten(nth($value, 2), 5%);
} @else if (str-index($color, "light")) { } @else if (str-index($color, 'light')) {
background-color: darken(nth($value, 1), 20%); background-color: darken(nth($value, 1), 20%);
color: lighten(nth($value, 2), 5%); color: lighten(nth($value, 2), 5%);
} @else { } @else {
background-color: darken(nth($value, 1), 10%); background-color: darken(nth($value, 1), 10%);
color: invert(nth($value, 2), 90%); color: invert(nth($value, 2), 90%);
} }
} }
&-transparent { &-transparent {
background: transparent; background: transparent;
color: $black; color: $black;
&:hover { &:hover {
background-color: nth($value, 1); background-color: nth($value, 1);
color: nth($value, 2); color: nth($value, 2);
} }
} }
} }
} }
} }
} }
.hidden-text-expander { .hidden-text-expander {
display: block; display: block;
&.inline { &.inline {
position: relative; position: relative;
top: -1px; top: -1px;
display: inline-block; display: inline-block;
margin-left: 5px; margin-left: 5px;
line-height: 0; line-height: 0;
} }
} }
.hidden-text-expander a, .hidden-text-expander a,
.ellipsis-expander { .ellipsis-expander {
display: inline-block; display: inline-block;
height: 12px; height: 12px;
padding: 0 5px 5px; padding: 0 5px 5px;
font-size: 12px; font-size: 12px;
font-weight: $font-weight-bold; font-weight: $font-weight-bold;
line-height: 6px; line-height: 6px;
color: $gray-07; color: $gray-07;
text-decoration: none; text-decoration: none;
vertical-align: middle; vertical-align: middle;
background: lighten($gray-03, 5%); background: lighten($gray-03, 5%);
border: 0; border: 0;
border-radius: 1px; border-radius: 1px;
&:hover { &:hover {
text-decoration: none; text-decoration: none;
background-color: darken($gray-03, 4%); background-color: darken($gray-03, 4%);
} }
&:active { &:active {
color: $white; color: $white;
background-color: $blue-04; background-color: $blue-04;
} }
} }

2
src/styles/main.scss
View File

@@ -11,3 +11,5 @@
@import './app-dropdown/index.scss'; @import './app-dropdown/index.scss';
@import './input-field/index.scss'; @import './input-field/index.scss';
@import './toast-portal/index.scss'; @import './toast-portal/index.scss';
@import './wallet-header/index.scss';
@import './app-pagination/index.scss';

12
src/styles/toast-portal/toast-portal.scss
View File

@@ -26,7 +26,17 @@ toast-portal {
background-color: $gray-07; background-color: $gray-07;
border: 1px solid $gray-08; 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
View File

@@ -0,0 +1 @@
@import './wallet-header.scss';

44
src/styles/wallet-header/wallet-header.scss Normal file
View 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;
}
}
}
}
}