Clipboard icons have been added
without functionality yet
This commit is contained in:
17
package-lock.json
generated
17
package-lock.json
generated
@@ -7535,6 +7535,15 @@
|
||||
"tslib": "^2.0.0"
|
||||
}
|
||||
},
|
||||
"ngx-clipboard": {
|
||||
"version": "14.0.1",
|
||||
"resolved": "https://registry.npmjs.org/ngx-clipboard/-/ngx-clipboard-14.0.1.tgz",
|
||||
"integrity": "sha512-y6fDrvAso1cbM+VvHgB2kJ3dcQ/EBPol33nLaqqKB1jNO/Kd3l17EHdXNW/oKY0wUKCHk7ZCuiinREgUHEYfXg==",
|
||||
"requires": {
|
||||
"ngx-window-token": ">=4.0.0",
|
||||
"tslib": "^2.0.0"
|
||||
}
|
||||
},
|
||||
"ngx-socket-io": {
|
||||
"version": "3.2.0",
|
||||
"resolved": "https://registry.npmjs.org/ngx-socket-io/-/ngx-socket-io-3.2.0.tgz",
|
||||
@@ -7555,6 +7564,14 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"ngx-window-token": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/ngx-window-token/-/ngx-window-token-4.0.0.tgz",
|
||||
"integrity": "sha512-z6tS3UQoKULdABWHpE57l1xtoxFFzlwLe1n+nu9+xzCZUdSvkGqhb5dSje4NOVhA6mMOqzR4SctSBZARwqPPuQ==",
|
||||
"requires": {
|
||||
"tslib": "^2.0.0"
|
||||
}
|
||||
},
|
||||
"nice-try": {
|
||||
"version": "1.0.5",
|
||||
"resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz",
|
||||
|
||||
@@ -21,6 +21,7 @@
|
||||
"@angular/router": "~11.0.5",
|
||||
"angularx-qrcode": "^10.0.11",
|
||||
"ng-push-ivy": "^1.0.7",
|
||||
"ngx-clipboard": "^14.0.1",
|
||||
"ngx-socket-io": "^3.2.0",
|
||||
"rxjs": "~6.6.0",
|
||||
"tslib": "^2.0.0",
|
||||
|
||||
@@ -25,7 +25,7 @@
|
||||
|
||||
.smaller {
|
||||
min-width: 200px;
|
||||
width: 40vw !important;
|
||||
width: 450px !important;
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
|
||||
@@ -28,10 +28,6 @@
|
||||
to { filter: blur(10px) }
|
||||
}
|
||||
|
||||
.request {
|
||||
transform: translateY(-40px);
|
||||
}
|
||||
|
||||
.loader {
|
||||
position: absolute;
|
||||
display: inline;
|
||||
@@ -42,7 +38,7 @@
|
||||
.main {
|
||||
display: grid;
|
||||
height: 400px;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-columns: .8fr 1fr;
|
||||
}
|
||||
|
||||
.qr {
|
||||
@@ -92,13 +88,50 @@
|
||||
/* Data */
|
||||
.main .data {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-columns: 30px 1fr;
|
||||
grid-template-rows: 1fr auto auto auto 1fr;
|
||||
column-gap: 10px;
|
||||
row-gap: 10px;
|
||||
width: 500px;
|
||||
}
|
||||
|
||||
.clipboard {
|
||||
cursor: pointer;
|
||||
margin: auto auto;
|
||||
grid-column: 1;
|
||||
}
|
||||
|
||||
.clipboard-target {
|
||||
grid-row: 2;
|
||||
}
|
||||
.clipboard-amount {
|
||||
grid-row: 3;
|
||||
}
|
||||
/*.clipboard:hover {
|
||||
animation: clipboard-clicked .5s linear;
|
||||
}
|
||||
|
||||
@keyframes clipboard-clicked {
|
||||
30% {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.2) rotate(5deg);
|
||||
}
|
||||
70% {
|
||||
transform: scale(1.2) rotate(-5deg);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}*/
|
||||
|
||||
#target, #amount, #status {
|
||||
grid-column: 2;
|
||||
}
|
||||
|
||||
#target {
|
||||
user-select: none;
|
||||
grid-row: 2;
|
||||
}
|
||||
|
||||
@@ -135,8 +168,7 @@
|
||||
#list {
|
||||
overflow-y: scroll;
|
||||
scroll-behavior: smooth;
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
height: 315px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<!--
|
||||
Select payment method
|
||||
-->
|
||||
<div class="payment request" xyz="stagger-2 fade-100% down-1" *ngIf="this.backend.isInvoiceRequested()">
|
||||
<div class="payment" xyz="stagger-2 fade-100% down-1" *ngIf="this.backend.isInvoiceRequested()">
|
||||
<h3 id="title">Choose your<br>payment method</h3>
|
||||
<p id="price">{{ this.backend.invoice.totalPrice!.toFixed(2) }} {{ this.backend.currencyPrefix() }}</p>
|
||||
|
||||
@@ -38,28 +38,22 @@
|
||||
|
||||
<div class="data">
|
||||
<!-- Payment data -->
|
||||
<span id="target" [ngClass]="{'xyz-in': !this.state.showCart.value, 'xyz-out': this.state.showCart.value}">Send to
|
||||
<img class="clipboard clipboard-target" src="assets/clipboard.svg" [ngClass]="{'xyz-in': !this.state.showCart.value, 'xyz-out': this.state.showCart.value}">
|
||||
<span id="target" [ngClass]="{'xyz-in': !this.state.showCart.value, 'xyz-out': this.state.showCart.value}">
|
||||
Send to
|
||||
<h3>{{ getReceiveAddress() }}</h3>
|
||||
</span>
|
||||
|
||||
<img class="clipboard clipboard-amount" src="assets/clipboard.svg" [ngClass]="{'xyz-in': !this.state.showCart.value, 'xyz-out': this.state.showCart.value}">
|
||||
<span id="amount" [ngClass]="{'xyz-in': !this.state.showCart.value, 'xyz-out': this.state.showCart.value}">Amount
|
||||
<h3>{{ this.backend.getAmount() }} {{ this.backend.invoice.paymentMethod }} <span class="price"> | {{ this.backend.invoice.totalPrice!.toFixed(2) }} {{ this.backend.currencyPrefix() }}</span></h3>
|
||||
</span>
|
||||
|
||||
<span id="status" [ngClass]="{'xyz-in': !this.state.showCart.value, 'xyz-out': this.state.showCart.value}">Status
|
||||
<h3>
|
||||
{{ status }}
|
||||
<div class="loader" *ngIf="this.status === 'Unconfirmed'">
|
||||
<svg version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
width="32px" height="32px" viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve">
|
||||
<path fill="#f7a12f" d="M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z">
|
||||
<animateTransform attributeType="xml"
|
||||
attributeName="transform"
|
||||
type="rotate"
|
||||
from="0 25 25"
|
||||
to="360 25 25"
|
||||
dur="1s"
|
||||
repeatCount="indefinite"/>
|
||||
</path>
|
||||
</svg>
|
||||
<img src="assets/loader.svg">
|
||||
</div>
|
||||
</h3>
|
||||
<small *ngIf="status === 'Unconfirmed'">Confirmations: {{ this.backend.confirmations }}</small>
|
||||
|
||||
5
src/assets/clipboard.svg
Normal file
5
src/assets/clipboard.svg
Normal file
@@ -0,0 +1,5 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-clipboard" width="30" height="30" viewBox="0 0 24 24" stroke-width="1.5" stroke="#fff" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
|
||||
<path d="M9 5h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-12a2 2 0 0 0 -2 -2h-2" />
|
||||
<rect x="9" y="3" width="6" height="4" rx="2" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 430 B |
5
src/assets/loader.svg
Normal file
5
src/assets/loader.svg
Normal file
@@ -0,0 +1,5 @@
|
||||
<svg version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="32px" height="32px" viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve">
|
||||
<path fill="#f7a12f" d="M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z">
|
||||
<animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="1s" repeatCount="indefinite" />
|
||||
</path>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 599 B |
Reference in New Issue
Block a user