mirror of
https://github.com/we-promise/sure.git
synced 2026-09-03 22:01:16 +00:00
Victor Dusart
c8252ed15e
* feat(icons): add search field for icon selection * fix(icons): address review suggestions on the icon picker * fix(goals): prevent the icon picker popover from collapsing `updatePopupPosition` sets `bottom: 0px` when the popover would run past the fold, but never clears Tailwind's `top-full`. With both offsets set and `height: auto`, CSS derives the height from the offsets instead of the content, collapsing the popover to 26px. This PR is what makes it reachable: the search row (42px plus an 8px gap) and the grid going max-h-40 -> max-h-52 grow the popover ~98px, moving the overflow trigger point far enough to hit standalone /goals/new at 1280x800. `h-fit` makes the height non-auto, so the over-constraint resolves by ignoring `bottom`, which is why categories, already carrying it, was never affected.
33 lines
1.5 KiB
ERB
33 lines
1.5 KiB
ERB
<div data-controller="list-filter" class="flex flex-col gap-2">
|
|
<%# Enter in the search field would otherwise submit the surrounding
|
|
category/goal form. %>
|
|
<%= render DS::SearchInput.new(
|
|
variant: :standalone,
|
|
placeholder: placeholder,
|
|
data: {
|
|
list_filter_target: "input",
|
|
action: "input->list-filter#filter keydown.enter->list-filter#filter:prevent"
|
|
}
|
|
) %>
|
|
|
|
<div data-list-filter-target="list" class="flex flex-wrap gap-0.5 max-h-52 overflow-y-auto scrollbar">
|
|
<p class="hidden px-1 py-2 text-sm text-secondary" data-list-filter-target="emptyMessage">
|
|
<%= t("ds.icon_picker.no_matching_icons") %>
|
|
</p>
|
|
|
|
<%# The `label > input + div > svg` nesting is load-bearing: `color-icon-picker`
|
|
tints `input.nextElementSibling` and clones the svg out of the closest label. %>
|
|
<% icons.each do |icon_name| %>
|
|
<label class="filterable-item relative" data-filter-name="<%= icon_name %>">
|
|
<%= form.radio_button method, icon_name, class: "sr-only peer", data: {
|
|
action: "change->color-icon-picker#handleIconChange change->color-icon-picker#handleIconColorChange",
|
|
color_icon_picker_target: "icon"
|
|
} %>
|
|
<div class="text-secondary w-7 h-7 flex m-0.5 items-center justify-center rounded-full cursor-pointer hover:bg-container-inset-hover peer-checked:bg-container-inset border border-transparent">
|
|
<%= helpers.icon(icon_name, size: "sm", color: "current") %>
|
|
</div>
|
|
</label>
|
|
<% end %>
|
|
</div>
|
|
</div>
|