mirror of
https://github.com/maybe-finance/maybe.git
synced 2025-08-09 15:35:22 +02:00
chore: apply PR feedback – remove dark:, align with design tokens, update form builder
This commit is contained in:
parent
0f43de34f8
commit
b86dc2328c
9 changed files with 44 additions and 32 deletions
|
@ -849,19 +849,3 @@
|
|||
@apply bg-white;
|
||||
}
|
||||
}
|
||||
|
||||
@utility bg-divider-adaptive {
|
||||
@apply bg-black;
|
||||
|
||||
@variant theme-dark {
|
||||
@apply bg-white;
|
||||
}
|
||||
}
|
||||
|
||||
@utility bg-primary-adaptive {
|
||||
@apply bg-white;
|
||||
|
||||
@variant theme-dark {
|
||||
@apply bg-black ;
|
||||
}
|
||||
}
|
|
@ -6,7 +6,11 @@ class StyledFormBuilder < ActionView::Helpers::FormBuilder
|
|||
text_field_helpers.each do |selector|
|
||||
class_eval <<-RUBY_EVAL, __FILE__, __LINE__ + 1
|
||||
def #{selector}(method, options = {})
|
||||
merged_options = { class: "form-field__input" }.merge(options)
|
||||
base_classes = "form-field__input text-ellipsis text-subdued"
|
||||
merged_options = options.merge(
|
||||
class: [base_classes, options[:class]].compact.join(" ")
|
||||
)
|
||||
|
||||
label = build_label(method, options)
|
||||
field = super(method, merged_options)
|
||||
|
||||
|
@ -22,7 +26,7 @@ class StyledFormBuilder < ActionView::Helpers::FormBuilder
|
|||
end
|
||||
|
||||
def select(method, choices, options = {}, html_options = {})
|
||||
merged_html_options = { class: "form-field__input" }.merge(html_options)
|
||||
merged_html_options = { class: "form-field__input text-ellipsis text-subdued" }.merge(html_options)
|
||||
|
||||
label = build_label(method, options.merge(required: merged_html_options[:required]))
|
||||
field = super(method, choices, options, merged_html_options)
|
||||
|
@ -31,7 +35,7 @@ class StyledFormBuilder < ActionView::Helpers::FormBuilder
|
|||
end
|
||||
|
||||
def collection_select(method, collection, value_method, text_method, options = {}, html_options = {})
|
||||
merged_html_options = { class: "form-field__input" }.merge(html_options)
|
||||
merged_html_options = { class: "form-field__input text-ellipsis text-subdued" }.merge(html_options)
|
||||
|
||||
label = build_label(method, options.merge(required: merged_html_options[:required]))
|
||||
field = super(method, collection, value_method, text_method, options, merged_html_options)
|
||||
|
@ -59,6 +63,30 @@ class StyledFormBuilder < ActionView::Helpers::FormBuilder
|
|||
super(value, merged_options)
|
||||
end
|
||||
|
||||
def number_field(method, options = {})
|
||||
base_classes = "form-field__input text-ellipsis text-subdued"
|
||||
merged_options = options.merge(
|
||||
class: [ base_classes, options[:class] ].compact.join(" ")
|
||||
)
|
||||
|
||||
label = build_label(method, options)
|
||||
field = super(method, merged_options)
|
||||
|
||||
build_styled_field(label, field, merged_options)
|
||||
end
|
||||
|
||||
def date_field(method, options = {})
|
||||
base_classes = "form-field__input text-ellipsis text-subdued"
|
||||
merged_options = options.merge(
|
||||
class: [ base_classes, options[:class] ].compact.join(" ")
|
||||
)
|
||||
|
||||
label = build_label(method, options)
|
||||
field = super(method, merged_options)
|
||||
|
||||
build_styled_field(label, field, merged_options)
|
||||
end
|
||||
|
||||
private
|
||||
|
||||
def build_styled_field(label, field, options, remove_padding_right: false)
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
<%# locals: (accountable:) %>
|
||||
|
||||
<%= link_to new_polymorphic_path(accountable, step: "method_select", return_to: params[:return_to]),
|
||||
class: "flex items-center gap-4 w-full text-center focus:outline-hidden focus:bg-alpha-black-25 hover:bg-alpha-black-25 dark:hover:bg-overlay dark:focus:bg-overlay fg-contrast hover:fg-primary focus:fg-primary border border-transparent block px-2 rounded-lg p-2" do %>
|
||||
class: "flex items-center gap-4 w-full text-center focus:outline-hidden hover:bg-surface-hover focus:bg-surface-hover fg-contrast hover:fg-primary focus:fg-primary border border-transparent block px-2 rounded-lg p-2" do %>
|
||||
<span style="background-color: color-mix(in srgb, <%= accountable.color %> 10%, white);" class="flex w-8 h-8 shrink-0 grow-0 items-center justify-center rounded-lg border border-alpha-black-25">
|
||||
<%= lucide_icon(accountable.icon, style: "color: #{accountable.color}", class: "w-5 h-5") %>
|
||||
</span>
|
||||
|
|
|
@ -24,7 +24,7 @@
|
|||
<% unless params[:return_to].present? %>
|
||||
<%= button_to imports_path(import: { type: "AccountImport" }),
|
||||
data: { turbo_frame: :_top },
|
||||
class: "flex items-center gap-4 w-full text-center focus:outline-hidden focus:bg-alpha-black-25 hover:bg-alpha-black-25 dark:hover:bg-overlay dark:focus:bg-overlay fg-contrast hover:fg-primary focus:fg-primary border border-transparent block px-2 rounded-lg p-2" do %>
|
||||
class: "flex items-center gap-4 w-full text-center focus:outline-hidden hover:bg-surface-hover focus:bg-surface-hover fg-contrast hover:fg-primary focus:fg-primary border border-transparent block px-2 rounded-lg p-2" do %>
|
||||
<span style="background-color: color-mix(in srgb, #F79009 10%, white);" class="flex w-8 h-8 shrink-0 grow-0 items-center justify-center rounded-lg border border-alpha-black-25">
|
||||
<%= lucide_icon("download", style: "color: #F79009", class: "w-5 h-5") %>
|
||||
</span>
|
||||
|
|
|
@ -31,7 +31,7 @@
|
|||
</div>
|
||||
<% end %>
|
||||
|
||||
<div class="h-px bg-divider-adaptive w-12 group-last:hidden"></div>
|
||||
<div class="h-px bg-inverse w-12 group-last:hidden"></div>
|
||||
</li>
|
||||
<% end %>
|
||||
</ul>
|
||||
|
|
|
@ -30,7 +30,7 @@
|
|||
<div class="flex gap-2 items-center hidden flex-col" data-category-target="paletteSection">
|
||||
<div class="flex gap-2 items-center w-full">
|
||||
<div class="w-6 h-6 p-4 rounded-full cursor-pointer" style="background-color: <%= category.color %>" data-category-target="colorPreview"></div>
|
||||
<%= f.text_field :color , data: { category_target: "colorInput"}, class: "form-field__input blah", inline: true %>
|
||||
<%= f.text_field :color , data: { category_target: "colorInput"}, inline: true %>
|
||||
<%= lucide_icon "palette", class: "w-8 h-8 cursor-pointer hover:bg-gray-100 p-1", data: { action: "click->category#toggleSections" } %>
|
||||
</div>
|
||||
<div data-category-target="validationMessage" class="hidden self-start flex gap-1 items-center text-xs text-destructive ">
|
||||
|
@ -61,10 +61,10 @@
|
|||
<% end %>
|
||||
|
||||
<div class="space-y-2">
|
||||
<%= f.select :classification, [["Income", "income"], ["Expense", "expense"]], { label: "Classification" }, class: "form-field__input text-ellipsis text-subdued", required: true %>
|
||||
<%= f.text_field :name, placeholder: t(".placeholder"), required: true, autofocus: true, label: "Name", data: { color_avatar_target: "name" }, class: "form-field__input text-ellipsis text-subdued" %>
|
||||
<%= f.select :classification, [["Income", "income"], ["Expense", "expense"]], { label: "Classification" }, required: true %>
|
||||
<%= f.text_field :name, placeholder: t(".placeholder"), required: true, autofocus: true, label: "Name", data: { color_avatar_target: "name" } %>
|
||||
<% unless category.parent? %>
|
||||
<%= f.select :parent_id, categories.pluck(:name, :id), { include_blank: "(unassigned)", label: "Parent category (optional)" }, disabled: category.parent?, data: { action: "change->category#handleParentChange" }, class: "form-field__input text-ellipsis text-subdued" %>
|
||||
<%= f.select :parent_id, categories.pluck(:name, :id), { include_blank: "(unassigned)", label: "Parent category (optional)" }, disabled: category.parent?, data: { action: "change->category#handleParentChange" } %>
|
||||
<% end %>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
@ -43,7 +43,7 @@
|
|||
</div>
|
||||
<% end %>
|
||||
|
||||
<div class="h-px bg-divider-adaptive w-12 group-last:hidden"></div>
|
||||
<div class="h-px bg-inverse w-12 group-last:hidden"></div>
|
||||
</li>
|
||||
<% end %>
|
||||
</ul>
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<%= render "layouts/shared/htmldoc" do %>
|
||||
<div class="bg-primary-adaptive flex flex-col h-dvh pt-safe">
|
||||
<div class="bg-container-inset flex flex-col h-dvh pt-safe">
|
||||
<header class="flex items-center justify-between p-8">
|
||||
<%= link_to content_for(:previous_path) || root_path do %>
|
||||
<%= lucide_icon "arrow-left", class: "w-5 h-5 text-secondary" %>
|
||||
|
|
|
@ -26,10 +26,10 @@
|
|||
</section>
|
||||
|
||||
<section class="space-y-2">
|
||||
<%= f.collection_select :from_account_id, Current.family.accounts.manual.alphabetically, :id, :name, { prompt: t(".select_account"), label: t(".from") }, required: true, class: "form-field__input text-ellipsis text-subdued" %>
|
||||
<%= f.collection_select :to_account_id, Current.family.accounts.manual.alphabetically, :id, :name, { prompt: t(".select_account"), label: t(".to") }, required: true, class: "form-field__input text-ellipsis text-subdued" %>
|
||||
<%= f.number_field :amount, label: t(".amount"), required: true, min: 0, placeholder: "100", step: 0.00000001, class: "form-field__input text-ellipsis text-subdued" %>
|
||||
<%= f.date_field :date, value: transfer.inflow_transaction&.entry&.date || Date.current, label: t(".date"), required: true, class: "form-field__input text-ellipsis text-subdued", max: Date.current %>
|
||||
<%= f.collection_select :from_account_id, Current.family.accounts.manual.alphabetically, :id, :name, { prompt: t(".select_account"), label: t(".from") }, required: true %>
|
||||
<%= f.collection_select :to_account_id, Current.family.accounts.manual.alphabetically, :id, :name, { prompt: t(".select_account"), label: t(".to") }, required: true %>
|
||||
<%= f.number_field :amount, label: t(".amount"), required: true, min: 0, placeholder: "100", step: 0.00000001 %>
|
||||
<%= f.date_field :date, value: transfer.inflow_transaction&.entry&.date || Date.current, label: t(".date"), required: true, max: Date.current %>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue