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

Consolidate dropdown controllers (#600)

Browse source 
* Basic listbox and popover controllers with temporary example

* Separate select and menu controllers
This commit is contained in:
Zach Gollwitzer 2024-04-03 17:32:27 -04:00 • committed by GitHub
parent 0a0289846e
commit 4f0b2de4ef
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
14 changed files with 298 additions and 150 deletions
Download patch file Download diff file Expand all files Collapse all files

10
app/views/transactions/_category_dropdown.html.erb
View file

@ -1,14 +1,14 @@
<%# locals: (transaction:) %>
<div class="relative" data-controller="dropdown" data-dropdown-close-on-click-value="false">
<div class="flex cursor-pointer" data-action="click->dropdown#toggleMenu">
<div class="relative" data-controller="menu">
<button data-menu-target="button" class="flex">
<%= render partial: "shared/category_badge", locals: transaction.category.nil? ? {} : { name: transaction.category.name, color: transaction.category.color } %>
</div>
<div class="absolute z-10 hidden w-screen mt-2 max-w-min cursor-default" data-dropdown-target="menu">
</button>
<div data-menu-target="content" class="absolute z-10 hidden w-screen mt-2 max-w-min cursor-default">
<div class="w-64 text-sm font-semibold leading-6 text-gray-900 bg-white shadow-lg shrink rounded-xl ring-1 ring-gray-900/5">
<div class="flex flex-col" data-controller="list-filter">
<div class="grow p-1.5">
<div class="relative flex items-center bg-white border border-gray-200 rounded-lg">
<input placeholder="Search" class="placeholder:text-sm placeholder:text-gray-500 font-normal h-10 relative pl-10 w-full border-none rounded-lg" data-list-filter-target="input" data-action="list-filter#filter" />
<input placeholder="Search" type="search" class="placeholder:text-sm placeholder:text-gray-500 font-normal h-10 relative pl-10 w-full border-none rounded-lg" data-list-filter-target="input" data-action="list-filter#filter" />
<%= lucide_icon("search", class: "w-5 h-5 text-gray-500 ml-2 absolute inset-0 transform top-1/2 -translate-y-1/2") %>
</div>
</div>

6
app/views/transactions/_search_form.html.erb
View file

@ -6,12 +6,12 @@
<div class="grow">
<%= render partial: "transactions/search_form/search_filter", locals: { form: form } %>
</div>
<div data-controller="dropdown" data-dropdown-close-on-click-value="false" class="relative">
<button type="button" data-action="dropdown#toggleMenu" class="border border-gray-200 block h-full rounded-lg flex items-center gap-2 px-4">
<div data-controller="menu" class="relative">
<button data-menu-target="button" type="button" class="border border-gray-200 block h-full rounded-lg flex items-center gap-2 px-4">
<%= lucide_icon("list-filter", class: "w-5 h-5 text-gray-500") %>
<p class="text-sm font-medium text-gray-900">Filter</p>
</button>
<div class="hidden absolute z-10 top-12 right-0 border border-alpha-black-25 bg-white rounded-lg shadow-xs min-w-[450px]" data-dropdown-target="menu">
<div data-menu-target="content" class="absolute z-10 top-12 right-0 border border-alpha-black-25 bg-white rounded-lg shadow-xs min-w-[450px]">
<div data-controller="tabs" data-tabs-active-class="border-b-2 border-b-black text-gray-900" data-tabs-default-tab-value="txn-account-filter">
<div class="flex items-center px-3 text-sm font-medium text-gray-500 gap-4 border-b border-b-alpha-black-50">
<button class="py-2 border-b-2" type="button" data-id="txn-account-filter" data-tabs-target="btn" data-action="tabs#select">Account</button>