Merge pull request #871 from rockstardev/uifixes

Tweaking UI styles, updating default table style, and extra notification for payment for paidPartial
2026-02-12 01:34:34 +01:00 · 2019-05-31 15:39:17 +09:00
parent 7056aae301 0f58f6da36
commit be6560e08c
10 changed files with 144 additions and 49 deletions
--- a/BTCPayServer/Controllers/InvoiceController.UI.cs
+++ b/BTCPayServer/Controllers/InvoiceController.UI.cs
@@ -210,7 +210,7 @@ namespace BTCPayServer.Controllers
            return View(model);
        }

-//TODO: abstract
+        //TODO: abstract
        private async Task<PaymentModel> GetInvoiceModel(string invoiceId, PaymentMethodId paymentMethodId)
        {
            var invoice = await _InvoiceRepository.GetInvoice(invoiceId);
@@ -269,6 +269,7 @@ namespace BTCPayServer.Controllers
                   (1m + (changelly.AmountMarkupPercentage / 100m)))
                : (decimal?)null;

+            var paymentMethodHandler = invoice.PaymentMethodHandlerDictionary[paymentMethodId];
            var model = new PaymentModel()
            {
                CryptoCode = network.CryptoCode,
@@ -279,6 +280,7 @@ namespace BTCPayServer.Controllers
                HtmlTitle = storeBlob.HtmlTitle ?? "BTCPay Invoice",
                CustomCSSLink = storeBlob.CustomCSS?.AbsoluteUri,
                CustomLogoLink = storeBlob.CustomLogo?.AbsoluteUri,
+                CryptoImage = Request.GetRelativePathOrAbsolute(paymentMethodHandler.GetCryptoImage(paymentMethodId)),
                LightningAmountInSatoshi = storeBlob.LightningAmountInSatoshi,
                BtcAddress = paymentMethodDetails.GetPaymentDestination(),
                BtcDue = accounting.Due.ToString(),
@@ -337,7 +339,7 @@ namespace BTCPayServer.Controllers
                                          .ToList()
            };

-            invoice.PaymentMethodHandlerDictionary[paymentMethod.GetId()].PreparePaymentModel(model, dto);
+            paymentMethodHandler.PreparePaymentModel(model, dto);
            model.PaymentMethodId = paymentMethodId.ToString();
            var expiration = TimeSpan.FromSeconds(model.ExpirationSeconds);
            model.TimeLeft = expiration.PrettyPrint();
--- a/BTCPayServer/Payments/Bitcoin/BitcoinLikePaymentHandler.cs
+++ b/BTCPayServer/Payments/Bitcoin/BitcoinLikePaymentHandler.cs
@@ -48,7 +48,6 @@ namespace BTCPayServer.Payments.Bitcoin
            var network = _networkProvider.GetNetwork<BTCPayNetwork>(model.CryptoCode);
            model.IsLightning = false;
            model.PaymentMethodName = GetPaymentMethodName(network);
-            model.CryptoImage = GetCryptoImage(network);
            model.InvoiceBitcoinUrl = cryptoInfo.PaymentUrls.BIP21;
            model.InvoiceBitcoinUrlQR = cryptoInfo.PaymentUrls.BIP21;
        }
--- a/BTCPayServer/Payments/Lightning/LightningLikePaymentHandler.cs
+++ b/BTCPayServer/Payments/Lightning/LightningLikePaymentHandler.cs
@@ -207,7 +207,6 @@ namespace BTCPayServer.Payments.Lightning
            var network = _networkProvider.GetNetwork<BTCPayNetwork>(model.CryptoCode);
            model.IsLightning = true;
            model.PaymentMethodName = GetPaymentMethodName(network);
-            model.CryptoImage = GetCryptoImage(network);
            model.InvoiceBitcoinUrl = cryptoInfo.PaymentUrls.BOLT11;
            model.InvoiceBitcoinUrlQR = cryptoInfo.PaymentUrls.BOLT11.ToUpperInvariant();
        }
--- a/BTCPayServer/Views/Invoice/Checkout-Body.cshtml
+++ b/BTCPayServer/Views/Invoice/Checkout-Body.cshtml
@@ -109,6 +109,9 @@
        <span class="fa fa-angle-double-up"></span>
    </div>
    <line-items>
+        <div class="extraPayment" v-if="srvModel.status === 'new' && srvModel.txCount > 1">
+            {{$t("NotPaid_ExtraTransaction")}}
+        </div>
        <div class="line-items">
            <div class="line-items__item">
                <div class="line-items__item__label">{{$t("Order Amount")}}</div>
--- a/BTCPayServer/Views/Invoice/Invoice.cshtml
+++ b/BTCPayServer/Views/Invoice/Invoice.cshtml
@@ -35,7 +35,7 @@
        <div class="row">
            <div class="col-md-6">
                <h3>Information</h3>
