Docker/Maybe
Docker/Maybe
1
0
Fork 0
mirror of https://github.com/maybe-finance/maybe.git synced 2025-07-21 06:09:38 +02:00
Code Issues Releases Activity Actions

Fix height of modal during account creation steps (#418)

Browse source 
* Don't reopen an already open modal

* Avoid changing height of modal during wizard steps
This commit is contained in:
Rob Zolkos 2024-02-09 20:21:19 -05:00 • committed by GitHub
parent df3e14a975
commit 10399df3d0
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 13 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

3
app/javascript/controllers/modal_controller.js
View file

@ -3,7 +3,8 @@ import { Controller } from "@hotwired/stimulus"
// Connects to data-controller="modal" // Connects to data-controller="modal"
export default class extends Controller { export default class extends Controller {
connect() { connect() {
this.element.showModal(); if (this.element.open) return
else this.element.showModal()
} }
// Hide the dialog when the user clicks outside of it // Hide the dialog when the user clicks outside of it

18
app/views/accounts/new.html.erb
View file

@ -1,11 +1,12 @@
<h1 class="text-3xl font-semibold font-display"><%= t('.title')%></h1> <h1 class="text-3xl font-semibold font-display"><%= t('.title')%></h1>
<%= modal do %> <%= modal do %>
<div class="flex flex-col min-h-[530px]">
<% if @account.accountable.blank? %> <% if @account.accountable.blank? %>
<div class="border-b border-[#141414]/2 p-4 text-gray-400"> <div class="border-b border-[#141414]/2 p-4 text-gray-400">
<%= t '.select_accountable_type' %> <%= t '.select_accountable_type' %>
</div> </div>
<div class="flex flex-col p-2 text-sm" data-controller="list-keyboard-navigation"> <div class="flex flex-col p-2 text-sm grow" data-controller="list-keyboard-navigation">
<button hidden data-controller="hotkey" data-hotkey="k,K,ArrowUp,ArrowLeft" data-action="list-keyboard-navigation#focusPrevious">Previous</button> <button hidden data-controller="hotkey" data-hotkey="k,K,ArrowUp,ArrowLeft" data-action="list-keyboard-navigation#focusPrevious">Previous</button>
<button hidden data-controller="hotkey" data-hotkey="j,J,ArrowDown,ArrowRight" data-action="list-keyboard-navigation#focusNext">Next</button> <button hidden data-controller="hotkey" data-hotkey="j,J,ArrowDown,ArrowRight" data-action="list-keyboard-navigation#focusNext">Next</button>
@ -38,7 +39,7 @@
<% end %> <% end %>
<span>How would you like to add it?</span> <span>How would you like to add it?</span>
</div> </div>
<div class="flex flex-col p-2 text-sm" data-controller="list-keyboard-navigation"> <div class="flex flex-col p-2 text-sm grow" data-controller="list-keyboard-navigation">
<button hidden data-controller="hotkey" data-hotkey="k,K,ArrowUp,ArrowLeft" data-action="list-keyboard-navigation#focusPrevious">Previous</button> <button hidden data-controller="hotkey" data-hotkey="k,K,ArrowUp,ArrowLeft" data-action="list-keyboard-navigation#focusPrevious">Previous</button>
<button hidden data-controller="hotkey" data-hotkey="j,J,ArrowDown,ArrowRight" data-action="list-keyboard-navigation#focusNext">Next</button> <button hidden data-controller="hotkey" data-hotkey="j,J,ArrowDown,ArrowRight" data-action="list-keyboard-navigation#focusNext">Next</button>
@ -67,16 +68,19 @@
<span>Add <%= @account.accountable.model_name.human.downcase %></span> <span>Add <%= @account.accountable.model_name.human.downcase %></span>
</div> </div>
<%= form_with model: @account, url: accounts_path, scope: :account, html: { class: "space-y-4 m-5 mt-1", data: { turbo: false } } do |f| %> <%= form_with model: @account, url: accounts_path, scope: :account, html: { class: "m-5 mt-1 flex flex-col justify-between grow", data: { turbo: false } } do |f| %>
<%= f.hidden_field :accountable_type %> <div class="space-y-4 grow">
<%= f.hidden_field :accountable_type %>
<%= f.text_field :name, placeholder: 'Example account name', required: 'required', label: 'Account name' %> <%= f.text_field :name, placeholder: 'Example account name', required: 'required', label: 'Account name' %>
<%= render "accounts/#{permitted_accountable_partial(@account.accountable_type)}", f: f %> <%= render "accounts/#{permitted_accountable_partial(@account.accountable_type)}", f: f %>
<%= f.number_field :balance, placeholder: number_to_currency(0), in: 0.00..100000000.00, required: 'required', label: true %> <%= f.number_field :balance, placeholder: number_to_currency(0), in: 0.00..100000000.00, required: 'required', label: true %>
</div>
<%= f.submit "Add #{@account.accountable.model_name.human.downcase}" %> <%= f.submit "Add #{@account.accountable.model_name.human.downcase}" %>
<% end %> <% end %>
<% end %> <% end %>
</div>
<% end %> <% end %>