Style the select tag filter

This commit is contained in:
Gaetan Craig-Riou
2025-04-23 11:42:10 +10:00
parent 57af1de680
commit 19fdfbaccb
3 changed files with 30 additions and 1 deletions

View File

@@ -19,7 +19,10 @@
data: { "controller": "tom-select", 'tom-select-placeholder-value': t('.search_for_categories')}
.tags
= label_tag :tags_name_in, t('.tags.label')
= select_tag :tags_name_in, options_for_select(ActsAsTaggableOn::Tag.for_context("variant_tag").distinct.order(:name).pluck(:name), @tags), { class: "fullwidth", multiple: true }
- select_tag_options = { class: "fullwidth",
multiple: true ,
data: { controller: "tom-select", "tom-select-placeholder-value": t(".select_tag"), "tom-select-options-value": '{ "maxItems": 5 , "plugins": { "remove_button": {} , "no_active_items": {}, "checkbox_options": { "checkedClassNames": ["ts-checked"], "uncheckedClassNames": ["ts-unchecked"] } } }' } }
= select_tag :tags_name_in, options_for_select(ActsAsTaggableOn::Tag.for_context("variant_tag").distinct.order(:name).pluck(:name), @tags), select_tag_options
.submit
.search-button
= button_tag t(".search"), class: "secondary icon-search relaxed", name: nil

View File

@@ -70,6 +70,31 @@
}
}
// Style the select tags filter
.ts-wrapper {
&.multi {
&.has-items {
.ts-control {
[data-value] {
background-image: none;
background-color: $teal;
box-shadow: none;
border: none;
}
}
}
}
&.plugin-remove_button:not(.rtl) {
.item {
.remove {
border-left: 1px solid darken($teal, 5);
margin-left: 6px;
}
}
}
}
.plugin-dropdown_input {
.ts-dropdown {
// Cover up the control with the input

View File

@@ -969,6 +969,7 @@ en:
search_for_categories: Search for categories
select_category: Select category
all_categories: All categories
select_tag: Select tag
producers:
label: Producers
categories: