aljaz/btcpayserver
1
0
Fork 0
mirror of https://github.com/aljazceru/btcpayserver.git synced 2025-12-18 22:44:29 +01:00
Code Issues Packages Projects Releases Wiki Activity

More options to Custom Amount Pay button (#948)

Browse Source 
* Start adding more options to Custom Amount Pay button

This allows you to simplify the custom amount pay button to remove the big + & - buttons along with set a min, max and step amounts. There's also an option to fit the button next to the input amount to have it more condensed(not finished)

* make fit button inline work nicely

* make currency dropdown more obvious

* fix space
This commit is contained in:
Andrew Camilleri
2019-07-31 15:58:04 +02:00
committed by Nicolas Dorier
parent 5d6c28c997
commit 89a7166c1b
3 changed files with 50 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
BTCPayServer/Models/StoreViewModels/PayButtonViewModel.cs
View File

@@ -22,6 +22,10 @@ namespace BTCPayServer.Models.StoreViewModels
public decimal Max { get; set; }
public decimal Step { get; set; }
// Custom Amount properties (ButtonType = 1)
public bool SimpleInput { get; set; }
public bool FitButtonInline { get; set; }
[Url]
public string ServerIpn { get; set; }
[Url]

23
BTCPayServer/Views/Stores/PayButton.cshtml
View File

@@ -72,7 +72,7 @@
<label for="btn-slider">Slider</label>
</div>
</div>
<div class="form-row" v-if="srvModel.buttonType == 2">
<div class="form-row" v-if="srvModel.buttonType == 1 ||srvModel.buttonType == 2">
<div class="form-group col-md-4">
<label>Min</label>
<input name="min" type="text" class="form-control"
@@ -95,6 +95,22 @@
<small class="text-danger">{{ errors.first('step') }}</small>
</div>
</div>
<div class="form-row" v-if="srvModel.buttonType == 1">
<div class="form-group col-md-6">
<label>Use a simple input style</label>
<input name="simpleInput" type="checkbox" class="form-check"
v-model="srvModel.simpleInput" v-on:change="inputChanges"
:class="{'is-invalid': errors.has('simpleInput') }">
<small class="text-danger">{{ errors.first('simpleInput') }}</small>
</div>
<div class="form-group col-md-6">
<label>Fit button inline</label>
<input name="fitButtoninline" type="checkbox" class="form-check"
v-model="srvModel.fitButtoninline" v-on:change="inputChanges"
:class="{'is-invalid': errors.has('fitButtoninline') }">
<small class="text-danger">{{ errors.first('fitButtoninline') }}</small>
</div>
</div>
</div>
<div class="col-lg-5">
<br />
@@ -208,9 +224,8 @@
});
</script>
}
<script id="template-select-currency" type="text/template">
<select onchange="document.querySelector('input[type = hidden][name = currency]').value = event.target.value" style="-webkit-appearance: none; border: 0; display: block; padding: 0 3em; margin: auto auto 5px auto; font-size: 11px; background: 0 0; cursor: pointer;"><option value="USD">USD</option><option value="GBP">GBP</option><option value="EUR">EUR</option><option value="BTC">BTC</option></select>
<select onmouseover="this.style.border='solid #ccc 1px'; this.style.padding='0px'" onmouseout="this.style.border='0'; this.style.padding='1px'" onchange="document.querySelector('input[type = hidden][name = currency]').value = event.target.value" style="border: 0; display: block; padding: 1px; margin: auto auto 5px auto; font-size: 11px; background: 0 0; cursor: pointer;"><option value="USD">USD</option><option value="GBP">GBP</option><option value="EUR">EUR</option><option value="BTC">BTC</option></select>
</script>
<script id="template-button-plus-minus" type="text/template">
@@ -218,7 +233,7 @@
</script>
<script id="template-input-price" type="text/template">
<input type="text" id="btcpay-input-price" name="price" value="PRICEVALUE" style="border: none; background-image: none; background-color: transparent; -webkit-box-shadow: none ; -moz-box-shadow: none ; -webkit-appearance: none ; width: WIDTHINPUT; text-align: center; font-size: 25px; margin: auto; border-radius: 5px; line-height: 35px; background: #fff;" oninput="event.preventDefault();isNaN(event.target.value) || event.target.value <= 0 ? document.querySelector('#btcpay-input-price').value = PRICEVALUE : event.target.value" CUSTOM />
<input type="TYPEVALUE" id="btcpay-input-price" name="price" min="MIN" max="MAX" step="STEP" value="PRICEVALUE" style="border: none; background-image: none; background-color: transparent; -webkit-box-shadow: none ; -moz-box-shadow: none ; -webkit-appearance: none ; width: WIDTHINPUT; text-align: center; font-size: 25px; margin: auto; border-radius: 5px; line-height: 35px; background: #fff;" oninput="event.preventDefault();isNaN(event.target.value) || event.target.value <= 0 ? document.querySelector('#btcpay-input-price').value = PRICEVALUE : event.target.value" CUSTOM />
</script>
<script id="template-input-slider" type="text/template">

29
BTCPayServer/wwwroot/paybutton/paybutton.js
View File

@@ -44,16 +44,25 @@ function inputChanges(event, buttonSize) {
var width = "209px";
var widthInput = "3em";
var formwidth = null;
if (srvModel.buttonSize === 0) {
width = "146px";
widthInput = "2em";
if(srvModel.fitButtoninline){
formwidth = "292px";
}
} else if (srvModel.buttonSize === 1 ) {
width = "168px";
if(srvModel.fitButtoninline){
formwidth = "336px";
}
} else if (srvModel.buttonSize === 2) {
width = "209px";
if(srvModel.fitButtoninline){
formwidth = "418px";
}
var html = '<form method="POST" action="' + esc(srvModel.urlRoot) + 'api/v1/invoices">';
}
var html = '<form method="POST" action="' + esc(srvModel.urlRoot) + 'api/v1/invoices" '+(formwidth? 'style="width:'+formwidth+'"' : '')+'>';
html += addinput("storeId", srvModel.storeId);
// Add price as hidden only if it's a fixed amount (srvModel.buttonType = 0)
@@ -61,11 +70,16 @@ function inputChanges(event, buttonSize) {
html += addinput("price", srvModel.price);
}
else if (srvModel.buttonType == 1) {
html += '\n <div style="text-align:center;display:inline;width:' + width + '">';
html += '\n <div style="text-align:center;display:inline;'+ (srvModel.fitButtoninline? 'float:left':'width:'+ width) +';">';
html += '<div>';
if(!srvModel.simpleInput) {
html += addPlusMinusButton("-");
html += addInputPrice(srvModel.price, widthInput, "");
}
html += addInputPrice(srvModel.price, widthInput, "", srvModel.simpleInput? "number": null, srvModel.min, srvModel.max, srvModel.step);
if(!srvModel.simpleInput) {
html += addPlusMinusButton("+");
}
html += '</div>';
html += addSelectCurrency();
html += '</div>';
@@ -130,12 +144,15 @@ function addPlusMinusButton(type) {
}
}
function addInputPrice(price, widthInput, customFn) {
function addInputPrice(price, widthInput, customFn, type, min, max, step) {
var input = document.getElementById('template-input-price').innerHTML.trim();
input = input.replace(/PRICEVALUE/g, price);
input = input.replace("WIDTHINPUT", widthInput);
input = input.replace("TYPEVALUE", type || "text");
input = input.replace("MIN", min || 0);
input = input.replace("MAX", max|| "none");
input = input.replace("STEP", step || "any");
if (customFn) {
return input.replace("CUSTOM", customFn);
}