-                <table class="table table-sm table-responsive-md">
+                <table class="table table-sm table-responsive-md removetopborder">
                    <tr>
                        <th>Store</th>
                        <td><a href="@Model.StoreLink">@Model.StoreName</a></td>
@@ -93,7 +93,7 @@

            <div class="col-md-6">
                <h3>Buyer information</h3>
-                <table class="table table-sm table-responsive-md">
+                <table class="table table-sm table-responsive-md removetopborder">
                    <tr>
                        <th>Name</th>
                        <td>@Model.BuyerInformation.BuyerName</td>
@@ -134,7 +134,7 @@
                @if (Model.PosData.Count == 0)
                {
                    <h3>Product information</h3>
-                    <table class="table table-sm table-responsive-md">
+                    <table class="table table-sm table-responsive-md removetopborder">
                        <tr>
                            <th>Item code</th>
                            <td>@Model.ProductInformation.ItemCode</td>
@@ -161,7 +161,7 @@
            <div class="row">
                <div class="col-md-6">
                    <h3>Product information</h3>
-                    <table class="table table-sm table-responsive-md">
+                    <table class="table table-sm table-responsive-md removetopborder">
                        <tr>
                            <th>Item code</th>
                            <td>@Model.ProductInformation.ItemCode</td>
--- a/BTCPayServer/Views/Server/Rates.cshtml
+++ b/BTCPayServer/Views/Server/Rates.cshtml
@@ -37,7 +37,7 @@
            @if(Model.RateLimits != null)
            {
                <h5>Current Bitcoin Average Quotas:</h5>
-                <table class="table table-sm">
+                <table class="table table-sm removetopborder">
                    <tr>
                        <th>Quota period</th>
                        <td>@Model.RateLimits.TotalPeriod.TimeString()</td>
--- a/BTCPayServer/wwwroot/checkout/css/normalizer.css
+++ b/BTCPayServer/wwwroot/checkout/css/normalizer.css
@@ -9448,10 +9448,10 @@ strong {
    margin-bottom: 5px;
 }

-.payment__scan svg {
-    width: 256px;
-    height: 256px;
-}
+    .payment__scan svg {
+        width: 256px;
+        height: 256px;
+    }

 .payment__scan__checkmark-wrapper {
    display: flex;
@@ -11202,6 +11202,16 @@ language-selector {
        opacity: 1;
    }

+
+.extraPayment {
+    background: #E5465A;
+    color: #fff;
+    font-weight: 500;
+    letter-spacing: .5px;
+    font-size: 12px;
+    padding: 2px 1rem;
+}
+
 line-items {
    background: #FBFBFB;
    border-top: 1px solid rgba(238, 238, 238, 0.5);
@@ -11470,56 +11480,63 @@ low-fee-timeline {
    height: 32px;
    margin-bottom: 10px;
 }
+
 .changelly-component .general__spinner bp-spinner {
    width: 50px;
    height: 50px;
-    
 }

-.changelly-component .general__spinner bp-spinner svg {
-    margin: 0;
-}
+    .changelly-component .general__spinner bp-spinner svg {
+        margin: 0;
+    }

 .changelly-component .retry-button {
    border-radius: 5px;
    border: 1px solid #a9a9a9;
    background: #fff;
    color: #000;
-    min-width:100px;  
+    min-width: 100px;
    padding-left: 0.8rem;
    padding-right: 0.8rem;
    min-height: 30px;
    word-break: break-all;
 }

-.changelly-component .retry-button :hover{
-    border-color: #7f7f7f;
-}
+    .changelly-component .retry-button :hover {
+        border-color: #7f7f7f;
+    }

 .changelly-component .prettydropdown li img {
-    width:20px; 
+    width: 20px;
    margin-right: 5px;
 }


-#prettydropdown-DefaultLang{
-    min-width:200px;
-}
-#prettydropdown-DefaultLang ul{
-    width:100%;
-}
-#prettydropdown-DefaultLang ul li{
-    width:100% !important;
+#prettydropdown-DefaultLang {
+    min-width: 200px;
 }

-[v-cloak] > * { display:none }
-[v-cloak]::before { content: "" }
+    #prettydropdown-DefaultLang ul {
+        width: 100%;
+    }
+
+        #prettydropdown-DefaultLang ul li {
+            width: 100% !important;
+        }
+
+[v-cloak] > * {
+    display: none
+}
+
+[v-cloak]::before {
+    content: ""
+}


 .btn-link {
    color: #329F80;
 }

-.btn-link:hover {
-    color: #24725B;
-}
+    .btn-link:hover {
+        color: #24725B;
+    }
--- a/BTCPayServer/wwwroot/checkout/js/core.js
+++ b/BTCPayServer/wwwroot/checkout/js/core.js
@@ -107,6 +107,11 @@ function onDataCallback(jsonData) {
        jsonData.orderAmount = numberFormatted(jsonData.orderAmount * SATOSHIME);
    }

