mirror of
https://github.com/maybe-finance/maybe.git
synced 2025-07-24 07:39:39 +02:00
Currency Dropdown (#415)
* Initial dropdown setup and styles * Allow form field to pass through block content and update dropdown posititon * add currency to accounts params * Add repositionDropdown function and carry over dropdown controller * remove block context from form builder in favour of using form tag directly * Hide currency input and set checks for input and label before updating * align currency button with balance * revert form_field_tag changes * remove margin on currency button, looks cleaner --------- Signed-off-by: Josh Pigford <josh@joshpigford.com> Co-authored-by: Josh Pigford <josh@joshpigford.com>
This commit is contained in:
parent
b2fdf78101
commit
96debfaeda
4 changed files with 86 additions and 3 deletions
15
app/views/shared/_currency_dropdown.html.erb
Normal file
15
app/views/shared/_currency_dropdown.html.erb
Normal file
|
@ -0,0 +1,15 @@
|
|||
<div data-controller="currency-dropdown" class="absolute right-1 bottom-[10px] flex items-end">
|
||||
<button type="button" class="flex justify-between items-center hover:bg-gray-100 focus:bg-gray-100 w-20 text-sm rounded-lg py-1 px-2" data-action="click->currency-dropdown#toggleMenu">
|
||||
<div data-currency-dropdown-target="label"><%= f.object.currency %></div>
|
||||
<%# Example of how account currency value is updated %>
|
||||
<%#= f.hidden_field :currency, data: {currency_dropdown_target: "input"} %>
|
||||
<%= lucide_icon("chevron-down", class: "text-[#737373] w-5 h-5" ) %>
|
||||
</button>
|
||||
<ul data-currency-dropdown-target="menu" class="hidden fixed p-1 z-10 bg-white rounded-[10px] shadow min-w-[112px] z-50 translate-y-2 border border-[#141414]/8 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.1)]">
|
||||
<% options.each do |option| %>
|
||||
<li data-action="click->currency-dropdown#selectOption" data-currency-dropdown-target="option" data-value="<%= option %>" class="flex justify-between items-center p-2 text-sm text-gray-700 hover:bg-gray-100 cursor-pointer rounded-lg <%= "bg-gray-100" if option === f.object.currency %>"><%= option %>
|
||||
<%= inline_svg_tag('icn-check.svg', class: "text-gray-500 fill-current #{'hidden'if option != f.object.currency}") %>
|
||||
</li>
|
||||
<% end %>
|
||||
</ul>
|
||||
</div>
|
Loading…
Add table
Add a link
Reference in a new issue