From 893410911cc018c85fdbd4fd288124a164e8a888 Mon Sep 17 00:00:00 2001
From: rockstardev <rockstardev@users.noreply.github.com>
Date: Tue, 14 Aug 2018 18:59:59 +0200
Subject: [PATCH] Button width influenced by generator

---
 BTCPayServer/Views/Apps/PayButton.cshtml | 52 +++++++++++++++++++-----
 1 file changed, 42 insertions(+), 10 deletions(-)

diff --git a/BTCPayServer/Views/Apps/PayButton.cshtml b/BTCPayServer/Views/Apps/PayButton.cshtml
index 5162b04c4..00d9e9429 100644
--- a/BTCPayServer/Views/Apps/PayButton.cshtml
+++ b/BTCPayServer/Views/Apps/PayButton.cshtml
@@ -39,9 +39,18 @@
                 <div class="form-group">
                     <label>Button Size</label>
                     <div style="vertical-align:top; font-size:12px; display:flex;">
-                        <button class="btn btn-default" style="width:95px;height:32px;margin-right:40px;">146 x 57 px</button>
-                        <button class="btn btn-default" style="width:126px;height:48px;margin-right:40px;">168 x 65 px</button>
-                        <button class="btn btn-default" style="width:146px;height:57px;">210 x 82 px</button>
+                        <button class="btn btn-default" style="width:95px;height:40px;margin-right:40px;"
+                                v-on:click="inputChanges($event, 0)">
+                            146 x 40 px
+                        </button>
+                        <button class="btn btn-default" style="width:126px;height:46px;margin-right:40px;"
+                                v-on:click="inputChanges($event, 1)">
+                            168 x 46 px
+                        </button>
+                        <button class="btn btn-default" style="width:146px;height:57px;"
+                                v-on:click="inputChanges($event, 2)">
+                            209 x 57 px
+                        </button>
                     </div>
                 </div>
             </div>
@@ -93,7 +102,7 @@
                 <i class="fa fa-copy"></i> <a href="#">Copy Code</a>
             </div>
             <div class="col-lg-4">
-                <img src="~/img/paywithbtcpay.png" />
+                <img id="previewButton" src="~/img/paywithbtcpay.png" />
             </div>
         </div>
         <br />
@@ -115,14 +124,37 @@
                 srvModel: srvModel
             },
             methods: {
-                inputChanges: function () {
-                    var html = '&lt;form method="POST" action="' + srvModel.urlRoot + '/apps/3jVExUHqRkGi4eaJEFCTxw5zjk14VAFzoVZXZJ3fbwED/pos"&gt;';
-                    html += '\n\t&lt;input type="hidden" name="amount" value="' + srvModel.price + '" /&gt;';
-                    if (srvModel.currency) {
-                        html += '\n\t&lt;input type="hidden" name="currency" value="' + srvModel.currency + '" /&gt;';
+                inputChanges: function (event, buttonSize) {
+                    if (buttonSize != null) {
+                        srvModel.buttonSize = buttonSize;
+                        alert(buttonSize);
                     }
 
-                    html += '\n\t&lt;input type="image" src="' + srvModel.urlRoot + '/img/paywithbtcpay.png" name="submit" style="width:210px;" alt="Pay with BtcPay, Self-Hosted Bitcoin Payment Processor">';
+                    var html = '&lt;form method="POST" action="' + srvModel.urlRoot + '/apps/3jVExUHqRkGi4eaJEFCTxw5zjk14VAFzoVZXZJ3fbwED/pos"&gt;';
+                    html += '\n    &lt;input type="hidden" name="amount" value="' + srvModel.price + '" /&gt;';
+                    if (srvModel.currency) {
+                        html += '\n    &lt;input type="hidden" name="currency" value="' + srvModel.currency + '" /&gt;';
+                    }
+                    if (srvModel.checkoutDesc) {
+                        html += '\n    &lt;input type="hidden" name="checkoutDesc" value="' + srvModel.checkoutDesc + '" /&gt;';
+                    }
+                    if (srvModel.orderId) {
+                        html += '\n    &lt;input type="hidden" name="orderId" value="' + srvModel.orderId + '" /&gt;';
+                    }
+
+                    var width = "209px";
+                    if (srvModel.buttonSize == 0) {
+                        width = "146px";
+                    } else if (srvModel.buttonSize == 1) {
+                        width = "168px";
+                    } else if (srvModel.buttonSize == 2) {
+                        width = "209px";
+                    }
+                    $("#previewButton").css("width", width);
+
+                    html += '\n    &lt;input type="image" src="' + srvModel.urlRoot + '/img/paywithbtcpay.png" name="submit" style="width:' + width +
+                        '" alt="Pay with BtcPay, Self-Hosted Bitcoin Payment Processor">';
+
                     html += '\n&lt;/form&gt;';
 
                     $("#mainCode").html(html);