Skip to content

Commit 011526e

Browse files
blackcoffeexbtblackcoffeexbt
committed
Chart tweaks
1 parent d5ba4f5 commit 011526e

2 files changed

Lines changed: 40 additions & 25 deletions

File tree

‎static/js/index.js‎

Lines changed: 30 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -314,7 +314,7 @@ window.app = Vue.createApp({
314314

315315
// End the line before the wallet icon (30px is wallet icon radius)
316316
const lineEndY = targetY - 45
317-
this.drawFlowingLine(svg, sourceX, sourceY + 40, itemPos.x, lineEndY, lineThickness, item.color || '#4ade80')
317+
this.drawFlowingLine(svg, sourceX, sourceY + 35, itemPos.x, lineEndY, lineThickness, item.color || '#4ade80')
318318
}
319319
})
320320

@@ -327,12 +327,12 @@ window.app = Vue.createApp({
327327

328328
// End the line before the wallet icon (30px is wallet icon radius)
329329
const lineEndY = targetY - 45
330-
this.drawFlowingLine(svg, sourceX, sourceY + 40, itemPos.x, lineEndY, lineThickness, item.color || '#4ade80')
330+
this.drawFlowingLine(svg, sourceX, sourceY + 35, itemPos.x, lineEndY, lineThickness, item.color || '#4ade80')
331331
}
332332
})
333333

334-
// Draw source wallet icon
335-
this.drawWalletIcon(svg, sourceX, sourceY, 'source', this.remainingPercent)
334+
// Draw source Bitcoin logo
335+
this.drawBitcoinLogo(svg, sourceX, sourceY)
336336

