Skip to content

Commit 4761619

Browse files
ShpigfordpmarekerobzolkosJoshAntBrown
authored
New Add Account UI
* Add Lucide gem (maybe-finance#364) * feat: add cursor pointer in the log-in and create account pages, also make full with (it's cutted right now) the fileds in the settings edit page * feat: skip system test with an explanation instead of comment them * fix typo in the skip * feat: add lucide gem * Add reusable modal (maybe-finance#362) * Remove unused form * Add reusable modal * Prelim styling * Add instructions --------- Co-authored-by: Josh Pigford <josh@joshpigford.com> * Add keyboard navigation to new account selector (maybe-finance#375) * New account menu (maybe-finance#372) * New account menu * Styling tweaks --------- Signed-off-by: Josh Pigford <josh@joshpigford.com> * Entry method links (maybe-finance#376) * Initial add account form (maybe-finance#378) * Initial add account form * Unused --------- Signed-off-by: Josh Pigford <josh@joshpigford.com> Co-authored-by: Pedro López Mareque <Pedro.lopez.mareque@gmail.com> Co-authored-by: Rob Zolkos <rob@zolkos.com> Co-authored-by: Josh Brown <josh@joossh.com>
1 parent e79636f commit 4761619

18 files changed

Lines changed: 205 additions & 54 deletions

‎Gemfile‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ gem "bootsnap", require: false
1717
gem "importmap-rails"
1818
gem "propshaft"
1919
gem "tailwindcss-rails"
20+
gem "lucide-rails", github: "maybe-finance/lucide-rails"
2021

2122
# Hotwire
2223
gem "stimulus-rails"

‎Gemfile.lock‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,10 @@
1+
GIT
2+
remote: https://github.com/maybe-finance/lucide-rails.git
3+
revision: 6170b3a0eceb43a8af6552638e9526673c356d0d
4+
specs:
5+
lucide-rails (0.2.0)
6+
railties (>= 4.1.0)
7+
18
GIT
29
remote: https://github.com/rails/rails.git
310
revision: bab4aa7cb25112846e04cea907361a1de0f126ef
@@ -325,7 +332,7 @@ GEM
325332
rubyzip (>= 1.2.2, < 3.0)
326333
websocket (~> 1.0)
327334
smart_properties (1.17.0)
328-
sorbet-runtime (0.5.11226)
335+
sorbet-runtime (0.5.11234)
329336
stimulus-rails (1.3.3)
330337
railties (>= 6.0.0)
331338
stringio (3.1.0)
@@ -388,6 +395,7 @@ DEPENDENCIES
388395
inline_svg
389396
jbuilder
390397
letter_opener
398+
lucide-rails!
391399
money-rails (~> 1.12)
392400
pg (~> 1.1)
393401
propshaft

‎app/helpers/application_helper.rb‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,4 +10,10 @@ def header_title(page_title)
1010
def permitted_accountable_partial(name)
1111
name.underscore
1212
end
13+
14+
# Wrap view with <%= modal do %> ... <% end %> to have it open in a modal
15+
# Make sure to add data-turbo-frame="modal" to the link/button that opens the modal
16+
def modal(&block)
17+
render "shared/modal", &block
18+
end
1319
end

‎app/javascript/controllers/hotkey_controller.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { Controller } from "@hotwired/stimulus"
2+
import { install, uninstall } from "@github/hotkey"
3+
4+
// Connects to data-controller="hotkey"
5+
export default class extends Controller {
6+
connect() {
7+
install(this.element)
8+
}
9+
10+
disconnect() {
11+
uninstall(this.element)
12+
}
13+
}

‎app/javascript/controllers/list_keyboard_navigation_controller.js‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import { Controller } from "@hotwired/stimulus"
2+
3+
// Connects to data-controller="list-keyboard-navigation"
4+
export default class extends Controller {
5+
focusPrevious() {
6+
this.focusLinkTargetInDirection(-1)
7+
}
8+
9+
focusNext() {
10+
this.focusLinkTargetInDirection(1)
11+
}
12+
13+
focusLinkTargetInDirection(direction) {
14+
const element = this.getLinkTargetInDirection(direction)
15+
element?.focus()
16+
}
17+
18+
getLinkTargetInDirection(direction) {
19+
const indexOfLastFocus = this.indexOfLastFocus()
20+
return this.focusableLinks[indexOfLastFocus + direction]
21+
}
22+
23+
indexOfLastFocus(targets = this.focusableLinks) {
24+
const indexOfActiveElement = targets.indexOf(document.activeElement)
25+
26+
if (indexOfActiveElement !== -1) {
27+
return indexOfActiveElement
28+
} else {
29+
return targets.findIndex(target => target.getAttribute("tabindex") === "0")
30+
}
31+
}
32+
33+
get focusableLinks() {
34+
return Array.from(this.element.querySelectorAll("a[href]"))
35+
}
36+
}

‎app/javascript/controllers/modal_controller.js‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { Controller } from "@hotwired/stimulus"
2+
3+
// Connects to data-controller="modal"
4+
export default class extends Controller {
5+
connect() {
6+
this.element.showModal();
7+
}
8+
9+
// Hide the dialog when the user clicks outside of it
10+
click_outside(e) {
11+
if (e.target === this.element) {
12+
this.element.close();
13+
}
14+
}
15+
}

‎app/views/accounts/_account_type.html.erb‎

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,6 @@
1-
<div class="relative flex-col items-center px-5 py-4 space-x-3 text-center bg-white border border-gray-100 shadow-sm rounded-xl hover:border-gray-200">
2-
<%= link_to new_account_path(type: type.class.name.demodulize), class: "flex flex-col items-center justify-center w-full text-center focus:outline-none" do %>
3-
<span class="absolute inset-0" aria-hidden="true"></span>
4-
<span class="flex w-10 h-10 shrink-0 grow-0 items-center justify-center rounded-xl <%= bg_color %> mb-2">
5-
<%= inline_svg_tag(icon, class: "#{text_color} stroke-current") %>
6-
</span>
7-
<%= type.model_name.human %>
8-
<% end %>
9-
</div>
1+
<%= link_to new_account_path(step: 'method', type: type.class.name.demodulize), class: "flex items-center gap-4 w-full text-center focus:outline-none focus:bg-gray-50 border border-transparent focus:border focus:border-gray-200 block px-2 hover:bg-gray-50 rounded-lg p-2" do %>
2+
<span class="flex w-8 h-8 shrink-0 grow-0 items-center justify-center rounded-lg <%= bg_color %> shadow-[inset_0_0_0_1px_rgba(0,0,0,0.02)]">
3+
<%= lucide_icon(icon, class: "#{text_color} w-5 h-5") %>
4+
</span>
5+
<%= type.model_name.human %>
6+
<% end %>

‎app/views/accounts/_entry_method.html.erb‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<% if local_assigns[:disabled] && disabled %>
2+
<span class="flex items-center w-full gap-4 p-2 px-2 text-center border border-transparent rounded-lg cursor-not-allowed focus:outline-none focus:bg-gray-50 focus:border focus:border-gray-200 hover:bg-gray-50">
3+
<span class="flex w-8 h-8 shrink-0 grow-0 items-center justify-center rounded-lg bg-[#141414]/5 shadow-[inset_0_0_0_1px_rgba(0,0,0,0.02)]">
4+
<%= lucide_icon(icon, class: "text-gray-500 w-5 h-5") %>
5+
</span>
6+
<%= text %>
7+
</span>
8+
<% else %>
9+
<%= link_to new_account_path(type: type.class.name.demodulize), class: "flex items-center gap-4 w-full text-center focus:outline-none focus:bg-gray-50 border border-transparent focus:border focus:border-gray-200 px-2 hover:bg-gray-50 rounded-lg p-2" do %>
10+
<span class="flex w-8 h-8 shrink-0 grow-0 items-center justify-center rounded-lg bg-[#141414]/5 shadow-[inset_0_0_0_1px_rgba(0,0,0,0.02)]">
11+
<%= lucide_icon(icon, class: "text-gray-500 w-5 h-5") %>
12+
</span>
13+
<%= text %>
14+
<% end %>
15+
<% end %>

‎app/views/accounts/account/_depository.html.erb‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div class="relative p-4 border border-gray-100 bg-offwhite rounded-xl focus-within:bg-white focus-within:shadow focus-within:opacity-100">
2-
<label for="account_name" class="block text-sm font-medium opacity-50 focus-within:opacity-100">Type</label>
3-
<%= f.select :subtype, options_for_select([["Checking", "checking"], ["Savings", "savings"]], selected: ""), {}, class: "block w-full p-0 mt-1 bg-transparent border-none focus:outline-none focus:ring-0" %>
4-
</div>
1+
<div class="relative p-3 border border-[#141414]/8 bg-white rounded-xl focus-within:bg-white focus-within:shadow-none focus-within:border-gray-900 focus-within:ring-4 focus-within:ring-gray-100 focus-within:opacity-100 shadow-sm">
2+
<label for="account_name" class="block text-sm font-medium opacity-50 focus-within:opacity-100">Type</label>
3+
<%= f.select :subtype, options_for_select([["Checking", "checking"], ["Savings", "savings"]], selected: ""), {}, class: "block w-full p-0 mt-1 bg-transparent border-none focus:outline-none focus:ring-0" %>
4+
</div>

‎app/views/accounts/account/_investment.html.erb‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div class="relative p-4 border border-gray-100 bg-offwhite rounded-xl focus-within:bg-white focus-within:shadow focus-within:opacity-100">
1+
<div class="relative p-3 border border-[#141414]/8 bg-white rounded-xl focus-within:bg-white focus-within:shadow-none focus-within:border-gray-900 focus-within:ring-4 focus-within:ring-gray-100 focus-within:opacity-100 shadow-sm">
22
<label for="account_name" class="block text-sm font-medium opacity-50 focus-within:opacity-100">Type</label>
33
<%= f.select :subtype, options_for_select(Account::Investment::SUBTYPES, selected: ""), {}, class: "block w-full p-0 mt-1 bg-transparent border-none focus:outline-none focus:ring-0" %>
44
</div>

0 commit comments

Comments
 (0)