Docker/Maybe
Docker/Maybe
1
0
Fork 0
mirror of https://github.com/maybe-finance/maybe.git synced 2025-08-02 20:15:22 +02:00
Code Issues Releases Activity Actions

More composable forms (#989)

Browse source 
* Make forms more composable, opt-in to form builder

* Remove unused method

* Simpler money input controls

* Add in new form styling to imports

* Lint fixes

* Small tweak of multi select styles
This commit is contained in:
Zach Gollwitzer 2024-07-16 14:08:24 -04:00 • committed by GitHub
parent 47523f64c2
commit e51806b98b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
50 changed files with 268 additions and 488 deletions
Download patch file Download diff file Expand all files Collapse all files

24
app/views/shared/_money_field.html.erb Normal file
View file

@ -0,0 +1,24 @@
<%# locals: (form:, money_method:, default_currency: "USD", disable_currency: false, hide_currency: false, label: nil) %>
<% fallback_label = t(".money-label") %>
<div class="form-field pr-0" data-controller="money-field">
<%= form.label label || fallback_label, { class: "form-field__label" } %>
<div class="flex items-center gap-1">
<div class="flex items-center grow gap-1">
<span class="text-gray-500 text-sm" data-money-field-target="symbol">$</span>
<%= money_field form, money_method, { inline: true, "data-money-field-target" => "amount", default_currency: default_currency } %>
</div>
<% unless hide_currency %>
<div>
<%= currency_select form, :currency, { inline: true }, {
class: "form-field__input text-right pr-8 disabled:text-gray-500",
disabled: disable_currency,
data: {
"money-field-target" => "currency",
action: "money-field#handleCurrencyChange"
}
} %>
</div>
<% end %>
</div>
</div>

22
app/views/shared/_period_select.html.erb
View file

@ -1,22 +0,0 @@
<%# locals: (value: 'last_30_days', button_class: '') -%>
<% options = [["7D", "last_7_days"], ["1M", "last_30_days"], ["1Y", "last_365_days"], ["All", "all"]] %>
<div data-controller="select" data-select-active-class="bg-alpha-black-50" class="relative" data-select-selected-value="<%= value %>">
<%=
tag.button(
type: "button",
data: { "select-target": "button" },
class: button_class.presence || "flex items-center gap-1 w-full border border-alpha-black-100 shadow-xs rounded-lg text-sm p-2 cursor-pointer text-gray-900 text-sm"
) do
%>
<span data-select-target="buttonText"><%= options.find { |option| option[1] == value }[0] %></span>
<%= lucide_icon("chevron-down", class: "w-5 h-5 text-gray-500") %>
<% end %>
<input type="hidden" name="period" data-select-target="input" data-auto-submit-form-target="auto">
<ul data-select-target="list" class="hidden absolute z-10 top-[100%] right-0 border border-alpha-black-25 bg-white rounded-lg shadow-xs">
<% options.each do |label, value| %>
<li tabindex="0" data-select-target="option" data-action="click->select#selectOption" data-value="<%= value %>" class="text-sm text-gray-900 rounded-lg cursor-pointer hover:bg-alpha-black-50 px-5 py-1">
<%= label %>
</li>
<% end %>
</ul>
</div>