From 03227b8b0f18f890688f3102139f557e6364d8cc Mon Sep 17 00:00:00 2001 From: Mondei1 Date: Sun, 24 Jan 2021 19:58:02 +0100 Subject: [PATCH] Some new animations in cart Long addresses will be capped (copy will come in next commit) --- src/app/backend.service.ts | 16 ++-- src/app/cart/cart.component.css | 19 ++++- src/app/cart/cart.component.html | 4 +- src/app/header/header.component.ts | 4 +- src/app/payment/payment.component.css | 12 ++- src/app/payment/payment.component.html | 2 +- src/app/payment/payment.component.ts | 13 ++++ src/assets/Monero.svg | 103 +++++++++++++++++++++---- 8 files changed, 144 insertions(+), 29 deletions(-) diff --git a/src/app/backend.service.ts b/src/app/backend.service.ts index 44eb161..da6d496 100644 --- a/src/app/backend.service.ts +++ b/src/app/backend.service.ts @@ -269,9 +269,13 @@ export class BackendService { * @returns The price to pay by cryptocurrency; */ getAmount(): string | undefined { - return this.invoice?.paymentMethods.find(item => { + const amount = this.invoice?.paymentMethods.find(item => { return item.method === this.invoice.paymentMethod; - })?.amount.toFixed(8); + })?.amount.toString(); + + if (amount === undefined) { return '0.00'; } + + return amount; } /** @@ -279,12 +283,12 @@ export class BackendService { * @param prodcut Index of product in cart */ calculateCryptoPrice(productNr: number): number { - if (this.invoice.cart === undefined) return 0; - if (this.invoice.paymentMethod === undefined) return 0; + if (this.invoice.cart === undefined) { return 0; } + if (this.invoice.paymentMethod === undefined) { return 0; } const product = this.invoice.cart[productNr]; - const exRate = this.invoice.paymentMethods.find(method => { return method.method === this.invoice.paymentMethod })?.exRate; - if (exRate === undefined) return 0; + const exRate = this.invoice.paymentMethods.find(method => method.method === this.invoice.paymentMethod)?.exRate; + if (exRate === undefined) { return 0; } return product.quantity * product.price / exRate; } diff --git a/src/app/cart/cart.component.css b/src/app/cart/cart.component.css index d0d0a5b..39e4b99 100644 --- a/src/app/cart/cart.component.css +++ b/src/app/cart/cart.component.css @@ -17,24 +17,39 @@ height: 359px; } -.cart ul li { +.item { display: grid; padding: 1rem; grid-template-columns: 64px 1fr auto; grid-column-gap: 1rem; border-radius: 12px; + transition: .2s !important; } -.cart ul li:nth-child(even) { +.item:hover { + padding-top: 1.5rem; + padding-bottom: 1.5rem; +} + +.item:hover img { + transform: rotate(5deg); +} + +.item:nth-child(even) { background-color: #292929; } +.item:nth-child(even):hover img { + transform: rotate(-5deg); +} + .image { height: 64px; width: 64px; padding: 0; margin: 0; border-radius: 8px; + transition: .25s ease-out; } .name { diff --git a/src/app/cart/cart.component.html b/src/app/cart/cart.component.html index 6d8f3cb..551ec38 100644 --- a/src/app/cart/cart.component.html +++ b/src/app/cart/cart.component.html @@ -1,6 +1,6 @@ -
+
    -
  • +
  • {{ item.name }} x{{ item.quantity }}
    {{ (item.price * item.quantity).toFixed(2) }} {{ this.backend.currencyPrefix() }}
    diff --git a/src/app/header/header.component.ts b/src/app/header/header.component.ts index 0cb15d2..df96bde 100644 --- a/src/app/header/header.component.ts +++ b/src/app/header/header.component.ts @@ -21,7 +21,7 @@ export class HeaderComponent implements OnInit { ngOnInit(): void { } - cancel() { + cancel(): void { if (!this.startCancelling) { this.startCancelling = true; const animation = setInterval(() => { @@ -31,7 +31,7 @@ export class HeaderComponent implements OnInit { margin-left: 16px; transform: scale(1.1); `; - + if (this.cancelProgress > 100) { clearInterval(animation); this.startCancelling = false; diff --git a/src/app/payment/payment.component.css b/src/app/payment/payment.component.css index e75e4df..72779d7 100644 --- a/src/app/payment/payment.component.css +++ b/src/app/payment/payment.component.css @@ -6,6 +6,7 @@ background-color: #1c1c1c; border-radius: 8px; transform: translateY(-8px); + overflow: hidden; } /* Apply effect when invoice expired */ @@ -91,15 +92,20 @@ /* Data */ .main .data { display: grid; - grid-template-columns: 1fr 50px; - grid-template-rows: 1fr 4rem 4rem 4rem 1fr; + grid-template-columns: 1fr; + grid-template-rows: 1fr auto auto auto 1fr; + row-gap: 10px; + width: 500px; } -.main #target { + +#target { grid-row: 2; } + #amount { grid-row: 3; } + #status { grid-row: 4; } diff --git a/src/app/payment/payment.component.html b/src/app/payment/payment.component.html index caaf04c..d23141c 100644 --- a/src/app/payment/payment.component.html +++ b/src/app/payment/payment.component.html @@ -39,7 +39,7 @@
    Send to -

    {{ this.backend.invoice?.receiveAddress }}

    +

    {{ getReceiveAddress() }}

     Amount

    {{ this.backend.getAmount() }} {{ this.backend.invoice.paymentMethod }} | {{ this.backend.invoice.totalPrice!.toFixed(2) }} {{ this.backend.currencyPrefix() }}

    diff --git a/src/app/payment/payment.component.ts b/src/app/payment/payment.component.ts index dec0c21..0f313b0 100644 --- a/src/app/payment/payment.component.ts +++ b/src/app/payment/payment.component.ts @@ -85,6 +85,19 @@ export class PaymentComponent implements OnInit { this.backend.setPaymentMethod(coin); } + getReceiveAddress(): string { + const address = this.backend.invoice.receiveAddress; + if (address === undefined) { + return ''; + } + + if (address.length > 35) { + return address.slice(0, -(address.length - 35)) + '...'; + } + + return address; + } + async get(): Promise { const res = await this.backend.setInvoice(this.paymentSelector); this.status = this.backend.getStatus(); diff --git a/src/assets/Monero.svg b/src/assets/Monero.svg index 179cda8..2b638e9 100644 --- a/src/assets/Monero.svg +++ b/src/assets/Monero.svg @@ -1,18 +1,95 @@ - - - -