Jonathan Miller
79724b5bc9
Add a reusable multiselect dropdown component inspired by the issue
sidebar label picker, but decoupled from issue-specific logic.
Components:
- templates/shared/combolist.tmpl — generic template accepting Items,
Name, Title, SelectedValues parameters
- web_src/js/features/combo-multiselect.ts — lightweight JS init that
handles check/uncheck, search, and hidden input updates
- web_src/css/modules/combo-multiselect.css — check-mark visibility
and selected-items list styling
Usage in any template:
{{template "shared/combolist" dict
"Name" "channels"
"Title" "Update Channels"
"Items" .AvailableChannels
"SelectedValues" .SelectedChannelIDs
}}
Items must have .Value and .Label fields.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
28 lines
675 B
CSS
28 lines
675 B
CSS
/* Styles for the generic combo-multiselect component (shared/combolist.tmpl) */
|
|
|
|
.combo-multiselect > .ui.dropdown .item:not(.checked) .item-check-mark {
|
|
visibility: hidden;
|
|
}
|
|
|
|
.combo-multiselect > .ui.dropdown .item .item-check-mark {
|
|
margin-right: 0.5em;
|
|
}
|
|
|
|
.combo-multiselect > .combo-multiselect-list {
|
|
margin-top: 0.25em;
|
|
}
|
|
|
|
.combo-multiselect > .combo-multiselect-list > .item {
|
|
display: inline-block;
|
|
padding: 2px 6px;
|
|
margin: 2px;
|
|
border-radius: var(--border-radius);
|
|
background: var(--color-label-bg);
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.combo-multiselect > .combo-multiselect-list > .item.empty-list {
|
|
background: none;
|
|
color: var(--color-text-light-2);
|
|
}
|