bterkuile/fizzy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Focus filter input with a hotkey, adjust sizing

Browse Source
This commit is contained in:
Jason Zimdars
2025-10-13 16:24:57 -05:00
parent b49275508d
commit 679b4d2c94
3 changed files with 20 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/stylesheets/filters.css
+10 -3
View File
@@ -106,12 +106,19 @@
.filter__terms:is(.input) {
--input-background: var(--color-canvas);
--input-border-radius: 5em;
--input-padding: 0.5em 2.3em 0.5em 1.3em;
--input-padding: 0.5em 1.3em;
--input-width: 24ch;
--collapsed-filter-space: calc(var(--btn-size) + var(--inline-space-half) + 0.25em);
inline-size: 25ch;
min-inline-size: 25ch;
inline-size: var(--input-width);
min-inline-size: var(--input-width);
.filters:not(.filters--expanded, .filters--has-filters-set) & {
--input-padding: 0.5em 2.7em 0.5em 1.3em;
inline-size: calc(var(--input-width) + var(--collapsed-filter-space));
min-inline-size: calc(var(--input-width) + var(--collapsed-filter-space));
margin-inline-end: calc((var(--btn-size) + var(--inline-space-half) + 0.25em) * -1);
}
}
app/javascript/controllers/hotkey_controller.js
+7
View File
@@ -8,6 +8,13 @@ export default class extends Controller {
}
}
focus(event) {
if (this.#isClickable && !this.#shouldIgnore(event)) {
event.preventDefault()
this.element.focus()
}
}
#shouldIgnore(event) {
return event.defaultPrevented || event.target.closest("input, textarea, lexxy-editor")
}
app/views/filters/settings/_terms.html.erb
+3 -2
View File
@@ -1,8 +1,9 @@
<%= form.search_field "terms[]", placeholder: "Filter these cards…", class: "filter__terms input txt-x-small",
<%= form.search_field "terms[]", placeholder: "Filter these cards… [F]", class: "filter__terms input txt-x-small",
autofocus: false, autocomplete: :off, autocorrect: "off", data: {
"1p-ignore": "true",
controller: "hotkey",
filter_settings_target: "field",
action: "input->filter-settings#resetIfNoFiltering input->form#debouncedSubmit keydown.enter->form#submitToTopTarget" } %>
action: "keydown.f@document->hotkey#focus input->filter-settings#resetIfNoFiltering input->form#debouncedSubmit keydown.enter->form#submitToTopTarget" } %>
<% if filter.terms.present? %>
<% filter.terms.each do |term| %>