+    // expand line items to show details on amount due for multi-transaction payment
+    if (checkoutCtrl.srvModel.txCount === 1 && jsonData.txCount > 1) {
+        onlyExpandLineItems();
+    }
+
    // updating ui
    checkoutCtrl.srvModel = jsonData;
 }
@@ -140,10 +145,31 @@ function lndToggleNode() {
    checkoutCtrl.scanDisplayQr = checkoutCtrl.srvModel.peerInfo;
 }

+var lineItemsExpanded = false;
+function toggleLineItems() {
+    $("line-items").toggleClass("expanded");
+    lineItemsExpanded ? $("line-items").slideUp() : $("line-items").slideDown();
+    lineItemsExpanded = !lineItemsExpanded;
+
+    $(".buyerTotalLine").toggleClass("expanded");
+    $(".single-item-order__right__btc-price__chevron").toggleClass("expanded");
+}
+
+function onlyExpandLineItems() {
+    if (!lineItemsExpanded) {
+        toggleLineItems();
+    }
+}
+
+
 // private methods
 $(document).ready(function () {
    // initialize
    onDataCallback(srvModel);
+    // initial expand of line items to show error message if multiple payments needed
+    if (srvModel.status === "new" && srvModel.txCount > 1) {
+        onlyExpandLineItems();
+    }

    // check if the Document expired
    if (srvModel.expirationSeconds > 0) {
@@ -166,6 +192,11 @@ $(document).ready(function () {
    jQuery("invoice").fadeIn(300);

    // eof initialize
+    
+    // Expand Line-Items
+    $(".buyerTotalLine").click(function () {
+        toggleLineItems();
+    });

    // FUNCTIONS
    function hideEmailForm() {
@@ -297,17 +328,6 @@ $(document).ready(function () {
        // function to load contents in different language should go there
    });

-    // Expand Line-Items
-    var lineItemsExpanded = false;
-    $(".buyerTotalLine").click(function () {
-        $("line-items").toggleClass("expanded");
-        lineItemsExpanded ? $("line-items").slideUp() : $("line-items").slideDown();
-        lineItemsExpanded = !lineItemsExpanded;
-
-        $(".buyerTotalLine").toggleClass("expanded");
-        $(".single-item-order__right__btc-price__chevron").toggleClass("expanded");
-    });
-
    // Timer Countdown && Progress bar
    function progressStart(timerMax) {
        var end = new Date(); // Setup Time Variable, should come from server
--- a/BTCPayServer/wwwroot/locales/en.json
+++ b/BTCPayServer/wwwroot/locales/en.json
@@ -1,3 +1,4 @@
+
 {
  "NOTICE_WARN": "THIS CODE HAS BEEN AUTOMATICALLY GENERATED FROM TRANSIFEX, IF YOU WISH TO HELP TRANSLATION COME ON THE SLACK http://slack.btcpayserver.org TO REQUEST PERMISSION TO https://www.transifex.com/btcpayserver/btcpayserver/",
  "code": "en",
@@ -46,5 +47,6 @@
  "txCount_plural": "{{count}} transactions",
  "Pay with CoinSwitch": "Pay with CoinSwitch",
  "Pay with Changelly": "Pay with Changelly",
-  "Close": "Close"
-}
+  "Close": "Close",
+  "NotPaid_ExtraTransaction": "The invoice hasn't been paid in full. Please send another transaction to cover amount Due."
+}
--- a/BTCPayServer/wwwroot/main/css/site.css
+++ b/BTCPayServer/wwwroot/main/css/site.css
@@ -16,7 +16,7 @@
 }


-.only-for-js, .input-group-clear{
+.only-for-js, .input-group-clear {
    display: none;
 }

@@ -27,6 +27,59 @@
    border-radius: 4px;
 }

+.table {
+    background: #fff;
+    border: 1px solid #DFE3E8;
+    border-radius: 4px;
+    border-collapse: separate !important;
+    border-spacing: 0px !important;
+    margin-top: 16px;
+    margin-bottom: 16px;
+}
+
+.table thead > tr {
+    height: 36px;
+}
+
+.table thead th {
+    border-bottom: none;
+    border-top: none;
+    vertical-align: middle;
+    padding: 4px 12px 4px 12px;
+}
+
+.table tbody tr:hover {
+    background-color: #f8fafc;
+}
+
+.table tr {
+    height: 36px;
+}
+
+    .table th {
+        display: table-cell;
+        padding: 4px 12px 4px 12px;
+        vertical-align: middle;
+    }
+
+    .table td {
+        display: table-cell;
+        padding: 4px 12px 4px 12px;
+        text-align: left;
+        color: #12161B;
+        font-size: 0.8125rem;
+        font-weight: 400;
+        vertical-align: middle;
+    }
+
+.removetopborder tr:first-child td {
+    border-top: none;
+}
+
+.removetopborder tr:first-child th {
+    border-top: none;
+}
+
 a.nav-link {
    color: #66788A;
 }