Tweaking CSS styles and display of payment method selection

This commit is contained in:
rockstardev
2018-07-17 00:14:56 -05:00
parent d49bbc95af
commit 203494e809
4 changed files with 28 additions and 8 deletions

View File

@@ -307,7 +307,7 @@ namespace BTCPayServer.Controllers
private string GetDisplayName(PaymentMethodId paymentMethodId, BTCPayNetwork network) private string GetDisplayName(PaymentMethodId paymentMethodId, BTCPayNetwork network)
{ {
return paymentMethodId.PaymentType == PaymentTypes.BTCLike ? return paymentMethodId.PaymentType == PaymentTypes.BTCLike ?
network.DisplayName : network.DisplayName + " - Lightning Network"; network.DisplayName : network.DisplayName + " - Lightning";
} }
private string GetImage(PaymentMethodId paymentMethodId, BTCPayNetwork network) private string GetImage(PaymentMethodId paymentMethodId, BTCPayNetwork network)

View File

@@ -42,17 +42,20 @@
</div> </div>
</div> </div>
<div class="single-item-order__right"> <div class="single-item-order__right">
<div class="payment__currencies" style="font-size: 14px; cursor:pointer;" onclick="bringupDialog()"> <div class="payment__currencies" onclick="openPaymentMethodDialog()">
<img style='height:32px;' v-bind:src="srvModel.cryptoImage" /> <img v-bind:src="srvModel.cryptoImage" />
<span style="color: #000000; border-bottom: 1px dotted gray;">{{srvModel.paymentMethodName}}</span> <span>
{{srvModel.paymentMethodName}}
({{srvModel.cryptoCode}})
</span>
</div> </div>
<div id="vexPopupDialog"> <div id="vexPopupDialog">
<ul class="vexmenu"> <ul class="vexmenu">
@foreach (var crypto in Model.AvailableCryptos) @foreach (var crypto in Model.AvailableCryptos)
{ {
<li class="vexmenuitem"> <li class="vexmenuitem">
<a href="@crypto.Link" onclick="return closeVexChangeCurrency('@crypto.PaymentMethodId');"> <a href="@crypto.Link" onclick="return closePaymentMethodDialog('@crypto.PaymentMethodId');">
<img style="height:24px;" alt="@crypto.PaymentMethodId" src="@crypto.CryptoImage" /> <img alt="@crypto.PaymentMethodName" src="@crypto.CryptoImage" />
@crypto.PaymentMethodName @crypto.PaymentMethodName
<span>@crypto.CryptoCode</span> <span>@crypto.CryptoCode</span>
</a> </a>

View File

@@ -24,6 +24,10 @@
color: gray; color: gray;
} }
.vexmenuitem a img {
height: 24px;
}
.vexmenuitem:hover { .vexmenuitem:hover {
background-color: #eee; background-color: #eee;
} }
@@ -35,3 +39,16 @@
#vexPopupDialog { #vexPopupDialog {
display: none; display: none;
} }
.payment__currencies {
font-size: 14px;
cursor: pointer;
}
.payment__currencies img {
height: 32px;
}
.payment__currencies span {
border-bottom: 1px dotted gray;
}

View File

@@ -1,11 +1,11 @@
function bringupDialog() { function openPaymentMethodDialog() {
var content = $("#vexPopupDialog").html(); var content = $("#vexPopupDialog").html();
vex.open({ vex.open({
unsafeContent: content unsafeContent: content
}); });
} }
function closeVexChangeCurrency(currencyId) { function closePaymentMethodDialog(currencyId) {
vex.closeAll(); vex.closeAll();
return changeCurrency(currencyId); return changeCurrency(currencyId);
} }