#420 - Use input-group for amount+price in expense amount change dialog.

maraf · Jun 22, 2022 · fff139e · fff139e
1 parent 2e0815a
commit fff139e
Showing 1 changed file with 14 additions and 18 deletions.
diff --git a/src/Money.Blazor.Host/Components/OutcomeAmount.razor b/src/Money.Blazor.Host/Components/OutcomeAmount.razor
@@ -3,27 +3,23 @@
 <Modal @ref="Modal" Title="Change an amount of the expense">
     <ChildContent>
         <Validation ErrorMessages="@ErrorMessages" />
-        <div class="form-row">
-            <div class="col-md-9">
-                <div class="form-group">
-                    <label for="expense-amount">Amount:</label>
-                    <AmountBox Id="expense-amount" AutoFocus="true" AutoSelect="true" @bind-Value="@Amount" />
-                </div>
-            </div>
-            <div class="col-md-3">
-                <div class="form-group">
-                    <label for="expense-currency">Currency:</label>
-                    <select class="form-control" id="expense-currency" @bind="@Currency">
-                        @if (Currencies != null)
-                        {
+        <div class="form-group">
+            <label for="expense-amount">Amount:</label>
+            <div class="input-group">
+                <AmountBox Id="expense-amount" AutoFocus="true" AutoSelect="true" @bind-Value="@Amount" />
+                <div class="input-group-append">
+                    @if (Currencies != null)
+                    {
+                        <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown">
+                            @Currencies.FirstOrDefault(c => c.UniqueCode == Currency)?.Symbol
+                        </button>
+                        <div class="dropdown-menu">
                             @foreach (var currency in Currencies)
                             {
-                                <option value="@currency.UniqueCode">
-                                    @currency.Symbol
-                                </option>
+                                <a class="dropdown-item cursor-pointer" @onclick="(() => Currency = currency.UniqueCode)">@currency.Symbol</a>
                             }
-                        }
-                    </select>
+                        </div>
+                    }
                 </div>
             </div>
         </div>