337337
// Draw bottom row wallet icons
338338
bottomRowItems.forEach((item, index) => {
@@ -612,6 +612,32 @@ window.app = Vue.createApp({
612612
}
613613
},
614614

615+
drawBitcoinLogo(svg, x, y) {
616+
// Create Bitcoin logo using SVG
617+
const logoGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g')
618+
619+
const bitcoinPath = document.createElementNS('http://www.w3.org/2000/svg', 'path')
620+
bitcoinPath.setAttribute('d', 'M39.0674606,19.3675957 L40.5054606,13.5995957 L36.9944606,12.7245957 L35.5944606,18.3405957 C34.6714606,18.1105957 33.7234606,17.8935957 32.7814606,17.6785957 L34.1914606,12.0255957 L30.6824606,11.1505957 L29.2434606,16.9165957 C28.4794606,16.7425957 27.7294606,16.5705957 27.0014606,16.3895957 L27.0054606,16.3715957 L22.1634606,15.1625957 L21.2294606,18.9125957 C21.2294606,18.9125957 23.8344606,19.5095957 23.7794606,19.5465957 C25.2014606,19.9015957 25.4584606,20.8425957 25.4154606,21.5885957 L23.7774606,28.1595957 L23.7714606,28.1845957 L21.4754606,37.3895957 C21.3014606,37.8215957 20.8604606,38.4695957 19.8664606,38.2235957 C19.9014606,38.2745957 17.3144606,37.5865957 17.3144606,37.5865957 L15.5714606,41.6055957 L20.1404606,42.7445957 C20.9904606,42.9575957 21.8234606,43.1805957 22.6434606,43.3905957 L21.1904606,49.2245957 L24.6974606,50.0995957 L26.1364606,44.3275957 C27.0944606,44.5875957 28.0244606,44.8275957 28.9344606,45.0535957 L27.5004606,50.7985957 L31.0114606,51.6735957 L32.4644606,45.8505957 C38.4514606,46.9835957 42.9534606,46.5265957 44.8484606,41.1115957 C46.3754606,36.7515957 44.7724606,34.2365957 41.6224606,32.5965957 C43.9164606,32.0675957 45.6444606,30.5585957 46.1054606,27.4415957 C46.7424606,23.1835957 43.5004606,20.8945957 39.0674606,19.3675957 Z M38.0834606,38.6905957 C36.9984606,43.0505957 29.6574606,40.6935957 27.2774606,40.1025957 L29.2054606,32.3735957 C31.5854606,32.9675957 39.2174606,34.1435957 38.0834606,38.6905957 Z M39.1694606,27.3785957 C38.1794606,31.3445957 32.0694606,29.3295957 30.0874606,28.8355957 L31.8354606,21.8255957 C33.8174606,22.3195957 40.2004606,23.2415957 39.1694606,27.3785957 Z')
621+
bitcoinPath.setAttribute('fill', '#f7931a') // Orange color for Bitcoin
622+
bitcoinPath.setAttribute('transform', `translate(${x - 45}, ${y - 50}) scale(1.4)`) // Scale and position the logo
623+
624+
logoGroup.appendChild(bitcoinPath)
625+
svg.appendChild(logoGroup)
626+
627+
// Add "Incoming Payment" text above the Bitcoin logo
628+
const incomingText = document.createElementNS('http://www.w3.org/2000/svg', 'text')
629+
incomingText.setAttribute('x', x)
630+
incomingText.setAttribute('y', y - 50)
631+
incomingText.setAttribute('text-anchor', 'middle')
632+
incomingText.setAttribute('fill', '#f7931a')
633+
incomingText.setAttribute('font-family', 'Arial, sans-serif')
634+
incomingText.setAttribute('font-size', '16px')
635+
incomingText.setAttribute('font-weight', 'bold')
636+
incomingText.textContent = 'Incoming Payment'
637+
638+
svg.appendChild(incomingText)
639+
},
640+
615641
addPercentageLabel(svg, x, y, percentage, color) {
616642
// Create background circle for percentage
617643
const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle')

‎templates/splitpayments/index.html‎

Lines changed: 10 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -179,7 +179,7 @@
179179
</div>
180180
</q-banner>
181181

182-
<q-form class="q-gutter-md">
182+
<q-form>
183183
<div
184184
v-for="(target, t) in targets"
185185
:key="t"
@@ -192,12 +192,13 @@
192192
<span class="split-header-text">Split Recipient {% raw %}{{ t + 1 }}{% endraw %} of {% raw %}{{ targets.length }}{% endraw %}</span>
193193
<q-btn
194194
@click="clearTarget(t)"
195-
size="sm"
195+
size="md"
196196
icon="close"
197-
color="grey-6"
198-
flat
199-
round
197+
color="red"
198+
text-color="white"
199+
negative
200200
class="remove-btn"
201+
label="Remove this recipient"
201202
>
202203
<q-tooltip>Remove this recipient</q-tooltip>
203204
</q-btn>
@@ -356,7 +357,7 @@
356357

357358
<!-- Detailed Target List -->
358359
<div class="detailed-targets-container q-mb-lg">
359-
<div class="section-title q-mb-md">Split Payment Summary</div>
360+
<div class="text-h6 q-mb-md text-weight-medium">Split Payment Summary</div>
360361
<div class="targets-list">
361362
<div
362363
v-for="(target, index) in targets"
@@ -423,8 +424,9 @@
423424
</template>
424425
<div class="text-weight-medium">Important:</div>
425426
<div class="q-mt-xs">
426-
• Splits totaling 100% may fail due to Lightning routing fees. Please keep this in mind when setting up splits for a wallet where small payments are common.
427-
• Each payment to this wallet will be automatically split when it arrives
427+
<p>• Splits totaling 100% may fail due to Lightning routing fees. Please keep this in mind when setting up splits for a wallet where small payments are common.
428+
<br>
429+
• Each payment to this wallet will be automatically split when it arrives</p>
428430
</div>
429431
</q-banner>
430432

@@ -855,7 +857,6 @@ <h6 class="text-subtitle1 q-my-none">
855857
.summary-card-title,
856858
.summary-card-main-text,
857859
.summary-card-sub-text,
858-
.section-title,
859860
.target-name,
860861
.target-wallet {
861862
font-family: Roboto, "-apple-system", "Helvetica Neue", Helvetica, Arial, sans-serif;
@@ -913,13 +914,6 @@ <h6 class="text-subtitle1 q-my-none">
913914
margin-bottom: 24px;
914915
}
915916

916-
.section-title {
917-
font-size: 1.125rem;
918-
font-weight: 600;
919-
color: #374151;
920-
margin-bottom: 16px;
921-
}
922-
923917
.targets-list {
924918
display: flex;
925919
flex-direction: column;
@@ -1010,11 +1004,6 @@ <h6 class="text-subtitle1 q-my-none">
10101004
font-size: 0.75rem;
10111005
}
10121006

1013-
.section-title {
1014-
font-size: 1rem;
1015-
margin-bottom: 12px;
1016-
}
1017-
10181007
.targets-list {
10191008
gap: 8px;
10201009
}

0 commit comments

Comments
 (0)