diff --git a/app/assets/stylesheets/filters.css b/app/assets/stylesheets/filters.css index 5999d2598..0ca86f4ee 100644 --- a/app/assets/stylesheets/filters.css +++ b/app/assets/stylesheets/filters.css @@ -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); } } diff --git a/app/javascript/controllers/hotkey_controller.js b/app/javascript/controllers/hotkey_controller.js index a6b8192c9..813c69ef6 100644 --- a/app/javascript/controllers/hotkey_controller.js +++ b/app/javascript/controllers/hotkey_controller.js @@ -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") } diff --git a/app/views/filters/settings/_terms.html.erb b/app/views/filters/settings/_terms.html.erb index 0d2f48b4e..dbc005b02 100644 --- a/app/views/filters/settings/_terms.html.erb +++ b/app/views/filters/settings/_terms.html.erb @@ -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| %>