QT/sure
1
0
Fork 0
mirror of https://github.com/we-promise/sure.git synced 2026-04-19 12:04:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

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
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>