mirrors/btcpayserver
1
0
Fork 0
mirror of https://github.com/btcpayserver/btcpayserver.git synced 2025-02-23 06:35:13 +01:00
Code Issues Projects Releases Packages Wiki Activity

Add text customization for pay button (#1346)

Browse source 
* Add text customization for pay button

https://i.imgur.com/nFxscOZ.gifv

* pr changes
This commit is contained in:
Andrew Camilleri 2020-02-24 13:29:29 +01:00 • committed by GitHub
parent ee524e36c5
commit 1d61db4758
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 61 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
BTCPayServer/Models/StoreViewModels/PayButtonViewModel.cs
View file

@ -40,5 +40,6 @@ namespace BTCPayServer.Models.StoreViewModels
public string UrlRoot { get; set; }
public List<string> CurrencyDropdown { get; set; }
public string PayButtonImageUrl { get; set; }
public string PayButtonText { get; set; }
}
}

43
BTCPayServer/Views/Stores/PayButton.cshtml
View file

@ -47,15 +47,26 @@
<br />
<div class="row">
<div class="col-lg-7">
<div class="form-group">
<label>
<input type="checkbox" v-model="buttonInlineTextMode" v-on:change="inputChanges" class="form-check-inline"/> Customize text in button
</label>
</div>
<div class="form-group" v-show="buttonInlineTextMode">
<label>Pay Button Text</label>
<input name="payButtonText" type="text" class="form-control" id="inputAddress"
v-model="srvModel.payButtonText" v-on:change="inputChanges">
</div>
<div class="form-group">
<label>Pay Button Image Url</label>
<input name="payButtonImageUrl" type="text" class="form-control" id="inputAddress"
v-model="srvModel.payButtonImageUrl" v-on:change="inputChanges"
v-validate="'required|url'" :class="{'is-invalid': errors.has('payButtonImageUrl') }">
v-validate="{ required: this.imageUrlRequired, url: {require_tld:false} }"
:class="{'is-invalid': errors.has('payButtonImageUrl') }">
<small class="text-danger">{{ errors.first('payButtonImageUrl') }}</small>
</div>
<div class="form-group">
<label>Button Size</label>
<label>Image Size</label>
<div style="vertical-align:top; font-size:12px; display:flex;">
<button class="btn text-nowrap" style="width:146px;height:40px;margin-right:40px;"
v-on:click="inputChanges($event, 0)" v-bind:class="{'btn-primary': (srvModel.buttonSize == 0) }">
@ -74,15 +85,15 @@
<div class="form-group">
<label>Button Type</label>
<div>
<input type="radio" name="button-type" id="btn-fixed" value="0" v-model="srvModel.buttonType" v-on:change="inputChanges" checked />
<input type="radio" name="button-type" id="btn-fixed" value="0" v-model="srvModel.buttonType" v-on:change="inputChanges" checked/>
<label for="btn-fixed">Fixed amount</label>
</div>
<div>
<input type="radio" name="button-type" id="btn-custom" value="1" v-model="srvModel.buttonType" v-on:change="inputChanges" />
<input type="radio" name="button-type" id="btn-custom" value="1" v-model="srvModel.buttonType" v-on:change="inputChanges"/>
<label for="btn-custom">Custom amount</label>
</div>
<div>
<input type="radio" name="button-type" id="btn-slider" value="2" v-model="srvModel.buttonType" v-on:change="inputChanges" />
<input type="radio" name="button-type" id="btn-slider" value="2" v-model="srvModel.buttonType" v-on:change="inputChanges"/>
<label for="btn-slider">Slider</label>
</div>
</div>
@ -232,12 +243,32 @@
var payButtonCtrl = new Vue({
el: '#payButtonCtrl',
data: {
srvModel: srvModel
srvModel: srvModel,
originalButtonImageUrl: srvModel.payButtonImageUrl,
buttonInlineTextMode: false
},
computed: {
imageUrlRequired: function(){
return !this.buttonInlineTextMode;
}
},
methods: {
inputChanges: function (event, buttonSize) {
inputChanges(event, buttonSize);
}
},
watch: {
buttonInlineTextMode: function (checked) {
if(!checked){
this.srvModel.payButtonText = "";
this.srvModel.payButtonImageUrl = this.originalButtonImageUrl;
}else {
this.srvModel.payButtonText = "Pay with..";
this.srvModel.payButtonImageUrl = this.srvModel.urlRoot + "img/logo.svg";
}
this.inputChanges();
}
}
});
</script>

11
BTCPayServer/wwwroot/paybutton/paybutton.js
View file

@ -51,14 +51,18 @@ function inputChanges(event, buttonSize) {
var isSlider = srvModel.buttonType == 2
var width = "209px";
var height = "57px";
var widthInput = "3em";
if (srvModel.buttonSize === 0) {
width = "146px";
widthInput = "2em";
height = "40px";
} else if (srvModel.buttonSize === 1) {
width = "168px";
height = "46px";
} else if (srvModel.buttonSize === 2) {
width = "209px";
height = "57px";
}
var html =
@ -104,7 +108,14 @@ function inputChanges(event, buttonSize) {
html += ' </div>\n';
}
if(!srvModel.payButtonText){
html += ' <input type="image" class="submit" name="submit" src="' + esc(srvModel.payButtonImageUrl) + '" style="width:' + width + '" alt="Pay with BtcPay, Self-Hosted Bitcoin Payment Processor">\n';
}else{
var numwidth = parseInt(width.replace("px", ""));
html+= '<button type="submit" class="submit" name="submit" style="min-width:' + width + '; min-height:' + height + '; border-radius: 4px;border-style: none;background-color: #0f3b21;" alt="Pay with BtcPay, Self-Hosted Bitcoin Payment Processor"><span style="color:#fff">'+esc(srvModel.payButtonText)+'</span>\n' +
(srvModel.payButtonImageUrl? '<img src="'+esc(srvModel.payButtonImageUrl)+'" style="width:'+numwidth/2+'px;">\n' : '')+
'</button>'
}
html += '</form>';
$("#mainCode").text(html).html();