From c40b47b1ddd7ecd605c67ef8d5a5be7d3aa76f4e Mon Sep 17 00:00:00 2001
From: rockstardev <rockstardev@users.noreply.github.com>
Date: Tue, 17 Jul 2018 22:54:09 -0500
Subject: [PATCH] Hover indicator and handling case with only one currency

---
 .../Views/Invoice/Checkout-Body.cshtml        | 47 +++++++++++--------
 .../wwwroot/checkout/css/vex-extrastyles.css  | 31 ++++++++----
 2 files changed, 50 insertions(+), 28 deletions(-)

diff --git a/BTCPayServer/Views/Invoice/Checkout-Body.cshtml b/BTCPayServer/Views/Invoice/Checkout-Body.cshtml
index 143f3db48..04a32693a 100644
--- a/BTCPayServer/Views/Invoice/Checkout-Body.cshtml
+++ b/BTCPayServer/Views/Invoice/Checkout-Body.cshtml
@@ -42,27 +42,36 @@
                 </div>
             </div>
             <div class="single-item-order__right">
-                <div class="payment__currencies" onclick="openPaymentMethodDialog()">
-                    <img v-bind:src="srvModel.cryptoImage" />
-                    <span>
+                @if (Model.AvailableCryptos.Count == 1)
+                {
+                    <div class="payment__currencies">
+                        <img v-bind:src="srvModel.cryptoImage" />
                         {{srvModel.paymentMethodName}}
                         ({{srvModel.cryptoCode}})
-                    </span>
-                </div>
-                <div id="vexPopupDialog">
-                    <ul class="vexmenu">
-                    @foreach (var crypto in Model.AvailableCryptos)
-                    {
-                        <li class="vexmenuitem">
-                            <a href="@crypto.Link" onclick="return closePaymentMethodDialog('@crypto.PaymentMethodId');">
-                                <img alt="@crypto.PaymentMethodName" src="@crypto.CryptoImage" />
-                                @crypto.PaymentMethodName
-                                <span>@crypto.CryptoCode</span>
-                            </a>
-                        </li>
-                    }
-                    </ul>
-                </div>
+                    </div>
+                }
+                else
+                {
+                    <div class="payment__currencies" onclick="openPaymentMethodDialog()">
+                        <img v-bind:src="srvModel.cryptoImage" />
+                        <span class="clickable_underline">{{srvModel.paymentMethodName}} ({{srvModel.cryptoCode}})</span>
+                        <span class="clickable_indicator fa fa-angle-right"></span>
+                    </div>
+                    <div id="vexPopupDialog">
+                        <ul class="vexmenu">
+                            @foreach (var crypto in Model.AvailableCryptos)
+                            {
+                                <li class="vexmenuitem">
+                                    <a href="@crypto.Link" onclick="return closePaymentMethodDialog('@crypto.PaymentMethodId');">
+                                        <img alt="@crypto.PaymentMethodName" src="@crypto.CryptoImage" />
+                                        @crypto.PaymentMethodName
+                                        <span>@crypto.CryptoCode</span>
+                                    </a>
+                                </li>
+                            }
+                        </ul>
+                    </div>
+                }
                 <div class="payment__spinner">
                     <partial name="Checkout-Spinner" />
                 </div>
diff --git a/BTCPayServer/wwwroot/checkout/css/vex-extrastyles.css b/BTCPayServer/wwwroot/checkout/css/vex-extrastyles.css
index fa6cf2446..846d0b1a7 100644
--- a/BTCPayServer/wwwroot/checkout/css/vex-extrastyles.css
+++ b/BTCPayServer/wwwroot/checkout/css/vex-extrastyles.css
@@ -28,13 +28,13 @@
             height: 24px;
         }
 
-.vexmenuitem:hover {
-    background-color: #eee;
-}
+    .vexmenuitem:hover {
+        background-color: #eee;
+    }
 
-.vexmenuitem:last-child {
-    border-bottom: none;
-}
+    .vexmenuitem:last-child {
+        border-bottom: none;
+    }
 
 #vexPopupDialog {
     display: none;
@@ -49,6 +49,19 @@
         height: 32px;
     }
 
-    .payment__currencies span {
-        border-bottom: 1px dotted gray;
-    }
+.clickable_underline {
+    border-bottom: 1px dotted #ccc;
+}
+
+.payment__currencies:hover .clickable_underline {
+    border-bottom: 1px dotted black;
+}
+
+.clickable_indicator {
+    margin-right: -10px;
+    opacity: 0.3;
+}
+
+.payment__currencies:hover .clickable_indicator {
+    opacity: 1;
+}